• Like
Let's Build a Custom Theme
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Let's Build a Custom Theme

  • 870 views
Published

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, …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
870
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. Let’s Build ACustom Theme WordCamp Orange County 2012 #wcoc @theandystratton
  • 2. Plan Your Work.Work Your Plan.
  • 3. Stay Organized. What needs to be dynamic?Organize assets: HTML/CSS/JS/images.
  • 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. Our Home Page...
  • 6. Our Interior Page...
  • 7. Our Blog Page...
  • 8. Planning our work.
  • 9. Link to home page
  • 10. Link to home page WP Nav Menu
  • 11. Link to home page WP Nav Menu Custom Post Type (slide)Includes title and featured image.
  • 12. Home Page Title/Content
  • 13. Home Page Title/Content Custom field for anchor text and URL
  • 14. Widgetized Sidebar for Footer
  • 15. the_title()
  • 16. the_title()the_content()
  • 17. the_title() Custom call to wp_list_pages() (followed by widgetized sidebar)the_content()
  • 18. the_date() andcomments_number()
  • 19. the_date() and comments_number()Featured Image, the_title() and the_excerpt()
  • 20. the_date() and comments_number() WP Nav Menu & Widgetized SidebarFeatured Image, the_title() and the_excerpt()
  • 21. BREAK DOWN your design into MANAGEABLEWordPress components.
  • 22. Let’s dive into some<code/>
  • 23. Let’s Review.
  • 24. Stay Organized. Plan your work, work your plan.Organization & planning are key to effective & efficient coding.
  • 25. Isolate HTML/CSS. Fastest starting point. Focus on user experience, not dev experience.Best way to troubleshoot browser bugs later.
  • 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. 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. Optimized & Secure. Escape your output. Scrub your input.Use core WordPress API’s/functions
  • 29. Steal Borrow.Refer to TwentyTen/TwentyEleven View other themes. Re-use your code & refine when appropriate.
  • 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. Maintain Experience.Design for the user, code for the admin.Maintain the WordPress admin UI when adding options/settings screens, etc.
  • 32. Thanks ;]