Design/build: WordPress themes

from design prototype to theme : how to get started

MP tips

As you’re all in the midst of your WP theme builds, I thought it might be useful to summarise some important aspects for workflow and setup for WP. A few reminders of basics and some things to avoid.

Content Out

This goes without saying really ~ don’t even attempt to start on your theme build if your WP site has only the default content. An empty shell will not show you the elements of content your design includes. My advice is to install a very basic theme (like our vanilla theme) and activate it while you work on content publishing. As this theme is only very basic in design and pretty much the default setup, it will show you your content as it will look in WP ~ without distractions.

Once you have this installed, work on publishing your content first. This does not need to be the complete content but should be enough to have some content in each of your planned sections. Exemplary content will do for starters. Work on your structure at this point, i.e. create the pages and categories for your posts as needed. Publish a few posts for each category ~ and then set up your menu/s.

Once you’ve got the menu in place, the content published and linked to correctly — only then is it time to work on your theme.

theme builds and previews

One aspect to decide on initially is where to build your theme. You could work on a local server (install WP locally, add your theme there and develop it, previewing the local version). Or you could work on the server – be that a staging server or simply a sub-folder in the main directory. I’d recommend working on the final server as this will make the launch easy and quick and allows you to test everything on the final setup (+ save time on having to move the finished site).

To work on your theme, I’d recommend to find a workflow that suits you. You’ll have to edit your code, save and upload it ~ then preview your changes via your browser. To give you an example, here’s how I work: I use Nova as my code editor (and versioning tool). I set up a project and add the details for the server as remote directory ~ setting the file path to my new theme (the theme folder is inside your wp-content > themes folder). I also set up the publishing ~ this will keep track of any changes I make to any given file, be that the template file or the css. I then work on the code and publish the changes as I proceed via the upload function; testing the pages as I go.

In short: you will have to have your new theme uploaded to the themes folder and activated in order to preview. Once that’s in place, you simply uploaded the updated files as you work your way through the theme files.

Versioning

If you are already working with versioning via GitHub or BitBucket, then you should do regular commits and pushes in addition. I have my repos on BitBucket and use Nova for my versioning.

But don’t worry if you’re not ready to do this yet ~ all in good time :)
If you have not started wokring with versioning yet – there’s still a manual way of doing the same thing. Start your theme file, and in the theme description, start your version numbering:

/*  
Theme Name: MP
Theme URI: https://yourdomain.com
Description: MP
Version: 1.0
Author: your name
Author URI: https://yourportfolio.com
*/

Start your theme build (saving and uploading as you go). Before you make a major change (maybe one that could break the theme), make a copy of the folder locally as backup, give it the name and version number as folder name for easy referencing. Then update the theme version to 1.1 — and carry on working in the same theme folder, again saving and updating as you proceed.

And if your changes result in a mess and all goes wrong, you can now copy/paste the files from the previous version into the current theme folder again and start fresh. If you do this at fitting points throughout your project, updating your version numbers, you are essentially doing your own versioning and safeguarding yourself against your mistakes with an easy way back :)

A word on plugins

My first question is always: do you actually need a plugin?

When you are new to working with WP – and you explore the available plugins, it’s easy to conclude that you’ll likely need plugins for any WP site. However, it is really only certain functions that will require a plugin, such as the GDPR consent (the cookie notice), or certain security measures — or more complex functions such as setting up a multi-lingual site or one with memeberships. In those cases, plugins are excellent as they allow you to add that functionality relatively easily.

Plugins that involve visual enhancements however are usually not required at all ~ despite how their descriptions might sound. WordPress now has the Gutenberg blocks which offer much if not all the functions these plugins advertise and sell.

A word of advice on pagebuilders ~ they’re evil :-P

well, that is an exaggeration ~ but I do strongly recommend you avoid anything that involves the word ‘page builder’!!! These had their purpose in the old days of WP ~ they met the needs that the Guternberg block now meet, offering options for custom layouts. Nowadays, for at least the last 5 years or so, these options are now part of the editor in WP directly, no need for plugins like these anymore.

The reason why I call them evil is that many of them have a bad impact on performance – they tend to work with huge JS overloads for editing as well as publishing and slow down everything. They often resort to adding lots of uneccessary scripts, slowing down your pages and in the worst case scenario, when you disable them, you have to revise ALL your content as everything will be broken. They’re not all bad – but as you know how to code ~ your best approach is to make good use of what the editor offers, and create your theme, templates and styles to do your own designs.

How to choose the right plugin

Do your research – read up on the documentation, check the reviews by others and see how the technical support is handled. By now, there are millions of plugins out there, some are by now outdated, no longer updated or supported, others are freemium, i.e. free for a basic version but better as pro when a fee is involved.

It’s important to be sure that the choice you make is for a plugin that will work for you on all fronts and that has good technical support. And try out the ones you feel might fit, see how they’ll intergrate into your theme before you make a definite decision. This will take a bit of extra time but will be worth it in the long run.

August 24th, 2022 by prisca

2 responses to “MP tips”

  1. Anna Riazhskikh says:

    Thanks for the tips, Prisca. This is really helpful!
    And a good note on plugins – I’ve been reading reviews and looking for options for building the quiz, and the ones I like the most in terms of their functionality are not free. Started to doubt if I actually need one.

  2. prisca says:

    Anna – very happy to know this helped :)