Wordpress unplugged

wordpress banner qovwys

The point of a CMS is content management. It’s very rare that you’ll need to change your logo or the general colour scheme unless you’ve gone through a rebrand.

This is a tricky subject because most web developers, digital marketers, site owners and so on have some kind of opinion on it. With that in mind, I’m not going to preach about which approach is the best because it entirely depends on what you need to achieve. All I’ll do here is pass on my own opinions that I’ve formed personally over the many years that I’ve been building for the web. It has been interesting to see how the landscape has evolved and how Wordpress in particular has changed.

If you don’t already know, Wordpress is just one of many content management systems (CMS) available. It is one of the big boys though, and accounts for a pretty high percentage of websites on the web. In my experience, most people who have ever maintained a website have at least heard of it. It started as a blogging tool but has developed into a full blown CMS with worldwide support and almost limitless possibilities.

The anatomy of a modern website

Absolutely the best thing you can do if you want a website that loads quickly and performs well is to not have a CMS at all. This is generally referred to as a ‘static’ site. The website is constructed with a collection of HTML files for the structure, CSS files to make it look nice and javascript (if necessary) for a bit of added functionality. Your web browser requests a web page and the web server delivers these files (almost) instantly. It’s a simple transaction with very little interruption. This, of course, means that if you want to add any new content or make any changes, you’ll need to edit these files manually and you’ll need to know how to do it with HTML.

A CMS bridges this gap by giving you an interface to update your content without going near any code. It stores the content separately (usually in a database) and generates the HTML for the browser in real-time when you visit a page. This creates a dynamic site, personalised to your visit. This suits anyone who needs to easily manage their website, but it is also where things start to slow down…

It’s a longer journey: The browser requests data from the server, the server takes all the available data from the URL and then performs a selection of queries on the database to get everything it needs based on the date, session data and so on, before starting to render the page. The file it reads is not a traditional HTML file - it will be a different format which contains all the logic to tell the server what it needs to do. Finally, it pieces it all together, grabs the CSS and Javascript and shows the page. This is all expected to happen in microseconds.

Back to Wordpress

We use Wordpress to build most websites these days. It’s well known, there is a lot of guidance online and it’s pretty flexible for developers. Also, SEO folks seem to like it (...right?). Of all the content management platforms out there I’ve always found it to be one of the better ones.

At its core it’s fairly simple. You can start creating pages and blog posts straight away without any special configuration at all. Pages can be added to navigation menus and blog posts are automatically arranged in date order on a listing page (rather confusingly referred to as an “archive”) with links through to the individual articles. The page layouts and any more advanced functionality comes with the “theme” that you install and you can extend it further with plugins. The theme and the plugins can affect both the public facing site as well as the admin screens for logged-in users.

Off the shelf

There are thousands of themes available for Wordpress that you can download and install yourself. Some are free, a lot aren’t. It can be really difficult to choose a suitable theme because a lot of the time the examples show all the best features without much information on how easy it is to use behind the scenes. Choosing a good theme boils down to a number of factors:

  • Functionality. Does it have all the features you need? A blog, e-commerce, events management, portfolio management and so on. Does it allow control over things you don’t see such as metadata? Do you have enough control over the page hierarchy in terms of using correct HTML markup?
  • Configuration. How easy is it to set up? Does it come with good documentation? Can you do enough to personalise it to your brand?
  • Dependencies. Does it rely on a fixed set of plugins to work correctly? Are those plugins being actively maintained and if you install other plugins, will it play nicely?
  • Longevity. Who made this theme? Do they maintain it with updates so it will continue to work when Wordpress is updated to a new version?
  • Performance. How well does it actually perform? Is it quick to load or is it so bloated and heavyweight in the underlying code that it will slow to a crawl when too much content is added?

These are important things to consider, but the biggest one for me is performance. Many themes, as you would expect, have CMS control over the look and feel of the site. You can add your logo and set up your brand colours across the site. They often also come bundled with “page builder” plugins such as Divi, Elementor and WP Bakery. All of this adds weight. You can imagine the amount of round-trips to the database that need to happen on each page load if the site is requesting details about every colour, font size, logo graphic from the same place as the content. It all adds up.

Page builders

I’m not a fan. Unfortunately, they’re popular.

