WordPress Theming Best Practices
for Client-Centric Web Development

Brian Krogsgard - WordSesh 2!

!
Post Status | postst...
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...
Hooks vs templates

•

Or both?
Code Syntax
Follow the guides
•

Seriously, take the time to properly format your
code.

•

http://codex.wordpress.org/
WordPress_Codi...
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/controlstructures.alternative-...
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/wordpresscore-load/

•

Wowza hooks http://codex.wordpress.org/
Plugin...
Action and filters
•

Make your parent themes filterable!
•

Intro: http://pippinsplugins.com/a-quickintroduction-to-using-fi...
Properly enqueue scripts
and styles
•

http://wpcandy.com/teaches/how-to-load-scripts-inwordpress-themes/

•

http://wp.tu...
Theme setup function

•

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

•

Because prioritie...
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/crea...
Loops
•

The default WordPress loop

•

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

Best. Presentatio...
Post Meta
•

get_post_custom() versus lots of get_post_meta().

•

Check for existence before output to prevent empty mark...
Design
Responsive Design
•

Either do it right, or don’t do it.

•

<meta name=“viewport” content=“width=device-width, initialsca...
* { box-sizing: Border-box }

•

FTW
•

http://www.paulirish.com/2012/box-sizingborder-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.

•
...
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/m...
Browser Support

•

Keep browser support in mind, always.
•

http://www.poststat.us/explicit-browsersupport/
Learn from the greats
•

Nobody *really* starts from scratch.
•

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

•

Stargazer https:/...
Tools
Tools
•

CodeKit
•
•

Minifies files
Checks for errors in CSS and JS

•
•
•

Live updates locally!
Compiles Preprocessors

P...
Tools
•

Handy JS
•

Flexslider flexslider.woothemes.com

•

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

•

V...
Tools
•

Version control / Deployment
•
•

Versions (SVN)

•
•

Beanstalk

Tower (Git)

Working Locally
•

VVV

•

Mamp Pr...
Tools
•

Handy sites / Code Snippets
•

http://codex.wordpress.org/Template_Tags

•

http://queryposts.com/

•

http://ada...
WordPress Theming Best Practices
for Client-Centric Web Development

Brian Krogsgard - WordSesh 2!

!
Post Status | postst...
Upcoming SlideShare
Loading in …5
×

WordPress Theming Best Practices

3,019 views

Published on

for client-centric web development

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,019
On SlideShare
0
From Embeds
0
Number of Embeds
176
Actions
Shares
0
Downloads
22
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

WordPress Theming Best Practices

  1. 1. WordPress Theming Best Practices for Client-Centric Web Development Brian Krogsgard - WordSesh 2! ! Post Status | poststat.us |@post_status
  2. 2. Structuring your WordPress theme
  3. 3. Assets • CSS / JS / Images / fonts • Sprites, minified files
  4. 4. Template Hierarchy • http://codex.wordpress.org/Template_Hierarchy • http://wphierarchy.com/
  5. 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. 6. Hooks vs templates • Or both?
  7. 7. Code Syntax
  8. 8. Follow the guides • Seriously, take the time to properly format your code. • http://codex.wordpress.org/ WordPress_Coding_Standards
  9. 9. Entering and exiting PHP • In templates versus functions / operational code • When in PHP, stay in PHP
  10. 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. 11. Function naming norms • get_the_{something} vs the_{something}
  12. 12. Alignment • Tabs for nesting, spaces for alignment.
  13. 13. Code
  14. 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. 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. 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. 17. Theme setup function • http://justintadlock.com/archives/2010/12/30/ wordpress-theme-function-files • Because priorities, that’s why.
  18. 18. Loading files • http://justintadlock.com/archives/2010/11/17/ how-to-load-files-within-wordpress-themes
  19. 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. 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. 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. 22. Design
  23. 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. 24. * { box-sizing: Border-box } • FTW • http://www.paulirish.com/2012/box-sizingborder-box-ftw/
  25. 25. SVG vs Icon Fonts vs Fallback PNGs. • Depends on the browser support required • http://caniuse.com/
  26. 26. General Principles
  27. 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. 28. Functions.php is not a landfill • Have either a site-specific plugin or reusable functionality plugins. Or both.
  29. 29. Stay DRY • Don’t Repeat Yourself
  30. 30. Use things WordPress gives you • Customizer • Settings API • Etc.
  31. 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. 32. Browser Support • Keep browser support in mind, always. • http://www.poststat.us/explicit-browsersupport/
  33. 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. 34. Tools
  35. 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. 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. 37. Tools • Version control / Deployment • • Versions (SVN) • • Beanstalk Tower (Git) Working Locally • VVV • Mamp Pro • ServerPress • VIP Quickstart
  38. 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. 39. WordPress Theming Best Practices for Client-Centric Web Development Brian Krogsgard - WordSesh 2! ! Post Status | poststat.us |@post_status

×