ExpressionEngine fully installed, I set about pulling my raw html from the .html files. To do this I had to set up template groups for each page.

My list of needed pages/groups at this point was thus:

– Home page
– Archive page
– Contact page
– Single entry story page
– Embeds group (I’ll discuss this in depth further on)

Firstly, I went to Design, Templates, Template Management. I then used the panel below and created a group each for Stories, Contact and Archive, to go along with the Site group acting as the home page for the site.

template management - creating template groups

Shortly after this I changed my mind about the groups, and incorporated some of the key site features into the Site folder. I also added a group for Embeds.

template management - creating template groups 2

Eventually I decided that in fact, the original setup was the better one, as it shortened the URL and it made more sense to use the index file in each group rather than a different template in one group.

updated template groups - shortened url

Furthermore, I decided against having an archive page. I wanted to incorporate a search bar into my site, and there would also be links to other (older) pages included on each page. I opted to include a gallery into my website to add more substance and choices to my site.

gallery instead of archive

Basically, once the groups and templates were set up, it was simply a matter of copying the code from each page into the template itself. You can see below this in action.

copying code into templates

As you can see, there is a lot of code for each page. To make life easier, the template group ‘Embeds’ will be used to take staple features from each page ie. header, navigation, footer, and simply embed them on to each template. The idea is that the only html left on each template, is the html unique to that page. This means that if I need to make a change to the header, unless I’d used PHP includes, normally I would have to go into every page and copy the code across them all to apply the changes to the whole site. This way I can simply go into the embed template for the header, make the change, and the site will change automatically! This alone is a very good reason to use PHP or CMS software if you can afford to, and one of the best features for a basic website in EE.

embed

Below you can see the embeds incorporated into the template. The page will load the embedded templates into the main template when the page is opened in a browser.

embed in action

I followed the embed structure across the whole site, and cut out a massive chunk of unnecessary code from the templates, making life much easier.

Advertisements