Even if you’re not an SEO hotshot, it’s important to have a really good understanding of Google-friendly page architecture. Once your customer has finished customizing your theme, their thoughts will definitely be turning to SEO and you want to make sure that you aren’t causing them extra work at this stage.
There are plenty of fantastic SEO courses you can take, and I’d recommend doing that, but at a minimum, you need to make sure that you properly structure the Heading tags you use throughout a page.
According to Google themselves, “We do use H tags to understand the structure of the text on a page better” (John Mueller – Google 2015)
Heading tags (or H tags) tags are HTML markup that denotes headings. There are six levels of heading with H1 being the most important and H6 as the least important. H tags are generally used to help make a page more visually readable but also to help Google and other search bots to make sense of your pages.
In general, here are the guidelines you should stick to.
- H1 – use once on the page for your main page heading.
- H2 – use for section headings
- H3 – use for subsections
- H4 – use for sidebar and footer links
- H5 & H6 – can be used for styling purposes
If you’re selling a theme rather than a collection of layouts, you’ll want to make it as easy as possible to for your customers to change colours and font styles globally, rather than on module by module basis.
Where possible, set global colours, fonts, line heights, and fonts sizes for each H tag and for each device breakpoint. Depending on the theme or page builder you’re using, you can usually do this in either the Theme Options or Customizer settings area.
Once your global settings are in place if you can avoid overriding global settings whenever possible.
Adding Extra Features
I know you’re going to want to make sure your themes stand out in a crowded market, but often it’s the beautiful design rather than extra bells and whistles that will help sell a theme.
If you are just starting out with designing child themes, be selective about adding extra functionality via editing or adding PHP files, unless you really know what you’re doing.
Parent themes very often restructure their PHP files or make your own PHP edits redundant as they add new features. In addition, unless you are prepared to maintain theme versions using a system like Github, you’ll be unable to deliver updates and you may end up having to help many people remove or edit redundant files or themes.
If there is some must-have functionality you need, in most cases, it’s easier to use a free plugin from the WordPress repository and style it with some simple CSS.
CSS or no?
It’s tempting to bash out a bit of CSS and stick it in a module instead of using native functionality in your chosen theme or page builder. If you do use CSS, use it as sparingly as possible on the page.
I prefer to assign custom classes to sections, rows, or modules and add CSS to the Customizer or Theme Options area. This means that you’ll be able to update your themes much more easily if you need to eliminate any redundant CSS and it also makes it easier to see all of your CSS at a glance.
You’ll thank me when you’re trying to troubleshoot a customer’s support ticket!
Top tip: make sure you annotate your CSS with coded-out headers. Eg. /*REVERSE COLUMN ORDER ON MOBILE*/