Building a WordPress site for a client: getting started

I offer technical, training, programming and conceptual support for partner agencies and freelancers through my agency Say Hello: either on-site or via email, Slack or video call. Get in touch if you’d like to discuss what options I provide. I am fluent in English, German and Swiss German, and my daily rate is means-adjusted for international work.

The content management system WordPress has always been built around the principle that the “core” software should provide only a baseline for building a website. You install the software, install a pre-defined Theme, create your content, and start telling people about it.

The simplest case for a WordPress site is a blog: you get the site running, write an article, hit publish, and wait for the visitors to interact with you. But if you want to do a better job of it, WordPress allows you add optional tools (or “plugins”) to the site, which will enable you or your visitors to extend the functionality of the website.

This approach allows any site owner to choose which additional features are needed for the site, and which are unnecessary. Herein lies the first key principle of making a website using WordPress:

• Use a Theme to define how the website will look. This is where colours and fonts and usually where layouts reside.
• Use a Plugin to add functionality to the website: be that a complex form and email solution, adding additional security, or adding e-commerce functionality. Does the functionality need to remain if a new Theme is installed? If so, then the functionality belongs in a Plugin.

Start with the basics

The remainder of this article goes on the assumption that the content and site structure for a project has already been defined. Now, it’s up to you to make it into a working WordPress website. I’m going to go through the process I’ve developed in stages since the Block Editor and Site Editor became available. Apologies if some of this is obvious, but I want to run through everything, step-by-step.

Learn the Block Editor deeply

If you use any tool, you have to learn how to use it… or to learn how the people editing the content will use it. If you don’t know what the features are, or which blocks to use and which options are available, then you’ll be trying to work with one arm tied behind your back. You might think that it’s easier to deactivate everything and build it all yourself, but there’s one key drawback in that plan.

You have to build everything yourself.

Instead, you can use the Columns block, or you can find out how the Row and Stack blocks work. You can find out how to align things left and right ¹ and you can find out how Block Gap works. Add a Spacer block here and there if that makes sense, or do it “the proper way” using Block Gaps, margins and paddings. Either way works, and the goal is to get the job done with the minimum of hassle.

By creating content, you’ll learn how to build sites much more quickly. Yes, there are pitfalls, and yes, there can be difficulties. Yes, the Navigation Block can be difficult to use, and the complexity of a full-page layout using nested blocks can be tricky. You’ll move on much more quickly and identify the work you need to do if you know where the pitfalls are, based on your own experience and not just based on the rantings of a frustrated social media user.

Use WordPress for the reason it was built

Assuming that you want to build the best projects you can, you will need to learn how the main tool you’re using—WordPress Core—works for the content creators for whom it was intended. There is no shortcut in that process. If you learn a language, the quickest way to improve rapidly is to use it regularly, and the same applies to the WordPress visual editors.

Set up a little side project without coding anything. Use a standard “default” Theme like Twenty Twenty Four. Spend half-an-hour hour per week creating content and trying all the options. Start a blog about gaming. Or the animals at the nature reserve. Or share some of your photos. Learn from the process and take notes of things which you feel could be improved. Even the Twenty Twenty Four Theme, which should be as “default” as it gets, contains some opinionated technical choices which can be problematic.

Hunt around in the interface. Click on the menu buttons and see what controls are there. Learn and understand how the options for alignment work, and find out what that little button “Inner blocks use content width” actually means ². Find out how to change the colours of your headings, or how to add a custom font ³ without writing any code.

Beginning work on the site

In all web projects, the aim is to have a working site with as little code and as few third-party dependencies as possible. (Unless your focus is on writing code, but that’s a specific case which is outside the scope of this series.) You may feel that it’s unimportant to avoid third-party solutions, but taking care to see how far you can get without them can save you a lot of time when maintaining sites later.

