Best Practices in Client Theme Development
By James Tryon
Tuesday, December 4, 12
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
Some of the Brand I have Worked With
• Sprint
• Peabody
• Nemours
• Proactive
• A lot of colleges
• PBS
Tuesday, December 4, 12
Things We have Made with WordPress
• e-Commerce
• Job boards
• School directory
• Networks
• Landing pages
• Holiday cards
• CMS/Brochure
• Blogs
Tuesday, December 4, 12
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
How I build out a site
1. Stand up my Dev instance
2. Remove stock data
3. Turn on .htaccess/permalinks
4. Publish all pages from Site Map
5. Build out all Main Nav
6. Add sidebars as needed
7. basic css for placement
8. Create Custom Post types
9. Add plugins as needed
10. Theme Simplest to Hardest
Tuesday, December 4, 12
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_ReviewReview for list of required files, Hooks and Navigation.
Tuesday, December 4, 12
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
Template Hierarchy
• http://codex.wordpress.org/Template_Hierarchy
Tuesday, December 4, 12
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
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
Conditional Statements
http://codex.wordpress.org/Conditional_Tags
* could have just used if(is_singular()) { ... }
Tuesday, December 4, 12
http://codex.wordpress.org/Conditional_Tags
Conditional Statements
Tuesday, December 4, 12
Theme: Fuctions.php
• Custom Background
• Custom Headers
• Navigation Menus
• Post Thembnails
• Post Formats
• wp_enqueue your css and javascript
http://codex.wordpress.org/Theme_Review
Tuesday, December 4, 12
Custom Background
• http://codex.wordpress.org/Custom_Backgrounds
• add_theme_support( 'custom-background' );
Tuesday, December 4, 12
Tuesday, December 4, 12
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
Tuesday, December 4, 12
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
Tuesday, December 4, 12
Post Thumbnails
• Use Featured ImagesDid you know they can have different sizes!?!
• http://codex.wordpress.org/Post_Thumbnails
Tuesday, December 4, 12
Post ThumbnailFeatured Image
Tuesday, December 4, 12
Post Formats
• http://codex.wordpress.org/Post_Formats
• add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
Tuesday, December 4, 12
Fuctions: wp_enqueue
• Speeds up your site.
• Help prevent conflicts.
• use conditional statement to load javascript or css only on the pages that need them.
loading your css and javascript in your functions not in the header or footer
Tuesday, December 4, 12
• http://codex.wordpress.org/Function_Reference/wp_enqueue_script
• http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Fuctions: wp_enqueue
Tuesday, December 4, 12
Theme Options
• Logos
• Color Scheme
• Link Color
• Fonts
• Default Layouts
Tuesday, December 4, 12
Tuesday, December 4, 12
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/d5flsay
Tuesday, December 4, 12
Tuesday, December 4, 12
Plugins• All Custom Post Types
• Taxonomies
• Shortcodes
• Custom Write Panels
• Widgets
Naming Pluginstheme-name-custom-post-typestheme-name-shortcodes
Tuesday, December 4, 12
Plugins: Custom Post Type
Tuesday, December 4, 12
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
Tuesday, December 4, 12
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_box
Tuesday, December 4, 12
Widgets
• http://codex.wordpress.org/Widgets_API
• http://justintadlock.com
• http://tinyurl.com/p6sk7e
Tuesday, December 4, 12
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 excerpt
Tuesday, December 4, 12
Coding Standards
• http://make.wordpress.org/core/handbook/coding-standards/
Tuesday, December 4, 12
Coding Standards: CSS
http://make.wordpress.org/core/handbook/coding-standards/css/
“Group like properties together, especially if you have a lot of them.”
– Nacin
Tuesday, December 4, 12
• clean, easy to read and quick to edit
• 0 not 0px
• Media Queries at the bottom
• Table of context
• Commit your code
Coding Standards: CSS
Tuesday, December 4, 12
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
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
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 plugin's data in WordPress' Post Meta (Custom Fields).
• If you need to make a new table…http://codex.wordpress.org/Creating_Tables_with_Plugins
Tuesday, December 4, 12
Coding Standards: Security
• Keep Files up today.
• Never uses Admin
• http://codex.wordpress.org/Hardening_WordPress
• http://codex.wordpress.org/Security_FAQ
Tuesday, December 4, 12
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
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
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
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
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 POSwith payment plans.
• We have sold vertical goods andMonthly memberships.
Tuesday, December 4, 12
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
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
Pro Tip:
Tuesday, December 4, 12
Useful Services
• Screenerhttp://www.screenr.com/user/JamesTryon
• Wp101Videos of all the basics
• browserstack http://browserstack.com/
Tuesday, December 4, 12
Learning WordPress
• The Codex
• http://make.wordpress.org/core/handbook/
• WordPress.tv
• Google ;c )
• Stackoverflow
• The forums*
• http://make.wordpress.org/core/handbook/following-the-development-process/
• IRC
• Mailing list
• http://wordpress.org/news/ - min blog
• Follow the Core Dev's
Tuesday, December 4, 12
• 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 level
Learning WordPress
Tuesday, December 4, 12
Thank You
• James Tryon
• http://EasilyAmusedInc.com
• @easilyamused
Tuesday, December 4, 12