Magic build project on WordPress using package managers and a file

Today I want to share with Honorable Habr's audience my approach to organizing the automatic assembly of the project on WordPress, which significantly saves time when creating new sites.

Prerequisites

And so, you make WordPress sites, and with each new project you have to go to wordpress.org , download Wordpress itself from there, and a set of plugins that you use all the time. Or you install the plugins directly from the admin panel or worse - copy them from the directory of the previous site. I have always disliked it, somehow not elegantly or not, does not satisfy aesthetic needs. It also takes a little, but still time. Therefore, I wondered how this process could be improved. I downloaded everything I needed, put it neatly in my daddy and executed “git init” and “git push”. Well, now I have a Bitbucket repository where my WP build is stored with everything I need. From this point on, at the beginning of the development process, you can run git clone and get something ready for work. The way pleased me not long - the "flaws" were revealed. Namely:
')

• excessive use of the repository (all sources of plug-ins and the CMS itself are stored);
• the old version of everything is always kept (you can of course periodically update it, but laziness);
• I want to keep SCSS / SASS / LESS sources in the same repository, non-minified JS-code and other important components, which in theory should not intersect with the production-version of the project;

Here, I and my laziness consulted and came to the conclusion that when starting work on a new site, we are ready to waste energy on not more than entering one (maximum two) console commands to organize everything and everything and go directly to the development process. Then she thought lazy apart from me and continued: “and that everything would be stored right away in Git, and that it would not be necessary to roll out new versions (initially, they say, new ones should be), and that it would be possible on the server to pull correctly (you it is to serve everything), and in general everything would work by itself, and proceed quickly, but for the time being I will rest. ”

Satisfied Wishlist laziness

Initially, I formalized the tasks into a small list:

1. automate the installation of WordPress core and current versions of plugins migrating from project to project;
2. implement the dependence of the project settings on the server environment;
3. to separate the source code of the client from the project;
4. automate the assembly of the client part;
5. organize non-redundant storage in a Git repository.

And started to implement. For a start, I went to read the WP documentation and found there a wonderful thing that allows you to separate the CMS core from what the developer is changing. Sketched on this occasion the following project structure:

content/ wp/ index.php wp-config.php 

The “wp” directory contains the WordPress core files, the “content” folder for themes, plugins, language versions, etc., “wp-config.php” is the standard WP settings file, and in “index.php”, following the I put the following in the documentation:

 define('WP_USE_THEMES', true); require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' ); 

Launched on the server, checked, ok, works. Now you need to make it so that the latest version of WP is downloaded. For this, I used Composer (how to install it, you can read it here ). All the files that I created earlier I placed in the folder “app”, in order to bring all the service files to a level higher than the executable “index.php”. In the future, my site will be launched from this directory (do not forget to correct the host settings for your server). And the “wp” folder has been cleared of the entire contents. At the root of the project I placed the file “composer.json” with the following contents:

 { "require": { "php": ">=5.4", "johnpbloch/wordpress": "*", }, "extra": { "wordpress-install-dir": "app/wp", } } 

“Johnpbloch / wordpress” is a fork of WP suitable for installation via Composer, and “wordpress-install-dir” points to the installation directory of the CMS kernel. Writing in the console:

 composer install 

I made sure that everything works. Fresh WordPress downloaded in “app / wp”. What about plugins? Everything is fine with them, thanks to the wpackagist.org project , they can also be pulled through Composer. To do this, you only need to slightly modify “composer.json”:

 { "repositories":[ { "type":"composer", "url":"https://wpackagist.org" } ], "require": { "php": ">=5.4", "johnpbloch/wordpress": "*", "wpackagist-plugin/rus-to-lat-advanced": "*", "wpackagist-plugin/advanced-custom-fields": "*", "wpackagist-plugin/all-in-one-seo-pack": "*", "wpackagist-plugin/google-sitemap-generator": "*", "wpackagist-plugin/contact-form-7": "*", "wpackagist-plugin/woocommerce": "*", "wpackagist-plugin/saphali-woocommerce-lite": "*" }, "extra": { "wordpress-install-dir": "app/wp", "installer-paths": { "app/content/plugins/{$name}/": ["vendor:wpackagist-plugin"], "app/content/themes/{$name}/": ["vendor:wpackagist-theme"] } } } 

In the “repositories” section, the address of “wpackagist” is specified, in the “installer-paths” section, the paths to which plugins and themes will be installed are specified, and in the “require” section WP-plugins are added as “wpackagist-plugin / {{plugin_name} } ". In “wpackagist”, almost all wordpress.org plugins are available, the availability of plugins can be viewed in the search on the site wpackagist.org .

Doing:

 composer update 

I saw how all the necessary plugins appeared in the app / content / plugins directory. Now you need to deal with the settings, I remind you that the task is to make the settings of the database and debag dependent on the development environment, on the local server, its own, on the battle one. To do this, squeeze them into a separate file “local-config.php”:

 define( 'DB_NAME', '%%DB_NAME%%' ); define( 'DB_USER', '%%DB_USER%%' ); define( 'DB_PASSWORD', '%%DB_PASSWORD%%' ); define( 'DB_HOST', '%%DB_HOST%%' ); // Probably 'localhost' ini_set( 'display_errors', true ); define( 'WP_DEBUG_DISPLAY', true ); define( 'AUTH_KEY', 'put your unique phrase here' ); define( 'SECURE_AUTH_KEY', 'put your unique phrase here' ); define( 'LOGGED_IN_KEY', 'put your unique phrase here' ); define( 'NONCE_KEY', 'put your unique phrase here' ); define( 'AUTH_SALT', 'put your unique phrase here' ); define( 'SECURE_AUTH_SALT', 'put your unique phrase here' ); define( 'LOGGED_IN_SALT', 'put your unique phrase here' ); define( 'NONCE_SALT', 'put your unique phrase here' ); 

