Retrofitting a new theme to an old site

• Home
• How to's & Tips
• Theme Development
• Retrofitting a new theme to an old site

Sometimes you might want to “re-skin” your current theme with a new theme. Let’s say you have 200 pages and you would rather just apply a new theme to your current site, rather than re-build the entire site in the new theme. In general, the process is:

1. Build the new theme (make sure you test in Hammer just like you would any other theme).
2. Test the new theme on your current site. You easily preview a live site using a different theme.
3. If everything looks good, set your old theme to the new theme in the site properties (or ask a designer from University Relations to do it). If not, repeat steps 1 and 2 until it looks good.

There are a number of things to be aware of when retrofitting a new theme to an existing site:

• In order for your new theme to apply seamlessly to your old theme, you need to name your templates the same. Otherwise your old pages will be looking for a template that doesn’t exist, and it will throw an error. If you want to name your new templates differently, you would need to create templates with the same names in your old theme and apply those templates to your current pages before applying your new theme.
• In order for your new theme to apply seamlessly to your old theme, the editable regions within your templates must be named the same.
• If your new theme contains custom data attributes that your old theme doesn’t, you will get an error when testing. For example, let’s say in your new theme you have a template that contains a profile directory, and you need to supply a profile ID for the appropriate page to loop through and grab profiles. You might set the ID in your page’s custom data. And let’s say your old theme does it differently, for example by hard-coding the ID in your template or automatically listing child pages. If your new theme requires custom data attributes for content to display, and your old theme doesn’t, you should add these attributes to the corresponding templates in your old theme, then pre-populate the data for these attributes. The data will do nothing for your current site, but will be ready to go once you switch to your new theme.

They key to re-skinning your theme is to make sure the templates, editable regions, and custom data attributes match, and that you pre-populate any custom data needed for the new pages to function.

New Content Blocks and Regions

Sometimes your new theme will have additional content blocks and/or editable regions that your old theme does not have. The only way to test the new content blocks on your old site is to add the blocks to your new templates, hide the new blocks with CSS i.e. display: none, then unhide them when testing your site (you can use your browser’s Inspector to unhide the new regions).

Last updated on July 12, 2018.