for client-centric web development

1. WordPress Theming Best Practices
for Client-Centric Web Development
Brian Krogsgard - WordSesh 2!
!
Post Status | poststat.us |@post_status

2. Structuring your
WordPress theme

3. Assets
•
CSS / JS / Images / fonts
•
Sprites, minified files

4. Template Hierarchy
•
http://codex.wordpress.org/Template_Hierarchy
•
http://wphierarchy.com/

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

6. Hooks vs templates
•
Or both?

7. Code Syntax

8. Follow the guides
•
Seriously, take the time to properly format your
code.
•
http://codex.wordpress.org/
WordPress_Coding_Standards

9. Entering and exiting PHP
•
In templates versus functions / operational code
•
When in PHP, stay in PHP

10. Curly brackets versus alternative
syntax for control structures
•
http://php.net/manual/en/controlstructures.alternative-syntax.php
•
http://pippinsplugins.com/please-do-not-usecurly-brackets-in-template-files/
•
http://tommcfarlin.com/commenting-code-blocks/

11. Function naming norms
•
get_the_{something} vs the_{something}

12. Alignment
•
Tabs for nesting, spaces for alignment.

13. Code

14. Hook Order
•
Core Load http://www.rarst.net/script/wordpresscore-load/
•
Wowza hooks http://codex.wordpress.org/
Plugin_API/Action_Reference
•
Special shoutout to template_redirect
(conditionals)

15. Action and filters
•
Make your parent themes filterable!
•
Intro: http://pippinsplugins.com/a-quickintroduction-to-using-filters/
•
You can do it: http://wp.tutsplus.com/tutorials/
plugins/writing-extensible-plugins-with-actionsand-filters/

16. Properly enqueue scripts
and styles
•
http://wpcandy.com/teaches/how-to-load-scripts-inwordpress-themes/
•
http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-theenqueue-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

17. Theme setup function
•
http://justintadlock.com/archives/2010/12/30/
wordpress-theme-function-files
•
Because priorities, that’s why.

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

19. 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/

20. 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-nacinwp_query-wordpress-in-depth/
•
wp_reset_postdata() vs wp_reset_query() http://www.poststat.us/properlyreset-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.

21. 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/

22. Design

23. Responsive Design
•
Either do it right, or don’t do it.
•
<meta name=“viewport” content=“width=device-width, initialscale=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-responsivenavigation-options/
•
Consider what *could* go into different areas
•
Breakpoints are arbitrary.

24. * { box-sizing: Border-box }
•
FTW
•
http://www.paulirish.com/2012/box-sizingborder-box-ftw/

25. SVG vs Icon Fonts vs
Fallback PNGs.
•
Depends on the browser support required
•
http://caniuse.com/

26. General Principles

27. Let plugins take care of what
they are good at
•
Breadcrumbs? Pagination? Depends on the
project.
•
SEO? Let it go.
•
Analyze each situation.

28. Functions.php is not a
landfill
•
Have either a site-specific plugin or reusable
functionality plugins. Or both.

29. Stay DRY
•
Don’t Repeat Yourself

30. Use things WordPress gives
you
•
Customizer
•
Settings API
•
Etc.

31. Test yourself!
•
Always have wp_debug on.
•
WP Test http://wptest.io/
•
Monster Widget http://wordpress.org/plugins/monsterwidget/
•
Use the Developer plugin http://wordpress.org/plugins/
developer/
•
Monitor queries http://wordpress.org/plugins/query-monitor/
•
Chrome Inspector (Waterfall)

32. Browser Support
•
Keep browser support in mind, always.
•
http://www.poststat.us/explicit-browsersupport/

33. Learn from the greats
•
Nobody *really* starts from scratch.
•
_s https://github.com/automattic/_s
•
Stargazer https://github.com/justintadlock/
stargazer
•
Default Themes

34. Tools

35. 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/

36. 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
•
•
Genericons
•
•
Dashicons
Font Awesome
Typefaces
•
Typography.com
•
Typekit.com
•
google.com/fonts

37. Tools
•
Version control / Deployment
•
•
Versions (SVN)
•
•
Beanstalk
Tower (Git)
Working Locally
•
VVV
•
Mamp Pro
•
ServerPress
•
VIP Quickstart

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

39. WordPress Theming Best Practices
for Client-Centric Web Development
Brian Krogsgard - WordSesh 2!
!
Post Status | poststat.us |@post_status