A Full IT Service Provider Agency

We are Webstars, an award winning Web and Software Development agency. Our Services Include Branding, Design, E commerce, Social Media Marketing and More...

The Future of WordPress Development with Automation

Automation. You surely have heard of it in the context of web development. But what does it really mean? If you’re still unsure about what it means, keep reading. You will enjoy this new way of developing for the web (and WordPress eventually to be more precise), Guarenteed. Yes, enjoy. I really mean it. Be open for this new adventure, you’re going to love it.  

Changes in the Development World

You simply can’t avoid it. The standards for Web Development have changed significantly over the last few years. Just as an example, not too long ago, relying on JavaScript completely was considered a bad practice. Nowadays, you can easily find countless websites embracing JavaScript libraries like it’s the new norm. Not only that, but JavaScript has proved itself as the leading language for the web, and the term “full stack developer” in the context of JavaScript has finally bridged the gap between front-end and server-side, bringing massive change and innovation to the web development world. Inevitably, with that crazy wave of change, a handful of fresh and game-changing technologies have showed up in the recent years.  

Kicking your Development Habits into Higher Gear

I’m talking about tools for development simplification and automation. At least one is a big buzzword lately. I’m talking about the ones that change the way we develop for the web. Some, but not all, are  —  Grunt, Gulp, SASS (CSS Extension), Unit Testing, Travis CI, etc. For some unknown reason, many web developers who work with WordPress weren’t as fast to adopt these tools as their fellow developers who develop just static sites.  

Automation, The WordPress Way

Okay, so how does this apply for us, WordPress developers, you might ask. And the answer is simple. There are no limitations here. It’s just that you have to take the way WordPress works into consideration when working with these tools, and it could be a one-off process, so you don’t have to repeat it over and over again every time you wish to create a new WordPress website. So, I’m going to split this guide into two chapters. The first one is going to be a sneak peak into how the modern WordPress development process looks like, and in the second chapter I’ll discuss the more technical details and go into much greater detail. Let’s go!  

Your Most Refreshing Gulp to Date

The Future of WordPress Development with Automation Cool, so what is Gulp? To put it simply, Gulp is an automation tool which widely supports development-related processes and workflows. A simple yet practical example would be — say you’re writing some SASS (the CSS extension library) for your WordPress theme. You could use a GUI tool for compiling the sources into a final CSS file, or you can do it with a Gulp library. Why use Gulp for that? Because you can further extend this compilation process and have greater control over the final code. Say you’re ready to deploy the site, you can run a simple task that will minify the CSSso it’s production-ready. Now, this might sound hard to set up, but it’s actually pretty simple. Gulp divides its functionality into “tasks”. Each task can run independent of the other tasks. This allows you to define tasks that do very specific things: one for handling SASS to CSS compilation, JavaScript optimization and minification. Gulp also lets you run tasks that run in the background, allowing you to freely work on your project and trigger specific tasks once files in your project are being changed in real time. Gulp has a bunch of plugins designed for WordPress development-related workflows. Just to name a few:
  • gulp-potomo — Gulp plugin to compile .po files into binary .mo files with msgfmt.
  • gulp-checktextdomain — A Gulp plugin that checks gettext calls for missing or incorrect text-domain.
  • gulp-readme-to-markdown — Convert WordPress.org readme.txt files to GitHub-flavored markdown.
We’ll touch on that later.  

Bower: The missing part in the puzzle

The Future of WordPress Development with Automation Woah! We’re not done yet. Bower is here to fix a long-time problem we’ve all dealt with one way or another — managing dependencies and third-party, front-end libraries. Good examples would be Twitter’s Bootstrap, ZURB’s Foundation, various jQuery lightbox libraries, various jQuery slider libraries, jQuery itself, and so on. Almost any front-end library you can think of is most likely on Bower. Okay, so what’s wrong with manually managing third-party libraries? Mostly, it’s the lack of track over these libraries. That can especially become an issue whenever you need to upgrade a library. It’s critically important you make sure different versions of the various libraries you decide to use mesh together so no conflicts are being introduced. If you won’t manage your packages and their update process, running into a conflict becomes a matter of time. That’s when a package manager such as Bower comes in handy, and solves all of that for you. As mentioned earlier, we’ll dive into the technical in the upcoming post in this series.  

In Summary, What We’re Going To Touch On

So how may we use Gulp with Bower to create a better development process? In short we’re going to pipe our own custom CSS/SCSS/LESS/JavaScript files as well as Bower packages into Gulp, which is going to take care of various automatic tasks for us. We’ll touch on these Gulp topics:
  • Compiling SCSS/LESS files into a single CSS file
  • Minifying/Uglifying the compiled CSS file (so your WordPress site loads faster)
  • Merging multiple JS files into one compact JS file
  • Optimizing images for use on production for faster page load
  • Verifying and enforcing proper WordPress Coding Standards are in place
  • Updating browser while working on PHP/CSS/JS files, using BrowserSync
  • Setting up a linter with support for SCSS/LESS/CSS
  • Creating a staging-ready release (keeping sources as-is)
  • Creating a lean production-ready release (minified/optimized files)
  • And more and more…
In the next chapter, I’ll introduce you to how to do all of these on a technical level. If you have any questions about the fundamentals I explained in this post, please share in the comments below and I’ll respond in detail. Stay tuned!

Planning to start New Project ?

Talk With us !
View Our Products

View Our Products Demo

View More