Some WP building notes
Working on your very first theme can be quite a challenge but it’s actually much more straight forward than you might expect. No matter which tools you use for your project planning and design work – to create your theme, your best plan of action is a coded prototype, one that you develop yourself. That way it will be a matter of implementing the design – literally a mirroring of the markup structure from your prototype to the theme files, updating file paths and updating the CSS.
When you have a HTML/CSS prototype completed, the process of building your theme only requires a few logical steps. As you are familiar with the code structure of your markup and your CSS for design – you will merely need to establish the same in the theme files.
Step-by-step
- content first
Produce your site’s content (even if only a few exemplary elements for each section / content type) and plan for your site’s structure. - design prototype – see part 2 of tutorial
Produce your design as HTML/CSS prototype – make sure to include all content types. The prototype does not need to include all content – merely feature examples of the different layouts and design elements used. For example, if your site is for recipes – you will only need one recipe’s page to work with. You’ll then also design/prototype other main or supplementary pages, like the ‘about’ and homepage. - prepare WordPress
Install WordPress and publish your content in WordPress – create your menu and make sure that you publish each post in its planned category. Add any other media as well.
This step is vital – you need published content in order to preview your theme during the build. - WordPress theme, the CSS – see part 4 of tutorial
Open both your prototype and the vanilla theme in your editor to start the theme build. First up, replace the theme’s CSS with your prototype CSS. Update the file paths to be relative to your theme’s folder.
Importantly, update the top section of the CSS – this will identify the theme in the WP admin:
/*
Theme Name: name of your design
Theme URI: https://yourwebsite.uk
Description: design for topic of your site
Version: 1.0
Author: your name
Author URI: https://yourportfolio.com
*/ - WordPress theme, the template/PHP files – see part 5 of tutorial
Next up is the the bulk of the work: compare your prototype code structure with the theme and ensure that the container elements are a mirror of each other. You’ll now need to ensure that the theme files have the same structure as your design prototype so that your design will hold up.
For this, you need to work with the split files the theme includes – for example, the header.php for the top part of your HTML and the footer.php for the bottom. The rest of the files are split according to context. The most important aspect to remember is that much of the copy, added via the editor, will get its markup from the WP admin. This means your initial focus is the containing elements and their IDs and classes which correspond to your CSS.
Don’t break the loop ツ
For this stage, the main structure needs to be updated. Make sure not to break the famous loop – if your testing later on results in the dreaded white page of death, that will mean you have broken the functionality which renders the content to the site. My advice would be to do slow and steady. Leave the theme code in place for starters and work on the HTML elements first.
You might want to do the next step after only a few edits to see how it is all working out. Or you might choose to try and complete most of the updates before testing – up to you and your preference ツ - upload & test
When you’re done, at least with most of the files and their updates, upload your theme to your WordPress site and activate it. Preview it to check whether your design is now working.
On your first edit, it is not likely that everything will be perfect. The theme will have some elements which you might not have planned for, i.e. your prototype does not include. There will be likely some additions to the CSS you will need to add.
Persist ツ
This process is straight forward in theory. And I know that the first time, the real work is quite intense and time-consuming the very first time. But you will learn to understand the core code structure of the theme ~ and once your design is working, you can dive deeper into the code of the templates. There’s much you can do to edit and expand on the vanilla theme.
And I am not going to tell you that you won’t run into trouble…. or that errors won’t throw spanners into the works ~ you will end up breaking things. You will have to fix some problems but if you go slow – make small edits and test as you progress – you will soon get to grips with it all. Make plenty of backups so you can revert back to a prior version if needed.
Do check out the article on troubleshooting for some tips on how to solve some issues.