Pour ce second talk de la saison, nous allons nous intéresser à Wordpress et à son usage en tant que plateforme de développement. Cette présentation va vous donner les clés pour adapter votre workflow de développement avec ce CMS et vous permettre d’aller plus loin que son système de blogging de base.

1. Wordpress, Beyond Blogging
Use it as a framework

2. Julien Minguely
Web Developer @ Antistatique
jminguely
• eikon’s Alumni
• Jazz Student
• Wordpress Lover

3. Summary
• Use Case presentation
• Is Wordpress a Framework ?
• A good development workflow
• Latest features & the future of Wordpress
• Conclusion

4. Disclaimer
• I’ll feed you a lot of
information really fast
• Focus on the concepts
• Comeback later to analyse
the examples & copy/paste
the codes

5. Wordpress is not just for Bloggin
• Made for everyone
• Has many uses
• Modular set of tools
• The community is huge

6. A Use Case
Also known as « Your next agency portfolio »
Basic page Blog
Single
Articles
Competence
Project
Team

7. Is WP a Framework?

8. Is WP a Framework?
URL Rewriting
• Map human-readable
URL’s to content &
page in Wordpress
• Works with Page,
Taxonomy, Single
Post, Archive
https://codex.wordpress.org/Rewrite_API/add_rewrite_rule
https://codex.wordpress.org/Function_Reference/get_query_var
https://wordpress.org/plugins/rewrite-rules-inspector/
http://your-agency.com/contact
http://your-agency.com/team
http://your-agency.com/team/julien-minguely

9. Is WP a Framework?
Database interface
• Powerful database interface (WP_Query)
• Talk to the DB through abstraction
• Makes DB call more simple & secure
• Direct access to the DB via wpdb()
(Beware the nefarious SQL injection)
https://codex.wordpress.org/Class_Reference/WP_Query
https://codex.wordpress.org/Class_Reference/wpdb
⚠

10. Is WP a Framework?
Templating
• Filename based
• Target many parameters
(Post Type, Slug, ID, Template)
https://developer.wordpress.org/themes/basics/template-hierarchy/
Page
page-$slug.php
page-$id.php
page.php
index.php

11. Is WP a Framework?
User & security
• Login & Security routine
• Role & capabilities based
• Can be extended with custom
roles / caps
• Use it to restrict & allow your
client
! "
Admin Client

12. Is WP a Framework?
Administration panel
• Clean & accessible UI
• Wysiwyg editor
• Easy to use
(even for your client)

