This article discusses the requirements I have for a WordPress theme. I’ll be using this list to compare WordPress themes to determine which one I will use for my WordPress sites, including this blog and my personal web site KennethAdams.com.
Because I was migrating this blog from Blogger, I had a set of basic requirements based on the comparatively small feature set of Blogger. Plus a list of new requirements that I wanted, in order to take advantage of WordPress, it’s much more advanced technology, and to take my blog and personal web site a big leap forward in design and functionality.
About This Series of Articles
WordPress – My Real World Experience: An Article Series
Trying Something Different & Hopefully Better
I’m working on creating a series of articles on my real world experience, searching for solutions using WordPress. After 100s of hours reading 100s of WordPress articles and posts, I’ve discovered that most reviews and how to articles that I’ve found on many WordPress topics, seemed to lack insights from the perspective of someone that has actually applied the subject of the article to solve a real world requirement. And then tried to share the good practices they’ve learned. So rather than write yet another review or how to that seemed disconnected from reality, I thought it might be helpful to people if I shared my real world experience putting something to use to solve my real problems.
So these articles are not designing to replace reviews and attempt to cover lots of aspects of a particular thing or topic. But rather to share my requirements, my experience and observations, and some good practices that I learned along the way, while putting something to real world use.
Read the entire series of articles here.
Newbie or New Ideas ?
My goal is to be completely open and transparent. So with that in mind, I fully volunteer that I am a newbie to WordPress. So I am approaching it with little knowledge of the history of WordPress, and experience with how it has evolved and developed over the last 2 decades. So I fully admit that when it comes to WordPress, I don’t know what the hell I’m talking about.
But I am coming to WordPress with a lot of engineering expertise with web technologies, publishing platforms and Content Management Systems (CMSs) – among other things. So I’m hoping that gives me a fresh look that a seasoned WordPress developer or user might not have. And perhaps that could be useful as a source of new ideas and innovation, maybe ?
And that maybe that can help people.
Basic Requirements
This subset of the requirements documented here, are absolutely essential to be met by any theme that I choose to use and pay for.
- Support All Standard WordPress Block Editor Features
- Support All Capabilities of LuckyWP Table of Contents
- Complete Control Over Header & Footer – Or at least close to complete
- Complete Control Over Links Styles
- Sticky Menu, Header & Footer
- Customizable Page Headers & Footers
- Customizable & Embeddable Blog Post Lists
To not have these requirements supported a theme is a deal breaker that will prevent me from using it. This is because:
- Most of my existing blog content is written and formatting based on features like standard features like align right and left. So if they disappear or behave differently, then a lot of re-formatting and re-thinking of the content design will be necessary. That will consume a lot of time.
- It’s the principle. Any premium theme should support these features. Especially standard WordPress features like the block editor.
- Because I am paying for the theme, every year for updates and support.
- WordPress is supposed to be better and more capable than Blogger. So I should not lose features.
Support All Standard WordPress Block Editor Features
This shouldn’t have to be stated, but I’ve found themes that break basic WordPress functionality, so I have to put it front and center. It’s crazy !! Stuff like align & float right or left. Or the standard styles of the Table or Separator block.
The Block Editor, also known as the Gutenberg Editor which is the codename used when it was in development, was released in WordPress v5.0 in Dec 2018. So I don’t think it is unreasonable to expect every theme to support all block editor capabilities. Especially premium themes that you pay money for, every year in order to get updates and support.
I want the simple User eXperience (UX) that the standard WordPress Block Editor provides, without having to go to a page builder like Elementor to get the formatting that is supported by the block settings. My workflow around this blog is dependent on being able to write and publish as quickly as possible, without the editing and formatting UX getting in the way. The simplest and fastest to use UX is the block editor.
Support Align/Float Right or Left
Must support align right or left on all blocks and theme elements and properly float the element right or left and flow text around them. For example, the Image and Table block’s Align Right and Left properties that allow all other blocks to flow around it.
The screen shot below illustrates what an image block set to align right should look like.
Other block types like Table and LuckyWP Table of Contents also have float options.
Not Require a Page Builder
This is related to the requirement to support all block features. I should not have to resort to a page builder like Elementor or Beaver Builder to get complete control over formatting, because the theme does not support the basic built-in WordPress block settings.
Support All Capabilities of LuckyWP Table of Contents
I depend heavily on the LuckyWP Table of Contents plugin, so this is another deal breaker. Being able to do an automatic Table of Contents and have complete control over its formatting is another big reason why I decided to migrate from Blogger to WordPress.
The screen shot below illustrates what a table of contents set to align right should look like.
In my work I write and publish a lot into internal company wikis powered by Confluence or Jive. Both of those products have a built in automatic Table of Contents feature with complete control over its formatting. While I think WordPress should build that into the core, I’ll settle for a third party plugin to pull it off.
This is another thing that should not need to be stated, but I’ve tested a number of themes that totally suck at this. This seems to me that this is the reason a theme exists, but yet many I’ve tested are completely incompetent at this. That seems to be the norm, rather than the exception in WordPress themes.
This includes, for example:
- Complete control over layout – numbers of rows, columns, alignment of them, sizing, etc.
- Support any widgets and blocks.
- Complete control over styling.
Complete Control Over All CSS Styles
This means:
- Be able to control all of the CSS styles using the WordPress customizer UI. And not have to edit CSS files directly.
- This especially includes standard HTML elements that are used in the WordPress block editors, like H1 H2 H3 etc. headers, lists for bullets and number lists, tables, quotes, separators, images – all WordPress blocks.
- Including all the customizer elements added by the theme.
- Includes all menus, sidebars, widgets, headers, footers, etc.
For example, a big requirement is to be able to tweak all the spacing and styling of the headers. Also things like borders and colors. Every single thing supported by CSS.
Many themes I’ve tested have simplistic formatting or an excessive amount of padding or margins on headers, quotes, widgets and other elements. And all that wasted white space drives me crazy. It just looks awkward when it’s not used properly, and when the design has a nice sophisticated look.
This is the stuff that makes a web site look “WordPressy” or “Bloggery”. Meaning clunky, awkward, unsophisticated designs.
I realize there are a ton of CSS Properties and values and so building UIs for all of them is complicated. But I think that is what theme designers need to take responsibility for, since the theme is the way to control the design of WordPress. (CSS Properties reference at W3Schools, MDN – Mozilla Dev Net)
Use CSS Classes Throughout Code
Whether the theme fully supports setting all styling via the WordPress Customizer or requires you to write your own CSS code, the code that the theme generates must follow good practices so that it supports detailed and flexible styling and makes it as easy as possible. I think the best way to do that is to use classes on all HTML elements.
So that means the theme MUST use classes on all HTML elements, including those generated by WordPress blocks in the body. As well as all other theme elements like menus, sidebars, widgets, page headers and footers, etc.
BTW: Not being a WordPress developer, I’m not certain if WordPress can support the theme putting classes on HTML elements used in WordPress blocks, but I certainly hope so because that would support a good development practice.
CSS and the Role of Classes
For those not familiar with CSS and the role of classes, here’s a summary.
Classes are an attribute that is set on HTML elements like P (paragraph), header elements like H1, H2, H3, etc., A (anchors or links), etc. (HTML Class reference at W3Schools, MDN – Mozilla Dev Net) Classes in CSS are a powerful selector that supports inheritance. (CSS Selectors reference at W3Schools, MDN – Mozilla Dev Net)
Using classes in CSS makes it easier to define detailed styles that have the flexibility of inheritance. The C in CSS stands for Cascading, meaning inheritance. And inheritance is the capability of having a style inherited down a hierarchy. For example if you set a style for H1, it will be inherited by all H1 classes, like H1.widget which might be a H1 class used on a WordPress widget. Unless you specific different styles for H1.widget.
Complete Documentation of Theme’s CSS Classes
Completely documenting the CSS classes used in a theme is just a good development practice. But it’s absolutely essential to provide complete documentation to customers, if the theme does not implement control of all styles via the WordPress Customizer.
Otherwise, customers have to tediously scour the page source code to try to figure out what classes the theme is using. And time consuming troubleshooting and trial and error is a very bad customer experience. And just plain dumb, when it can be solved by following a good development practice and documenting your code.
Complete Control Over Links Styles
Although this falls under the previous requirement about Control Over All CSS Styles, it’s worth calling out separately. Because it’s very important, it’s not a WordPress block and most themes I’ve tested include a specific section for this in the customizer.
This means control things like (these are examples, but really this means all CSS properties available for links):
- Link formatting like text color, background color, bold, italic, underline, etc.
- Hover formatting like text color, background color, bold, italic, underline, etc.
- Visited formatting like text color, background color, bold, italic, underline, etc.
- Get the idea…. All link formatting and CSS properties.
- Bonus points if the theme adds animations.
This is where the site’s menu sticks to the top of the browser window when scrolling down.
Examples & Demos
Here’s some examples and theme docs on the topic:
- Slack’s blog currently has a simple sticky menu
- Astra theme product features web page has a sticky menu below the menu and page header.
- OceanWP Demo
- ColorMag theme from ThemeGrill has some demos
- BoldGrid WordPress product & services company uses a sticky header on their product web site
- Sydney Pro from aThemes
Docs
Here’s some theme docs on the topic:
- Astra Pro theme docs on Sticky Headers
- GeneratePress theme docs on Sticky Navigation
- OceanWP theme docs on Sticky Headers
Menu Animation & Properties
Slide Down
Slack’s blog has a menu that slides down and sticks once the main menu scrolls off the screen.
Transparent
Sydney Pro has a sticky menu that is transparent and shows the page content below it.
Shrink
BoldGrid has a cool animated shrink that shrinks the logo and shrinks away the tagline until it disappears.
Fade
ColorMag has menu that fades to a different design and shrinks.
Transition to different design
BoldGrid and ColorMag transition to a different design when you scroll.
The screen shot below illustrates what a sticky menu with transparency should look like.
Flexibility in Postioning
Astra theme product features web page has a sticky menu below the menu and page header. It’s positioned in the body of the page and when the menu slides up to the top of the page, it sticks there.
Complete Control Over Search UX
- Like adding a search icon to the menu.
- When that icon is clicked, to slide open a search text box over the UI. With animation of the box.
- Control styling and animation of the slide over search box.
- Control styling of the search results page.
Being able to programmatically display headers and footers with sophisticated formatting. For example, conditionally display based on Category or Tags.
Customizable & Embeddable Blog Post Lists
Complete control over how pages with lists or posts on them appear. And be able to embed a configurable lists into a page or post with a block or widget. For example:
- Customize a category landing page with a customized post list in it.
- Embed a post list into a post or page, filtered by tags, categories, title search, etc. or combinations of filters.
Color Coded Categories
This blog currently as I write this, uses the ColorMag theme from ThemeGrill which has a cool feature that displays the categories with color codes at the top of every post with the other meta data.
Also at the top of the page for each category list view like
And in Customizer allows you to choose the color code for each category.
Support Lightbox Features on Images
Lightbox is a feature that displays images and videos by filling the screen and dimming out the rest of the web page under it. Blogger supports this feature out of the box. The screen shots below illustrate this feature as it works in Blogger.
While there are WordPress plugins that can do this, as a newbie to WordPress it seems like something that should either be built in or be provided by the theme, so that there is no third party dependency. It seems logical that the more third party dependencies on plugins and themes that there are, the more likely compatibility problems will arise when WordPress and other third party products get updated.
Support 2 Sidebars – Left & Right Simultaneously
This requirement means to support displaying 2 sidebars at the same time, one on the left and another on the right of the page. Blogger supports 2 sidebars, as seen in the screen shot below.
