10 Practical Tips to Building Quality WordPress Themes
Selling or developing WordPress themes? Follow these tips to designing and developing top-notch themes.
Intro
A few weeks ago, I published a guide on three key principles to designing functional WordPress themes. This week’s article stays on the topic of WordPress theme design but leans towards actionable tips and techniques to building quality WordPress themes.
The subjective nature of design makes it inherently challenging to build WordPress themes that transcend subjectivity and appeal to the masses. While developing WordPress themes, the goal is to build a theme that looks great within the context of WordPress, regardless of subjective design choices.
So here are a few of my key objective design and development tips to building quality WordPress themes. Let’s get to it!
1. Content should look great from the start
When a user installs a WordPress theme, they’re looking for the quickest and easiest way to get a website online. That is probably why they’re using a stock WordPress theme in the first place, instead of having a custom solution built for them.
“We should be hyper-focused on developing WordPress themes that are easy, intuitive & just work.”
Place yourself in your customers’ shoes. Run the theme within a fresh WordPress installation that is completely independent from your development stack. As a “new user,” explore what it takes to get your WordPress theme up and running.
To further improve the on-boarding process, add support for starter content. It’s not difficult to implement and provides relative contextual awareness to help users get started.
Starter content is a simple way to help themes look better right from the start. Why not treat your users to a better experience? WordPress themes work best when they just work.
2. Provide accessible input fields
In regards to web accessibility, a key principle of WordPress theme design, input fields should be clearly identifiable and visually contrasting with the surrounding elements. Analyze your input fields with the Wave Chrome & Firefox extension to check for appropriate visual contrast.
I also suggest adding a focus indicator that fits within the context of your WordPress theme’s design. Adding an alternate focus style is easy. Simply remove the input’s default outline and add an alternative.
Example:
Adding a suitable alternative is crucial. Without an alternative, keyboard users will not know which input field they’re interacting with. Not good. Small design tweaks like this go a long way in providing quality WordPress themes.
3. Forcing structural layouts is a bad idea
It is unnecessary to display an empty sidebar if users have not added widgets to the sidebar’s respective widget area. Instead, contextually display the post or page content at fullwidth, based on the presence of widgets.
My preferred method is simply adding a class to the body element, if that particular widget area is active. Then reference that class in your stylesheet to display the content area with room for a sidebar. Below is an example of how I personally do it in the latest release of my new theme, Tabor:
This method empowers your users to decide if they want to display a sidebar or not. They’re not forced into it — just because the demo has one.
4. Featured images should not link to themselves
Featured images displayed on singular post views should not be wrapped by a permalink to the current post, or directly to the image file. It’s not necessary for the image to link to itself, as the reader is already on the page.
It’s worth noting that if the single posts’ featured image is not wrapped by a permalink, it should also not display hover effects, as if it were actionable.
5. Comments require styling too
Style comments appropriately so that they are organized, legible and informative. This means that nested comments display properly, author comments stand out, and all comments adapt to mobile devices.
Considering that over 50% of web traffic is from mobile, responsive comments should be a top priority — not an oversight (as I see far too often while reviewing WordPress themes on ThemeForest).
Here are a few hot tips for designing comments:
- Don’t display massive avatars.
- Test the way nested comments display using the Theme Unit Test and adjust from there.
- Pull nested comments back to the left on mobile.
- Ensure there is proper spacing between comments, so that each one is clearly identifiable.
6. Pingbacks are still around
A pingback is essentially a remote comment that’s created when you link to another blog post where pingbacks are enabled. Although many WordPress users don’t bother with pingbacks, they are included in WordPress, so we need to style them appropriately.
A common blunder concerning pingbacks is leaving empty spaces for avatars instead of conditionally checking if the comment is a pingback or not. As pingbacks do not have avatars, it’s unnecessary to have that available space.
On that note, pingbacks should also have ample spacing and sit well within the context of the theme’s post content and other comments. Naturally.
7. Don’t add features for the sake of adding features
Does your theme really need a social sharing module at the top of the page, along the sidebar, and also under the post content? Maybe for a newspaper-esque theme, but what about a theme for dentists?
The context of theme features is solely dependent on the market you are targeting. Features should be relative, focused, and “must-haves” in your niche — not tossed in for the sake of having them. Do your research and uncover what makes a website within your target audience successful.
To play on the dental practice niche, ask yourself the following:
- What do the most popular dental practices have on their home pages?
- What makes a dental practice’s website different from any other field?
- What are people who are searching for a new dentist looking for?
If you really want to build a quality WordPress theme, you need to effectively craft a highly-tuned, purposeful WordPress theme — not another multi-purpose mess.
8. Please don’t duplicate post titles
If you take a look at every major online publication, blog, or journal, they don’t excessively display post titles throughout a page.
It is acceptable to have multiple instances of the post title, such as in breadcrumb functionality, although the majority of the time, it’s simply not necessary.
Duplicated post titles are a clear amateur design oversight and a key indicator of a lack of polish. Just don’t do it.
9. Center aligning text can destroy readability
Although there are many instances when you as the developer decide on the theme’s typographic styling, there is a fine line where the end-user should retain control over certain style decisions.
A fairly common developer overstep is forcing text to display center aligned. This practice often negatively affects a site’s readability, especially in the context of paragraph text. Left aligned text is typically far easier to read than centered text for paragraphs.
10. Test everything — again!
Run your WordPress theme extensively against the Theme Unit Test and ensure every bit of content displays as expected. Check every page, every post, every setting, every Customizer option — all of it.
“Testing is an essential part of publishing quality WordPress themes — one that simply cannot be overlooked.”
Install your WordPress theme on a fresh WordPress installation, completely ordinary and separate from your development repository. Check for errors using debug mode, user-experience mishaps, on-boarding issues and anything that’s out of spec with this guide.
You could even send the theme to willing beta testers. Just a thought!
Closing
These are the most common flaws I see among plenty of commercial WordPress themes. My hope is that this inspires developers to build WordPress themes that look, function, and feel like “real-world” websites — not generic “four-widgets-across-the-footer” themes.
All this to say: you do you. But whether you’re selling a WordPress theme, uploading to the official WordPress repository, or developing one for yourself, follow these actionable guidelines to designing and developing quality WordPress themes.
Originally published at richtabor.com.
