Let's Build a Custom Theme

1,181 views
1,094 views

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,181
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
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
  • 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 ;]

    ×