Redesign a WordPress website
So it’s been forever since I’ve written a blog post. Update: I actually started writing this post a week and a half ago 😅 yeah had a crazy long 2 weeks to say the least. But back focused now.
That’s mostly because I’ve been recovering from redesigning 2 websites. And when I say recovering I truly mean that in every sense of the word. Recovering from the grind of trying to complete the projects in time, being super ecstatic about the successes, and being super stressed by the minor setbacks we experienced. Which is why I wanted to write this guide for you on how to redesign a WordPress website.
Lauren, what do you mean redesign.. don’t you just switch the theme for a new look?
This is a good question in some cases it could be easy as switching the theme if you want a whole new look on your WordPress site. But when you move into handling web design professionally I can guarantee you, you won’t want to take your companies website and just switch the theme on the live website without a test run or some changes being made.
In many cases you will want to have a site in production and then have a development environment so changes can be reviewed without affecting your production website.
Although, having a production site and a development site is the best way to make changes to your WordPress site, for a beginner this is where things can get complicated.
I don’t even consider myself a beginner and I still made a few mistakes looking back on the process.
How To Create a Development Environment For WordPress
Ok, the first thing I wish I had done before I ever started either redesign is critical to the whole process. The number one thing you should do is duplicate the database of the first website.
In my first dev environment instead of doing that, I created a second fresh database and WP install and built the site from scratch.
In my second dev environment, I didn’t have access to the servers at the time. So I created the dev environment with my own hosting account. Which ultimately created a whole different set of problems when I tried to migrate the site back to the clients servers.
So I will reiterate in full, in order to get this right from the start you must have access to the original sites servers/databases and you must duplicate the original sites database.
Afterwords you just need to make sure you have a WordPress installation linked and installed for that database. Usually you can do this within your hosting account using a wizard in like 5 minutes. Just make sure the wizard does not create a new database, instead that it uses an existing database and just creates the files needed. Or you can install WordPress manually.
I used a subdomian of my main domain like: version2.yourwebsite.com
I also use the WordPress plugin Subway to ensure that only clients can have access to or view the site while in development.
*I also discourage all search engines from indexing development sites with a disallow in the robots.txt*
So now you have a WordPress site up in a dev environment, generally with the WordPress default theme of twenty seventeen, and it’s linked to an identical database of your production site.
How to Redesign A WordPress website properly
Now you want to actually change the look and feel of your website. Find the themes you like or have created, install them, and activate the one you want on your site.
If you want to make deep changes to templates or CSS, then you should create a child theme at this point. A child theme protects the changes you make when you must update your theme and is the correct way to put in overriding CSS.
Another way to override your CSS In WordPress is to use the customizer. Which is very helpful, especially when you’re still in development, to see your changes in real time. However, the customizer in WordPress actually puts your CSS into your page code instead of referencing an enqueued CSS file. So I would caution not to add a lot of CSS here and leave it when switching to production because this could hurt your page speed.
Taking your Site From Dev to Production
After all your design changes are made you will have two sites, your old one that is live and your new dev site. The goal now is to obviously take your production site down and put your dev site up. The first thing you need to do is make a backup of your site that is in production in case your migration goes badly and you need to restore the site.
Make sure you have access to FTP and hosting accounts for both sites.
After you do that then follow these steps:
- If you have access to your database and know how to navigate your tables you can go to the WP-options table and change the site URLs for your WordPress installation. If you don’t you can change them from your WordPress Admin.
- Next, go into your WP-config.php file and change the database and database password. You may also need to change the database suffix. If you want to be super technical you can also put code here to define the site url.
- Now if your sites were built on the same hosting account, and that account contains your domains and servers and everything, you should be fine.
- If you get an error it is more than likely DNS related. Is your domain pointing to the IP address of the hosting account where the database you want live is located?
- Another step that is sometimes needed is re-assigning the domains file location. So within your hosting account you may also need to define which files the domain corresponds to, switching from the files associated with your original site to the files we had created for our version2.yourwebsite.com redesign.
The other site is more than likely down now and no steps further need to be taken there, if you still run into an error. Then access the files of the original site, access its wp-config.php file and change the database, database password, and suffix so that it isn’t a duplicate of the live site.
*Remember your site has a block in the robots.txt and when you are ready for indexing you will want to remove this.*
Other things to consider when Migrating a WordPress site
If content is still being created on your production site while you are developing your new site then you may have to export that new content into the site when it becomes live. You can do this easily by using the export tools available in WordPress under tools > export. Just select the date range and type of data you need then download the xml. Once downloaded, use the WP import tools > import, and add that content into the new live site.
This will you get you started and you will have had a relatively pain free migration with these key pieces of steps and advice. Other things you may ask yourself:
- How to export yoast data?
- Why can’t I get my SSL certificate to display as protected afterwards?
- More than likely it is because there are images are on page that are referencing a site URL that does not include the HTTPS.
- Use this to help you resolve it: Why No Padlock?
Coming Next: How To Test The Performance of a Website after its been Redesigned
After I got my two new beautiful websites up I was not only relieved but quite pleased. Visually, aesthetically, I think they are on brand for the markets we are in; the branding is ideal. However, I am not their users am I. The users could HATE the way the new sites look and function. So the next post I want to write is just about what happened next! All the tricks and things I had to look at to make sure these sites didn’t hit the tank after redesigning them.
Check back soon, and as always if you need help on how to redesign a wordpress website just contact me!
Lauren AlyceTags: developers, Plugins, Wordpress