April 26th, 2019
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.
On a weekend or during a slow period take a few hours to have a play around with gulp.js to learn how it works, it has pretty much endless posibilities and can support the usage of FTP uploads dynamically, Sass compiling & Javascript file merging.
Sass is fairly easy to learn as long as you understand the fundamentals of CSS, it’s pretty much the same other than it supports variables, functions, nesting and extending classes. Sass is the key to keeping CSS clean on the front end which results in faster load times as well as faster development times.
You can learn how to install Gulp here.
Understrap is a boilerplate theme which gives you all of the fundamentals to start a project with Gulp & Sass support and a clean code starting point.
Understrap uses the Bootstrap 4 framework on the front end and has all of the required resources included right from the install, this helps keep time spent configuring down.
Developing on off the shelf themes as a starting point is never a good way to go, you will end up with all of the unnecessary clutter in the files and front end of the website which causes you to spend your time trawling through 1000’s of lines of undocumented code.
Understrap can be downloaded here.
ACF Pro allows you to create custom repeater fields for any post type on your website. This minimises the requirement for other plugins as you can create any kind of functionality for the admins to upload content easily.
A great example of the ACF functionality replacing the use of plugins is with sliders, assuming you take the advice on Phase 2 and start using Understrap you will find that it has built in carousel support ( thanks to Bootstrap ), all you will have to do is add in a field group to a repeater with the required fields ( Image, Alt tag, Link, Heading ) and make a simple PHP loop in the admin then you’re away!
ACF Pro also supports an “options” page which is used for global fields, by utilising the options page you can set fields globally such as “email address”, “form recipients”, “form subject”, “address”, “phone number” and simply show them on the front end by calling a shortcode. – No more having manually crawl through the site checking for where the address is mentioned whenever your client moves office!
ACF Pro costs $100 for an unlimited developer license, it’s worth every penny as the time saving will pay for itself after just one project!
You can purchase the plugin here.
Using partials to develop a site is the ultimate way to keep your code clean and readable from the files, instead of copying and pasting code from other templates across the site in to other areas you can simply include the partial with 1 line of code for example:
If I have a testimonials slider which I want to be used on the homepage and the services page I would have the following folder structure in WordPress ( note the file highlighted in red ):
And to include this particular file I would write the following code where I would like it to be included:
<?php require(locate_template('/partials/repeater/logoslider.php')); ?>
That wraps it up!
You will find that productivity will be slower for your first couple of projects. But once they are out the way, you’re development time will be dramatically reduced.