A page builder is essentially a plugin that hijacks the default Wordpress editor and gives you an entirely different editing experience. It usually comes with a lot of “drag and drop” control, which can be a good thing, but not always.  The problem I find is that it gives you far too much. Every element you add has control over margins, padding, size, colour, font… If you want to keep things consistent, you’re going to have to be really organised. They often allow you to set defaults and have features where you can create reusable templates but this is just another thing to learn and remember, then pass on to the next person who might be managing the site content.

I’ve always found these types of editors slow to load and fiddly to use. They also add so much messy code when rendering the page that the size of the generated HTML becomes enormous. I’ve had to increase memory resources on web servers to accommodate sites built with one of these editors.

The current editing experience in Wordpress is called “Gutenberg” and I personally resisted it for a long time because it was quite a departure from the existing editor, but I’ve found that it’s actually pretty good. Gutenberg allows for the placement of “blocks” of content with a lot of flexibility over arrangement, and as developers we can extend it and customise it to fit the needs of the site. If you’re going to use an off-the-shelf theme, look for one that incorporates Gutenberg as the page editor because you can be confident that it’s going to remain supported for the foreseeable future.

Plugins

Plugins are a big part of Wordpress and it’s rare to find a site that doesn’t use them at all. These are custom extensions to the core functionality and allow you to add pretty much any feature to your site. Like themes, there are lots of free plugins available and many have a “pro” version for a fee.

It’s an essential feature of Wordpress but is also one of the main culprits of a slow website. Every plugin you install adds weight to the site and becomes another thing you have to maintain. Many plugins call on external resources or perform a lot of database lookups. A plugin can be written by anyone so they’re not always written in a particularly efficient way. They need to be kept up to date to remain compatible with the latest Wordpress version as well as the software running on the web server. If you have a plugin that provides some essential functionality on your site, but is was developed by a lone teenage developer in their  bedroom on the other side of the world you can never be sure if support will continue. Your site could break or be stuck on an old version of Wordpress until you find an alternative.

You’ll find plugins for pretty much everything and it’s a great way to add complex functionality… or to completely over-engineer something really simple. If you have plugins that do very small things such as adding the current year to the copyright notice in the footer, you’re wasting resources. 

Another thing to be wary of is that plugins could potentially contain malicious code or “back doors” for all sorts of dodgy activity. You should always use plugins listed on the official Wordpress directory because they will have been vetted before they’re listed. However it’s worth noting that updates are not. Plugins in the directory can usually be installed directly from the Wordpress interface.

Plugins we like

We do our best to keep plugins to a minimum, but there are a handful that we use regularly. Some on pretty much every site:

1. Advanced Custom Fields Pro (ACF)

This is mostly a tool for developers but provides complete control over fields that are available in the CMS. On the “classic” version of Wordpress it allows for a modular editing system using the “Flexible content” field. In Gutenberg it makes it easier to create custom blocks. Wordpress has always had custom fields as a tool to use, but the interface is not particularly intuitive and not very obvious and you can only add text fields. ACF gives you a whole suite of field types to use as you need - image uploads, date pickers, colour pickers, dropdowns and so on.

It can be extended further with ACF Extended which adds even more field types and better interface options.

2. Yoast SEO / Rank Math

These two provide a really useful set of tools to add all the metadata you might need for your technical SEO such as page titles, descriptions, control over search visibility (robots) and images for “open graph” which is metadata used by most social platforms to display your site links in a nice visual format. They also add basic schema, generate a sitemap and provide useful UI elements such as breadcrumb trails, a useful navigation tool. Rank Math also includes a URL redirection feature. We’ve historically always used Yoast so Rank Math is fairly new to me, but it’s been requested by SEO folks a few times, so it must be pretty good.

3. Redirection

A useful tool for redirecting one URL to another. This is vital when we’re going through a complete rebuild and a lot of the URLs are changing. This can also be done in code, but this plugin actively creates redirects if you happen to rename a page and cause its URL to change. It also keeps a record of how many times each URL has been redirected. Exciting stuff.

4. Simple Custom Post Order

There are loads of plugins that do this, but this is the best one I’ve found. It simply lets you change the order that posts and categories are displayed in. The Wordpress default is always the order in which they were added, with the most recent first - this lets you reorder anything by dragging them into the correct order and takes care of the logic in the background so you don’t have to add any more code to tell the theme to do as it says. 

