Writing Clean, Standards Compliant, Testable Code for WordPress

Clean CodeTips & Tricks for Writing Clean Code in WordPress

WordCamp Toronto August 7, 2016 @ Ryerson University

Chief Technology Officer 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 thewpcrowd.com

Hi, I’m Shawn!

@shawnhooper - shawnhooper.ca

http://shawnhooper.ca

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



Single vs. Double Quotes



Indentation


The Tabs vs. Spaces Debate




Use Tabs, Not Spaces



Except….



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



Braces


Use braces instead of single line control structures.


Braces


Workaround: Use alternate structures like if/endif and while/endwhile;


Shorthand PHP Tags



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



Space



Space



Space



Space



Space



Space



SQL


If you have to write SQL Statements, capitalize SQL keywords like SELECT,

FROM, WHERE, ORDER BY.


SQL



FROM, WHERE, ORDER BY. In most cases though, you should use the functions provided by the WPDB Class.


SQL



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 Things


function names should be lower case with words separated by underscores.


Naming Things


Class names should be uppercase with words separated by underscores. Acronyms

should be uppercase.


Naming Things


Constants should be uppercase with words separated by underscores.


Naming Things


Filenames 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 Simple


No:

Yes:


JavaScript



Spacing



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” />


Case


For Machines:

For Humans:


Quotes



Quotes



Indentation


Indent PHP blocks to match HTML. Ident to match logical structure. Use Tabs.


CSS



Structure



Selectors



Properties



Media Queries



Comments



Comments



Back to PHP….



Tips & Tricks for Clean Code



Single Purpose Methods



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



Reduce Length of Loops



Reduce Length of Loops



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












Injection



Injection



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



Selenium


Used to test your web application in a real browser.

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


Tenon


An 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 TheWPCrowd.com

Twitter:

@ShawnHooper

THANK YOU!


http://thewpcrowd.com


Internet

Writing Clean, Standards Compliant, Testable Code for WordPress