Switching WordPress Themes: My Website Redesign Process, Tools, and Goals

If you’ve been by SideHustleNation.com lately you might have noticed the site just got a long overdue facelift.

This is the 3rd major redesign of the site and the first since January 2014.

I remember that date because I worked on it over the holidays and wanted to get it done before heading off to my first New Media Expo, which was the first weekend in January that year.

In this post I’ll share my ideas and goals behind the latest theme change, what’s new with the site, and how I was able to complete the redesign process myself on a limited budget.

Note: If you don’t have a website online yet, this case study breaks down the fastest and cheapest way to get started.

The Old Site

Before I get to the new site, let’s take a look at where we’ve been.

Here is SHN 1.0, which ran from May – December 2013:

Yeah.

That version was built on a free WordPress theme called Responsive, which I actually used on a couple other sites from that “era” as well.

Side Hustle Nation 2.0 was a customized version of the Revera theme from FabThemes. I actually did most of the customizations myself using the tried-and-true programming method of Googling something, pasting in the code, and crossing my fingers it worked without breaking anything.

It ran from January 2014 to July 2017, and provided a great foundation for a period of strong growth and content expansion (and contraction).

What’s New in the Redesign?

So what’s changed with this latest version of the site? Let me walk through a few of the major and minor updates below along with my goals for each.

The primary goal was to get people to the content they need faster and easier.

A New Theme

WordPress themes are like the frames around which your site is built. In this case, my new theme is called GeneratePress. (I paid $39.95 for the “Premium” version.)

It’s a highly customizable theme with lots of fun options, like the ability to easily hide the sidebar or subnavigation menu on certain posts or pages.

Now it’s easy to go down the rabbit hole of exploring new themes, and I can’t remember how exactly I came across this one. It was either a recommendation from a friend or it was listed on some blog post I landed on after searching something like “best blog themes.”

New Homepage Structure and Images

I used the popular Beaver Builder software ($99) to design the updated homepage. They’ve got several templates you can use as starting points and work from there.

The new homepage offers the same primary call-to-action (to visit the “Start Here” or “Join the Nation” page), but does away with the most recent articles and podcasts.

Immediately below the main CTA you’ll find 3 “pain point” links that correspond directly to answers from my member survey:

• I need a side hustle idea
• I need more time
• I need more traffic or customers

This is a shift from the last version of the site, which used that space to link to the blog, podcast, and ideas page.

Before:

The new “pain point” or “how can I help?” direction comes from the book Ask, which advocates sending people down different paths based on what they need the most help with.

After:

Below the fold there are 3 primary sections, one each for:

1. The podcast
2. The blog
3. The Side Hustle Nation community

Conventional conversion rate optimization (CRO) wisdom says to give people fewer choices, but I wanted to test something out to get new visitors into the content faster. Once people are in, there are plenty of content upgrades and opportunities to join the email list, without hitting you over the head with it on the homepage.

Value first, ask second. At least that’s the theory I’m testing.

All of the options on the homepage (Start Here, listen to the podcast, dive into the blog, or join the free FB group) represent high-value actions a visitor can take.

In between each of these sections are various social proof elements, including media mentions, testimonials, and accolades the blog has won.

Below that, I’m testing a fun “Don’t Click Here” button, which opens a LeadBox, since I believe side hustlers have a healthy rebellious streak in them.

And at the very bottom of the page you’ll find my social media links and the “fine print” links.

Here’s what the social icons used to look like:

And what they look like now:

My lovely bride Bryn helped take some new photos for the site, and I’ve still got my “will work for freedom” sign up at the top.

An Updated Logo and a More Fun, Action-Oriented Font

Along with the homepage changes, I changed the font in the navigation menu and the primary call-to-action to one called Bangers, which I think looks more fun and action-oriented than the old straight-up-and-down font.

Before:

After:

You’ll also notice the slightly updated logo to include the new font and the addition of the “Amplify your earning power” tagline to quickly let people know what the site is about.

The goal with the font change, combined with the text and images, is to give the site a little more personality.

