If you run a blog or online magazine, chances are high that you’re using WordPress. There are many other content systems in the market, paid and open source, including the likes of Joomla! and Drupal but nothing holds a candle to WordPress when it comes to ease of use, customizability, and reliability.
WordPress gives you a solid foundation upon which you can slap on any theme or custom design you like and get on with it. This freedom to shape the user interface whichever way you like is a double-edged sword, however, as the responsibility to keep the design looking fresh and unique lies on the webmaster.
See, the periodic updates from WordPress are great as they add new features to the CMS and weed out known bugs, but in most cases, as far as the end user is concerned, the website looks more or less the same unless a deliberate design change is implemented. Given how fast web design is evolving, even a theme or design that’s just two years old can end up looking like a lost artefact from the 80s Internet compared to newer designs.
In this post, we discuss how you can give your WordPress blog or website a complete makeover and make sure it looks clean, modern, and up-to-date.
Revamp Your Design
The first step in the makeover is also the most major step of the process—redoing the design of your WordPress website from the ground up.
Depending on your specific needs, you have three options to choose from. You can either choose a standalone theme, purchase a theme framework, or have a designer make a custom design for you. All three options have their own pros and cons.
Standalone Premium Themes
These are themes intended for mass consumption and come in many shapes and forms. You can buy a standalone theme at any of the theme marketplaces such as ThemeForest, Mojo Marketplace, Template Monster, and more.
At these marketplaces, themes are usually categorized under different categories such as business, eCommerce, nonprofit, and magazine, among others.
Other than marketplaces, there are also many independent theme creators such as Press 75, Woo Themes, Dessign, and many more. Between all these choices, you are almost certain to find a theme that matches your exact needs.
- The most cost-effective way to implement a new design
- Wide choice in style and features
- Most themes are updated regularly by the developer
- Once outdated, you’ll have to replace the design entirely
- You will have to make minor customizations yourself
- Your design will most likely not be unique
Theme frameworks exist to solve a very particular problem that users encounter while using standalone themes: Their eventual obsolescence.
In standalone themes, both the functions of the theme and its styling are bound together in one package, so when the front-end of the website begins to look dated, you have no option but to replace the entire theme and start afresh—losing all your customizations you made in the process.
A theme framework resolves this problem by separating a theme into a Parent theme and a Child theme. A Parent theme holds all the theme functions and customizations while a Child theme is just a styling template that can be changed as and when needed to refresh the look of the website.
In that sense, a theme framework is just a bit more futureproof than standalone themes. The two most popular frameworks in the market are Thesis by DIYthemes and Genesis by Studiopress, although there are other options to consider as well.
- You can revamp your website with a child theme without losing customizations
- Most popular theme frameworks have a strong developer and support community
- You can use a parent or starter theme as a foundation to build your own design rather than coding everything from scratch
- Functionality is often limited by the options provided by the parent theme
- Most theme frameworks aren’t free and either have a one-time fee or an annual fee to receive updates and support, moreover, child themes may cost extra
- There is usually a slight learning curve associated with each framework
Custom Theme Development
For most people, a standalone theme or theme framework will suffice but few will need something more bespoke. If you need a custom design for your website, you can either find an independent designer for the job or employ the services of a design studio.
Other than these general purpose freelance marketplaces, there are also websites such as Dribble and 99designs that act as an online directory of designers who can be hired according to different skill sets, in this case, WordPress theme development.
Your chances of finding a skilled designer are higher on such websites because they specialize in this work. Generally speaking, what you pay for a custom theme will depend on how experienced the designer is and level of complexity of your project.
For minor ongoing changes to your design, you can hire a designer from Fiverr who will do a variety of small jobs related to WordPress for just $5 a pop.
- You will have a website design that is made to your exact specifications and is wholly unique to you
- You can have an ongoing relationship with the designer or the studio for periodic updates or changes to the theme
- Custom theme development is significantly more expensive than other out-of-the-box solutions
- If you designer decides to stop working on your project, you may have difficulty finding another designer, and even if you do, it may be challenging to maintain clean code
- Eventually, you will have to retire the design as even a custom design with periodic updates will go obsolete at some point, and it will hurt more to trash something that cost $2000 as compared to something that costs $50
Fonts & Typography
After design and user interface, the next most important thing that makes or breaks user experience is the website’s choice of fonts and typography.
In the past, we have extensively covered this topic in a previous post titled How Typography Affects Readers. If you’re looking for a solid primer on typography and its principles, look no further.
For the purpose of this post, we’ll limit our discussion to the practical matter of which fonts to use, in what size, and where to get them from.
Choice of fonts is a very subjective thing, but the general opinion is that you should never use the same font family for headings and body copy. Thoughtful variation in fonts is what makes for a pleasing reading experience.
Generally speaking, you can’t go wrong with using a Serif font for headings and subheadings, and a Sans Serif for body copy—although this isn’t a hard and fast rule and you should break it if you think a certain combination works for your website. Don’t be afraid to set the body copy font to as much as 16px as it aids readability on the web. (We’re using Open Sans in 16px for our body copy.)
You have many options as far as sourcing of fonts is concerned, there are many free fonts available on the web, in addition to services such as Google Fonts and Adobe’s Typekit, although the latter is a paid service. The WordPress developer community has released plugins for both Google Fonts and Typekit to make integration a breeze.
To stay updated with the latest developments in web fonts, there’s no better resource than the tags for fonts and typography on Smashing Magazine. If you need help selecting font types for your website, here are a few great resources by them:
- How To Choose A Typeface by Douglas Bonneville
- Five Principles for Choosing and Using Typefaces by Dan Mayer
- Best Practices of Combining Typefaces by Douglas Bonneville
Set Up Essential Plugins
Between a revamped design and the new typography, the frontend of your website will have a new lease of life. Now it’s time to make some changes at the backend that will make your newly updated website faster, more secure, and more functional.
Of course, you can just carry on with whatever plugins you were using before but that wouldn’t be a revamp now, would it?
Too many plugins can make WordPress bloated and slow down the website, so the first thing you should do after the design change is to disable all the plugins and then selectively enable only the essential ones. You can always add more plugins later as needed. Here are a few recommendations.
- Admin Columns: Customise columns on the administration screens for post (types), pages, media, comments, links and users with an easy to use drag-and-drop interface.
- Akismet: Akismet checks your comments against the Akismet Web service to see if they look like spam or not.
- Better Internal Link Search: Improve the internal link popup manager with time-saving enhancements and features.
- Clef Two-Factor Authentication: Modern two-factor that people love to use: strong authentication without passwords or tokens; single sign on/off; magical user experience.
- Commenter Emails: Extract a listing of all commenter emails.
- Comments Not Replied To: Easily see which comments have not received a reply from each post’s author.
- Content Aware Sidebars: Create and display custom sidebars according to the content being viewed.
- Cue: Create beautiful, fully responsive audio playlists.
- Disable Comments: Allows administrators to globally disable comments on their site. Comments can be disabled according to post type.
- Duplicate Posts: This plugin allows to clone a post or page, or edit it as a new draft.
- Foo Gallery: Foo Gallery is the most intuitive and extensible gallery management tool ever created for WordPress.
- Imsanity: Imsanity automatically resizes huge image uploads. Are contributors uploading huge photos? Tired of manually scaling? Imsanity to the rescue!
- Jetpack: Jetpack simplifies managing WordPress sites by giving you visitor stats, security services, speeding up images, and helping you get more traffic.
- Page Builder by SiteOrigins: Build responsive page layouts using the widgets you know and love using this simple drag and drop page builder.
- Related Posts for WordPress: Display related posts without slowing down your website. Link all your existing content with only 1 click, get related posts for all your posts today.
- Restrict Content: This is a simple plugin that will allow you to easily restrict complete posts / pages to logged in users only.
- RICG Responsive Images: Bringing automatic default responsive images to WordPress.
- Seriously Simple Podcasting: An easy-to-use podcasting solution for WordPress that is as powerful as it is simple.
- Simple Image Widget: A simple widget that makes it a breeze to add images to your sidebars.
- Simple Page Ordering: Order your pages and other hierarchical post types with simple drag and drop right from the standard page list.
- WooCommerce: WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.
- Yoast SEO: Write better content and have a fully optimized WordPress site using Yoast SEO plugin.
The last step in your makeover should be to repurpose your old content to make it work with the new design. You may want to audit your entire content and identify the changes you need to make such as set H1, H2, H3 tags and include featured images if your previous design did not have them.
Have you recently updated your design? What challenges did you face? What improvement have you noticed in your user activity since your redesign? Let us know in the comments.