WordPress Theming Best Practices for Client-Centric Web Development

Brian Krogsgard - WordSesh 2!!

Post Status | poststat.us |@post_status

Structuring your WordPress theme

Assets

• CSS / JS / Images / fonts

• Sprites, minified files

Template Hierarchy

• http://codex.wordpress.org/Template_Hierarchy

• http://wphierarchy.com/

Template Parts• Naming conventions and organization.

• Prefix page templates “page-about-template.php” or nest them in a “page-templates” folder.

• For partial templates, use logical and consistent conventions.

• Lean toward smaller templates.

• Are you repeating yourself? Make it a template part.

• Give good and thorough comment blocks at the top of templates, even partial ones

Hooks vs templates

• Or both?

Code Syntax

Follow the guides

• Seriously, take the time to properly format your code.

• http://codex.wordpress.org/WordPress_Coding_Standards

Entering and exiting PHP

• In templates versus functions / operational code

• When in PHP, stay in PHP

Curly brackets versus alternative syntax for control structures

• http://php.net/manual/en/control-structures.alternative-syntax.php

• http://pippinsplugins.com/please-do-not-use-curly-brackets-in-template-files/

• http://tommcfarlin.com/commenting-code-blocks/

Function naming norms

• get_the_{something} vs the_{something}

Alignment

• Tabs for nesting, spaces for alignment.

Code

Hook Order

• Core Load http://www.rarst.net/script/wordpress-core-load/

• Wowza hooks http://codex.wordpress.org/Plugin_API/Action_Reference

• Special shoutout to template_redirect (conditionals)

Action and filters

• Make your parent themes filterable!

• Intro: http://pippinsplugins.com/a-quick-introduction-to-using-filters/

• You can do it: http://wp.tutsplus.com/tutorials/plugins/writing-extensible-plugins-with-actions-and-filters/

Properly enqueue scripts and styles

• http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes/

• http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins/

• Register, then enqueue

• Only enqueue when you need to

• Conditionals in the enqueue function, or right in the function or template

• Load in the footer most of the time

Theme setup function

• http://justintadlock.com/archives/2010/12/30/wordpress-theme-function-files

• Because priorities, that’s why.

Loading files

• http://justintadlock.com/archives/2010/11/17/how-to-load-files-within-wordpress-themes

WordPress URLs

• The URL tells WordPress what to look up. Always remember this.

• http://wp.tutsplus.com/tutorials/creative-coding/the-rewrite-api-the-basics/

Loops• The default WordPress loop

• WP_Query: http://codex.wordpress.org/Class_Reference/WP_Query

• Best. Presentation. Ever. http://wordpress.tv/2013/03/15/andrew-nacin-wp_query-wordpress-in-depth/

• wp_reset_postdata() vs wp_reset_query() http://www.poststat.us/properly-reset-wordpress-query/

• update_post_meta_cache & update_post_term_cache

• get_posts

• pre_get_posts hook http://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts

• If you use query_posts(), go home.

Post Meta• get_post_custom() versus lots of get_post_meta().

• Check for existence before output to prevent empty markup.

• Classes / Tools.

• Advanced Custom Fields

• Pods

• CMB

• Core??? http://make.wordpress.org/core/tag/metamorphosis/

Design

Responsive Design• Either do it right, or don’t do it.

• <meta name=“viewport” content=“width=device-width, initial-scale=1”>

• Separate stylesheet? It depends.

• If not mobile first or using a PreProcessor, and building a parent them, then yes.

• Consider navigation http://www.poststat.us/wordpress-responsive-navigation-options/

• Consider what *could* go into different areas

• Breakpoints are arbitrary.

* { box-sizing: Border-box }

• FTW

• http://www.paulirish.com/2012/box-sizing-border-box-ftw/

SVG vs Icon Fonts vs Fallback PNGs.

• Depends on the browser support required

• http://caniuse.com/

General Principles

Let plugins take care of what they are good at

• Breadcrumbs? Pagination? Depends on the project.

• SEO? Let it go.

• Analyze each situation.

Functions.php is not a landfill

• Have either a site-specific plugin or reusable functionality plugins. Or both.

Stay DRY

• Don’t Repeat Yourself

Use things WordPress gives you

• Customizer

• Settings API

• Etc.

Test yourself!• Always have wp_debug on.

• WP Test http://wptest.io/

• Monster Widget http://wordpress.org/plugins/monster-widget/

• Use the Developer plugin http://wordpress.org/plugins/developer/

• Monitor queries http://wordpress.org/plugins/query-monitor/

• Chrome Inspector (Waterfall)

Browser Support

• Keep browser support in mind, always.

• http://www.poststat.us/explicit-browser-support/

Learn from the greats

• Nobody *really* starts from scratch.

• _s https://github.com/automattic/_s

• Stargazer https://github.com/justintadlock/stargazer

• Default Themes

Tools

Tools• CodeKit

• Minifies files

• Checks for errors in CSS and JS

• Live updates locally!

• Compiles Preprocessors

• PreProcessors

• Sass

• Compass http://compass-style.org/

• Bourbon http://bourbon.io

• Neat (Yeah, for real). http://neat.bourbon.io/

• LESS

• Frameworks (UI)

• Foundation by Zurb http://foundation.zurb.com/

• Twitter Bootstrap http://getbootstrap.com/

Tools• Handy JS

• Flexslider flexslider.woothemes.com

• CarouFredSel http://dev7studios.com/plugins/caroufredsel

• Validation

• http://jqueryvalidation.org/validate/

• yoast.com/checkout-field-validation/

• Use stuff WP ships with!

• Icon Fonts

• Dashicons

• Genericons

• Font Awesome

• Typefaces

• Typography.com

• Typekit.com

• google.com/fonts

Tools• Version control / Deployment

• Beanstalk

• Versions (SVN)

• Tower (Git)

• Working Locally

• VVV

• Mamp Pro

• ServerPress

• VIP Quickstart

Tools• Handy sites / Code Snippets

• http://codex.wordpress.org/Template_Tags

• http://queryposts.com/

• http://adambrown.info/p/wp_hooks

• http://www.billerickson.net/code/

• http://generatewp.com/

• http://themergency.com/generators/

• http://wordpress.stackexchange.com/

• http://spritecow.com

WordPress Theming Best Practices

Brian Krogsgard - WordSesh 2!!

Post Status | poststat.us |@post_status

for Client-Centric Web Development