[10-Step Guide] How To Redesign Your WordPress Website

Okay, so if you’ve been following my blog since the beginning, you would have noticed that I redesigned my website. Twice.

Initially, I tried designing my site using the website builder I bought, Elegant Themes Divi. And it wasn’t pretty… I mean, there were amazing free layouts that Elegant Themes provided. But I just didn’t like it.

In the end, I purchased a premium theme. The first one was pretty but just a tad plain. Until I found this current theme by Divi Lover.

Hence, I do have a bit of experience. Here’s a step-by-step guide that will breeze you through the redesign of your WordPress website.

Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!

1. Save CSS

First, log into your WordPress admin panel then click on the Theme Customizer.

You should be able to see the code under Additional CSS.

If you’ve bought a theme previously or if someone styled your site before, you should see some CSS code here.

Copy this code into a document or Evernote. Or save it in the cloud, like your Google Drive.

The point is to store this CSS code securely so you can refer to it later when redesigning your website.

In fact, this was the top thing that I applauded myself for. I kept referring to this CSS document when revamping my site. Even tweaking a little here and there (using the basic CSS knowledge I’ve learned from W3Schools).

2. Screenshot Every Page

So this is an optional step. You don’t really have to take screenshots.

But I like doing so because I can always refer to this soft copy of my previous web design. They also help keep in mind the previous design, page layout, text format etc.

There might be some elements of the previous design that you really like. You can then duplicate them over to your new design. Thus, having these screenshots will allow you to refer to them easily (especially when the old design is erased completely).

Photo by janjf93 on Pixabay

3. Always Back Up Your Site Before Changing Themes

Let me emphasize this again: Always create a backup of your site before you make any website changes.

This way, should there be a problem after you change your site design, you can always restore this backup version.

I’m currently using UpdraftPlus, which automatically backs up my site every time I update my WordPress version, plugin or theme. I also manually created a backup version right before I changed my theme.

4. Stop Search Engines From Crawling Your Site

While you’re in the midst of a website revamp, it’s highly recommended that you prevent search engines from crawling your site.

One reason is that the new theme or design might include pages or layouts with placeholder text. Secondly, it might take you days or weeks to edit and check that every page is correct. And you don’t want search engines to crawl your site while it’s still in the editing phase.

You can do this simply by heading over to WordPress reading settings and disable search engine visibility by checking the ‘Discourage search engines from indexing this site’ box.

5. Put Up A Maintenance Or Under Construction Page

I highly recommend that you create a maintenance or under construction page, especially if you’re in one of these situations:

• Your site has many pages, blog articles etc.
• It will take a long while to revamp your website
• Thousands of people visit your site daily

If you use Divi, you can simply search the Divi Library for the maintenance page premade layout. Remember to choose the blank page template so your top navigation bar doesn’t appear and visitors can’t view any other pages.

Besides hiding the navigation bar, you also need to include a short message that your site is down (and the expected date that the website revamp will be complete, if possible). Adding an email opt-in form to notify visitors when the website is up will ensure that you don’t miss any potential customers.

Once you’re done, replace your home page with this maintenance page.

Bear in mind to edit the WordPress reading settings and change the static homepage to the maintenance page.

Bonus Tip: Think About Your Live Chat Support, Whether To Continue Running Or Pausing Entirely

If you have live chat support on your website like LiveChat, you may consider setting your agents to don’t accept chats as well as setting up auto-away.

However, I strongly recommend that you continue running live chat support on your website while undergoing maintenance. Your customers might have urgent questions or concerns that require your prompt response.

Moreover, your live chat shouldn’t be hindering your website redesign. If it does, you can then pause live chat support while your website is under construction.

6. Get Your New Theme

Now, you’re finally ready to get your new theme!

You can browse the free themes available in WordPress or buy a premium theme.

I recommend the latter because premium themes make your website look professional and thus, instilling trust in your customers.

I’m using the Divi theme by Elegant Themes though because I like customizing my site. WordPress themes have fixed layouts with limited options while Divi includes a visual drag and drop builder where you can customize font, color, animation and many more. Other features that I love about Divi include

• Divi Leads: great for A/B testing where you test an element on the page (eg. headline, call-to-action button)
• Monarch: social media plugin
• Bloom: email opt-in plugin

I mean, just look at the pretty social sharing buttons at the bottom of this post! And that beautiful newsletter pop-up when you click on the top navigation bar! Aren’t they just stunning? (Of course, there was a bit of help since I simply edited the already gorgeous Girly theme by Divi Lover~)

Nevertheless, whether it’s a free or premium theme, just make sure that it’s consistent with the brand image you want to portray. And of course, ensure that the theme has all the functions you need.

• Style: minimalist, elegant, modern
• Functionality: mobile responsive, eCommerce integrations, customization features

Now, head over to WordPress themes and activate your new theme.

7. Check Your Theme Settings

In addition to checking your WordPress settings, there might be exclusive settings for your new theme. Do go through each setting and edit them accordingly.

Take for instance, my Girly theme allows me to choose a preloader and the gold/rose gold/silver highlight.

I like to start redesigning my site from the broad aspects to the fine details. Where we start with big changes then move on to the small changes. These include

• Accent Color
• Font
• Logo

8. Edit All Your Pages

Next, edit your pages.

You can duplicate the pages first so no changes are made to the original. Then, start editing your new page.

Or you can just create a new empty page and load your new theme layout. Then, edit from there.

Exclusive Tip for Divi users: You can save the edited page as a new layout then replace your old page.

You simply have to add the layout to your Divi Library.

Then, load that layout.

And of course, you’re able to manage all these layouts in your Divi Library.

9. Edit CSS

Remember that CSS code I told you to save earlier?

Well, now is the time to take it out.

CSS helps to style your content. You can do things like

• Changing your footer link color so it’s not the same as your accent color
• Customizing styles for the various headings (h1-h6)

Since I’m using Divi already where I can customize almost everything, I didn’t use much CSS styling.

CSS is usually the last few things I edit during a website revamp. It’s only when settings and editing of pages still don’t let me get the style I want that I resort to CSS. Plus, it requires some technical skills and knowledge. Like I mentioned earlier, you can learn from W3Schools or install additional plugins like Divi Toolbox to make your life easier (where you can achieve awesome effects of CSS, PHP and Javascript without writing a line of code!).

10. Announce Your Redesigned Website

After making sure that every page appears as the way you want it to be, you can replace the maintenance page with your home page. Where visitors can navigate to other pages through the top navigation bar.

Again, remember to edit the WordPress reading settings. You’ll have to change the static home page and enable search engine visibility by unchecking the ‘Discourage search engines from indexing this site’ box.

Finally, you can now announce your revamped site to your fans and customers. Do a shout-out on all social media channels so everyone knows!

On top of this announcement, you can write a blog post about it. Like the reason behind the website revamp, the major changes etc.

Or you can ask for feedback about how visitors feel about the new layout, how is their experience navigating the site. This way, you can quickly rectify any glaring errors that you might have missed out.

Now It’s Your Turn

What other steps did you take when redesigning your site? Do you have any website revamp tips? Like things to take note of and things to avoid etc.