and change “wp-config.php” as follows:

 if ( file_exists( dirname( __FILE__ ) . '/local-config.php' ) ) { define( 'WP_LOCAL_DEV', true ); include( dirname( __FILE__ ) . '/local-config.php' ); } else { define( 'WP_LOCAL_DEV', false ); define( 'DB_NAME', '%%DB_NAME%%' ); define( 'DB_USER', '%%DB_USER%%' ); define( 'DB_PASSWORD', '%%DB_PASSWORD%%' ); define( 'DB_HOST', '%%DB_HOST%%' ); // Probably 'localhost' ini_set( 'display_errors', 0 ); define( 'WP_DEBUG_DISPLAY', false ); define( 'AUTH_KEY', 'put your unique phrase here' ); define( 'SECURE_AUTH_KEY', 'put your unique phrase here' ); define( 'LOGGED_IN_KEY', 'put your unique phrase here' ); define( 'NONCE_KEY', 'put your unique phrase here' ); define( 'AUTH_SALT', 'put your unique phrase here' ); define( 'SECURE_AUTH_SALT', 'put your unique phrase here' ); define( 'LOGGED_IN_SALT', 'put your unique phrase here' ); define( 'NONCE_SALT', 'put your unique phrase here' ); } 

Now, if there is a file "local-config.php", the settings will be picked up from it. This file needs to be added to ".gitignor" (why do we need passwords from the database in the repository?). It's time to enter the data for access to the database in the “local-config.php”, start the WordPress installation procedure and visit the admin area.

In the admin, you need to visit the section "Settings -> General" and correct the addresses there, as follows:



WordPress address with "/ wp" at the end, the site address without the "/ wp".

Great, you can use the site. I devoted the next stage to user styles and scripts (otherwise it’s somehow not logical, everything is collected on the server itself, but is it possible to manually download all jquery?). As a preparation, I edited the project structure:

 app/ content/ theme/ mytheme/ build/ index.php style.css wp/ index.php local-config.php wp-config.php src/ fonts/ js/ main.js scss/ style.ccss composer.json 

The “src /” folder stores source files of fonts, scripts and styles. Then they are collected using gulp , minified and added to the folder “app / content / theme / mytheme / build”. As a preprocessor for CSS, I use SCSS (how to install, I think everyone knows, but if not, here is the instruction ), to build JS - browserify . I considered it logical that client dependencies need to be tightened with nmp. The file "package.json" I got this:

 { "devDependencies": { "bourbon": "*", "bourbon-neat": "*", "browserify": "*", "fullpage.js": "*", "gulp": "*", "gulp-clean-css": "*", "gulp-concat": "*", "gulp-sass": "*", "gulp-sourcemaps": "*", "gulp-uglify": "*", "jquery": "*", "normalize-scss": "*", "vinyl-source-stream": "*" } } 

Apart from “devDependencies”, I didn’t fill in the sections, because I obviously don’t plan to publish this in npm. I am writing in the console:

 npm install 

I wait a couple of minutes and see that all the dependencies neatly appear in the “node_modules”. Cherry on the cake served as a file "gulpfile.js" with the following contents:

 'use strict'; var browserify = require('browserify'), source = require('vinyl-source-stream'), gulp = require('gulp'), sass = require('gulp-sass'), uglify = require('gulp-uglify'), cleanCSS = require('gulp-clean-css'), sourcemaps = require('gulp-sourcemaps'), sourcePath = './src/', buildPath = './app/content/themes/mytheme/build/'; //scss gulp.task('scss', function () { return gulp.src('./src/scss/style.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(buildPath + 'css')); }); gulp.task('scss:watch', function () { return gulp.watch(sourcePath + 'scss/**/*.scss', ['scss']); }); //js gulp.task('browserify', function() { return browserify(sourcePath + 'js/main.js') .bundle() .pipe(source('main.js')) .pipe(gulp.dest(buildPath + 'js')); }); gulp.task('browserify:watch', function () { return gulp.watch(sourcePath + 'js/**/*.js', ['browserify']); }); //fonts gulp.task('copy:fonts', function () { gulp.src(sourcePath + 'fonts/**/*', {base: sourcePath + 'fonts'}) .pipe(gulp.dest(buildPath + 'fonts')); }); //minify gulp.task('minify:js', ['browserify'], function(){ return gulp.src(buildPath + 'js/*.js') .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest(buildPath + 'js')) }); gulp.task('minify:css', ['scss'], function(){ return gulp.src(buildPath + 'css/*.css') .pipe(cleanCSS({compatibility: 'ie9'})) .pipe(gulp.dest(buildPath + 'css')); }); //task groups gulp.task('default', ['copy:fonts', 'scss', 'browserify']); gulp.task('watch', ['copy:fonts', 'scss:watch', 'browserify:watch']); gulp.task('production', ['copy:fonts', 'scss', 'browserify', 'minify:js', 'minify:css']); 

The “gulp” command will copy the fonts, compile SCSS, stick JS and put it all neatly into the build folder. “Gulp watch” does the same, but with each change of the file. “Gulp production” will additionally clean the files from comments and minify.

What is the result?

As a result, you do not need to repeat the above. I’ve put everything in handy on GitHub: https://github.com/IvanZhuck/kosher_wp_seeder .

To start, you need to clone the repository and execute the following commands (after adjusting the list of plug-ins and dependencies, if necessary):

 composer install npm install 

I and my laziness are happy, the projects began to start faster, and the work is more pleasant. Your questions and suggestions are waiting in the comments.