wordpress development checklist

Presenter: Binh Quan

Twitter: @binhqd

Github: binhqd

LinkedIn: /in/binhqd

GOALS

❖ Highest security

❖ Safe deployment

❖ Highest score according to Page Speed Insight

❖ Controllable

❖ Backup/Restorable

❖ Quality proof for potential customers

ROLESHTML/CSS Developer

WordPress Developer

CM/DevOps

1

2

3

WP DevelopmentChecklist

HTML/CSS Team

1. CSS Sprite must be used when theming

2. Concat all CSS files into single file

3. Concat all JS files into single file

4. CSS in Head, JS in Body

5. Images (jpg, png, svg) must be optimized

6. CSS must follow standard

7. Define sizes of images with name, width and height

❖ Imagemin-CLI: https://www.npmjs.com/package/imagemin-cli

❖ gulp-imagemin: https://www.npmjs.com/package/gulp-imagemin

WP Development Checklist

HTML/CSS Team

Images (jpg, png, svg) must be optimized

https://www.npmjs.com/package/imagemin-cli

https://www.npmjs.com/package/gulp-imagemin

❖ Custom CSS in WP: https://codex.wordpress.org/CSS

❖ Default WordPress Generated CSS: http://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/


HTML/CSS Team

CSS must follow standard

https://codex.wordpress.org/CSS

http://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/




HTML/CSS Team

Define sizes of images with name, width and height

❖ Size name: string❖ Width: Integer❖ Height: Integer❖ Crop: boolean


WP Developer

1. Using docker provided by Green Global company

2. Using latest version of WP (4.7)

3. Using Git for source versioning

4. Using WordPress Packagist. Don’t commit third party code

5. Follow Git Flow Process

6. Follow Code Review Checklist

7. Applying cache

8. Scoring at least 90/100 according to Google Page Speed


WP Developer

9. Grade A according to https://www.webpagetest.org

10. Grade A accroding to https://tools.pingdom.com

11. Minify all CSS, JS

12. CSS in Head, JS in Body

13. Never using 'full' size for WP thumbnail

14. Using latest WP Plugin

15. Checking favicon

16. Don't try to modify original source, plugins

17. Set WP_DEBUG = true when development and WP_DEBUG =

false for production

❖ Github: https://github.com/greenglobal/wordpress-dockerize


WordPress Developer

Using docker provided by Green Global company

https://github.com/greenglobal/wordpress-dockerize

❖ URL: https://wpackagist.org/


WordPress Developer

Using WordPress Packagist. Don’t commit third party code

https://wpackagist.org/

❖ Purpose:➢ Better source control

➢ Reviewable

➢ Easier deployment

➢ Continuous Delivery

➢ Backup/Restorable

❖ Slide: https://docs.google.com/presentation/d/18ozMxHvZStbQjbn2utRt-jcAa0zpsQ3Q5E7e4BYyrAA/pub?start=false&loop=false&delayms=3000


WordPress Developer

Follow Git Flow Process

https://docs.google.com/presentation/d/18ozMxHvZStbQjbn2utRt-jcAa0zpsQ3Q5E7e4BYyrAA/pub?start=false&loop=false&delayms=3000



Pull Request Review Checklist

Category Task

1

Coding convention

Not use linting config provided by our company

2 Still error/warning reported by linting tool

3 Coding format not follow company's standard

4 Not follow Best Practice

5Document & comment

Comment not in English, typo

6 Not remove unused code or comment blocks

7 Variables Variables don't have meaningful name

8 Function & Class Class names, function names don't have meaningful name

9

Coding

Not clean up debugging blocks

10 Code blocks are not divided into units, unable to write unit test

11 Double code block, code blocks are not being reuse

12 Source code not in using Package Manager and contain third party code

13 Not use constants for values that configurable

14 Coding logic Not cover enough case which may caused further bugs

15

Git Flow

Commit message not follow standard

16 Not clean unused code when creating new PR

17 Not clean up development information when creating new PR

18 Not remove critical information such as username, password or including credential keys

19 Not resolve conflict when creating new PR

20 Careless and making lost of other's code

21Language

Content in English has typo- Content in plural form not being cared

22 Sentence not meaningful and wrong purpose

23 Integration Not retest that cause conflict with original source branch

❖ WP Fastest cache (*)

❖ W3 total cache

❖ WP Super Cache


WordPress Developer

Applying Cache


WordPress Developer

Never using 'full' size for WP thumbnail

DO

DON’T


WordPress Developer

Checking favicon


CM/DevOps

# Tasks Own host (Dedicated Server or VPS) Shared Host

1 Compress assets Compress JS and CSS. Set header for serving gzip files

2 Caching Varnish Cache

3 Deployment Using CI and Git Using DeployBot

4 Backup - Each deployment- Weekly

- Each deployment- Weekly

5

File/Folder permission

- File/Folder mode: 755- All files/folders: root access- Upload folders: www-data- .htpasswd to protect /wp-admin folder

- Mode 400 for wp-config.php- Change name of wp-config.php- BE CAREFUL when chmod some folders as 777. If some folder need to be writable, then you should change the folder name before chmod them as 777

6 Server Software Requirement Varnish/NGINX/MySQL

7 Image optimize WP Smush IT WP Smush IT


CM/DevOps

Compress Assets (CSS/JS)


CM/DevOps

Caching


CM/DevOps

Deployment (Dedicated server/VPS)

Using Jenkins as

Deployment tool


CM/DevOps

Deployment (Shared host)

Using DeployBotas

Deployment tool


Security

1. Using Git

Easy tracking changes and backdoor

2. File/Folder permission

- All folders should be 0755

- All files should be 0644

- wp-config.php should be 400

Read more:❖ https://codex.wordpress.org/Hardening_WordPres

s❖ https://codex.wordpress.org/Changing_File_Permis

sions

https://codex.wordpress.org/Hardening_WordPress



https://codex.wordpress.org/Changing_File_Permissions



Question&

Discussion