Skip navigation
Tyssen Design — Brisbane Freelance Web Developer
(07) 3300 3303

Redesigning ExpressionEngine sites

By John Faulds /

With ExpressionEngine you give your clients a lot of power and flexibility to update the content of their own site, but at some point in a site's life there's going to come a time when changes will be required that the site owner or his/her staff can't do themselves via the control panel. Changes to a logo or other graphical elements of the site, adding new sections or functionality, giving the site a new 'skin' or theme, or completely rebuilding from the ground up will require a designer of developer to get involved.

I'm not going to discuss the processes involved in creating a new site design (although I might do one day when I get around to redesigning this site; in the meantime Erskine Design have an interesting series of articles discussing their redesign), but rather how you go about implementing that redesign into your current ExpressionEngine site.

The different types of redesign you might need to implement could include:

  • changing a single element common to all pages (or a section of pages)
  • changing a single element on just one page
  • changing the layout of an entire page or section
  • changing the design of an entire site

And there's different ways you could approach to making the changes to the site:

  • develop locally or on a different server or subdomain and then transfer to the live server
  • create additional templates and/or template groups
  • use conditionals within existing templates

I've used all three of the above methods and don't really have a particular favourite; each is better suited to different situations. So let's look at what some of those situations might be.

Developing locally / on a different server or subdomain

I've only used this in situations where I knew I was going to have to make changes to more than just templates, i.e, weblogs, categories and in some cases, entries; the sort of changes that can't be implemented on a live site until everything is ready to go and has been approved.

In most cases, if you're going to use a separate server or subdomain (with its own separate database) for previewing the changes to the site owners, you probably wouldn't bother developing locally as well, as then you'd have to transfer things twice. But I've been involved with one redesign that wasn't a visual redesign, one that could be noticed by site visitors, but rather a redesign of templates to make them more flexible, to cope with the changing nature of the content that had developed since the site's launch.

I exported a copy of the live site's database to work on locally, made all the changes to templates and database structure locally one section at a time and then recreated the changes on the live server. This redesign was really more about making my job easier in terms of maintenance and so didn't require the site owners to preview the changes as, from their point of view, there were no changes – they still created their content in much the same way and the public site looked no different.

That project was a bit of a special case and usually I'd recommend just developing on a server that the site owner can preview changes on. The process would still be the same though. The problem with this method is that if you're working on a site that is updated regularly you can't just reimport your version of the database into the live database (after having made a back-up first!) as there will likely have been new content added since you first exported it. If you're a MySQL whiz, you might be able to create scripts to automatically merge your changes with the live database, but I'm not so find it easier to just recreate whatever changes I've made to template groups, weblogs, categories, entries etc. on the live site via the control panel after I've tested they were work correctly on the test site. The few times I've had to do this the changes of this nature have been pretty minor anyway, so it's not been an issue.

Developing on a subdomain using the same database

I've not had to go down this route myself yet but Jamie Pittock from Erskine Design gives a good explanation of how to Create an alternative version of your ExpressionEngine website using a subdomain which accesses the same database as the main site. This method involves creating additional templates which I'll discuss next.

Create additional templates and/or template groups

If you've now read Jamie's article, you'll have one way in which you can use new templates in conjuction with a subdomain for previewing changes to a site's design. But you can also use new templates within your existing domain too. For instance, if you're creating a new design for the home page and your current home page template is /home/index/, you could create a new template in this group, e.g. /home/preview/ and set its access privileges to be viewable only by certain member groups, i.e., you'd have to be logged in. Or you could create a completely new template group, e.g. /home-new/ for the same purpose (again restricting access to logged in users).

If you're redesigning a section that has more than one template in it, you'd probably be better off creating a new template group because then you could copy all the template files to the new group and when you're ready to push the changes live, just delete the old group and rename the new one. If you stuck to using one template group with differently-named files, you might end up with a lot more files to rename. Of course, if you're creating a whole new section with all new content (or maybe repurposed content), then a new template group would be mandatory.

If your redesign involves reworking embedded templates that the rest of the site uses then you'll probably need to create a new template group for these two. Or you could get creative with a few conditionals, e.g.: {if segment_1 == "preview"} show new design elements {if:else} show the current design's elements {/if}. Which brings me to the next method:

Use conditionals within existing templates

This is the method I used for the most recent ExpressionEngine redesign I did. I was thinking originally about using a subdomain, but the site is a fairly simple brochure site promoting services and most of the templates were exactly the same except for the weblog entries being displayed. So to make the templates a bit more readable I first created an embed which contained the bulk of each template, and then reworked the existing templates to look something like this:


{if logged_in}New template code goes here.{if:else} {embed="embeds/.content" weblog="{segment_1}"}{/if}
				

I created a new template group for the new embeds I was going to create so it didn't clash with the current design's embeds. Doing it this way meant that only me and the site owners would see the new design while everyone else would see the old one. As it was only a simple site with only two active member groups – admins and editors – {if logged_in} was all I needed but if the site had more complex member structure, then you'd use the {if member_group} conditional instead.

So that's the way I've approached redesigning ExpressionEngine sites in the past. I'm sure there's some out there who probably use version-control systems like Git, but I haven't quite gotten around to working with Git yet. What's been your method?