Estimated reading time: 22 minutes
Published by
Bradley
ON
The Challenge: Migrating a historic, 500+ page WordPress website to a new domain and completely new brand without losing years of SEO traffic.
Old Stack: Bloated Avada Theme, GoDaddy Managed WordPress (£1211/yr).
New Stack: Custom Gutenberg Theme (Vanilla JS/SCSS), Krystal Hosting (£190/yr).
The Results: 100% of organic traffic retained via a custom .htaccess redirection engine, an 84% reduction in annual hosting costs, and vastly improved Core Web Vitals.
This nine-month project was a true labour of love and a profound test of my website development skills and technical SEO knowledge.
My client, James Carrier, was facing a dilemma. He was changing his entire business, moving from an old, historic WordPress website containing over 500 articles and podcasts to a completely new brand, a new design, and a new domain.
James admitted he naively thought the entire migration was as simple as updating the URL to the new one. I wish it were that easy!
“I had thought that when the time comes, that I could just repoint the website as it is in godaddy as a starting point. I know this means lots of traffic would be lost. But I think it’s the only way.”
Safe to say, the client was pleased to know we didn’t need to lose all of the site traffic.
I was brought in to execute this complex SEO domain migration while ensuring we retained the millions of impressions and tens of thousands of monthly clicks that the historical content generated.
The old site was riddled with a variety of legacy plugins and an Avada theme strapped on to try and make things work. My proposal was immediate – we had to start from scratch. This gave us the opportunity to lay a robust foundation using a custom Gutenberg theme, anticipating past mistakes and planning for a website that would be performant, user-accessible, and fully mobile-responsive.
Before we start, just a heads-up: this case study does get quite lengthy, technical, and specific. I’ve added visual examples though, if that’s your thing instead.
Feel free to use the Table of Contents to jump to a section you’re most interested in!
My work is always guided by one principle: I do not build websites so people must rely on me to keep building them.
I put a massive amount of effort into creating solutions that mean the client can intuitively use the website and the WordPress platform on their own. I view building a site so complicated that the client is required to ask the developer for changes as a deceptive practice, and I don’t really believe in that.
All I want to do is make life easier by creating solutions that mean they can build on the website too.
My initial analysis focused on the hosting – the core structural and financial weakness.
My client was being charged a massive £100.91 a month – or £1211.01 a year – by GoDaddy. This included £32.99 a month for a developer managed WordPress plan with tight limits, plus a steep £22 a month just for premium security.
I proposed a decisive shift to Krystal, a provider who runs entirely on renewable energy. The financial impact was huge: for just £19 a month, or £190 a year, Krystal offered unlimited sites, storage, and bandwidth, saving the client a whopping £847.13 a year.
I recommend Krystal to all of my clients. They offer switch credits, reducing the price based on the time leftover on the GoDaddy subscription. I knew that GoDaddy would inevitably delay the project due to their poor customer service. The Krystal support team was incredibly helpful in rebuilding the WordPress installation after a few small hiccups around nameservers and DNS records.
I purchased the new domain, duplicated the old website content across, and cancelled the expensive GoDaddy subscription to avoid a crazy renewal cost. I needed to keep the current domain renewed for at least a year, but ideally forever, so I could redirect properly.
After some fiddling with the wp-config, hey presto, it was up and running!
(For those migrating manually, defining the new home and site URLs in the config file is the quickest way to regain access):
define( 'WP_HOME', 'https://newdomain.com' ); define( 'WP_SITEURL', 'https://newdomain.com' );
Well, not entirely. I still needed to create a custom theme and move away from restrictive plugins, while keeping all the data and features built up.
At this point, I was introduced to Steve Brown, who had designed James’ new brand and website. After learning he does his work in Figma, I was happy, and the developer handoff was seamless.
I built the theme using HTML, CSS (specifically SCSS), and JavaScript. I favour SCSS because it allows the styling to be algorithmic, quickly generating responsive styles for text, containers, etc. I try to make everything work in CSS first, and if that’s not possible, then I’ll use javascript for it’s more powerful features.
And that’s it – just html, css, and javascript, still incredibly capable today. You may be wondering why I didn’t use Next.js, or other more ‘modern’ solutions, and it’s directly linked to my design philosophy. The reality is, this simple stack integrates better with the WordPress Gutenberg pagebuilder, so the client can expand on his website more easily.
The old URL structure was pretty bad. Going through the transfer process anyway, I thought this was a good opportunity to start fresh with a well thought out structure. This meant changing every internal link on all of the pages on the new domain – you don’t want links from blogs, homepages etc. being a link to the old domain and redirecting every time, it’s not good for speed and it’s generally bad practice.
Initially, a lot of the work was done on the backend. I added all the component styles that would be used across the website, fonts, colours, labels, tags, buttons in all states, and all responsive to make sure the website looked great across every device.
From there, I began on the homepage, building the different elements and containers. I constructed the layout in the Gutenberg editor, added a custom class, and styled it in the backend. This ensured design responsiveness, plus intuitive building as you can visually see the layout.
If I had a certain block that I knew would be reused, I made sure to save it as a pattern, so in the future it was quick to add another.
This method bypassed the limitations of the Gutenberg and worked to it’s strengths.
One of the features requested on the homepage was a full-width scrolling banner. This had to display different words going in different directions with small headshots. It needed to be dynamically looped and mobile responsive, which presented some kind of challenge. Eventually, I made it work just using some JavaScript. I think it looks great!
I also included an image slider featuring organisations the client had worked with. This was another full-width banner, sliding quite slowly. The challenge is that with a web page using a body margin, you can’t simply have the images go off the edge of the screen. To solve this, it just took a little negative offset trick in CSS to make the images go completely seamless off the screen edges; it just looks better that way.
For the testimonial slider, I wanted it to be infinite, and the UX required a slight preview of the next card to give a visual indication that there was something to follow.
A problem arose – on the first slide, the preview only appears on the right. I needed it to wrap around and show a preview on the left too. My solution was to make a dummy slide on the far ends of each slide. When you slide into the dummy slide, it would wrap around, bringing you back to the start. There were other solutions, which involved infinitely duplicating the slides, but I wasn’t a fan of those.
To make sure the responsiveness was perfect for every device, I ended up having five or six break points, up until 4K ultra wide screens.
Another frustration I tackled was scrolling behaviour on mobile. It really bothers me when a slider hijacks your scroll when you’re swiping.
Have you ever noticed that? You’re trying to scroll past something, but you can’t because it keeps trying to slide the slider?
I put in some extra effort to fine-tune the scrolling behaviour to avoid that. It’s easy and never a problem to scroll past it, and also seamless to tape or swipe to slide to the next.
For a little extra polish, I added a custom accordion with a smooth animation. The first accordion item is supposed to always automatically be expanded, so just a small change in the javascript logic to make that work as intended.
Some column directions needed to be reversed on mobile and desktop because the formatting was specific to the screen size. I had to style it so that when screens change size, the layout would automatically and responsively change.
What I sometimes see people do is identify the screen size on page load, which means the website doesn’t actually modify its layout live, and it requires you to refresh the page. That is annoying, and I don’t like that.
I made sure that these things happened on the fly and were seamless.
The goal was to create a menu that was slick, super performant, and felt great to use. Although the header itself was fairly simple, it included specific design requirements and technical polish that enhanced the user experience.
Other than the usual hamburger to X animation which you see all over the internet, I also used a Z-index and filter trick to reverse the logo colour as the menu came out against the dark background. This provided a slick transition that looked wicked.
As per the design, I needed to create a list within our header list, something you could expand within an already expanded menu. Although they weren’t there yet, I was anticipating the creation of three product pages. After not much work, I added animations for some polish and it was good as gold, ready to be added to in the future.
With the core responsiveness and patterns established on the homepage, I moved to the biggest challenge: transferring over 500 blogs.
The blogs post template required significant updating. The content was not styled through the theme itself, but rather through the Avada plugin, and this styling was quite integrated with the content. When I removed the Avada plugin to build the theme from scratch, all of the short codes that Avada was using to build the page were now just plain text on the website.
At first, I thought this could pose a problem, but I realised it was really helpful because it gave me identifiers for everything.
I used database queries and regular expression to identify the shortcodes and effectively target the whole container to delete or change it site-wide. This let me make bulk changes to all of the blogs and ensure consistency.
I used the shortcodes to identify and delete elements no longer part of the business, such as old YouTube embeds, Vimeo embeds, or podcast embeds.
On the bottom of every blog, the client had used a container for “sources and feedback”. I was able to identify the short codes for this, wrap the content in a new container with a class, and then apply new styling across all of the blogs simultaneously.
I did the same for all the H2’s H3’s, paragraphs, and quotes, etc. wrapping them in the appropriate tag, as without them, they were just plain text.
The design required ‘Key Learning Points’, a consistent element throughout the blogs, to be placed above the post content. However, they were stored within the content block itself.
To get around this, I developed a custom plugin in WordPress to automatically identify these points and move them to the top, outside of the content. This process is done behind the scenes.
It gives a really clean layout and means the client can intuitively build just as he did before and the system will automatically work it out for him.
I applied a complete class to the blog content block itself within the template. I targeted every specific element within that block: quote, paragraph, header, etc. so automatically everything is styled using the stylesheet.
I used conditional styling to manage edge cases and visual hierarchy.
For example, if a header followed a paragraph, I wanted additional spacing to make the separation clear. This ensures that when the client builds content, he does not have to worry about formatting.
The styling now looks really-really good no matter what you put on the blog post.
No longer will the client have to manually add a margin below some text to make it look good for every blog post.
I also added a dynamic “Contact Us” section to the sidebar. Knowing that there is a large percentage drop off of users the more pages that they have to go through, I made the form dynamic so that the panel expands and shows the form fields within that same page.
After adding the related blog posts to the page, cleaning up a few leftover things – some references to the old brand, some wording here and there, and links to old URL structure, or now redundant pages or categories – I was happy to call this section done.
Then I moved onto the articles landing page itself, which displayed all of the different articles. This page had to be slick for organising the sheer volume of content we had successfully migrated.
Historically, the list of categories had become bulky and extensive over time.
I asked the client to go through a process of cutting back on the categories, and suggested it would be beneficial to have three top level categories.
He went ahead and removed some overlap, identified three main parent categories, each with five to seven subcategories within them.
I then executed a few database queries, updating old categories to the new ones, moving some to subcategories, and assigning the parent / child link. Each subcategory was assigned one parent category.
As the original design simply listed every category with a click-to-expand filter, I recreated it to be more user-friendly and intuitive.
I created a custom plugin to build the category filter & search, which shows the three top-level categories. When you click one, it automatically filters the result and expands the subcategories into view. This allows the user to select multiple subcategories to further refine their search.
To make it clear the connection and differentiation between the child and parent categories, I gave them three different colours, with the child categories copying whichever one the parent category has.
The filter also includes a search function, which runs automatically after a short time, or of course by pressing enter. All of the results are properly cached and a secure query ensures it cannot be spammed by bots, yet remains rapid and responsive for real users.
I found that pagination is kind of confusing for search engines and for users in general. I switched from using pagination to just using a load more functionality. Just using load more keeps the user on the page, keeps them scrolling, and is a lot more intuitive, especially with search and filtering.
Because it takes a little bit of time to query the database, all of the articles would disappear, which would cause layout shift.
I solved this by creating a placeholder skeleton loading feature. The placeholder would appear while the query was being ran, which prevents layout shift and gives the user a visual indication that something is loading. In any case, the queries themselves are rapid – very, very quick – so the user doesn’t have to wait a lot of time.
The Domain Transfer was when things got serious. You don’t want to be fumbling around without a backup here.
This critical step in the migration plan focused on redirection, to ensure that the client, who had initially feared losing all his traffic, retained maximum link equity and user flow.
The migration process was complex because it involved both a domain change and a URL structure change. We couldn’t rely on a simple, blanket domain change; highly specific redirection rules were required.
I first crawled the existing website using SEO Content Spider for a list of URLs. With such a historic domain, I was bound to miss some trying to do it manually.
After combing through the list, I created a .htaccess file, which would manage all incoming traffic to the old website, implement the redirection rules and exceptions, and bring the traffic across to the new site.
Here’s a breakdown of what that looked like:
I hope you can see that it’s crucial to keep the old domain renewed, as it ensures all these redirects can be reliably put in place and maintained, preventing the risk of someone else taking over and removing the redirection rules.
And this was the gut-wrenching part.
After backing up, sweating a bit, then backing up again and sweating some more, it was time to go full-steam-ahead.
I set all the pages live on the new domain, with a query to publish every blog post, and updating the .htaccess file on the old domain, starting the redirection engine up.
At this point, both domains effectively had duplicate content, which would pose a problem if I didn’t use Google’s Change of Address tool.
It’s a handy tool in Google Search Console, and I used it to notify google that the old site’s permanent address had moved, accelerating the indexing and transfer of search ranking signals to the new domain.
This simple but critical step was paramount to the projects success. It meant that, despite the new domain and structural changes, the client could keep all of the rankings and traffic he had earned after years of writing quality articles.
I had Google Analytics open for both sites, watching the live numbers. The steady stream on the old domain had become a steady stream on the new.
I re-crawled the old domain with SEO Content Spider, which would show me any redirects that led to a 404.
With just one outlier put back into line, it was a relieving success. Not that I hadn’t carefully planned the whole thing out!
With the redirections in place, and clicks rising in Google Search Console, I moved onto the new supporting pages for the website.
The ‘About Us‘ page was one of those built after the switch, and it was fairly simple compared to the more complex logic required for the blogs.
The page structure was straightforward, using components already refined during the previous builds: some introductory text, cards, and the main body content.
The only small challenge was correcting the alternating pattern for mobile responsiveness. For desktop, the headshot and text, then text and headshot is a visually engaging structure. But with those two columns wrapped onto one, it gets confusing; the flow and hierarchy had to remain logical and be made responsive.
Next, I moved onto the Connected Management page, one of PeopleShift’s core business offers.
As this page had a lot of similarities to the homepage, it was the perfect opportunity to prove the efficiency of the patterns I had established in the pagebuilder. I reused my responsive custom block patterns, streamlining the build process significantly.
This was where I first starting using what we called tags. I set up patterns for each of them, in every colour, and two sizes. So 12 total, all responsive.
This page had a new design element – firstly, it was a full width-colour banner, and there would be variations for different pages. Negative margin trick again here. That was the relatively easy part. The hard part came with an SVG image on the second column of the banner. There was text in the first column, so getting the breakpoints, sizing & positioning wasn’t simple. It needed to take up enough space, but not be so large that it went too far underneath the text or dominated the banner.
I ended up just specifying manually for each breakpoint what I thought looked best and moved on.
This page effectively demonstrated the benefits of front-loading the technical work in order to speed up the later page builds.
With the core business offering ready to go live, the homepage and all the blog posts sitting on waiting, this is when we decided to officialise the domain transfer.
This Meta Team page was proof of the build process becoming cohesive. And to be honest, there’s not much new I can say about it – that’s what made it so easy.
I reused the tags, plus the full-width colour & SVG banner from the Connected Management page, reused the cards from the homepage, reused the testimonials block and reused the quote form.
It definitely felt good to get this page live so quickly and with such little effort.
Not much new to note here either – same story as the Meta Team Page.
The Coaching page looks great, don’t get me wrong! Just nothing to report – it came together in a flash.
With three products now on offer, we created the Our Products page to house them all. Reusing the tags and full-width colour & SVG banner, plus the alternating pattern of the About Us page, this page came together quickly and wrapped up all the different services nicely. The Connected Management, Meta Team and Coaching page then formed the contents of the Mini-Mega-Menu, with the View All leading to this landing page.
Good stuff.
This nine-month project was a definitive test of my website development skills and technical SEO knowledge, confirming that complex migration can be executed while successfully retaining the millions of impressions and tens of thousands of monthly clicks.
The PeopleShift migration succeeded because it was built on my core philosophy of making life easier for the client and avoiding the deceptive practice of client lock-in. At the end of the day, it made things easier for me, too.
The victory started with getting away from GoDaddy, moving the client from a crazy annual cost of £1211.01 to Krystal, resulting in an annual saving of £847.13 (70%!)
The client’s fear of traffic lost was gone; the comprehensive redirection engine, with complex 301 redirects and the use of the Google Change of Address tool ensured the client kept the rankings he had earned after years of writing quality articles.
The intensive front-loaded technical work – completely purging the legacy code from all over 500 blogs and building a custom theme with reusable patterns paid off massively. This groundwork meant later pages, like the Meta Team Page, were quick and easy to put together.
The client can now intuitively use the website. By putting effort into creating custom patterns and conditional styling, the client does not have to worry about formatting, as the styling automatically looks great no matter what content is added.
The PeopleShift project stands as one of my defining successes, transforming a historic brand into a high-performance platform that is sustainable for the client’s continued growth and designed to showcase their valuable initiative to improve the world around them.
Check out the PeopleShift Website!
Got an upcoming project in mind?Get a free consultation and see how our collaborative approach and strategic expertise will give you the essential ingredients for online success.
