wordpress coding standards & best practices

Coding Best PracticesTips & Tricks for Writing Clean Code in WordPress

WordCamp Winnipeg October 22, 2016 @ Red River College

Blog - shawnhooper.ca Twitter - @shawnhooper

http://shawnhooper.ca

Director of IT at Actionable.

Happy to be visiting here from Ottawa.

Have used WordPress since 2009 as a blogger, freelance developer, and in a corporate environment.

shawnhooper.ca

Hi, I’m Shawn!



Clean, Standard, Testable Code



Why Do We Write Clean Code?

• It’s easier to read • It reduces bugs • It requires less documentation • It reduces technical debt • Be nice to your teammates (code with empathy!)



Why Do We Write Clean Code?

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

- John Woods



Accessibility, PHP, JavaScript, HTML & CSS

WordPress Coding Standard

https://make.wordpress.org/core/handbook/best-practices/coding-standards/



All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at

level AA.

Accessibility



• Proper Heading Structure • Semantic Markup • wp.a11y.speak() • Images & Icons. ALT for Images, <title> in SVG. • Labels mandatory, not required to be

visible .screen-reader-text class to hide labels.

Accessibility



PHP



PHPDoc is the standard for comments

Comments

https://phpdoc.org/docs/latest/references/phpdoc/basic-syntax.html



Single vs. Double Quotes



IndentationThe Tabs vs. Spaces Debate



Use Tabs, Not Spaces



Except….Blog - shawnhooper.ca Twitter - @shawnhooper


While we’re here…

Add a comma after the last item in your array declaration



Dirty…



Clean…



https://www.thewpcrowd.com/wordpress/development/dont-dirty-diff-tips-writing-cleaner-php/



{ }Braces



BracesUse braces instead of single line control structures.



BracesWorkaround: Use alternate structures like

if/endif and while/endwhile;



Shorthand PHP Tags



Optional Close PHP Tag

You don’t need a ?> tag at the end of your file. If you, make sure there is no white space after it.



Space



SQLIf you have to write SQL Statements,

capitalize SQL keywords like SELECT, FROM, WHERE, ORDER BY.



SQLIf you have to write SQL Statements,

capitalize SQL keywords like SELECT, FROM, WHERE, ORDER BY.

In most cases though, you should use the functions provided by the WPDB Class.

or use $wpdb->prepare( $sql, $arg1, $arg2,… );



Naming Things



There are two hard things in computer science: cache invalidation, naming

things, and off-by-one errors.

- Phil Karlton



Naming Thingsfunction names should be lower case with

words separated by underscores.



Naming ThingsClass names should be uppercase with

words separated by underscores. Acronyms should be uppercase.



Naming ThingsConstants should be uppercase with words

separated by underscores.



Naming ThingsFilenames should be in lowercase,

separated by hyphens.

Classes should be prepended by “class-“ and be named with the name of the class.



Yoda Conditions

Variables on the right, constants and literals on the left.



Ternary Operators

Test that the statement is true, not false.

! empty() is allowed.



Keep Code SimpleNo:

Yes:



JavaScript



Spacing



Naming Conventions

Variable and function names should be full words, using camel case with a lowercase

first letter.

myVariable = ‘value’;



Naming Conventions

Constructors intended for use with new should use UpperCamelCase:

function MyConstructor( ) ….



HTML



Validated

All HTML pages should be verified against the W3C validator to ensure that the markup

is well formed.



Self-Closing Elements

<br />

<input type=“text” name=“myname” />



CaseFor Machines:

For Humans:



Quotes



IndentationIndent PHP blocks to match HTML. Ident to

match logical structure. Use Tabs.



CSS



Structure



Selectors



Properties



Media Queries



Comments



Back to PHP….



Tips & Tricks for Clean Code



Single Purpose MethodsBlog - shawnhooper.ca Twitter - @shawnhooper


Single Purpose Methods

Your methods should do one thing, and only that one thing. If not:

1. It reduces where it can be used

2. It becomes harder to test



Reduce Indentation



Reduce Indentation

@shawnhooper - shawnhooper.ca




Reduce Length of Loops



Reduce Length of LoopsBlog - shawnhooper.ca Twitter - @shawnhooper


Keep Methods Short

If your method is longer than 20 lines of code, you can probably split it up into

smaller pieces.



Avoid Too Many Parameters



InjectionBlog - shawnhooper.ca Twitter - @shawnhooper


Injection



Clean Switch Statements



Automation

There are tools available to help you keep your code clean.



Code Standards



PHP CodeSniffer

Checks that your code validates to a specified PHP Standard!



PHP CodeSniffer



WP Enforcer

https://github.com/stevegrunwell/wp-enforcer



JSHint

Checks that your JavaScript validates to the standard.

Run with Grunt or Gulp



Unit Testing



PHPUnit

Unit Testing Framework to perform dynamic tests on your PHP Code.



Tape, Mocha, Jasmine

Unit Testing Frameworks for JavaScript Code.



UI Testing



SeleniumUsed to test your web application in a

real browser.

http://wordpress.tv/2016/06/20/ben-cool-ui-testing-with-selenium-in-php/



TenonAn automated testing tool for web

accessibility.



Code Reviews



Code Reviews

2 sets of eyes are better than one!

Can be done remotely.

Can be baked into pull requests.

Don’t take any criticism personally.



ShawnHooper.ca

Twitter: @ShawnHooper

THANK YOU!



wordpress coding standards & best practices

Internet