When it comes to designing WordPress themes our design philosophy is start the design of a theme with a small screen and then gradually expand the design to include elements that look better on a bigger screen. (This is also know as a “mobile first design”). The reason for this is that the majority of users will experience a site on a mobile phone with a small screen rather than on large screens.
Fonts and typography are integral to creating great designs and whenever we design a new theme we always start with a great fonts and then build everything around them.
Below are the essential design elements that we include in all our custom and premium WordPress themes:
Every theme developed by williamfence is responsive. This means that the size of the screen adapts according to the size of the device. On larger screens more horizontal elements are displayed and on smaller screens some elements are moved below others or are hidden from view. These “breakpoints” are not fixed but rather change at points that feel right to the designer. On smaller screens we use smaller fonts and on larger screens we use larger font.
All themes are configured for at least three WordPress menus. These are:
- A main or primary menu;
- A mobile menu for smaller screens;
- A footer menu at the bottom of the page for important links.
In April 2015 WordPress made an announcement requiring use of the customizer for all options from now for all new themes in the WordPress.org repository. (You can read the posts here and here.) The themes that we develop follow these guidelines. As a result none of our themes have custom “Theme Options” menu item and all theme options are set in the customizer.
Each of our themes comes with a serif and a sans-serif font set as the default fonts for the theme. These fonts are included in the distributed theme files (under a fonts directory) and this is done so that the theme still looks good on a localhost (or intranet) or a site with limited internet connectivity.
The site administrator can overwrite these options by selecting a Google Font from the customizer menu and these fonts will then be served from Google.
On smaller screens we use smaller fonts and on larger screens we use larger font sizes. This is because when people use smaller screens they tend to hold them closer to their face, which means smaller fonts are okay, whereas when people use larger screens they tend to sit further away, so you need larger fonts so it’s always easy to read. The second reason is that on wider screens you want to limit the total width of each line, because if a line becomes too wide and there are too many words on it it becomes hard to read. Likewise, on smaller screens, you have to make sure the lines are wide enough and that the font is small enough to fit enough words on each line for it to be comfortable to read.
The following colors are customizable by the WordPress site administrator:
- Background Color
- Header Text Color
- Footer Text Color
- Link Color
- Link Hover Color
- Main Text Color
- Page Background Color
- Secondary Text Color
- Sub Text and Icon Color
- Text and Links
- Universal Text Color
- Universal Text Shadow Color
For premium themes the footer text is editable by the site administrator.
All themes are translation ready.
Each theme is configured to received automatic updates, and when available these updates show on the WordPress dashboard.
Each theme contains elements that support and enhance accessibility.
- All images have relevant alt text
- All elements have text that supports screen readers
The header will display the site title, the site description, a home link, and the main menu. Because headers normally take up a lot of space, especially on mobile devices, our design philosophy is to only show the full header on the homepage. On every other page, you will see a reduced header.
On the homepage the header title will have a
<h1> tag and on all other ages the header title will use a
<p> tag and the post title or page title will have the