Like many others, WordPress has been my personal blogging tool for a long time. A powerful tool for easy publishing! That is what everyone wants. Large sites like TechCrunch and TheNextWeb use it exactly for that reason. And more enterprises seem to discover it as good solution to their too-expensive publication tools. But keeping those WordPress instances running requires skills and knowledge. Because of WordPress extendibility and its very active community, you can do this too. This tutorial will teach you how use Ansible, Composer, WP-CLI, WP REST API, and Elasticsearch can push WordPress from a personal blogging tool into an enterprise-worthy level application. Out with FTP based SCM ... in with automated deployment, dependency management, and utterly fast search.

1. THE ENTERPRISE WOR/D/THY/PRESS

2. THE FAMOUS 5-MINUTE INSTALLATION
WORDPRESS

3. BUT WHAT ABOUT MAINTENANCE?
WORDPRESS

4. IS THE ADMIN THE BEST PLACE?
MANAGE THEMES & PLUGIN VERSIONS?
WORDPRESS

5. CHANGES OR NEW FUNCTIONALITY
HOW DO YOU TEST OR DEVELOP?
WORDPRESS

6. WITH MINIMAL DOWNTIME
AND WHAT ABOUT DEPLOYING?
WORDPRESS

7. FOR THE BEST USER EXPERIENCE
IT NEEDS TO BE FAST!
WORDPRESS

8. DEVOPS CLI FRONTENDSEARCH

9. DEVOPS CLI FRONTENDSEARCH

10. WE NEED FULL CONTROL OF DEV & OPS

11. TO DEPLOY TO MULTIPLE ENVIRONMENTS
DEPENDENCY MANAGEMENT

12. FOR CONSISTENT ENVIRONMENTS
AUTOMATION

13. DEV DEPENDENCY
MANAGEMENT

14. GETCOMPOSER.ORG
COMPOSER
DEPENDENCY MANAGEMENT

15. PHP PACKAGE REPOSITORY
PACKAGIST.ORG
DEPENDENCY MANAGEMENT

16. CUSTOM PATHS DEFINITIONS
COMPOSER INSTALLERS
DEPENDENCY MANAGEMENT

17. COMPOSER’ED’ PLUGIN & THEME MIRROR OF WORDPRESS.ORG
WPACKAGIST.ORG
DEPENDENCY MANAGEMENT

