I was recently asked to make changes to a footer for a client’s WordPress website using the Breakdance Website Builder. But they wanted to preview the changes before making them live.

I thought it would be best to show the new footer on their current homepage and other pages. I considered a few solutions to achieve this:

  1. Move the website to a staging environment.
  2. Create a duplicate of the homepage and design a new footer specifically for that page.

Using a staging environment would require just a few clicks on SiteGround, followed by logging into the backend, transferring the website, and then copying the approved footer section. And after, I would have to delete the staging copy.

On the other hand, creating a duplicate page would limit the preview to a single page. Furthermore, it would involve duplicating pages and templates, and I would need to hide the page from search engine bots to avoid duplicate content issues, as the website has significant traffic.

Here is an easy way to show changes on live website

It will be a demo on one my websites, rather than clients websites.

So, my lazy solution was to go into the footer on a live webiste:

Duplicate the footer, and make changes to it as I an see two footers side by side:

And finally add some conditions to both footers, so it would show the new footer with a custom url query string, so when someone would type https://yourwesbite.com/?demo=footer, it will show the footer with the changes, and without ‘?demo=footer’ it would be the regular footer on the website.

For the live footer added the condition aswell, so it would not show up when viewing the footer with the changes:

if(isset($_GET['demo']) && $_GET['demo'] === 'footer') {
	return false;
} else {
  	return true;
}

And then for the footer with the changes we just change around the return true and false.

if(isset($_GET['demo']) && $_GET['demo'] === 'footer') {
	return true;
} else {
  	return false;
}

To add the conditions inside the builder, select the section you want to apply it to, then click on on Setting Cog, and go to Edit Condtions, and click ‘Add Condition’

Inside the conditions choose the coniditons to be custom PHP, and open the PHP editor and paste in the code, in this cade this is for the current footer:

And the add the condition to the footer with changes:

And now when we go to a link https://destiny.ie/?demo=footer, we can see in there the footer with the changes, and that link we can send to the client for review and approval.

Some more tips

You can change the demo key to somethign else, but avoid keys such as ‘preview’, ‘breakdance’, ‘category’ etc… as they are already used by WordPress, WooCommerce and Breakdance, and the string ‘footer’ can be changed to anything you want really. I added footer as it was for that specefic section.

This can be applied to any part of the sections on the website if you need to get an approval with changes before going live.