Custom WordPress Theme Development – Start with a Boilerplate

Custom WordPress Theme Development – Start with a Boilerplate - The White Label Agency

Digital Agencies can use boilerplates to speed up custom WordPress theme development

The term boilerplate is WordPress lingo used for the starting components when a new Custom WordPress theme is set up. It provides a starting block for custom WordPress theme development that can greatly increase an agency’s efficiency.

In this article, we will review the components that make up our WordPress boilerplate.

Most agencies have their own take with their favorite combination of CSS framework, back-end tool, pre-made PHP templates, and pre-installed plugins.

We at the White Label Agency tend to follow what’s currently popular among our agency customers as well as on the common market.

We focus on having a rigid combination of tools available when building sites that we know we can trust.

Our boilerplate should be easy to use and easy to update, so we have tried to use as much native functionality as possible.

Working closely with agencies that are at the forefront of marketing helps us to keep on top of trends. We take this into account when defining and refining each component of our custom WordPress theme.

Front-end Framework

There are several good options for CSS frameworks to use with WordPress. In our experience, the most important factor when choosing one is that it follows the 12 grid layout.

This criterion is today fulfilled by most front-end frameworks. We have chosen to go with Foundation due to that it’s light, easy to work with, and that it’s used by most of our customers.

Foundation is available to anyone who wishes to use it and can be downloaded for free on the Zurb foundation website.

Our custom-built WordPress starter theme, using Foundation and is always named after the project that we build. In this way, we keep it White Label. We also make sure the fav icons are the same as the starter theme logo.

Back-end Setup

When it comes to our back-end setup, we most often use the classic editor in combination with advanced custom fields pro (ACF) and Custom Post Type UI.

Gutenberg is for sure on the move, and we have seen an increasing amount of customers using it, mainly by combining it with ACF, but it’s still only a small fragment of the market that has switched. Most still go with the classic editor.

For each page on the website, our customer, or our designers create a design template. For each of those design templates, we create a PHP template that uses ACF fields. In this way, there is a unique template to choose from when creating a new page using the WordPress classic editor.

If there is extensive content on a page, then we create horizontal tabs with ACF so it’s fast to navigate without too much scrolling. The number of unique templates mainly influences the price when we make a quote to our agency partners.

If there are identical templates, with only the text or pictures being different, then we use the same template for those pages.

In the cases when there is a listing of items that should be clickable such as Team, Testimonials, Practice Areas, Gallery, Services, and similar we use a custom post type. We create these with Custom Post Type UI.

A large majority of WordPress sites have a hero section on the top of the home page. It’s typically a picture, a video, or a slider. We use a Custom Post Type and ACF Gallery or ACF repeater to create the hero section.

To make global settings such as phone numbers, addresses, open hours, and such easy to change across the site we have chosen to use ACF options. It’s a neat little tool that adds an extra menu button in the main dashboard of WordPress.

Most sites we build either have a news section or a blog section. We tend to use the built-in WordPress blog for these.

The combination of these three, WordPress Classic editor, ACF, and CPT UI makes a versatile and easy-to-use website that offers good performance.

Contact Forms and Other Plugins

Over the years, we have worked with many different form tools. Some of them stuck around for a long time, such as Contact Form 7, Ninja Forms and Gravity Forms.

The last couple of years we have experienced more and more of our customers using Gravity Forms, mainly due to the fact that it has a very broad range of capabilities. We have chosen to include Gravity Forms in our boilerplate.

Other plugins that we will install are:

  • Yoast SEO to add meta descriptions
  • TinyPNG to optimize images and make the site faster
  • Google analytics by Monsterinsights to easily link to the websites analytics data
  • Userback to allow feedback to be submitted in a visual way

In the past, we spent a lot of time sending fonts back and forth with our agency partners. But the last couple of years we have seen a majority of our customers switching over to using Google fonts. The main advantage with this is that they are free to use and hosted on Google, so there is no longer any need to upload fonts to the website.

We comply with industry best practices for use of headings and we use the default WordPress permalink structure.

If we are migrating a site from another platform to WordPress, then we try to keep the same permalink structure as it was before in order not to impact SEO rankings.

Hosting Setup

We utilize WP-Engine managed hosting for our hosting setup. This creates a safe environment with isolated blocks on the server for each website.

The system allows us to start each new website with our already installed custom WordPress theme and get right to work with development. It also allows for staging sites, where the developer is able to test code changes on a separate instance and only push live when tested and ready.

wpengine options
WP Engine Hosting

Daily scheduled backups serve as one more point of safety, allowing the user to always roll back to a previous instance prior to whatever issue may have occurred.

What about “XYZ”?

This article was meant to serve as an overview of what a boilerplate is and how it can be helpful to speed up the development of a WordPress custom theme for any agency.

We covered the general components that make up the one White Label Agency uses for most of our projects.

We have found that our setup covers the majority of customer requests that we receive, but the beauty of the boilerplate is that it can always be adjusted based on preferences.

Not all components were covered in this article, but we would be happy to get on a call to discuss our WordPress custom theme in more detail if you wish.

Schedule a Call