18. NOT SUPPORTED IN WORDPRESS CORE :(
COMPOSER
DEPENDENCY MANAGEMENT

19. GITHUB.COM/JOHNPBLOCH/WORDPRESS
BUT THERE IS A SOLUTION
DEPENDENCY MANAGEMENT

20. DEPENDENCY MANAGEMENT
{
"name": "epwp/wordpress",
"type": "project",
"require": {
"php": ">=7.0",
"johnpbloch/wordpress": "4.6.1"
},
"extra": {
"wordpress-install-dir": "custom/path"
}
}

21. 1 . 2 . 3
MAJOR . MINOR . PATCH
BC-BREAKS . FEATURES . FIXES
SEMVER
DEPENDENCY MANAGEMENT

22. ~ 1 . 2 . 3
^ 1 . 2 . 3
VERSIONING
DEPENDENCY MANAGEMENT

23. ROOTS.IO/BEDROCK
BEDROCK
BEDROCK

24. BEDROCK
├── composer.json
├── config
│ ├── application.php
│ └── environments
│ ├── development.php
│ ├── staging.php
│ └── production.php
├── vendor
└── web
├── app
│ ├── mu-plugins
│ ├── plugins
│ ├── themes
│ └── uploads
├── wp-config.php
├── index.php
└── wp

25. NEVER HARDCODE OR STORE VARIABLES
WP-CONFIG CHANGES
BEDROCK

26. BEDROCK
/**
* Use Dotenv to set required environment variables
* and load .env file in root
*/
$dotenv = new DotenvDotenv($root_dir);
if (file_exists($root_dir . '/.env')) {
$dotenv->load();
$dotenv->required(
[
'DB_NAME', 'DB_USER', 'DB_PASSWORD',
'WP_HOME', 'WP_SITEURL'
]
);
}

27. OPS AUTOMATION

28. PROVISIONING, CONFIGURATION & DEPLOYMENT
ANSIBLE
AUTOMATION

29. IN YAML FORM
PLAYBOOKS
AUTOMATION

30. AUTOMATION
---
- hosts: webservers
vars:
http_port: 80
max_clients: 200
remote_user: root
tasks:
- name: ensure apache is at the latest version
yum: name=httpd state=latest
- name: write the apache config file
template: src=/srv/httpd.j2 dest=/etc/httpd.conf
notify:
- restart apache
- name: ensure apache is running (and enable it at boot)
service: name=httpd state=started enabled=yes
handlers:
- name: restart apache
service: name=httpd state=restarted

31. DOCS.ANSIBLE.COM/ANSIBLE/
MODULES
AUTOMATION

32. COMMUNITY ROLE MANAGER
ANSIBLE GALAXY
AUTOMATION

33. AUTOMATION
- name: composer
src: geerlingguy.composer
version: 1.2.7
- name: ntp
src: resmo.ntp
version: 0.3.0
- name: logrotate
src: nickhammond.logrotate
version: fc3ea4

34. FOR SENSITIVE DATA ENCRYPTION
ANSIBLE VAULT
AUTOMATION

35. AUTOMATION
vi file_with_passwords.yml
==
ansible-vault edit file_with_password.yml

36. .VAULT_PASS NOT UNDER VERSION CONTROL
KEEP YOUR KEY PRIVATE
AUTOMATION

37. ANSIBLE-PLAYBOOK DEPLOY.YML -E ENV=<ENV> -E SITE=<SITE>
DEPLOY WITH CONFIDENCE
AUTOMATION

38. ROOTS.IO/TRELLIS
TRELLIS
TRELLIS

39. FOR LOCAL DEVELOPMENT
VAGRANT
AUTOMATION

40. § Nginx
§ MariaDB
§ PHP 7.0
§ Composer
§ WP-CLI
§ LetsEncrypt SSL
§ Page caching like Varnish
§ Data caching in memory
§ Ops best practices
TRELLIS

41. TRELLIS
epwp.com/ # → Root folder for the project
├── trellis/ # → Automation, provision, deployment
└── site/ # → A Bedrock-based WordPress site
└── web/
├── app/ # → WordPress content directory
└── wp/ # → WordPress core (don't touch!)

42. DIY LET’S BOOTSTRAP THIS!

43. EXERCISE
gist.github.com/jvandijk/
mkdir epwp.com
cd epwp.com
git clone https://github.com/jvandijk/epwp-trellis.git trellis
cd trellis && git fetch origin
git checkout step-1-tutorial-init
git clone https://github.com/jvandijk/epwp-site.git site
cd site && git fetch origin
git checkout step-1-tutorial-init
vagrant destroy if you prepared the tutorial

44. EXERCISE
edit group_vars/development/wordpress_sites.yml
- change example domain into ‘epwp.com’
- introduce the WP admin_user ‘epwp_user’
- change the admin email to ‘me@epwp.com'
- enable self-signed SSL
edit group_vars/development/vault.yml
- make the WP admin pass ‘epwp_pass’
- change the database password to ‘dbpassword_development’
OPTIONALLY:
- create vault/.vault_pass with a ‘<unique key>’ inside
- encrypt with ansible-vault group_vars/development/vault.yml

45. IF IT DIDN’T WORK OUT FOR YOU
cd trellis
git reset --hard
git checkout step-3-enable-ssl
vagrant destroy & vagrant up

46. DEVOPS CLI FRONTENDSEARCH

47. FASTER ADMINISTRATION OF WORDPRESS
WP CLI
WP-CLI

48. WP-CLI
vagrant@epwp:/srv/www/epwp.com/current$ wp cli info
PHP binary: /usr/bin/php7.0
PHP version: 7.0.11-2+deb.sury.org~xenial+2
php.ini used: /etc/php/7.0/cli/php.ini
WP-CLI root dir: phar://wp-cli.phar
WP-CLI packages dir: /home/vagrant/.wp-cli/packages/
WP-CLI global config:
WP-CLI project config: /srv/www/epwp.com/current/wp-cli.yml
WP-CLI version: 0.24.1

49. TO EXECUTE DIRECT DATABASE QUERIES
WP DB
WP-CLI

50. MIGRATE YOUR DATA
WP EXPORT & IMPORT
WP-CLI

51. MODIFY CONTENT
WP SEARCH-REPLACE
WP-CLI

52. INSTALL, CHECK-UPDATE, MULTISITE CHANGE
WP CORE

53. INSTALL, CHECK-UPDATE, MULTISITE CHANGE
WP CORE

54. `WP PACKAGE BROWSE` FOR MORE OSS CLI EXTENSIONS
WP CLI PACKAGES
WP-CLI

55. SEARCH, LIST, INSTALL, UPDATE, ACTIVATE THEMES
WP THEME
SCAFFOLDING

56. GENERATE CODE ACCORDING TO BEST PRACTICES
WP SCAFFOLD
SCAFFOLDING

57. GENERATE CODE FOR PLUGIN
WP SCAFFOLD PLUGIN <SLUG>
SCAFFOLDING

58. GENERATE CODE FOR A CUSTOM POST TYPE
WP SCAFFOLD POST-TYPE <SLUG>
SCAFFOLDING

59. GENERATE THE CODE FOR A TAXONOMY
WP SCAFFOLD TAXONOMY <SLUG> —POST-TYPES=<A,B>
SCAFFOLDING

60. IMPLEMENT PLUGIN
<?php
/*
Plugin Name: My WP extension
Plugin URI: https://www.a-wp-site.com/
Description: WordPress extension
Version: 1.0.0
Author: Enrise
Author URI: https://www.enrise.com
*/
require_once('src/Bootstrap.php');
new Bootstrap::getInstance();

61. IMPLEMENT PLUGIN
public static function getInstance() {
if ( ! ( self::$instance instanceof self ) ) {
self::$instance = new self();
}
return self::$instance;
}
protected function __construct() {
add_action( 'plugins_loaded', [ $this, 'doYourThing' ], 100 );
}
public function doYourThing() {
// trigger your scaffolded code from here
return;
}

62. LIST, SEARCH, INSTALL, ACTIVATE, UPDATE
WP PLUGIN
3RD PARTY PLUGIN

63. LIST, SEARCH, INSTALL, ACTIVATE, UPDATE
WP PLUGIN
3RD PARTY PLUGIN

64. TO LOCK ON A VERSION
COMPOSER REQUIRE WPACKAGIST-PLUGIN/SLUG
3RD PARTY PLUGIN

65. ADVANCEDCUSTOMFIELDS.COM
LET’S EXTEND THAT CUSTOM POST TYPE
CUSTOM FIELDS

66. COMPOSER REQUIRE WPACKAGIST-PLUGIN/ADVANCED-CUSTOM-FIELDS
ADVANCED CUSTOM FIELDS
CUSTOM FIELDS

67. WILL BE STORED IN DATABASE
DESIGN CUSTOM FIELD ADDITIONS IN THE ADMIN
CUSTOM FIELDS

68. UNFORTUNATELY NO DIRECT SCAFFOLDING
EXPORT CUSTOM FIELDS TO PHP
CUSTOM FIELDS

69. DIY LET’S CREATE A CONFERENCE SITE

70. EXERCISE
cd site
git checkout step-2-build-the-theme
go to /srv/www/epwp.com/current
wp theme activate epwp
wp plugin activate —all
Check:
- https://epwp.com/speaker
- https://epwp.com/session

71. EXERCISE
Scaffold a new plugin named ‘epwp’
Activate the plugin
Scaffold and add post type ‘session’
Scaffold and add post type ‘speaker’
Scaffold and add taxonomy ‘location’ linked to ‘session’
Check again:
- https://epwp.com/speaker
- https://epwp.com/session

72. Install wpackagist-plugin/advanced-custom-fields
Install wpackagist-plugin/acf-field-date-time-picker
In admin create & export fields for ‘speaker’ and ‘session’
TEXT
DATE_TIME_PICKER
DATE_PICKER
RELATIONSHIP

73. IF IT DIDN’T WORK OUT FOR YOU
cd site
git reset --hard
git checkout step-6-update-admin-fields

74. DEVOPS CLI FRONTENDSEARCH

75. WE NEED SOME DATA!
SMALL INTERMEZZO
FAKE DATA

76. GITHUB.COM/FZANINOTTO/FAKER
FAKER
FAKE DATA

77. EXPRESSIVE FIXTURES GENERATOR
ALICE
FAKE DATA

78. WP PACKAGE INSTALL TRENDWERK/FAKER
WP CLI FAKER
FAKE DATA

79. FAKE DATA
TrendwerkFakerPost:
session{41..80}:
post_content: <realText(600, 4)>
post_title: '<sentence()>'
post_type: 'session'
post_date_gmt: <(gmdate('Y-m-d H:i:s', (time() - (rand(1, 5) * 86400) + (
rand(1, 8) * 3600))))>
meta:
date: <(gmdate('Ymd', strtotime(@self->post_date_gmt)))>
start_time: <(strtotime(@self->post_date_gmt) - (strtotime(@self->
post_date_gmt) % 3600))>
# end the session an hour later
end_time: <(3600 + strtotime(@self->post_date_gmt) - (strtotime(@self->
post_date_gmt) % 3600))>
speakers: <(array((string)((int)$this->valueForCurrent - 40 + 10)))>
terms:
location: <terms('location', 1)>

80. WP FAKER FAKE YOUR-FILE.YML
GENERATE THE DATA
FAKE DATA

81. DISTRIBUTED FULL TEXT SEARCH ENGINE
ELASTICSEARCH
SEARCH

82. CONSISTENCY - AVAILABILITY - PARTITION TOLERANCE
NOSQL DATABASE
SEARCH

83. HTTP JSON API
RESTFUL INTERFACE
SEARCH

84. SEARCH
RDBMS ELASTICSEARCH
DATABASE INDEX
TABLE TYPE
ROW DOCUMENT

85. DEFINING YOUR STRUCTURE
MAPPING
SEARCH

86. "your-index" : {
"mappings" : {
"post" : {
"properties" : {
"post_content" : { "type" : "string" },
"post_date" : {
"type" : "date",
"format" : "YYYY-MM-dd HH:mm:ss",
"include_in_all" : false
},
"post_title" : {
"type" : "string",
"store" : true,
"fields" : {
"raw" : {
"type" : "string",
"index" : "not_analyzed"
},
"sortable" : {
"type" : "string",
"analyzer" : "ewp_lowercase"
}
},
...

87. ANALYZED VS NOT ANALYZED
SEARCH

88. COMPOSER REQUIRE WPACKAGIST-PLUGIN/ELASTICPRESS
ELASTICPRESS
SEARCH

89. SEARCH
define('EP_HOST', env('EP_HOST'));
define('ES_SHIELD', env('ES_SHIELD'));
wp elasticpress index --setup

90. SEAMLESS FOR WORDPRESS SEARCH
INTEGRATES WITH WP_QUERY
SEARCH

91. SEARCH
new WP_Query( [
'ep_integrate' => true,
'post_type' => 'post',
'posts_per_page' => 20,
] );

92. DIY LET’S ENHANCE THE SEARCH

93. EXERCISE
cd site
git checkout step-7-add-fake-data
define some session locations in the wp admin
go to /srv/www/epwp.com/current
wp package install trendwerk/faker
wp db query "show create table wp_posts"
edit the post ID
wp faker fake faker.yml
Check:
- https://epwp.com/speaker
- https://epwp.com/session

94. EXERCISE
cd site
git checkout step-7-add-fake-data
Install wpackagist-plugin/elasticpress
Create a define ES_SHIELD (user:pass)
Create a define EP_HOST (your-domain.com)
go to /srv/www/epwp.com/current
enable the plugin
wp elasticpress index --setup
Search for a ‘location’ or just make a typo

95. IF IT DIDN’T WORK OUT FOR YOU
cd site
git reset --hard
git checkout step-8-add-elasticsearch-support
cd trellis
git checkout step-5-add-elasticsearch-support

96. DEVOPS CLI FRONTENDSEARCH

97. DECOUPLED CMS
GOING HEADLESS

98. NO MONOLITH STRATEGY
SCALING UP

99. TRANSPILE TO SUPPORT OLDER TECHNOLOGIES
BLEEDING EDGE JAVASCRIPT & CSS

100. START USING IT TODAY!
ECMASCRIPT 2016

101. NPM INSTALL ESLINT —SAVE-DEV
ESLINT

102. NPM INSTALL ESLINT-CONFIG-AIRBNB —SAVE-DEV
ESLINT-CONFIG-AIRBNB

103. .ESLINTRC
{
"root": true,
"extends": "airbnb",
"globals": {
"wp": true
},
"parser": "babel-eslint",
"rules": {
"react/jsx-filename-extension":
[
1, { "extensions": [".js", ".jsx"] }
],
}
}

104. TRANSPILE DOWN TO ECMASCRIPT 5
BABEL JS

105. MODULE BUNDLER
WEBPACK

106. COMPONENT BASED STRATEGY
src/components/blocks/Logo/
├── Logo.css
├── Logo.js
├── package.json
└── logo.svg

107. EXTRACT-TEXT, FILE-LOADER, URL-LOADER
WEBPACK PLUGINS

108. AUTO RELOAD ON EVERY CODE CHANGE
WEBPACK HOT MIDDLEWARE

109. DESIGN IN MULTIPLE BROWSERS SIMULTANEOUS
BROWSER SYNC

110. DEVELOPER EXPERIENCE

111. COMPLETE DECOUPLE THE FRONTEND
WORDPRESS REST API

112. COMPOSER REQUIRE WP-API/WP-API
WORDPRESS REST API

113. ARE YOU READY?
NOW LET’S START SETTING UP

114. SERIOUSLY?

115. LET’S NOT REINVENT THE WHEEL..
SERIOUSLY?

116. ROOTS.IO/SAGE
SAGE

117. § Sass for stylesheets
§ ES6 for JavaScript
§ Webpack for compiling assets, optimizing images, and
concatenating and minifying files
§ BrowserSync for synchronized browser testing
§ Bootstrap 4 for a front-end framework
§ Template inheritance
SAGE

118. TEMPLATE STRUCTURE
$ tree templates
templates
├── 404.php
├── index.php
├── layouts
│ └── base.php
├── page.php
├── partials
│ ├── content-page.php
│ ├── content-single.php
│ ├── content.php
│ ├── entry-meta.php
│ ├── footer.php
│ ├── head.php
│ ├── header.php
│ ├── page-header.php
│ └── sidebar.php
├── single.php
└── template-custom.php

119. composer create-project roots/sage your-theme-name 9.0.0-alpha.3

120. ./DEPLOY.SH PRODUCTION EPWP.COM
RUNNING IN PRODUCTION
DEPLOY

121. § initialize - creates the site directory structure
§ update - clones the Git repo onto the remote server
§ prepare - prepares the files in the new release path
§ build - builds the new release
§ share - symlinks shared folders to new release
§ finalize - finalizes the deploy by updating the symlink
ADD YOUR DEPLOY HOOKS IN DEPLOY.YML

122. DEVOPS CLI FRONTENDSEARCH

123. 20162016