Best Practices in Theme Development - WordCamp Orlando 2012
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Best Practices in Theme Development - WordCamp Orlando 2012

  • 15,719 views
Uploaded on

Best Practices in Theme Development - WordCamp Orlando 2012

Best Practices in Theme Development - WordCamp Orlando 2012

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
15,719
On Slideshare
15,648
From Embeds
71
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
3

Embeds 71

http://easilyamusedinc.com 69
http://eai.wpengine.com 2

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

Transcript

  • 1. Best Practices in Client Theme Development By James TryonTuesday, December 4, 12
  • 2. Who is James Tryon • Creative Director of Easily Amused, Inc. • We specialize in Branding & Custom WordPress Design/Development. • Personally been in the biz since 99 • Overflow work from Other Studios • Work as Other Companies full Creative/ Development Team.Tuesday, December 4, 12
  • 3. Some of the Brand I have Worked With • Sprint • Proactive • Peabody • A lot of colleges • Nemours • PBSTuesday, December 4, 12
  • 4. Things We have Made with WordPress • e-Commerce • Landing pages • Job boards • Holiday cards • School directory • CMS/Brochure • Networks • BlogsTuesday, December 4, 12
  • 5. Overall Goals • Your clients should be able to edit all content on their site. • Think about your clients work flow - make it simple. • Always Think about Future Growth. • Your client should not need you when your done. • Things should not brake when Design Changes.Tuesday, December 4, 12
  • 6. How I build out a site 1. Stand up my Dev instance 6. Add sidebars as needed 2. Remove stock data 7. basic css for placement 3. Turn on .htaccess/permalinks 8. Create Custom Post types 4. Publish all pages from Site Map 9. Add plugins as needed 5. Build out all Main Nav 10. Theme Simplest to HardestTuesday, December 4, 12
  • 7. Theme’s • Know when to make something a theme setting, Widgets or Part of the Page template/theme layer. • If its a Main feature, could be a widget, shortcode or Theme Template? And could it be reused on the site or Other? • Widgetable area can be anywhere, not just the Sidebars. • http://codex.wordpress.org/Theme_Review Review for list of required files, Hooks and Navigation.Tuesday, December 4, 12
  • 8. Themes: Type of Themes • Framework • Can be ready in min, themes mostly done. • Child Theme • For overriding small changes or Just CSS • Starter Them - http://underscores.me • for fully custom client work, this is the best way to go.Tuesday, December 4, 12
  • 9. Template Hierarchy • http://codex.wordpress.org/Template_HierarchyTuesday, December 4, 12
  • 10. Themes: What Should Be Where If it adds function to the site, then it should be a plugin. If its aesthetics related, it should be in the Themes Options. If there is unique page level list, loops or nav’s create shortcodes. If its a new feature for a sidebar, make a widget. Shortcodes can be moved around and should always work. This allow for clean upgrades and quick redesigns. This also keeps the Theme layer much cleaner and simpler.Tuesday, December 4, 12
  • 11. If you can reuse it - Move it. Best Case - move your code to a plugin. Make a content-type.php file for the custom loop <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( content, type ); ?> <?php endwhile; // end of the loop. ?>Tuesday, December 4, 12
  • 12. Conditional Statements * could have just used if(is_singular()) { ... } http://codex.wordpress.org/Conditional_TagsTuesday, December 4, 12
  • 13. Conditional Statements http://codex.wordpress.org/Conditional_TagsTuesday, December 4, 12
  • 14. Theme: Fuctions.php • Custom Background • Custom Headers • Navigation Menus • Post Thembnails • Post Formats • wp_enqueue your css and javascript http://codex.wordpress.org/Theme_ReviewTuesday, December 4, 12
  • 15. Custom Background • http://codex.wordpress.org/Custom_Backgrounds • add_theme_support( custom-background );Tuesday, December 4, 12
  • 16. Tuesday, December 4, 12
  • 17. Custom Headers • http://codex.wordpress.org/Custom_Headers • add_theme_support( custom-header ); <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />Tuesday, December 4, 12
  • 18. Tuesday, December 4, 12
  • 19. Navigation Menus • http://codex.wordpress.org/Navigation_Menus function register_my_menus() { register_nav_menus( array( header-menu => __( Header Menu ), footer-menu => __( Footer Menu ) ) ); } add_action( init, register_my_menus );Tuesday, December 4, 12
  • 20. Tuesday, December 4, 12
  • 21. Post Thumbnails • Use Featured Images Did you know they can have different sizes!?! • http://codex.wordpress.org/Post_ThumbnailsTuesday, December 4, 12
  • 22. Post ThumbnailFeatured ImageTuesday, December 4, 12
  • 23. Post Formats • http://codex.wordpress.org/Post_Formats • add_theme_support( post-formats, array( aside, gallery ) );Tuesday, December 4, 12
  • 24. Fuctions: wp_enqueue loading your css and javascript in your functions not in the header or footer • Speeds up your site. • Help prevent conflicts. • use conditional statement to load javascript or css only on the pages that need them.Tuesday, December 4, 12
  • 25. Fuctions: wp_enqueue • http://codex.wordpress.org/Function_Reference/ wp_enqueue_script • http://codex.wordpress.org/Function_Reference/ wp_enqueue_styleTuesday, December 4, 12
  • 26. Theme Options • Logos • Color Scheme • Link Color • Fonts • Default LayoutsTuesday, December 4, 12
  • 27. Tuesday, December 4, 12
  • 28. Theme customizer/ Live Previewer • Tryout new theme options with out effecting your live site. • It uses post message method • http://ottopress.com • http://tinyurl.com/6wkqhbm • http://tinyurl.com/d5flsayTuesday, December 4, 12
  • 29. Tuesday, December 4, 12
  • 30. Plugins • All Custom Post Types • Taxonomies • Shortcodes • Custom Write Panels • Widgets Naming Plugins theme-name-custom-post-types theme-name-shortcodesTuesday, December 4, 12
  • 31. Plugins: Custom Post TypeTuesday, December 4, 12
  • 32. Plugins: Shortcodes • Create shortcodes to handle simple functions.(like small loops) • If the theme is turned off, all the custom loops would still work. • Allows for easy reuse for the client • Shortcodes empower users to take control of there site. • Always make a cheat sheet Example [loop tag="anything" show="3"] <?php echo do_shortcode("[shortcode]"); ?>Tuesday, December 4, 12
  • 33. Tuesday, December 4, 12
  • 34. Plugins: Custom Write Panels Only add custom Write panel, it to the post types that need it. Even if that means making a new custom post type. http://codex.wordpress.org/ Function_Reference/add_meta_boxTuesday, December 4, 12
  • 35. Widgets • http://codex.wordpress.org/Widgets_API • http://justintadlock.com • http://tinyurl.com/p6sk7eTuesday, December 4, 12
  • 36. Plugin & Widgets: White labeled • Create generic plugins for easy reuse • Not my business name. • Clients Client • Resale Example: DFYPress-blog-widget simple post widget that shows title, thumb and the excerptTuesday, December 4, 12
  • 37. Coding Standards • http://make.wordpress.org/core/handbook/ coding-standards/Tuesday, December 4, 12
  • 38. Coding Standards: CSS “Group like properties together, especially if you have a lot of them.” – Nacin http://make.wordpress.org/core/handbook/coding-standards/css/Tuesday, December 4, 12
  • 39. Coding Standards: CSS • clean, easy to read and quick to edit • 0 not 0px • Media Queries at the bottom • Table of context • Commit your codeTuesday, December 4, 12
  • 40. Media Queries • Media queries allow us to gracefully degrade the DOM for different screen sizes. • Test above and below the break-point. • keep media queries grouped by media at the bottom of the stylesheet. • Rule sets for media queries should be indented one level in. Example: @media all and (max-width: 699px) and (min-width: 520px) {          /* Your selectors */  .class {} }Tuesday, December 4, 12
  • 41. Coding Standards: PHP • Important: You should omit the closing PHP tag at the end of a file. If you do not, make sure you remove trailing whitespace. • Use tabs and not spaces. • http://make.wordpress.org/core/handbook/ coding-standards/Tuesday, December 4, 12
  • 42. Coding Standards: Plugins • Avoid touching the database directly. • Avoid adding Tables • Ask your self, “Is there a defined function that can get the data already?” • Database abstraction (using functions instead of queries) • Post Meta is the preferred method; use it when possible/practical. • Try storing your plugins data in WordPress Post Meta (Custom Fields). • If you need to make a new table… http://codex.wordpress.org/Creating_Tables_with_PluginsTuesday, December 4, 12
  • 43. Coding Standards: Security • Keep Files up today. • Never uses Admin • http://codex.wordpress.org/ Hardening_WordPress • http://codex.wordpress.org/Security_FAQTuesday, December 4, 12
  • 44. Code Quality • Turn on wp-config.php: define(WP_DEBUG, true); • Themes must not generate any errors. - js, html, php any • Themes are recommended to utilize current recognized version(s) of (X)HTML and CSS, • Test: W3C XHTML Validator + W3C CSS Validator • Test: W3C XHTML+CSS Validator (Unicorn)Tuesday, December 4, 12
  • 45. Other Plugins: Premium • Gravity Forms • MapPress • UberMenu • sliders(one you like) • Event Calendar Pro • e-Commerce(the one you hate the lest)Tuesday, December 4, 12
  • 46. Other Plugins: Free • WordPress Database Backup - http://wordpress.org/extend/plugins/wp-db-backup/ • Column Shortcodes - http://wordpress.org/extend/plugins/column-shortcodes/ • Google Analytics for WordPress - http://wordpress.org/extend/plugins/google- analytics-for-wordpress/ • jetpack - ;c ( - http://wordpress.org/extend/plugins/jetpack/ • Post Types Order - http://wordpress.org/extend/plugins/post-types-order/ • User Role Editor - http://wordpress.org/extend/plugins/user-role-editor/ All plugins listed above can be found on my Favorite plugins list on my WordPress profile. http://profiles.wordpress.org/easilyamused/Tuesday, December 4, 12
  • 47. Other Plugins: Free • Taxonomy Widget - http://wordpress.org/extend/plugins/taxonomy-widget/screenshots/ • Taxonomy Images - http://wordpress.org/extend/plugins/taxonomy-images/ • Wordpress Page Widgets - http://wordpress.org/extend/plugins/wp-page-widget/ • Widget Logic - http://wordpress.org/extend/plugins/widget-logic/ • WordPress SEO by Yoast - http://wordpress.org/extend/plugins/wordpress-seo/ • Contact Form 7 - http://wordpress.org/extend/plugins/contact-form-7/ • WP-PageNavi - http://wordpress.org/extend/plugins/wp-pagenavi/ All plugins listed above can be found on my Favorite plugins list on my WordPress profile. http://profiles.wordpress.org/easilyamused/Tuesday, December 4, 12
  • 48. Pro Tip: Learn an e-commerce system • This will kick your @$$ the first couple of times • We have sites that are selling 1 thing to 70,000 things • We have sites that act as POS with payment plans. • We have sold vertical goods and Monthly memberships.Tuesday, December 4, 12
  • 49. Pro Tip: Learn your host and Stick with it. • Learn Command Line • All ways make Backups • Make sure you get paid to mess around with cheap nasty hosting.Tuesday, December 4, 12
  • 50. Pro Tip: SQL to big for a Find and Replace? • When moving domains, I usually do a quick find and replace on the SQL dump. • If the files to big, then I use a little perl script perl -p -i.backup -e s{find.me}{replace.me}g thefile.sql • http://jamestryon.me/2012/06/28/20mb-sql-file- thats-nothin/Tuesday, December 4, 12
  • 51. Pro Tip:Tuesday, December 4, 12
  • 52. Useful Services • Screener http://www.screenr.com/user/JamesTryon • Wp101 Videos of all the basics • browserstack http://browserstack.com/Tuesday, December 4, 12
  • 53. Learning WordPress • The Codex • http://make.wordpress.org/ core/handbook/following-the- • http://make.wordpress.org/ development-process/ core/handbook/ • IRC • WordPress.tv • Mailing list • Google ;c ) • http://wordpress.org/news/ - • Stackoverflow min blog • The forums* • Follow the Core DevsTuesday, December 4, 12
  • 54. Learning WordPress • http://make.wordpress.org/core/handbook/ • http://make.wordpress.org/plugins/ - blogs • http://make.wordpress.org/themes/ - blogs • http://codex.wordpress.org/WordPress_API’s - codex • http://codex.wordpress.org/Site_Design_and_Layout good starting point to get up to speed on how wordpress handles everything in the theme levelTuesday, December 4, 12
  • 55. Thank You • James Tryon • James@EasilyAmusedInc.com • http://EasilyAmusedInc.com • @easilyamusedTuesday, December 4, 12