Like all ideas, it started out as a tiny, little itch: I felt my existing WordHer design was looking tired. And since I’m marketing my tech services to web designers, I figured it was prudent to not look completely outdated. Anyway, regardless of how I justified it to myself, one morning I woke up with a burning urge to find a new theme, and update the site.
Since I was already using the Genesis framework, StudioPress was the first place I looked for a new Genesis child theme. It didn’t take long to find Wellness Pro. I was drawn to the parallax affect on the front page, and the very clean, very white inner pages. Yes, dear designer friends, I am aware that parallax is no longer the in-thing, but it’s my site and I’m in charge here!
In making the switch, I am moving:
- from a two-column design to a one-column layout
- moving my blog page from the front page to a standalone internal page
- creating a new front page that de-emphasizes the newest blog posts and emphasizes my availability as a technical sidekick and WordPress troubleshooter for web designers and digital agencies.
How to Change a WordPress Theme
In twenty broad strokes, here’s a step-by-step of how I changed this WordPress site’s child theme.
1) Chose a new Genesis child theme. This saved me lots of time, since nearly all the custom PHP code I had written for my old site was compatible with the new site, but all of the following steps apply whether or not you are using a child theme.
2) Backed up my live site with Backup Buddy.
3) Deployed a staging site on my local desktop using Desktop Server, and installed the new Wellness Pro child theme.
4) Created the new widgetized front page.
5) Modified my logo to go with the new lighter look. I use Photoshop (Adobe Creative Cloud) for my all image editing.
6) Created a three-column footer widget.
7) Created a new blog page (since my new front page is no longer an archive for my blog posts).
8) Created a new menu structure.
9) Moved all applicable custom PHP code from my old child theme to the new child theme. This included custom code in functions.php, and a few customized templates (such as the custom template I created for my WordPress Glossary.) If you have custom code in your functions.php, I highly recommend the use of a child theme.
10) Customized CSS as I saw fit for both mobile and desktop. I use Chrome DevTools to develop and debug CSS.
11) Tested, tweaked, tested.
12) Installed and activated my favorite maintenance-mode plugin, SeedProd Coming Soon, so I could use it on the live site after deploying the new site.
13) Created new, empty database on production site.
14) Looked at production site, and found new comments that needed to be exported/imported into my local site so my local site was up-to-date. Since this is not an ecommerce site, syncing the production and local site was very straight forward.
15) Made a Backup Buddy backup of my local site.
16) On production site, renamed “/public_html”, and created a new “/public_html” folder. This makes it super easy to revert to the old site if something goes terribly wrong.
17) Used Backup Buddy to migrate local site to production site. Regular visitors saw an Apache error message for about 4 minutes while I transferred site, then saw a pretty maintenance-mode message for about 15 minutes while I checked out the new site.
18) Deactivated maintenance mode on live site. Elapsed time from start to finish: less than 24 hours. I did the local development one day, and migrated the site the next. Spent about five or six hours on the project.
19) After a few days, I will delete the old database, the old “/public_html” folder, and the old child theme.
20) Continue to tweak and refine every day, because I can’t help myself!
Here are screenshots of the before and after:
So, what do you think? Do you like the new look?