Quick Tip: Update EE Sites Live with Hidden Templates

We’ve all nervously made changes to a Website while it’s live. No matter how low the traffic, it sometimes feels like defusing a bomb. While people are watching. Here’s a quick tip to make that process a little less nerve-racking in ExpressionEngine.

Let’s say you have a section of your EE site, and you are redesigning the layout of one of the templates. If the changes are small, you can probably do it live and everything will be just fine. However, if there are a bunch of changes, or you need to have it approved before pushing it live, and you aren’t set up with version control (for shame), use this little trick instead.

Essentially, we are simply going to make a duplicate of the template we need to edit, make it so you have to be logged in to see it and make our changes there. Pretty slick, and no third-party modules required.

1. Make a Development Template

Start by making a new template in the same template group as the template you wish to change. Name it something like whatever-development and save it as a file.

2. Copy The HTML from the Existing Template

Open the template you wish to edit, select all and copy the HTML and EE markup into the development template. Save it, and make sure everything is working properly by opening it in a Web browser. Since EE’s URL structure is based on template groups and names, you can just go to /template-group-name/template-name/entry-url. If you can’t find it, just navigate to the live page you are updating and replace the segment of the URL with the template name with the name of your development template.

3. Lock it Down

So, now you have a little sandbox to make your changes in, without messing with the live version. But it is still public. To make it so only those logged into ExpressionEngine can see it, add this at the very top of the template:

Now, if a user that isn’t logged in tries to access this template, they will be redirected to the root level of that channel. The redirect can actually be any URL within this Website.

3.1. Bonus Redirect

If you want to get real fancy, and make it so your client, when logged in, sees that page when they access it as they normally would (without having to type in the special URL), add a redirect on the live template page. You will also have to add a URL title at the end of the redirect, so that it returns a post. The simple way is to make that a single entry, so in the case of a blog with multiple entries sharing the same template, the same one would always get returned. If you wanted, you could send the URL title of the desired entry so it would pull the correct one.

Now, users who are logged in will automatically get sent to the development page, while the rest of the world will see the original template like normal.

4. Don’t Break Styles

You will probably have CSS changes to make as well. In order to avoid overwriting styles and breaking things on the public side of the site, you can add a new stylesheet conditionally based on URL segment in your header include:

Alternatively, you could add a class to the wrapper of your development template. Either way will work fine, your call.

5. Edit Away!

No explanation needed, just do your thing. No one will know! When it’s time to make your changes live, just (backup) copy and paste the updates in the live template, and replace the CSS in the main stylesheet as needed.

‍