wordpress coding standards & best practices

Post on 11-Apr-2017

268 Views

Category:

Internet

2 Downloads

Preview:

Click to see full reader

TRANSCRIPT

Coding Best PracticesTips & Tricks for Writing Clean Code in WordPress

WordCamp Winnipeg October 22, 2016 @ Red River College

Blog - shawnhooper.ca Twitter - @shawnhooper

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!

Blog - shawnhooper.ca Twitter - @shawnhooper

Clean, Standard, Testable Code

Blog - shawnhooper.ca Twitter - @shawnhooper

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!)

Blog - shawnhooper.ca Twitter - @shawnhooper

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Blog - shawnhooper.ca Twitter - @shawnhooper

Accessibility, PHP, JavaScript, HTML & CSS

WordPress Coding Standard

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

Blog - shawnhooper.ca Twitter - @shawnhooper

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

level AA.

Accessibility

Blog - shawnhooper.ca Twitter - @shawnhooper

• 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

Blog - shawnhooper.ca Twitter - @shawnhooper

PHP

Blog - shawnhooper.ca Twitter - @shawnhooper

PHPDoc is the standard for comments

Comments

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Single vs. Double Quotes

Blog - shawnhooper.ca Twitter - @shawnhooper

Single vs. Double Quotes

Blog - shawnhooper.ca Twitter - @shawnhooper

IndentationThe Tabs vs. Spaces Debate

Blog - shawnhooper.ca Twitter - @shawnhooper

Blog - shawnhooper.ca Twitter - @shawnhooper

Use Tabs, Not Spaces

Blog - shawnhooper.ca Twitter - @shawnhooper

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

While we’re here…

Add a comma after the last item in your array declaration

Blog - shawnhooper.ca Twitter - @shawnhooper

Dirty…

Blog - shawnhooper.ca Twitter - @shawnhooper

Clean…

Blog - shawnhooper.ca Twitter - @shawnhooper

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

Blog - shawnhooper.ca Twitter - @shawnhooper

{ }Braces

Blog - shawnhooper.ca Twitter - @shawnhooper

BracesUse braces instead of single line control structures.

Blog - shawnhooper.ca Twitter - @shawnhooper

BracesWorkaround: Use alternate structures like

if/endif and while/endwhile;

Blog - shawnhooper.ca Twitter - @shawnhooper

Shorthand PHP Tags

Blog - shawnhooper.ca Twitter - @shawnhooper

Shorthand PHP Tags

Blog - shawnhooper.ca Twitter - @shawnhooper

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.

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

Space

Blog - shawnhooper.ca Twitter - @shawnhooper

SQLIf you have to write SQL Statements,

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

Blog - shawnhooper.ca Twitter - @shawnhooper

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,… );

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming Things

Blog - shawnhooper.ca Twitter - @shawnhooper

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

things, and off-by-one errors.

- Phil Karlton

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming Thingsfunction names should be lower case with

words separated by underscores.

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming ThingsClass names should be uppercase with

words separated by underscores. Acronyms should be uppercase.

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming ThingsConstants should be uppercase with words

separated by underscores.

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming ThingsFilenames should be in lowercase,

separated by hyphens.

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Yoda Conditions

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Ternary Operators

Test that the statement is true, not false.

! empty() is allowed.

Blog - shawnhooper.ca Twitter - @shawnhooper

Keep Code SimpleNo:

Yes:

Blog - shawnhooper.ca Twitter - @shawnhooper

JavaScript

Blog - shawnhooper.ca Twitter - @shawnhooper

Spacing

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming Conventions

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

first letter.

myVariable = ‘value’;

Blog - shawnhooper.ca Twitter - @shawnhooper

Naming Conventions

Constructors intended for use with new should use UpperCamelCase:

function MyConstructor( ) ….

Blog - shawnhooper.ca Twitter - @shawnhooper

HTML

Blog - shawnhooper.ca Twitter - @shawnhooper

Validated

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

is well formed.

Blog - shawnhooper.ca Twitter - @shawnhooper

