![7
โ Mirror of the WordPress plugin directory as a
Composer repository
The Composer way: WordPress Packagist
{
"extra": {
"installer-paths": {
"content/mu-plugins/{$name}/": [
"type:wordpress-muplugin"
],
"content/plugins/{$name}/": [
"type:wordpress-plugin"
],
"content/themes/{$name}/": [
"type:wordpress-theme"
]
}
}
}
{
"repositories": [
{
"type": "composer",
"url": "http://wpackagist.org"
}
]
}
1. Add the repository to your composer.json
2. Add the desired plugins and themes
3. Run
composer require wpackagist-plugin/contact-
form-7
Extra: customize installer paths
composer update](https://image.slidesharecdn.com/anewwaytodevelopwithwordpress-160803193043/85/A-new-way-to-develop-with-WordPress-7-320.jpg)
![14
PHP files are only concerned with
collating the required data
Theming with Twig and Timber: Templating files
<?php
/**
* The main template file.
*/
// set up page data
$data = Timber::get_context();
$data['posts'] = Timber::get_posts();
$data['page'] = 'home';
// render using Twig template index.twig
Timber::render('twig/index.twig', $data);
{% extends 'twig/base.twig' %}
{% block content %}
<!-- start the loop -->
{% for post in posts %}
{{ include( 'twig/content.twig', ignore_missing = true )
}}
{% else %}
{{ include( 'twig/content-none.twig' ) }}
{% endfor %}
{% if posts %}{{ function( 'bosco_paging_nav' ) }}{% endif %}
{% endblock %}
Timber methods to get the generic data and then renders
the index.twig template](https://image.slidesharecdn.com/anewwaytodevelopwithwordpress-160803193043/85/A-new-way-to-develop-with-WordPress-14-320.jpg)
A new way to develop with WordPress!
- 1. 1 A new way to develop with WordPress!
- 2. 2 1. Introduction 2. Classic WordPress workflow 3. The Composer way a. Overview b. Integrating with WordPress c. WordPress Packagist 4. Enter Bedrock a. Overview b. Working on your project c. PhpDotEnv d. Deploying your project e. Multisite 5. Theming with Twig and Timber a. Overview b. Templating files c. Bonus (Debug bar) Table of content 6. Developing plugins with Herbert a. Overview b. Basis 7. References
- 3. 3 A report on 1 july 2016 suggest that WordPress powers 26.6% of the internet. Introduction
- 4. 4 How to? 1. Download WordPress 2. Push WordPress using FTP 3. Install WordPress (generate wp-config.php) 4. Install plugins/themes using FTP or backend 5. Update manually plugins/themes Classic WordPress workflow Issues 1. Updating WordPress/plugins can break site 2. Manually keep track of WordPress and plugins/themes versions (on Git) 3. Deploys can be cumbersome (hours) 4. Configuring WordPress in multiple environments is difficult (wp-config.php, unversioned)
- 5. 5 Tools โ Git โ Composer โ WordPress Packagist Advantages โ Dependencies explicitly declared in a single place (composer.json) โ Installing/Updating handled by Composer โ Project locked onto specific versions โ Donโt need to include the actual 3rd party code in your version control repository The Composer way: Overview
- 6. 6 Dependencies โ WordPress itself โ Plugins โ Themes โ Private repos Structure The Composer way: Integrating with WordPress Composer.json โ auto-updating fork (syncs every 15 minutes with the official WP repo) that includes composer.json { "require": { "php": ">=5.4", "johnpbloch/wordpress": "~4.5" }, "extra": { "wordpress-install-dir": "wp" } } . โโโ wp โโโ wp-content โโโ index.php โโโ wp-config.php โ require johnpbloch/wordpress-core-installer
- 7. 7 โ Mirror of the WordPress plugin directory as a Composer repository The Composer way: WordPress Packagist { "extra": { "installer-paths": { "content/mu-plugins/{$name}/": [ "type:wordpress-muplugin" ], "content/plugins/{$name}/": [ "type:wordpress-plugin" ], "content/themes/{$name}/": [ "type:wordpress-theme" ] } } } { "repositories": [ { "type": "composer", "url": "http://wpackagist.org" } ] } 1. Add the repository to your composer.json 2. Add the desired plugins and themes 3. Run composer require wpackagist-plugin/contact- form-7 Extra: customize installer paths composer update
- 8. 8 Features โ Better folder structure โ Dependency management with Composer โ Easy WordPress configuration with environment specific files โ Environment variables with Dotenv โ Autoloader for mu-plugins (use regular plugins as mu-plugins) โ Enhanced security (separated web root and secure passwords with wp-password-bcrypt) Requirements โ PHP >= 5.6 โ Composer Enter Bedrock: Overview
- 9. 9 Enter Bedrock: Working on your project Installation 1. composer create-project roots/bedrock 2. Copy .env.example to .env 3. Vhost => /path/to/site/web/ 4. http://example.com/wp/wp-admin . โโโ config โ โโโ application.php โ โโโ environments โ โโโ development.php โ โโโ production.php โ โโโ staging.php โโโ vendor โโโ web โ โโโ app โ โ โโโ mu-plugins โ โ โโโ plugins โ โ โโโ themes โ โ โโโ uploads โ โโโ wp โ โโโ wp-config.php Folder structure of Bedrock
- 10. 10 Configuration and environment variables Enter Bedrock: PhpDotEnv DB_NAME=database_name DB_USER=database_user DB_PASSWORD=database_password DB_HOST=database_host WP_ENV=development WP_HOME=http://example.com WP_SITEURL=${WP_HOME}/wp # Generate your keys here: https://roots.io/salts.html AUTH_KEY='generateme' SECURE_AUTH_KEY='generateme' LOGGED_IN_KEY='generateme' NONCE_KEY='generateme' AUTH_SALT='generateme' SECURE_AUTH_SALT='generateme' LOGGED_IN_SALT='generateme' NONCE_SALT='generateme' Stage Switcher โ A WordPress plugin that allows you to switch between different environments from the admin bar. โ https://roots.io/plugins/stage-switcher/ Installation composer require roots/wp-stage-switcher
- 11. 11 How to? Enter Bedrock: Deploying your project Migrating an existing project to Bedrock 1. Install Bedrock 2. Configure WordPress 3. Install plugins/themes with Composer composer install
- 12. 12 Features โ Better folder structure โ Dependency management with Composer โ Easy WordPress configuration with environment specific files โ Environment variables with Dotenv โ Autoloader for mu-plugins (use regular plugins as mu-plugins) โ Debug Bar plugin โ Developer plugin โ Stage Switcher plugin โ MultisiteDirectoryResolver: filters that correct directory paths โ Koodimonni composer lang support Installation Enter Bedrock: Multisite composer create-project gwa-bedrock-multisite- skeleton
- 13. 13 Advantages Of Using A Templating Language 1. Concise 2. Template orientated 3. Full-featured 4. Easy to learn 5. Extensibility 6. Fast Theming with Twig and Timber: Overview Timber presentation 1. Integrates the Twig engine into WordPress 2. Creates a foundation WordPress data set 3. Handles the rendering of Twig templates Installing Timber composer require wpackagist-plugin/timber- library
- 14. 14 PHP files are only concerned with collating the required data Theming with Twig and Timber: Templating files <?php /** * The main template file. */ // set up page data $data = Timber::get_context(); $data['posts'] = Timber::get_posts(); $data['page'] = 'home'; // render using Twig template index.twig Timber::render('twig/index.twig', $data); {% extends 'twig/base.twig' %} {% block content %} <!-- start the loop --> {% for post in posts %} {{ include( 'twig/content.twig', ignore_missing = true ) }} {% else %} {{ include( 'twig/content-none.twig' ) }} {% endfor %} {% if posts %}{{ function( 'bosco_paging_nav' ) }}{% endif %} {% endblock %} Timber methods to get the generic data and then renders the index.twig template
- 15. 15 Letโs have a look at the base template Theming with Twig and Timber: Templating files {% import 'twig/macros.twig' as macros %} {{ function( 'get_header' ) }} <div id="primary" class="content-area"> <div id="main" class="site-main" role="main"> {% block content %}{% endblock %} </div><!-- #main --> </div><!-- #primary --> {{ function( 'get_sidebar' ) }} {{ function( 'get_footer' ) }} OK, But PHP And Twig? Isnโt That Doubling-Up? 1. Checking is_singular 2. Checking page type: a. is_single b. is_page c. is_home d. is_category e. is_tag f. is_author // render using Twig template index.twig Timber::render('twig/' . $template . '.twig', $data);
- 16. 16 What is WordPress Debug Bar? โ debug menu to the admin bar โ Shows query, cache, other helpful debugging information How To install? https://wordpress.org/plugins/debug-bar/ Theming with Twig and Timber: Bonus (Debug Bar) What is Timber Debug Bar? โ current template name โ absolute location on your server โ full contents of the context How To install? https://wordpress.org/plugins/debug-bar-timber/ composer require wpackagist-plugin/debug-bar composer require wpackagist-plugin/debug-bar- timber
- 17. 17 Overview โ OOP โ MVC โ Twig template engine โ Composer โ Laravel Eloquent ORM Requirements โ PHP 5.4+ โ WordPress 3.4+ Installation Developing plugins with Herbert: Overview composer require getherbert/herbert-plugin Features โ Config โ Routes โ Panels โ Enqueue (JS + CSS scripts) โ Helper โ Controllers โ Views โ Input (GET; POST) โ API โ Shortcodes โ Activate & Deactivate โ Messages (notifications) โ Widgets โ Saving data (Eloquent ORM) โ Custom Post Types
- 18. 18 Naming your Plugin Developing plugins with Herbert: Basis . โโโ app โ โโโ Helper.php โ โโโ api.php โ โโโ enqueue.php โ โโโ panels.php โ โโโ routes.php โ โโโ shortcodes.php โ โโโ widgets.php โโโ resources โ โโโ assets โ โโโ views โโโ composer.json โโโ herbert.config.php โโโ plugin.php /** * @wordpress-plugin * Plugin Name: My Plugin * Plugin URI: http://plugin-name.com/ * Description: A plugin. * Version: 1.0.0 * Author: Author * Author URI: http://author.com/ * License: MIT */ Folder structure of your Plugin
- 19. 19 โ https://roots.io/using-composer-with-wordpress/ โ https://roots.io/bedrock/ โ https://roots.io/bedrock/docs/ โ https://roots.io/plugins/stage-switcher/ โ https://css-tricks.com/intro-bedrock-wordpress/ โ https://premium.wpmudev.org/blog/simplify-your-wordpress-theming-with-twig-and-timber/ โ http://getherbert.com โ https://github.com/studio24/wordpress-multi-env-config References