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

Like this? Share it with your network

Share

Let's Build a Custom Theme

on

  • 1,116 views

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!

Statistics

Views

Total Views
1,116
Views on SlideShare
1,116
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation 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 ;]