Self-Closing Elements

<br />

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

Blog - shawnhooper.ca Twitter - @shawnhooper

CaseFor Machines:

For Humans:

Blog - shawnhooper.ca Twitter - @shawnhooper

Quotes

Blog - shawnhooper.ca Twitter - @shawnhooper

Quotes

Blog - shawnhooper.ca Twitter - @shawnhooper

IndentationIndent PHP blocks to match HTML. Ident to

match logical structure. Use Tabs.

Blog - shawnhooper.ca Twitter - @shawnhooper

CSS

Blog - shawnhooper.ca Twitter - @shawnhooper

Structure

Blog - shawnhooper.ca Twitter - @shawnhooper

Selectors

Blog - shawnhooper.ca Twitter - @shawnhooper

Properties

Blog - shawnhooper.ca Twitter - @shawnhooper

Media Queries

Blog - shawnhooper.ca Twitter - @shawnhooper

Comments

Blog - shawnhooper.ca Twitter - @shawnhooper

Comments

Blog - shawnhooper.ca Twitter - @shawnhooper

Back to PHP….

Blog - shawnhooper.ca Twitter - @shawnhooper

Tips & Tricks for Clean Code

Blog - shawnhooper.ca Twitter - @shawnhooper

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Reduce Indentation

Blog - shawnhooper.ca Twitter - @shawnhooper

Reduce Indentation

@shawnhooper - shawnhooper.ca

Blog - shawnhooper.ca Twitter - @shawnhooper

Reduce Length of Loops

Blog - shawnhooper.ca Twitter - @shawnhooper

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.

Blog - shawnhooper.ca Twitter - @shawnhooper

Avoid Too Many Parameters

Blog - shawnhooper.ca Twitter - @shawnhooper

Avoid Too Many Parameters

Blog - shawnhooper.ca Twitter - @shawnhooper

Avoid Too Many Parameters

Blog - shawnhooper.ca Twitter - @shawnhooper

Avoid Too Many Parameters

Blog - shawnhooper.ca Twitter - @shawnhooper

InjectionBlog - shawnhooper.ca Twitter - @shawnhooper

Injection

Blog - shawnhooper.ca Twitter - @shawnhooper

Injection

Blog - shawnhooper.ca Twitter - @shawnhooper

Clean Switch Statements

Blog - shawnhooper.ca Twitter - @shawnhooper

Blog - shawnhooper.ca Twitter - @shawnhooper

Automation

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Code Standards

Blog - shawnhooper.ca Twitter - @shawnhooper

PHP CodeSniffer

Checks that your code validates to a specified PHP Standard!

Blog - shawnhooper.ca Twitter - @shawnhooper

PHP CodeSniffer

Blog - shawnhooper.ca Twitter - @shawnhooper

WP Enforcer

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

Blog - shawnhooper.ca Twitter - @shawnhooper

JSHint

Checks that your JavaScript validates to the standard.

Run with Grunt or Gulp

Blog - shawnhooper.ca Twitter - @shawnhooper

Unit Testing

Blog - shawnhooper.ca Twitter - @shawnhooper

PHPUnit

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

Blog - shawnhooper.ca Twitter - @shawnhooper

Tape, Mocha, Jasmine

Unit Testing Frameworks for JavaScript Code.

Blog - shawnhooper.ca Twitter - @shawnhooper

UI Testing

Blog - shawnhooper.ca Twitter - @shawnhooper

SeleniumUsed to test your web application in a

real browser.

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

Blog - shawnhooper.ca Twitter - @shawnhooper

TenonAn automated testing tool for web

accessibility.

Blog - shawnhooper.ca Twitter - @shawnhooper

Code Reviews

Blog - shawnhooper.ca Twitter - @shawnhooper

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.

Blog - shawnhooper.ca Twitter - @shawnhooper

Blog - shawnhooper.ca Twitter - @shawnhooper

ShawnHooper.ca

Twitter: @ShawnHooper

THANK YOU!

Blog - shawnhooper.ca Twitter - @shawnhooper

top related