Best Practices in Theme Development - WordCamp Orlando 2012

1. Best Practices in Client
Theme Development
By James Tryon
Tuesday, 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 • PBS
Tuesday, December 4, 12

4. Things We have Made
with WordPress
• e-Commerce • Landing pages
• Job boards • Holiday cards
• School directory • CMS/Brochure
• Networks • Blogs
Tuesday, 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 Hardest
Tuesday, 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_Hierarchy
Tuesday, 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_Tags
Tuesday, December 4, 12

13. Conditional Statements
http://codex.wordpress.org/Conditional_Tags
Tuesday, 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_Review
Tuesday, 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_Thumbnails
Tuesday, December 4, 12

22. Post Thumbnail
Featured Image
Tuesday, 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_style
Tuesday, December 4, 12

26. Theme Options
• Logos
• Color Scheme
• Link Color
• Fonts
• Default Layouts
Tuesday, 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/d5flsay
Tuesday, 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-shortcodes
Tuesday, December 4, 12

31. Plugins: Custom Post Type
Tuesday, 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_box
Tuesday, December 4, 12

35. Widgets
• http://codex.wordpress.org/Widgets_API
• http://justintadlock.com
• http://tinyurl.com/p6sk7e
Tuesday, 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 excerpt
Tuesday, 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 code
Tuesday, 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 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

43. 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

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 Dev's
Tuesday, 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 level
Tuesday, December 4, 12

55. Thank You
• James Tryon
• James@EasilyAmusedInc.com
• http://EasilyAmusedInc.com
• @easilyamused
Tuesday, December 4, 12