Wordpress beyond blogging

Wordpress, Beyond Blogging
Use it as a framework

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

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

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

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

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

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

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
⚠

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

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

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

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');

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

Is WP a Framework?
What’s missing

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 );
}

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

How to write a WP
theme like a boss

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

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

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/

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/

single-project.twig
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

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

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 %}

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

What’s new &  
what’s to come

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"
},
…

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

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

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

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

Wordpress beyond blogging

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Wordpress beyond blogging

Similaire à Wordpress beyond blogging (20)

Dernier

Dernier (20)

Wordpress beyond blogging