1. Install WordPress from scratch using the default installation. You can install WordPress using tools provided by hosting companies, and you can use other technologies like Composer. If that’s your preference, then do that: don’t make your job harder by abandoning your tried and tested approaches. Personally, I get started using the simplest way possible, and that, for me, is spinning up a new project in the LocalWP desktop app. The app asks for a domain name (e.g. example.local), installs WordPress, and you’re away. I won’t go into more details this time, because each person’s approach here can be different.
2. Install the smallest, lightest, simplest Theme you can at the beginning. For some, this may be Twenty Twenty Four, and I’ve heard good things about Ollie. These are great, but they contain detailed code and layouts and patterns. That means you’re working around someone else’s choices right from the get-go. This will make your job harder if you want to produce your own lean result. I want to start from as close to zero as absolutely possible, so that I don’t have to think about anyone else’s code. I’ve shared the Baby Steps Theme on Github so you can see just how simple the bare minimum of code is. My own starter Theme extends the Baby Steps Theme with a build process for CSS and JavaScript, but this is by no means necessary for every project.
3. Add some content. Yes, really: before you begin writing a single line of code. Add a few Pages and Posts to the site and fill them with nonsense which approximates the content which will be added to the site. Copy in some Lorem Ipsum text, add some stock photography from Openverse using the media inserter ⁴ which allows you to find and install completely free images. Wrap some content in a group block, set some padding and add a background colour.
4. If you have the site structure ready, add the pages and structure their hierarchy correctly. (It’s fine if they don’t contain any content. Again, do this before you write a single line of code.
5. Now, build your theme.

Step five obviously encompasses where all the “real work” is, but if you want to build what we used to call the “page templates”, you’ll need to have some content to begin with. This will make the entire process much less daunting, because you’re not building using your imagination.

But what about my tech stack?

If you’ve worked on websites before, it’ll be tempting to start a project thinking about the final site and the technical stack you want to use. Will you need a build process with Gulp? Will you need to use Webpack? You’ve heard that the Navigation Block is rubbish: is it?

No. Or yes. As in all things in the web, “it depends”! But these are advanced steps and not the basics. Starting with the basics—creating a site and adding test content—will help you to get used to the way in which the Block and Site Editors work. It’s true that there will probably be no navigation at this stage, but starting with the content will help you to look at the design—presumably in Adobe XD or in Figma—and “see” where the blocks are.

Once you are familiar with creating page layouts in the visual Editors (often using the Columns Block), then you’ll start being able to decide which Core Blocks ⁵ you can use, and where you might need to use a custom Block.

If you begin your build thinking about Gulp processes and NPM dependencies, you’ll overlook one thing: making a website is all about displaying content. You can’t begin a project without any content. Once you understand what WordPress provides out-of-the-box, and how far you can get without any plugins or custom code, then you’ll quickly begin finding out how best to build a website using the Block and Site Editors.

Don’t get caught up in the technology

Of each particular thing ask: what is it in itself? What is its nature?

Marcus Aurelius

That’s a great quote and one to which I return often. (To be honest, it sounds better when I quote Marcus Aurelius, when I actually know the quote from Hannibal Lecter…)

The quote reminds me to look critically at everything I want to add to a project, from content to technology, and decide: why do I need this? Is it really necessary? Is it helping me, or is it hindering me? Will the client be able to understand it, or do I need to choose a different approach?

As technical people, we love to make things and we love to use the next shiny toy. Perhaps you want to build your website using React (or whatever the coolest JavaScript framework is right now). That’s absolutely fine, but it adds a layer of complexity to a task which may be simpler than you think. Websites which load data dynamically over an API aren’t always faster. Because of the way in which WordPress stores and loads the site content, the frontend is supremely fast (and getting faster with each new version)… but only if you don’t make it slower.

The blog post you’re reading loads in less than 500ms on a normal internet connection, yet there is no real magic in the background making this happen. Just a simple caching plugin, so that the content isn’t re-generated for every visitor.

Building the frontend with a separate technology (like React), or adding mounds of additional technology in the backend, can add huge layers of complexity to a project and cause bottlenecks which may be difficult to resolve. Make sure that everything you add to the site has a net positive effect on the website and its editorial and technical maintainability.

How quickly can I get a site up-and-running?

Quality isn’t always achieved quickly. Jamie Marsland’s series of videos shows how experienced users work quickly to achieve the basics, but the work they’re doing is part of the nascent stages of building a site. There’s rarely a mention of optimised layouts for mobile devices, or the benefit of creating reusable components (“Synced Patterns” in WordPress parlance), or optimising media and images for optimal performance. These are all parts of a project which take time, and ones which need to be part of the preparation stage which takes place before the start of the project.

However, once you’re familiar with the Block and Site Editors, things will move along very quickly once you get a regular process in place. Ten years ago, my basic timescale for getting the simplest stage of a working website up-and-running was a few hours (based on the fact that I had a few templates which I could copy into the next project).

These days, I can spin up a live website with content and styling in minutes. Take this example of some typographic experiments I’m building out: the basic site, including styling and content, was up-and-running fifteen minutes after I had the initial idea.

Fifteen minutes. For a multi-article website with responsive design and high-speed performance.

Next time

In the next post in this series, I’ll be explaining the specific steps for working in the Site Editor: using the onboard core tools to build out site templates and parts, adding styling, and working with content in the Block Editor.If you’d like to receive an email when the next post in the series is published, please consider subscribing to my website’s newsletter, linked at the bottom of this page.