Best Practices in Theme Development - WordCamp Orlando 2012

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

• James@EasilyAmusedInc.com

• http://EasilyAmusedInc.com

• @easilyamused

Tuesday, December 4, 12