I spent a week revamping this website, anchor.host. That involved installing a new WordPress theme, pulling over a bit of custom code from the old theme and remaking a few pages using new blocks extensions. The backend of Anchor Hosting is highly dynamic. WooCommerce Subscriptions handles hosting customer renewals. There isn’t a good workflow to safely handle dynamic websites. As such I took a very manual deployment approach as I’ll explain here.
Working locally with Local Lightning.
I began by copying my live site locally using Local Lightning. I wanted to work on the revamp without having access to the internet, so using a local environment was the logical choice. I opted to use the Blocksy theme directly rather than setup a child theme. After just a little time working with Blocksy I could see significantly improvements over the previous theme. Improvements such as better blog post layouts, built-in search modal, built-in related posts and a versatile header/footer customization tool. This safe playground gave me the confidence to proceed with revamping the live website.
Blocks when possible instead of custom development.
The original Anchor Hosting website was put together well before the WordPress block editor landing in WordPress 5.0. This time around I wanted to utilize new blocks where possible. Using blocks can definitely things speed up vs writing custom code. That said it’s still early days for block extensions so I tried to keep my selection to a minimal. I ended up installing these popular block extensions:
Moving custom code to Code Snippets.
There were a few custom things in the old theme that I wanted to bring over. The first was a custom page template which had an ACF Pro repeater field to power the recommend web designers page. Since I’m just using Blocksy directly, I converted the custom page template to a basic shortcode and added via the Code Snippets. It took a little reworking of the HTML and CSS to match Blocksy however the results look quite similar to the old theme.
Temporarily hide live site with a coming soon plugin while deploying.
Manually deploying changes from a local development site to a live site sounds messy. That’s because it is! However, if you know specifically what you’ve changed it will go a lot easier. Start by making a list. Below is example of what mine looked like. Then when ready, turn off the live site temporarily using something like Coming Soon plugin then proceed to manually make the changes directly on the live website.
- Activate new Blocksy theme
- Install new plugins Atomic Blocks, Blocksy Companion and CoBlocks
- Applied Blocksy customizer changes
- Copy and paste new content for home and pricing pages
- Upload new illustration images and correct image links
- Add new code snippets pulled from old theme and new shortcode replacements
- Change “Recommended Web Designers” page to default template and add new shortcode
This short list of items took about an hour of downtime to complete. Once finished the final step was to deactivate the coming soon plugin and clear server/CDN caches.
Manually copying and pasting using the page code editor.
One trick that saved a lot of time is the fact that you can copy and paste an entire page filled with complex blocks over to another website. That of course assumes you have the same block extensions installed. Also any images will need to be manually uploaded and replaced. Even still, it’s a huge time saver.
Is there a better way?
For highly dynamic sites, I really don’t know. I’ve attempting a scripted approach on a mostly static site and they quickly becomes too complex to script. Automating would definitely be the preferred, but in this case, the manual approach was the safest option. I can guarantee all customers can still login and manage their billing details via WooCommerce Subscriptions. For Anchor Hosting I’d call this a huge success. Onward!