Posted on

Category: Development

77 views

WordPress Development Workflow

  • Before a developer can build anything, you need to have a proper development environment setup on your computer. This means putting together all the necessary pieces to make the development process itself, as simple and straightforward as possible. There are about as many development environment setups as there are developers and everyone has their own personal preferences. Workflows can help you speed up development, because they automate your processes, and help you work faster and more efficiently by taking care of useful tasks.

    When I first started out I used grunt task runner with Visual Studio, then I switched operating systems moving away from the command line and purchased CodeKit as my processing tool and server.  I’ve updated again to a modern development workflow and having Parallels installed on my Mac means I can easily switch back and forth operating systems if and when required.

    Currently, I use Gulp task runner via the command line to compile CSS from Sass, optimise images, and run automated browser previews. The configuration set up for the task runner can be used for all my projects. To get the most out of the process all I need to do is edit 2 or 3 lines of code to get me up and running for all my projects.

    Overview of Development Environment

    • WordPress or any other project template files on your computer (WAMPServer or MAMP)
    • Virtual Hosts (optional)
    • Advanced IDE like Netbeans or simpler editor such as Sublime Text/Brackets/Atom
    • WordPress site populated with Theme Unit Test data
    • NPM and Gulp via Node
    • Various browsers including Chrome and Firefox for testing

    MAMP is a free application anyone can download and install and what you get with it is a local web server on your computer, that you can access through your web browser even without having internet access. My current setup for the Ports and Web Server is as follows below :

    These ports are the different ports inside the computer that are used by different applications to send communication back and forth. Each application you run on your computer needs its own port of doing any kind of network communication. When you initially download MAMP it sets these ports to Apache, 8888, Nginx, 7888, and MySQL 8889, but I’ve set them to the default values for most web traffic and servers.
    Apache, which is the default, the most common one you see on the web. The document root is where Apache goes to look for the files. Here, I’ve created a folder called Projects on my Desktop, where I place all my files and various websites.

    The central component of the development environment on your computer is your development application and while you can develop WordPress themes using a simple text editor, it’s much more efficient to use a full-scale IDE to do the job. An IDE or Integrated Development Environment is an advanced text editor that has additional features like function tracking, syntax highlighting, debugging, version control integration and so on. Currently, I switch between the Sublime Text Editor for small projects and tweaks and NetBeans for theme development. I downloaded the HTML/JavaScript version of NetBeans, which has all the features needed to develop WordPress themes:

    Note: You may need to have the Java SE Development kit installed. That goes for both Windows and Mac users. First, download and install the standalone Java SE Development kit directly from Oracle, then go to NetBeans and download and install the HTML/JavaScript version of NetBeans.

    Next is to set up a project that includes all of WordPress so the application can track all the code in your site and connect the functions together. To do that in NetBeans, first, go to,

    File -> create New Project -> PHP Application from Existing Sources:

    Then you have to point to the source folder. My current project is sitting under “Projects” and this is the folder that contains all of WordPress, so I’m pointing at the main folder. Click Open. The project name is automatically set to the project folder name. Next, choose to place the NetBeans metadata in a separate directory because otherwise, the NetBeans source files end up in your main project, and if you’re running version control on your whole project it gets really convoluted. So I usually check this box, make sure I know where the source files will end up.


    Next, you can set up a configuration option if you want NetBeans to be able to control your site to point the project at the project URL if you have one set up as a virtual host.
    So in my case, that is blog.test, leave the index files for WordPress as index.php, and then finally, click Finish:


    When you’re working with a WordPress theme, you often develop new functions, and you don’t necessarily remember where those functions are located. Using an IDE, all I have to do to get to the source of this function is on Windows, hold down CTRL, or on Mac, hold down CMD, and just click on the function name. This then automatically opens the file that contains the function, and then takes me directly to that function definition.

    In order for Gulp task runner to work, Node and NPM must be installed and running. I have a folder named “gulp-dev” which sits in my themes folder to make it independent of the current theme you’re working on:

     

    To configure the Gulp process to work with your project we do this with the package.json file. This is the configuration file NPM uses to understand what this project is all about. The settings can be changed to accommodate a different theme if you wanted to. Edit the name of the project to whatever the name of your project is and so on.

    {
      "name": "kays-blog",
      "version": "0.0.1",
      "description": "Accessible WordPress theme utilising flex layouts and modern development practices.",
      "main": "index.php",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/kiran-90/portfolio-blog"
      },
      "author": "Kirandeep Chahal",
      "license": "GPL-3.0",
      "bugs": {
        "url": "https://github.com/kiran-90/portfolio-blog/issues"
      },
      "homepage": "https://github.com/kiran-90/portfolio-blog#readme",
      "devDependencies": {
        "autoprefixer": "^6.5.2",
        "browser-sync": "^2.17.6",
        "gulp": "^3.9.1",
        "gulp-image": "^2.7.2",
        "gulp-jshint": "^2.0.2",
        "gulp-newer": "^1.3.0",
        "gulp-postcss": "^6.2.0",
        "gulp-sass": "^2.3.2",
        "gulp-sourcemaps": "^2.2.0",
        "jshint": "^2.9.4"
      }
    }

    Once the setup is done and the package.json file has been saved listing all of the dependencies that need to be installed in the project for everything to work, the next step is to run the installer and install all of these things. Open command prompt and navigate to the “gulp-dev” folder, so in my case that would be:

    /home/kirancha/public_html/wp-content/themes/gulp-dev

    Once inside the “gulp-dev” folder run the command npm install:

    Kays-MacBook-Pro:gulp-dev kiran$ npm install

    This process will take quite a bit of time and will create a new folder under “gulp-dev” called “node_modules”, which is managed automatically by node:

    Next is to configure the Gulpfile js. Since “gulp-dev” lives outside any of the themes, that means you can hook it to any theme you want to work with it by pointing the first variable, themename, to the name of the folder that contains the theme you want it to be applied to. In my case the theme is called “kays-blog” and the folder name is called “kays-blog”, so, therefore,themename is set to “kays-blog”:

    var themename = 'kays-blog';
    
    var gulp = require('gulp'),
    	// Prepare and optimize code etc
    	autoprefixer = require('autoprefixer'),
    	browserSync = require('browser-sync').create(),
    	image = require('gulp-image'),
    	jshint = require('gulp-jshint'),
    	postcss = require('gulp-postcss'),
    	sass = require('gulp-sass'),
    	sourcemaps = require('gulp-sourcemaps'),
    
    	// Only work with new or updated files
    	newer = require('gulp-newer'),
    
    	// Name of working theme folder
    	root = '../' + themename + '/',
    	scss = root + 'sass/',
    	js = root + 'js/',
    	img = root + 'images/',
    	languages = root + 'languages/';
    
    
    // CSS via Sass and Autoprefixer
    gulp.task('css', function() {
    	return gulp.src(scss + '{style.scss,rtl.scss}')
    	.pipe(sourcemaps.init())
    	.pipe(sass({
    		outputStyle: 'expanded', 
    		indentType: 'tab',
    		indentWidth: '1'
    	}).on('error', sass.logError))
    	.pipe(postcss([
    		autoprefixer('last 2 versions', '> 1%')
    	]))
    	.pipe(sourcemaps.write(scss + 'maps'))
    	.pipe(gulp.dest(root));
    });
    
    // Optimize images through gulp-image
    gulp.task('images', function() {
    	return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
    	.pipe(newer(img))
    	.pipe(image())
    	.pipe(gulp.dest(img));
    });
    
    // JavaScript
    gulp.task('javascript', function() {
    	return gulp.src([js + '*.js'])
    	.pipe(jshint())
    	.pipe(jshint.reporter('default'))
    	.pipe(gulp.dest(js));
    });
    
    
    // Watch everything
    gulp.task('watch', function() {
    	browserSync.init({ 
    		open: 'external',
    		proxy: 'blog.test',
    		port: 8080
    	});
    	gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
    	gulp.watch(js + '**/*.js', ['javascript']);
    	gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
    	gulp.watch(root + '**/*').on('change', browserSync.reload);
    });
    
    
    // Default task (runs at initiation: gulp --verbose)
    gulp.task('default', ['watch']);

    To get browserSync to work properly you have to do one configuration setting. In my localhost setup, I’m using the domain name blog.test to gain access to the content, that’s because I’m using MAMP and a virtual server to make that happen. I use the External URL for debugging and building and the proxy URL to log into WordPress and write content, download plugins etc. The only things you need to change if you want to change to a different project is at the very top set the name of the theme folder and at the very bottom change the proxy URL. I change the tasks or add new tasks to enhance the features in this Gulp process for when I take them live, but this works perfectly when in the development stage.

    Tags: , , ,

  • Leave a Reply

    Your email address will not be published. Required fields are marked *