Our Blog

Themes and plugins available for WordPress customization are perhaps the two most essential parts of the CMS. Yes, it is the easy handling, integrated and personalized option under the theme pallet which gave WordPress its celebrity status. Currently, the platform is thriving in all the spheres of content management with its add-on properties day by day.

Currently, there are around 90,000 different free or custom themes available on the platform which a simple .php extension would support. However, the platform is working towards increasing the number giving one of its kind personalized themes and templates when we convert websites to WordPress.

 That’s where Gulp comes into the spectrum. The building tool is a key towards giving all the users an easy and quick way to optimize theme’s images and templates, JS’ concatenation, processes LESS/ sass code efficiently. The tools are so easy to comprehend that even an owner knowing the basics of Codex and Javascript would easily customize and process a theme using WordPress without intricate coding.

UNDERSTANDING THEME DEVELOPMENT FIRST

Several WordPress experts have said that theme development requires the basics of text editor and graphics package. However, with the advent of Gulp, the content management platform has seen a new and revolutionary toolset offering the fastest and easily accessible changes in the core of themes and its graphical structure.

Here are some of the tasks theme development using Gulp performs with zero difficulties:

•     Copying the new PHP theme files with zero core changes.
•     Optimization of Images
•     Compilation of SCSS files into a mini bundle of one CSS file
•     Merger and order of Javascript files and its debugging
•     Auto-refresh once the new theme is optimized.

 GULP

 After going through all the simplified activities mentioned above, it would be easy to understand the role of Gulp as the fastest medium of theme development. Gulp in the simplest word is a build toolkit system based on JavaScript which fetches your source files and changes them into their optimized version whenever you use it to convert websites to WordPress themes. The thus created theme like any other plugins themes contains files representing posts, pages, indexes, categories, errors and tags.

 ADVANTAGES OF THEME DEVELOPMENT USING GULP

 The theme files created using Gulp would be managed within a single project folder and will be repository without hampering the pre-existing built or WordPress theme folders.

The build themes would contain only the files it needs.

Gulp and its plugins cannot be copied to a production server which sometimes is a great threat to the security implication.

INSTALLING GULP FOR YOUR PROJECTS

 The primary step for using Gulp is to install the build system into your new Project using the steps given below. Installation is quite easy and can be done even by an amateur owner knowing essential Codex or JavaScript.

Steps:

1.   Install Node.js into your new Project.
2.   Install Gulp globally using the code: npm install gulp-cli -g
3.   Create and Navigate the new project folder into mkdir mytheme and then to cd mytheme.
4.   Start your Project using: npm init.

 CODE FOR GULP CONFIGURATION

Once the new file is created using gulpfile.js, you need to configure this before starting. Just copy the configuration code given below into the root of the source folder.

// Gulp.js configuration

‘use strict’;

const

  // source and build folders

  dir = {

src : ‘src/’,

build : ‘/var/www/wp-content/themes/mytheme/’

  },

  // Gulp and plugins

  gulp = require(‘gulp’),

  gutil = require(‘gulp-util’),

  newer = require(‘gulp-newer’),

imagemin = require(‘gulp-imagemin’),

  sass = require(‘gulp-sass’),

  postcss = require(‘gulp-postcss’),

deporder = require(‘gulp-deporder’),

  concat = require(‘gulp-concat’),

stripdebug = require(‘gulp-strip-debug’),

  uglify = require(‘gulp-uglify’)

;

// Browser-sync

var browsersync = false;

// PHP settings

const php = {

  src : dir.src + ‘template/**/*.php’,

  build : dir.build

};

// copy PHP files

gulp.task(‘php’, () => {

  return gulp.src(php.src)

    .pipe(newer(php.build))

    .pipe(gulp.dest(php.build));

});

 USING GULP BUILD TOOLS WITH WORDPRESS

As emphasized by several WordPress experts, the preliminary function of any build tool is to provide needed support to the themes customization. The prime functions needed for optimization are modifying an existing theme file or the creation of a new and stand-alone theme file altogether.

 Most of the build tools we use are unfinished and require further modification. Hence, while using Gulp build options, the users are often given two different options for building different SASS themes with final CSS support.

 The Options are:

•     Supply development files inside the Project
•     Omit all development-related files

SUPPLYING DEVELOPMENT FILES 

1.   This option is best for the open-source projects in which all the development files are expected to reside within the central Project.
2.   Best suited for the developers as the option gives them a multitude of variations along with the freedom to extend their development work.
3.   Might be a bit confusing for the beginners as the development files require support files along with them.

 OMITTING DEVELOPMENT FILES

1.   The files in this option reside outside the final deliverable folder and make the theme download easier.
2.   The downloading files are not unnecessarily large or bulky provided you use fewer templates or PHP files.
3.   You have to work with the original file should you choose this option. The files, once altered, need a great deal of effort before reversal.

 CONCLUSION

 Gulp plugins are the easiest way of improving your themes store and modifying the new face of content management systems. No matter how boring or mundane your site appears, you can always automate it using Gulp build themes with minimal efforts.