Podcast Categorization and Filtering

With more than 200 episodes of The Side Hustle Show, landing on the podcast archives page for the first time can be a little daunting. Where’s a new listener to start?

So what I did there was add a Category column and Search bar to the display table so people could quickly scan for the episodes most relevant to their hustle and build their own playlist.

The display table is currently built with TablePress but it’s a work in progress to make it more mobile-friendly.

I also used GeneratePress to kill the sidebar on that page.

A New Related Posts Plugin

The old site used a plugin called Contextual Related Posts to generate — you guessed it — related posts below the content on each post.

I liked the functionality of the plugin but not so much the look of it. (Images were often cropped and distorted.)

Before:

After:

The new related posts plugin I’m using is called Yuzo Related Posts. It’s relevance algorithm is decidedly worse, but aesthetically I think it’s a big improvement.

No More Magic Action Box (Upgraded to Optin Monster)

For the last few years, I’ve been running a free plugin called Magic Action Box to display an optin form below my blog posts. It’s a popular spot to put an email capture form since if a reader made it all the way to the bottom of your post, odds are they liked it, so it’s a decent time to make an “ask.”

The problem was the Magic Action box was a little dated and the design didn’t fully match the branding and color scheme of the site.

Here’s what it looked like:

Still, that form added thousands of subscribers to my list, so I wanted to keep the option there, just with an improved look.

I ended up buying Optin Monster to get the job done. Here’s what my first version looks like on the new site:

I reasoned that since a couple hundred people per month were filling out that form, I was OK paying around $15 a month for the software. (I used promo code VIP20OFF for 20% off the annual “Plus” plan.)

A Better-Looking Sub-Navigation Menu

As part of the goal to get people to the most relevant helpful content faster, I ended up simplifying the categorization on the site and cleaning up the sub-navigation menu.

On the previous version of Side Hustle Nation, the subnav was tacked on in early 2017 almost as a placeholder. I didn’t love the look of it, but it was a quick fix for what I ultimately wanted to implement.

Here’s what it looked like:

Pretty much just some words floating in space. I don’t think it was visible at all on mobile devices either, which make up 50% of the overall traffic.

In the new version of the site, there’s a legit full-width color-blocked subnav, with dropdown submenu items to help people find the content they need faster:

And with GeneratePress I can easily hide that menu on certain pages to limit distractions.

Implementing All the Changes

With the help of Zen WP and my hosting company, WPX Hosting, we’d set up a test site to play around with all this stuff.

The trickiest part was actually figuring out the best way to make all the changes from the test site appear on the live production site. It’s kind of like switching tracks on a moving train, and there’s never a good time to get it done!

The WordPress wizards at Zen WP were able to import all the saved Beaver Builder elements I’d built, but rather than doing a full overwrite I actually sat down on a Friday morning, activated the new GeneratePress theme, and quickly re-applied all the theme changes we’d made in the test site.

And that’s the beauty of WordPress; a new theme just sits on top of all your existing content and just dictates how it’s displayed.

I used the Theme Preview function to apply many of the changes before activating the theme, but ultimately had to rip off that Band-Aid and make it live to the world.

It might have looked a little funky for an hour or two while I was getting that done but in the end it saved a ton of potential database problems.

What Did It Cost?

In my case, this was actually a really affordable redesign. I spent $321 on software:

• $40 for the Premium GeneratePress theme (there’s a free version as well)
• $99 for Beaver Builder
• $182 for Optin Monster (use promo code VIP20OFF for 20% off)

On top of that, I spent $284 for 4 months of Zen WP WordPress support (use promo code VAATENOFF for 10% off any support plan).

So in total, a little over $600 to give the site a long-overdue refresh. Not bad, especially considering my first site cost $10,000 to build in 2005!

Your Turn

One important thing to note is that a website is always a work in progress. It’s never truly “done,” and there are still a few more things I need to tweak and test on this new theme as well.

Have you gone through a similar redesign process? What’s your biggest holdup in finding and activating a new theme?