0
Let’s Build              ACustom Theme   WordCamp Orange County 2012              #wcoc         @theandystratton
Plan Your Work.Work Your Plan.
Stay Organized.     What needs to be dynamic?Organize assets: HTML/CSS/JS/images.
Static HTML/CSS.          Highly recommended.Great reference point for possible browser         bugs you may find later. K...
Our Home Page...
Our Interior Page...
Our Blog Page...
Planning our work.
Link to home page
Link to home page                    WP Nav Menu
Link to home page                             WP Nav Menu    Custom Post Type (slide)Includes title and featured image.
Home Page Title/Content
Home Page Title/Content                   Custom field for                 anchor text and URL
Widgetized Sidebar for Footer
the_title()
the_title()the_content()
the_title()           Custom call to          wp_list_pages()            (followed by         widgetized sidebar)the_conte...
the_date()       andcomments_number()
the_date()                       and                comments_number()Featured Image, the_title()    and the_excerpt()
the_date()                       and                comments_number()                             WP Nav Menu             ...
BREAK DOWN   your design into  MANAGEABLEWordPress components.
Let’s dive into some<code/>
Let’s Review.
Stay Organized. Plan your work, work your plan.Organization & planning are key to    effective & efficient coding.
Isolate HTML/CSS.        Fastest starting point.  Focus on user experience, not dev              experience.Best way to tr...
Chunk Things.  Dissect markup into manageable pieces.       Header, Footer, Sidebar(s), etc.  Most can be done with copy/p...
Doing It Right.       Are you doing it wrong?  Enqueue scripts/styles. Use hooks.Avoid hard-coding anything that can be  d...
Optimized &     Secure.       Escape your output.         Scrub your input.Use core WordPress API’s/functions
Steal Borrow.Refer to TwentyTen/TwentyEleven        View other themes. Re-use your code & refine when           appropriate.
Context Is Queen.    What functionality do they need?    Some pieces may not need to beimplemented (e.g. some sites do not...
Maintain       Experience.Design for the user, code for the admin.Maintain the WordPress admin UI when adding options/sett...
Thanks ;]
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Let's Build a Custom Theme
Upcoming SlideShare
Loading in...5
×

Let's Build a Custom Theme

948

Published on

My presentation from WordCamp Orange County 2012. Will post resources on my website eventually, need to re-code a design due to license issues I did not think about upon writing the presentation, d'oh!

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
948
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • box icon with stuff in it?\n
  • HTML/CSS icons arrow to WP\n
  • Chunk from Goonies\n
  • HTML/CSS icons arrow to WP\n
  • HTML/CSS icons arrow to WP\n
  • HTML/CSS icons arrow to WP\n
  • HTML/CSS icons arrow to WP\n
  • HTML/CSS icons arrow to WP\n
  • \n
  • Transcript of "Let's Build a Custom Theme"

    1. 1. Let’s Build ACustom Theme WordCamp Orange County 2012 #wcoc @theandystratton
    2. 2. Plan Your Work.Work Your Plan.
    3. 3. Stay Organized. What needs to be dynamic?Organize assets: HTML/CSS/JS/images.
    4. 4. Static HTML/CSS. Highly recommended.Great reference point for possible browser bugs you may find later. Keep in a separate folder, use as starting point.
    5. 5. Our Home Page...
    6. 6. Our Interior Page...
    7. 7. Our Blog Page...
    8. 8. Planning our work.
    9. 9. Link to home page
    10. 10. Link to home page WP Nav Menu
    11. 11. Link to home page WP Nav Menu Custom Post Type (slide)Includes title and featured image.
    12. 12. Home Page Title/Content
    13. 13. Home Page Title/Content Custom field for anchor text and URL
    14. 14. Widgetized Sidebar for Footer
    15. 15. the_title()
    16. 16. the_title()the_content()
    17. 17. the_title() Custom call to wp_list_pages() (followed by widgetized sidebar)the_content()
    18. 18. the_date() andcomments_number()
    19. 19. the_date() and comments_number()Featured Image, the_title() and the_excerpt()
    20. 20. the_date() and comments_number() WP Nav Menu & Widgetized SidebarFeatured Image, the_title() and the_excerpt()
    21. 21. BREAK DOWN your design into MANAGEABLEWordPress components.
    22. 22. Let’s dive into some<code/>
    23. 23. Let’s Review.
    24. 24. Stay Organized. Plan your work, work your plan.Organization & planning are key to effective & efficient coding.
    25. 25. Isolate HTML/CSS. Fastest starting point. Focus on user experience, not dev experience.Best way to troubleshoot browser bugs later.
    26. 26. Chunk Things. Dissect markup into manageable pieces. Header, Footer, Sidebar(s), etc. Most can be done with copy/paste andreplacing static functions with WP functions.
    27. 27. Doing It Right. Are you doing it wrong? Enqueue scripts/styles. Use hooks.Avoid hard-coding anything that can be dynamic, hooked or a widget when possible.
    28. 28. Optimized & Secure. Escape your output. Scrub your input.Use core WordPress API’s/functions
    29. 29. Steal Borrow.Refer to TwentyTen/TwentyEleven View other themes. Re-use your code & refine when appropriate.
    30. 30. Context Is Queen. What functionality do they need? Some pieces may not need to beimplemented (e.g. some sites do not have blogs)
    31. 31. Maintain Experience.Design for the user, code for the admin.Maintain the WordPress admin UI when adding options/settings screens, etc.
    32. 32. Thanks ;]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×