Increase WordPress Development Productivity By 200%

Increasing your productivity in website development can be fairly daunting, although it’s just as rewarding!

This post will guide you on how to increase your WordPress development productivity by around 200% by simply using the latest technologies and avoiding the usage of plugins.

---

Phase 1 - Learn Sass (.scss) and gulp.js

On a weekend or during a slow period take a few hours to play around with gulp.js to learn how it works. It has nearly endless possibilities and can support dynamic FTP uploads, Sass compiling, and JavaScript file merging.

Sass is fairly easy to learn as long as you understand the fundamentals of CSS. It’s very similar but adds support for variables, functions, nesting, and extending classes. Sass is key to keeping CSS clean, which results in faster load times and more efficient development.

You can learn how to install Gulp here.

---

Phase 2 - Understrap

Understrap is a boilerplate theme that gives you all the fundamentals to start a project with Gulp and Sass support and a clean code starting point.

It uses the Bootstrap 4 framework on the front end and includes all the required resources from the start, reducing time spent on configuration.

Developing from off-the-shelf themes is not ideal. You’ll often end up with cluttered files and bloated front-end code, leading to hours wasted digging through undocumented markup.

Understrap can be downloaded here.

---

Phase 3 - Advanced Custom Fields Pro

ACF Pro allows you to create custom repeater fields for any post type. This reduces the need for other plugins by enabling you to create any functionality required for admin content input.

An example is building sliders. If you follow Phase 2 and use Understrap (which includes carousel support via Bootstrap), you can simply add a repeater field group (Image, Alt tag, Link, Heading), create a PHP loop, and you’re good to go.

ACF Pro also supports an “options” page for global fields. With it, you can set global values like “email address”, “form recipients”, or “phone number” and include them site-wide via a shortcode. No more hunting down addresses when a client moves office!

ACF Pro costs $100 for an unlimited developer license — a worthwhile investment that pays for itself after one project.

You can purchase the plugin here.

---

Phase 4 - Partials Development Process

Using partials is the best way to keep your code clean and maintainable. Instead of copying and pasting code across templates, include reusable sections with a single line of code.

For example, to use a testimonials slider on both the homepage and services page, your folder structure might include:

/partials/repeater/logoslider.php

Then, to include it:

<?php require(locate_template('/partials/repeater/logoslider.php')); ?>

---

Conclusion

That wraps it up!

Productivity may be slower on your first few projects, but once you’re familiar with the setup, your development speed will improve dramatically.