Designing beautiful and highly functional WordPress themes is not as simple as opening your design editor of choice and going to town. There’s a lot more to think about when it comes to developing beautiful WordPress themes that intentionally focus on both form and function.
It’s important to understand the full genius of what “design” encompasses. The art of design not only reflects style and invokes emotion, it also consists of the underlining structure, rules,andstandards within a given context.
Understanding design is particularly significant in the context of WordPress theme development, as tastes and styles vary throughout the world — although WordPress theme development standards do not. And while design can be considered both subjective and objective, this guide focuses on the arguably objective principles to designing beautiful and highly functional WordPress themes.
Design for the unknown
When designing WordPress themes, half the battle is accounting for the unknown. Rightfully so, theme developers have very little control of what end users do with your theme, how they use it, or what content they’ll add. To combat this unknown, consciously design for probable-use cases and don’t force structure limitations on your users.
For example, if your WordPress theme adds related content below each article, you really don’t want a situation where the page looks broken if some posts lack featured images, or even if the images are not sized exactly as you’ve done on the live demo.
This is an accordion block from CoBlocks
Download CoBlocks on WordPress.org to add accordions, pricing tables, spacers, notices — the lot.
Simply don’t rely on users to build out their websites exactly as you have for the theme’s live demo. Most users won’t, nor should they be expected to.
Another example:It’s not necessary to display an empty sidebar, if users have not added widgets to the sidebar’s widget area. Instead, contextually display the post or page content at fullwidth, if there are no widgets. This empowers your users to decide if they want to display a sidebar or not — they’re not forced into it, just because the demo site has one.
All that to say, plan for the unknown and design for the unknown.
Design for mobile
Folks are now well educated on what a decent responsive website performs like and how it adapts to various screen sizes and resolutions. Ask any customer of yours if they have explored your WordPress theme from a mobile device before completing their purchase.
I bet they have.
The mobile nature of a website should never be an afterthought. Iron out the theme’s mobile styling and put additional effort into understanding a users‘ experience navigating the theme from a mobile device.
Spend the same amount of time on mobile views, as you do on desktop… it’s literally just as important. Ask yourself:
- What happens if the theme is viewed from a touchscreen device that does not support hovering? Are there proper fallbacks in place?
- Is your theme finger-friendly? Apple’s iOS Human Interface Guidelines suggest a minimal tappable area of at least 44pt x 44pt.
- Are you taking full advantage of the available screen real-estate?
Half-baked responsiveness won’t get you very far. Do the work and deliver a responsive WordPress theme that your customers absolutely love to look at from any device.
Design for accessibility
The “web accessibility” entry from Wikipedia states:
The mission of the WordPress Accessibility Team is to make WordPress accessible to everyone, including the more than one billion humans with disabilities. So what exactly is web accessibility and what does it entail?
Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
Click to Tweet
Accessibility is paramount to ensuring that everyone has the equal opportunity to consume your theme’s content. And while it’s not particularly difficult to develop digitally inclusive WordPress themes, there is a learning curve.
Here are a few accessibility hot tips to apply to your WordPress theme:
- Use the Colour Contrast Analyzer to check the theme’s visual contrast.
- Design with web accessible colors in mind.
- Don’t make the font too small to begin with.
- Don’t make the font too small to begin with. Here’s a good read on body copy font legibility.
As developers, we are always discovering new techniques and developing new skills. Learning all that encompasses accessible WordPress theme development is a natural step in our careers as WordPress developers.
You can learn how to create accessible WordPress themes from the official Make WordPress Accessibility Handbook. I have also found that Google’s Accessible Styles guide is a great place to explore web accessibility.
Closing
In today’s WordPress economy, so few theme developers are designing WordPress themes with both design and function in mind. Set yourself apart by embracing these functional design principles in your WordPress themes.
Download CoBlocks today
CoBlocks is a collection of page builder Gutenberg blocks for content marketers, built by the fine folks at ThemeBeans.
Combine these WordPress theme design principles with my tips on getting approved on ThemeForest and you’ll start off ahead of the competition.
Just don’t be another „one-off“ developer looking to make a quick buck. Instead, treat your customers to beautiful WordPress themes that are focused on functionality, responsiveness, and web accessibly — like mine.