SlideShare a Scribd company logo

WordPress development checklist

•
•
Binh Quan Duc
Binh Quan Duc

This document outlines goals, roles, and checklists for developing a WordPress website with a focus on security, performance, and quality. The goals include highest security, safe deployment, high PageSpeed scores, control, backups/restorability, and quality proof. Roles include HTML/CSS developer, WordPress developer, and CM/DevOps. Checklists cover tasks for the HTML/CSS team like image optimization and the WordPress developer like using Docker, caching, and deployment best practices. The CM/DevOps checklist addresses asset compression, caching, backups, file permissions, and image optimization.

Related slideshows

Web Assembly Big Picture
Web Assembly Big PictureWeb Assembly Big Picture
Web Assembly Big Picture
 
Blazor v1.1
Blazor v1.1Blazor v1.1
Blazor v1.1
 
Bundle Splitting in Volto
Bundle Splitting in VoltoBundle Splitting in Volto
Bundle Splitting in Volto
 
1 of 23
Download to read offline
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
ROLES HTML/CSS Developer WordPress Developer CM/DevOps 1 2 3
WP Development Checklist 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
❖ 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/ WP Development Checklist HTML/CSS Team CSS must follow standard
WP Development Checklist HTML/CSS Team Define sizes of images with name, width and height ❖ Size name: string ❖ Width: Integer ❖ Height: Integer ❖ Crop: boolean
WP Development Checklist 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 Development Checklist 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 WP Development Checklist WordPress Developer Using docker provided by Green Global company
❖ URL: https://wpackagist.org/ WP Development Checklist WordPress Developer Using WordPress Packagist. Don’t commit third party code
❖ Purpose: ➢ Better source control ➢ Reviewable ➢ Easier deployment ➢ Continuous Delivery ➢ Backup/Restorable ❖ Slide: https://docs.google.com/presentation/d/18ozMxHvZStbQjbn2utRt-jcAa0z psQ3Q5E7e4BYyrAA/pub?start=false&loop=false&delayms=3000 WP Development Checklist WordPress Developer Follow Git Flow Process
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 5 Document & 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 21 Language 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 WP Development Checklist WordPress Developer Applying Cache
WP Development Checklist WordPress Developer Never using 'full' size for WP thumbnail DO DON’T
WP Development Checklist WordPress Developer Checking favicon
WP Development Checklist 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
WP Development Checklist CM/DevOps Compress Assets (CSS/JS)
WP Development Checklist CM/DevOps Caching
WP Development Checklist CM/DevOps Deployment (Dedicated server/VPS) Using Jenkins as Deployment tool
WP Development Checklist CM/DevOps Deployment (Shared host) Using DeployBot as Deployment tool
WP Development Checklist 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
Question & Discussion

More Related Content

WordPress development checklist

  • 1. Presenter: Binh Quan Twitter: @binhqd Github: binhqd LinkedIn: /in/binhqd
  • 2. GOALS ❖ Highest security ❖ Safe deployment ❖ Highest score according to Page Speed Insight ❖ Controllable ❖ Backup/Restorable ❖ Quality proof for potential customers
  • 4. WP Development Checklist 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
  • 5. ❖ 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
  • 6. ❖ 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/ WP Development Checklist HTML/CSS Team CSS must follow standard
  • 7. WP Development Checklist HTML/CSS Team Define sizes of images with name, width and height ❖ Size name: string ❖ Width: Integer ❖ Height: Integer ❖ Crop: boolean
  • 8. WP Development Checklist 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
  • 9. WP Development Checklist 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
  • 10. ❖ Github: https://github.com/greenglobal/wordpress-dockerize WP Development Checklist WordPress Developer Using docker provided by Green Global company
  • 11. ❖ URL: https://wpackagist.org/ WP Development Checklist WordPress Developer Using WordPress Packagist. Don’t commit third party code
  • 12. ❖ Purpose: ➢ Better source control ➢ Reviewable ➢ Easier deployment ➢ Continuous Delivery ➢ Backup/Restorable ❖ Slide: https://docs.google.com/presentation/d/18ozMxHvZStbQjbn2utRt-jcAa0z psQ3Q5E7e4BYyrAA/pub?start=false&loop=false&delayms=3000 WP Development Checklist WordPress Developer Follow Git Flow Process
  • 13. 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 5 Document & 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 21 Language 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
  • 14. ❖ WP Fastest cache (*) ❖ W3 total cache ❖ WP Super Cache WP Development Checklist WordPress Developer Applying Cache
  • 15. WP Development Checklist WordPress Developer Never using 'full' size for WP thumbnail DO DON’T
  • 16. WP Development Checklist WordPress Developer Checking favicon
  • 17. WP Development Checklist 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
  • 20. WP Development Checklist CM/DevOps Deployment (Dedicated server/VPS) Using Jenkins as Deployment tool
  • 21. WP Development Checklist CM/DevOps Deployment (Shared host) Using DeployBot as Deployment tool
  • 22. WP Development Checklist 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