13. functions.php
Is WP a Framework?
Plugin API
• Hooks (Actions & Filter)
• Apply to the front/back-end
• Keeps everything external
to the core
https://codex.wordpress.org/Plugin_API
function notify_mail($post_ID) {
mail('bob@example.org',
'Blog updated',
'New blog on your-agency.com’);
return $post_ID;
}
add_action('publish_post', 'notify_mail');

14. Is WP a Framework?
Media management
• Media storage
• Supports photo/audio/video
• Upload by drag & drop
• Images size generation

15. Is WP a Framework?
What’s missing

16. What’s missing
Cache
• No caching solution are available out of the box
• Plugins (free & premium)
• Transients API
https://codex.wordpress.org/Transients_API
if ( false === ( $facebook_feed = get_transient( ‘facebook_feed’ ))) {
// It wasn't there, so regenerate the data and save the transient
$facebook_feed = your_incredible_facebook_crawler_method();
set_transient( facebook_feed, $facebook_feed, 12 * HOUR_IN_SECONDS );
}

17. What’s missing
I18n
(also known as internationalization)
• The backend is translated
• Wordpress list you all the solutions:
https://codex.wordpress.org/Multilingual_WordPress
• We use WPML (content & theme text translation)
https://codex.wordpress.org/I18n_for_WordPress_Developers

18. How to write a WP
theme like a boss

19. Let’s write a theme
Folder structure
• Based on bedrock
• Separate configs per environment
• Environment variables
https://roots.io/bedrock/
"## composer.json
"## .env
"## config
$ "## application.php
$ %## environments
$ "## development.php
$ "## staging.php
$ %## production.php
"## vendor
%## web
"## app
$ "## mu-plugins
$ "## plugins
$ "## themes
$ %## uploads
"## wp-config.php
"## index.php
%## wp

20. Let’s write a theme
Git for Code versionning
• Git track your code & help you collaborate with
other developer
• Track only the codebase
(and not the external vendors)
• We use GitHub & Git Flow
https://try.github.io

21. Let’s write a theme
Dependency manager
• Composer
• WP core & plugins
• $ composer install
• WPackagist for
WP plugin & theme
composer.json
...
require: {
"php": ">=5.6",
"composer/installers": "~1.0.12",
"vlucas/phpdotenv": "^2.0.1",
"oscarotero/env": "^1.0",
"roots/wp-password-bcrypt": "1.0.0",
"johnpbloch/wordpress": "^4.7",
"wpackagist-plugin/timber-library": "^1.2",
"wpackagist-plugin/simple-custom-post-order": "^2.3.2"
},
...
https://getcomposer.org/
https://wpackagist.org/

22. Let’s write a theme
The Post is the mother of all
• Everything in Wordpress is a Post
• Register custom post with
register_post_type()
• In our use case:
Team, Competence & Projects are CPT
https://codex.wordpress.org/Function_Reference/register_post_type
https://generatewp.com/post-type/

23. single-project.twig
Let’s write a theme
Twig
• Timber offers us the
Twig Template Engine
• Keeps the logical
part (PHP) separate
from the markup (HTML)
https://timber.github.io/docs/
<?php
use TimberTimber;
use LumberjackPostTypesProject;
$context = Timber::get_context();
$context['foo'] = 'Bar!';
$context[‘project’] = new Timber/Project();
Timber::render('single-project.twig', $context);
{% extends "base.twig" %}
{% block content %}
<h1 class="big-title">{{foo}}</h1>
<h2>{{project.title}}</h2>
<img src="{{project.thumbnail.src}}" />
<div class="body"> {{project.content}} </div>
{% endblock %}
single-project.php

24. Let’s write a theme
Fields
• Contains various information
relative to our post (or
page or custom posts)
• Stored as meta-data
https://codex.wordpress.org/Metadata_API
Member
• Nom
• Prénom
• Biographie
• Photo de couverture
• Date de naissance
• Adresse
• Couleur (HEX)
• Facebook / Instagram post
Project
• Date de réalisation
• Galerie
• Description
• Youtube embed video
• Team member collaborator

25. Let’s write a theme
Advanced Custom Fields (ACF)
• Helps us define the custom fields
• Powerful and easy-to-edit backend
• Edit the fields directly in the
backend of Wordpress
• Export your conf as a .json
https://www.advancedcustomfields.com/resources/
https://timber.github.io/docs/guides/acf-cookbook/
{% for image in project.galerie %}
<figure>
<img
src="{{ image.src }}"
alt="{{ image.alt }}" />
<figcaption>
{{ image.caption }}
</figcaption>
</figure>
{% endfor %}

26. Let’s write a theme
Continuous deployment
• Dev, Staging & Production
• Drag n drop files through
FTP IS NOT deployment
• Capistrano contains recipe
to maintain these environment
http://capistranorb.com
https://github.com/roots/bedrock-capistrano
https://github.com/morrislaptop/wordpress-capistrano
$ bundle exec cap -T
$ bundle exec cap staging deploy
$ bundle exec cap production deploy
$ bundle exec cap production
wordpress:db:push
$ bundle exec cap production
wordpress:uploads:pull

27. What’s new &
what’s to come

28. Rest API
• Since WP 4.4
• Access to WP through a
service
• Return a JSON
http://your-agency.com/wp-json/wp/v2/pages/
[{
"id": 3,
"date": "2017-11-12T23:48:48",
"date_gmt": "2017-11-12T22:48:48",
"guid": {
"rendered": ‘http://your-agency.com?page_id=3'
},
"modified": "2017-11-13T11:44:27",
"modified_gmt": "2017-11-13T10:44:27",
"slug": "homepage",
"status": "publish",
"type": "page",
"link": "http://your-agency.com",
"title": {
"rendered": "Homepage"
},
…

29. Gutenberg
• For WP 5.0
• Block layout
• Revamps the editor
• Written in React
• In Beta
https://github.com/WordPress/gutenberg

30. Moar features
4.2: Emoji
4.4: Responsive images (sources + srcset)
4.4: oEmbed
4.7: Thumbnail Previews for PDF Files
4.7: Custom Bulk Actions
0

31. What you should do now?
• Check out our starter theme
(https://github.com/antistatique/antistapress)
• Keep yourself informed about WP
• Attend a WordCamp once in your life
(https://central.wordcamp.org/schedule/)
• Learn to use Git, Composer, Yarn & Capistrano

32. Thanks 12
jminguely

33. Questions ?
• In a way, Wordpress is more than a
framework
• It’s a set of tools
• You gonna save time to focus on the
frontend
• Your client will be happy to edit
his website
Slideshare: bit.ly/meetup-wp-blogging
ExclusivE
ORIGINAL
QuestionsAnswers