5. Woocommerce

For e-commerce sites we nearly always use this because it takes care of all the functionality required for shopping carts, customer accounts, shipping calculations and online payments, which can be insanely complicated. It does all the heavy lifting for us, so all we need to do is make sure it looks right. It saves a lot of development time, but can be overkill if you leave everything active. Most of the time it’s a case of switching things off that you don’t need. Woocommerce is developed by Automattic, who are the team behind Wordpress itself.

6. Wordfence

We install the free version of Wordfence on most websites now. As a widely used, open source platform, Wordpress is definitely a target for hackers and general idiots who should do something better with their life. Wordfence is a firewall that blocks attacks, adds a lot of best-practise security and alerts you to major file changes, malware detection and many other things. It’s great as an extra layer of protection beyond built-in server-side security.

Bespoke theme creation

The worst thing when you launch your new site is to have someone say, “hmmm, looks like a Wordpress site”. Your best chance of a site that looks good and does what you need is to have it tailor made by a designer and developer. A custom Wordpress build starts with a good design, bespoke to your requirements. Off the shelf themes can do what you need, but you’ll often settle for something along the right lines, rather than something perfect for you.

So what are the advantages of a custom build?

The brand is “baked in”

The point of a CMS is content management. It’s very rare that you’ll need to change your logo or the general colour scheme unless you’ve gone through a rebrand, and this often comes with a redesign anyway. All these fixed assets should exist in the core templates and stylesheets and nowhere near any database lookups. The layouts can still be really flexible but you want to be able to add content without worrying about font sizes, colours, spacing or whatever else. If you add a title, a paragraph, a subtitle, a link or whatever else, it should just conform to the established styles and behave itself.

Functionality is tailored to your needs

Wordpress has so much available to developers in the core system that the majority of the functionality of your site can often be built right into the theme files. We’ll build to specifics rather than creating 101 features that you’ll never need. The site can obviously grow over time, but if you stick with the essentials to begin with, you’ll keep it light and it will work well.

Less plugins 

I mentioned some “essential” plugins earlier but if they are kept to a minimum, there’s less to maintain, less to break and less chance of vulnerabilities in code brought in by unknown developers. 

Bespoke integrations

We often find that we need to integrate with an external service like a CRM or a payment provider. Sometimes they will offer a Wordpress plugin, and that can be a good thing, but it won’t know the specifics of what you’re trying to achieve and anything output on the front-end won’t necessarily be in the format you need. For that reason we’ll usually opt for building the integration manually. This also makes it a little easier to troubleshoot if issues arise and we can ensure that it is as lightweight as possible.

Accessibility

This is an important and often overlooked area. There are a lot of visual and technical considerations to create a website that works well for all users with different levels of ability. Support of assistive technology, keyboard only navigation, sufficient colour contrasts and honouring user preferences such as reduced motion scrolling or dark mode - these are all areas that require very specific coding and are best carried out by a developer.

Hassle

It’s a pain in the ass setting up a site from scratch! There are thousands of pre-made themes out there and you can never quite tell which one is right for you. You end up using a lot of workarounds to get the result you’re after and you often have to compromise. Working with a designer and a developer can help to mould your ideas and requirements into a site you can be proud of.

 

The landscape of the web is complex and is constantly evolving. Start simple and let your site grow over time. A good setup will allow for this. You can opt for a templated route or a bespoke build, but whichever route you take, make sure you find a balance between your own convenience, functionality and most of all, performance.

If you have a project you would like to talk to us about, feel free to contact us for a chat.


The importance of good Project Management 

Any new client that comes on board needs to feel confident that their project will be delivered on time and hassle free.

Blend - a CRM (kind of)

When you’ve been using a certain system to manage your day-to-day affairs, it can often be more hassle than it’s worth to migrate to something else so you just live with the inconveniences and workarounds and accept them as part of the process.

Hamlyn Smith - the making of a brand

When we approach any new brand creation and web build project, it’s really important to fully understand what the client wants to gain from their new website and also the tone or feel they want to convey with their branding

Revisiting Whitespace

It has been over two years since we celebrated Whitespaces first year in business on the front cover of SBT back in January 2019.