WordPress Coding Standards & Best Practices

Transcript

1. Coding Best Practices Tips & Tricks for Writing Clean Code in WordPress Blog - shawnhooper.ca
 Twitter - @shawnhooper
2. Director of IT at Actionable.
 WordPress Developer. Happy to be visiting here from Ottawa. Have been a web developer since 1998, and using WordPress since 2009. shawnhooper.ca Hi, I’m Shawn! Blog - shawnhooper.ca
 Twitter - @shawnhooper
3. Clean, Standard, Testable Code Blog - shawnhooper.ca
 Twitter - @shawnhooper
4. 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
5. 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
6. Blog - shawnhooper.ca
 Twitter - @shawnhooper
7. Accessibility, PHP, JavaScript, HTML & CSS WordPress Coding Standard https://make.wordpress.org/core/handbook/best-practices/ coding-standards/ Blog - shawnhooper.ca
 Twitter - @shawnhooper
8. 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
9. • 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
10. PHP Blog - shawnhooper.ca
 Twitter - @shawnhooper
11. PHPDoc is the standard for comments Comments https://phpdoc.org/docs/latest/references/phpdoc/basic-syntax.html Blog - shawnhooper.ca
 Twitter - @shawnhooper
12. Single vs. Double Quotes Blog - shawnhooper.ca
 Twitter - @shawnhooper
13. Single vs. Double Quotes Blog - shawnhooper.ca
 Twitter - @shawnhooper
14. Indentation The Tabs vs. Spaces Debate Blog - shawnhooper.ca
 Twitter - @shawnhooper
15. Blog - shawnhooper.ca
 Twitter - @shawnhooper
16. Use Tabs, Not Spaces Blog - shawnhooper.ca
 Twitter - @shawnhooper
17. Except…. Blog - shawnhooper.ca
 Twitter - @shawnhooper
18. While we’re here… Add a comma after the last item in your array declaration Blog - shawnhooper.ca
 Twitter - @shawnhooper
19. Dirty… Blog - shawnhooper.ca
 Twitter - @shawnhooper
20. Clean… Blog - shawnhooper.ca
 Twitter - @shawnhooper
21. https://www.thewpcrowd.com/wordpress/development/dont- dirty-diff-tips-writing-cleaner-php/ Blog - shawnhooper.ca
 Twitter - @shawnhooper
22. { } Braces Blog - shawnhooper.ca
 Twitter - @shawnhooper
23. Braces Use braces instead of single line control structures. Blog - shawnhooper.ca
 Twitter - @shawnhooper
24. Braces Workaround: Use alternate structures like 
 if/endif and while/endwhile; Blog - shawnhooper.ca
 Twitter - @shawnhooper
25. Shorthand PHP Tags Blog - shawnhooper.ca
 Twitter - @shawnhooper
26. Shorthand PHP Tags Blog - shawnhooper.ca
 Twitter - @shawnhooper
27. 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
28. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
29. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
30. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
31. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
32. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
33. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
34. Space Blog - shawnhooper.ca
 Twitter - @shawnhooper
35. SQL If you have to write SQL Statements, capitalize SQL keywords like SELECT, FROM, WHERE, ORDER BY. Blog - shawnhooper.ca
 Twitter - @shawnhooper
36. SQL If 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
37. Naming Things Blog - shawnhooper.ca
 Twitter - @shawnhooper
38. There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
 
 - Phil Karlton Blog - shawnhooper.ca
 Twitter - @shawnhooper
39. Naming Things function names should be lower case with words separated by underscores. Blog - shawnhooper.ca
 Twitter - @shawnhooper
40. Naming Things Class names should be uppercase with words separated by underscores. Acronyms should be uppercase. Blog - shawnhooper.ca
 Twitter - @shawnhooper
41. Naming Things Constants should be uppercase with words separated by underscores. Blog - shawnhooper.ca
 Twitter - @shawnhooper
42. 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. Blog - shawnhooper.ca
 Twitter - @shawnhooper
43. Yoda Conditions Variables on the right, constants and literals on the left. Blog - shawnhooper.ca
 Twitter - @shawnhooper
44. Ternary Operators Test that the statement is true, not false.
 
 ! empty() is allowed. Blog - shawnhooper.ca
 Twitter - @shawnhooper
45. Keep Code Simple No: Yes: Blog - shawnhooper.ca
 Twitter - @shawnhooper
46. Don’t Extract Don’t use the PHP extract() function to create variables from an array. It’s hard to debug. Blog - shawnhooper.ca
 Twitter - @shawnhooper
47. JavaScript Blog - shawnhooper.ca
 Twitter - @shawnhooper
48. Spacing Blog - shawnhooper.ca
 Twitter - @shawnhooper
49. 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
50. Naming Conventions Constructors intended for use with new should use UpperCamelCase:
 
 function MyConstructor( ) …. Blog - shawnhooper.ca
 Twitter - @shawnhooper
