If you have any agency experience, you know how long it takes to build a website matters to your boss’s bottom line. At one of my first agencies, we were budgeted about 40 hours for a full website (WordPress, custom coded theme, probably 5-10 pages and blog). That 40 hours was just development; by the time it reached the dev team, the copy had already been approved and the main designs created and ready for us.
But even then, I felt like 40 hours was a long time to build one website. That’s when I started to refine my own processes to figure out how to build a better website faster. After all, I was repeating a lot of the same work even though the websites were wildly different.
Over the last 7 years, I’ve found the trick that works for me and I’d love to take you through how I spin up a new dev site and get it built faster – sometimes in less than 15 hours for a full, mutli-page website. And buckle in, because this is some major tea I’m about to spill.
Start with a Base Site
Believe me, you’ll be saying that each website you build is too different to do this, but I promise that it’s not. Are you using roughly the same plugins every time? Do you start with the same theme every time you build a website (your own custom-coded one or a builder like Elementor or Divi)? Then you can 100% build a base website that becomes your starter one.
Here’s what I mean. I have a website, at its own subdomain URL and with its own WordPress installation, on my WP Engine account. Since many of my full website clients also host with me, I build their development sites on my WP Engine account directly.
This website is my base that I start every single website with. On it, I have all of the plugins that I would normally install and I keep those updated before I start a new site or at least once a month. I also have my custom theme installed on the website, since I start all websites with this base custom theme.
Because I use Advanced Custom Fields (which we’ll dive into in a little bit), I also have my base website filled in with some dummy data that helped me to build out the fields I knew I’d need. I also keep this theme updated with any changes that I might need, like code changes, upgrading Bootstrap, PHP methods, etc.
Most of the time, this base website just sits there on my server, but I’ll make edits to it about once a month or just before I start a new website project.
Copying My Base Site to a New Client Project
Here’s where the magic happens.
Once I’m ready to start that new website for a client, I’m able to create the site in my WP Engine account and use the most recent backup of my base site and copy it over to the client’s new space. If I’m not staying on WP Engine for whatever reason and building the development site on another server, I can still take the most recent backup of my base site and migrate the files and database to a new space pretty easily.
With the base site WordPress installation now on my client’s development space, I can start tweaking, removing dummy data, and setting it up for them and their website specifically.
Just by having the base website, before we get into the other pieces, I’ve already saved time because I don’t have to reinstall plugins, I don’t have to install WordPress itself, and I don’t have to wait for theme files to upload. It takes a 2 hour process and makes it take 15 minutes or less.
Pro tip: I always copy my custom theme and create one with a client-specific folder name and rename the theme to match my client’s business. No one is out there seeing Captain Coder on their custom website theme names.
Customizing My Base Website
I talked in episode 13 about how I used Advanced Custom Fields Pro to make my websites easy for my clients to update and maintain on their own, thus making training them super simple. The other thing that ACF does for me, though, is making my websites really quick to build.
All of the features I’m going to dive into are largely only available with the Pro version, so you’ll need to invest about $249/year, but I promise the time savings is well worth it. ACF also requires some PHP knowledge, so it’s definitely a dev-only tool, but if you’re wanting to dive into code it’s pretty easy to learn (I think, anyway).
Creating Flexible Templates
One of the things that many people love about Divi and Elementor is that they let you build a website quickly without any code. What developers like myself don’t like about those themes and plugins is that they bloat a site, adding a lot of code that you don’t necessarily need. But you also get so many different flexible content blocks that make building a WordPress website so easy.
If you’re a web developer who likes lean code, ACF is your happy middle ground. It allows me to create lean, custom coded flexible layouts without having the pieces I don’t need.
For example, on most of my websites, I know roughly the components I’m going to need on my home pages. So I built a layout using ACF’s Flexible Content field with all the blocks I might need. I include these blocks in my PHP file as includes, so if I want to use them elsewhere, I just need to include that template part.
I then create a Default page template for almost all of my inside pages, and add all the blocks that I’ll need throughout the website’s inside pages. Many of these blocks are going to be used on multiple pages anyway, but it also means that if my client wants to create a new page themselves, they can just select the type of blocks they need. And because the Flexible Content field gives a drag and drop interface on the WordPress admin side, they can move pieces around to any order they could possibly want.
I design out all of the blocks and use global CSS classes for the block type which means once I’ve built a block out, I can re-use it somewhere else and my work is already done. One thing I do to give my clients (and myself) control over is add some inline style options, like the ability to select a background image, color, and even font color where appropriate.
There are certainly times that I’ll create a WordPress page template and have specific blocks for that, but that’s a pretty rare thing. Usually, I want my client to have access to these pre-designed blocks.
Global Site Options
Another of my favorite of ACF’s features is the ability to create Options pages. You see, WordPress lets you have an Options page that you can add to your theme’s functions.php file and ACF then lets you add content blocks to that page.
I use this largely for pieces that I want to be global throughout a website or in the headers and footers of a site. For instance, my Options page is called Site Options and my clients can upload their logo, add their brand colors (which they can then select in my Flexible Content templates), add their Copyright information, Google Analytics or Facebook Pixel IDs, and even set their phone and address. If their phone ever changes, I utilize a custom-created shortcode that means when they change their phone number in the Site Options, it automatically changes it throughout the entire website. No need to hunt and find everywhere that old phone number was used. If they change their logo, they just need to upload the new one and anywhere the logo was used it’s changed throughout.
Custom Post Types
While I register any custom post types in my theme’s functions.php per normal, ACF makes working with them incredibly easy and far more customizable with the addition of its custom fields to CPTs. Most of my websites, for instance, come with a Testimonials custom post type pre-built with a testimonial slider installed and ready to use. I just have to customize the design per the client’s business, but I don’t have to redo the same work over again.
Pre-Building in My Base Theme & Website
This is all already built in my base theme, so I don’t have to recreate Flexible Content templates, just tweak and add blocks that are specific for that client. My Site Options are all already created, so that when I’m creating a client’s new website, I can fill in a lot of information in about 2 minutes that would take an hour or more to custom code in. When I start a new website with this base theme, I’m automatically shaving off about 5-10 hours of work that’s already done.
One thing I want you to keep in mind though is that it’s just as important to remove Flexible Content blocks as it is to add the ones that you’ll need specifically for that client. For instance, if you know that you won’t need a specific block for this website, you’ll want to remove it from ACF and remove it from your theme’s code. You don’t want to confuse your client with an unstyled block down the line, but you also don’t need to include code they don’t need. The whole point of custom code, after all, is to keep everything as lean as you can.
Because ACF is connected to your theme and your WordPress install, having the base website the way I do means that I can take all of this work, this pre-loaded 5-10 hour time saver, and migrate it where I need to pop up a new website and I’m ready to roll.
While it saves me hours of the normal spin up process I used to follow, it also saves me so much build time because I’ve got so many components already there; I just need to customize per the client’s design. It also keeps my styles.css file incredibly short – an average of 400 lines or less – because this helps me to stay incredibly consistent in my design throughout the website.
Whenever I tell another developer that I’m able to build multiple page websites in 15-20 hours or less, they don’t always believe me. But I promise you can do a lot of your repeatable work upfront and automate a huge chunk of your web design business. Just make sure to pay attention when you’re building client sites to those things you’re doing over and over again and write them into your base website moving forward. I never stop improving my base install, not really.
And the best part is you can follow a similar process even if you’re using Elementor, Divi, or another premium theme. You just need a base WordPress website with your favorite plugins installed and ready to go.