51. HTML Blog - shawnhooper.ca
 Twitter - @shawnhooper
52. Validated All HTML pages should be verified against the W3C validator to ensure that the markup is well formed. Blog - shawnhooper.ca
 Twitter - @shawnhooper
53. Self-Closing Elements <br /> <input type=“text” name=“myname” /> Blog - shawnhooper.ca
 Twitter - @shawnhooper
54. Case For Machines: For Humans: Blog - shawnhooper.ca
 Twitter - @shawnhooper
55. Quotes Blog - shawnhooper.ca
 Twitter - @shawnhooper
56. Quotes Blog - shawnhooper.ca
 Twitter - @shawnhooper
57. Indentation Indent PHP blocks to match HTML. Ident to match logical structure. Use Tabs. Blog - shawnhooper.ca
 Twitter - @shawnhooper
58. CSS Blog - shawnhooper.ca
 Twitter - @shawnhooper
59. Structure Blog - shawnhooper.ca
 Twitter - @shawnhooper
60. Selectors Blog - shawnhooper.ca
 Twitter - @shawnhooper
61. Properties Blog - shawnhooper.ca
 Twitter - @shawnhooper
62. Media Queries Blog - shawnhooper.ca
 Twitter - @shawnhooper
63. Comments Blog - shawnhooper.ca
 Twitter - @shawnhooper
64. Comments Blog - shawnhooper.ca
 Twitter - @shawnhooper
65. Back to PHP…. Blog - shawnhooper.ca
 Twitter - @shawnhooper
66. Tips & Tricks for Clean Code Blog - shawnhooper.ca
 Twitter - @shawnhooper
67. Single Purpose Methods Blog - shawnhooper.ca
 Twitter - @shawnhooper
68. 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
69. Reduce Indentation Blog - shawnhooper.ca
 Twitter - @shawnhooper
70. Reduce Indentation @shawnhooper - shawnhooper.ca Blog - shawnhooper.ca
 Twitter - @shawnhooper
71. Reduce Length of Loops Blog - shawnhooper.ca
 Twitter - @shawnhooper
72. Reduce Length of Loops Blog - shawnhooper.ca
 Twitter - @shawnhooper
73. 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
74. Avoid Too Many Parameters Blog - shawnhooper.ca
 Twitter - @shawnhooper
75. Avoid Too Many Parameters Blog - shawnhooper.ca
 Twitter - @shawnhooper
76. Avoid Too Many Parameters Blog - shawnhooper.ca
 Twitter - @shawnhooper
77. Avoid Too Many Parameters Blog - shawnhooper.ca
 Twitter - @shawnhooper
78. Injection Blog - shawnhooper.ca
 Twitter - @shawnhooper
79. Injection Blog - shawnhooper.ca
 Twitter - @shawnhooper
80. Injection Blog - shawnhooper.ca
 Twitter - @shawnhooper
81. Clean Switch Statements Blog - shawnhooper.ca
 Twitter - @shawnhooper
82. Blog - shawnhooper.ca
 Twitter - @shawnhooper
83. Automation There are tools available to help you keep your code clean. Blog - shawnhooper.ca
 Twitter - @shawnhooper
84. Code Standards Blog - shawnhooper.ca
 Twitter - @shawnhooper
85. PHP CodeSniffer Checks that your code validates to a specified PHP Standard! Blog - shawnhooper.ca
 Twitter - @shawnhooper
86. PHP CodeSniffer Blog - shawnhooper.ca
 Twitter - @shawnhooper
87. WP Enforcer https://github.com/stevegrunwell/wp-enforcer Blog - shawnhooper.ca
 Twitter - @shawnhooper
88. JSHint Checks that your JavaScript validates to the standard. Run with Grunt or Gulp Blog - shawnhooper.ca
 Twitter - @shawnhooper
89. Unit Testing Blog - shawnhooper.ca
 Twitter - @shawnhooper
90. PHPUnit Unit Testing Framework to perform dynamic tests on your PHP Code. Blog - shawnhooper.ca
 Twitter - @shawnhooper
91. Tape, Mocha, Jasmine Unit Testing Frameworks for JavaScript Code. Blog - shawnhooper.ca
 Twitter - @shawnhooper
92. UI Testing Blog - shawnhooper.ca
 Twitter - @shawnhooper
93. Selenium Used to test your web application in a real browser. https://www.shawnhooper.ca/2017/07/selenium-ui-testing- wpcampus/ Blog - shawnhooper.ca
 Twitter - @shawnhooper
94. Tenon An automated testing tool for web accessibility. Blog - shawnhooper.ca
 Twitter - @shawnhooper
95. Code Reviews Blog - shawnhooper.ca
 Twitter - @shawnhooper
96. 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
97. Blog - shawnhooper.ca
 Twitter - @shawnhooper
98. ShawnHooper.ca 
 Twitter: @ShawnHooper THANK YOU! Blog - shawnhooper.ca
 Twitter - @shawnhooper