The Expression Engine phase of my new blog

Most of you will already know that I use Expression Engine as tool for my site (further referred to as EE) and that I enjoy working with this tool mainly because of its flexibility and user friendlyness.

Today I want to unveil some of the EE implementation of my site, in particularly the template part. No real secrets there, but I can imagine that some people are considering EE as blog tool and I want to give them an introduction. I’ll explain how I implemented : my header, the last 2 months on my archive page and my related links. This is of course how I did it, no idea if there are better and more efficient ways. Anyhow, this method works for me and I like to share this with you.

General setup and templates of my site

First off, let me introduce you how my site is set up in general. Maybe not that well known but you can set up several blogs with EE in a very easy way. No multiple installs etc. just click “Create new Weblog” in the Weblog Management. You can use a different weblog for each section and change the word “weblog” to the word “section” (or another word) if you like. There is a lot more to tell you how to get your site organized. The best thing to do is to analyze the structure of your site and decide from there if the sections will be treated as ‘categories’ or as separate ‘weblogs’. It depends on a lot of factors and the main thing is to give it a serious thought before you start to set up things.

Expression Engine - Weblog Management

My different weblogs

These are my different weblogs:

  • Veerle’s blog
  • Veerle’s art
  • Art
  • Approved

As you can see I run 4 blogs. Each of those blogs have their own templates, but some of them are ‘shared’. Shared in a way that I reuse them as in ‘nesting’ them into other templates. Templates in EE are stored in template groups. I’ve set up a template group for each weblog. My nested templates are stored in a group called ‘includes’. This group contains: my header, my footer, my art to the right, my categories, my flickr images and the sidebar (which contains “previously”, “what’s cookin” and “search”). These parts are all repeated over my site. If I need to do an update in the header, footer or any other element I only need to do this once. Very clever and easy 😉 Even my CSS files are stored in templates. You have total freedom over the (X)HTML code of these templates, no restrictions there. See what I mean with flexibility? These are called ‘templates’ but they are far from the templates that most people would call them 😉

Expression Engine - Templates and Template Groups

Overview of my templates

These are the main templates for my main weblog (Veerle’s blog), not including the CSS files:

  • index
  • contact
  • about
  • links
  • archive
  • archive-summary
  • comments
  • comments-preview

Since there is so much I could talk about, I decided to pick 3 interesting subjects:

  • The implementation of the header
  • The implementation of the related links
  • The implementation of 2 latest months on the archive page

The implementation of the header

As I told you already, my header is stored in a separate template, which is used as ‘nested’ template and stored in a template group called ‘includes’. This template is implemented in all the main templates. Updating the header means only updating this template. The header contains the illustration, the links at the very top and my main navigation. The fun part is the navigation, since I use an “active” state for the pages : home, about, archive, contact and links. This all purely done by CSS, no EE magic here, just you read on…

I use the embed EE tag for my header. So each page has this tag:

EE embed tag

In my body element I use a different id for each of the pages. Each list element (each ‘li’) has a separate id, so I have

  • ,
  • ,
  • etc. This means that if the body for each of these pages have a different id, that I’m able to give the active tab or button another style, an “active” style. For example for the about page I have this body id:

    The rest is pure CSS. You just need to style the

  • on this page, like this:

    1. body#about-page ul#nav li#about {
    2. background-position:-66px -54px;
    3. }

    That’s it for the header. Now, let’s have a look at how the related links are implemented

    The implementation of the related links

    The way my related links work is like this: I select each of them from a dropdown menu. So it’s not some intelligent system, you can choose the articles yourself, which I rather prefer because I have total control over this. These dropdowns are extra custom fields created in the admin. I’ve created 5 of them and named them “related1”, “related2” and so on. The “Field Type” option for this custom field is set to ‘Relationship’ with ‘Relate weblog entries to other weblog entries’ selected. I have added those fields to my ‘Default Field Group’. Yes, you can have different field groups as well. I use this default group for all my weblogs, except my “Approved” weblog. This weblog has its own field group, since this includes just a title, a URL and a description. You can have as many groups as you like but it’s probably wise to limit this to keep things as light and simple as possible.

    Expression Engine - Field Groups

    Expression Engine - Setting up Related fields

    Once the custom fields were set up I added the necessary EE tags in my ‘comment’ template, the template that holds my article pages.

    EE template code:

    EE tags for related links

    I put the div, the heading 2 and the ul element between if statements otherwise they will also be rendered when there are no related articles selected and that’s not what I want. So if there is a first related article selected these will be rendered, but if not than nothing will be rendered.

    The implementation of 2 latest months on the archive page

    Now for this part I’m not exactly sure if there is a way to do this with EE tags only. I mean, showing the last month is no problem, but showing the month before that… well I didn’t find a parameter so I added a tiny bit of PHP. Please do correct me if you know another solution, one that doesn’t involve adding extra PHP for example.

    Why show 2 months?

    Well because showing only the last month on for example June 1st would give me only 1 link, so that’s rather stupid. You need at least 2 months. Since my archive goes back till 2003 I need to get things a bit organized. That’s why older articles are searchable by month. People also need to be able to search for articles by category, so for this part of the page I used the nested ‘categories’ template.

    EE template code:

    Here is the code to show the month before the last month:

    EE tags for archive page, to show the month before the last month

    As you can notice I have added a bit of PHP in the ‘month’ parameter. This makes it possible to show me the 2nd last month. Only in the month of January I’ll ran into some trouble, so it’s not prefect I know :S For the last month I use the same code except that I use the ‘limit’ parameter:

    EE tags for archive page, to show the last month

    Plugins and modules

    If you want to take things to the next level you can write your own plugin and just dump it in the plugin folder. That’s what I did for my Gravatars in the comments. There are a whole bunch of them available already.

    If you are a PHP programmer you can consider becoming an Expression Engine module developer. Everything is modular in EE and since a lot of features are already there you can greatly accelerate your development time by focusing only on the enhancements you need.

    Variables are times savers

    Another thing worth mentioning is the use of variables. I use them to save time, just in case I would decide to change things later on. Here are some examples of variables:

    1. {assign_variable:my_weblog="veerle_blog"}
    2. {assign_variable:my_template_group="blog"}
    3. {assign_variable:link=""}

    These 3 lines of code are placed at the top in my template, above the doctype. The first variable is called “my_weblog”. Where ever I used “my_weblog”, EE will know that I refer to “veerle_blog” (and not to another weblog). I do the same for “my_template_group” and for “link”. Where ever I use “link” EE knows that I mean You can use as much variables as you like. Very handy.


    Now, this might look all a bit too complicated for code-allergic designers, but most of this code is copy and pasted from the EE User Guide. With a bit of effort and analytic thinking you be amazed of yourself. I’m a designer myself, not a coder, well except for CSS and XHTML 😉 One tip I would give you is to save a copy of the default templates that come with EE. Just copy the group and save them as “original” and use them as a back up and as an example. I did a lot of copy and pasting from these templates, they helped me a lot. Look in the User Guide, most answers can be found there, it is very well explained with examples etc. And if you are really stuck than there is always the super helpful pMachine Community Forum. Just give it a try you’ll be amazed by its power 😉

    One more thing…

    If you’re using TextMate, Chris Ruzin has written a fabulous EE plugin that makes writing EE tags a real pleasure. For those die-hard EE coders out there grab’em and have fun! I need to take TextMate for a spin too since I saw the movie and notice that a lot of people are switching from BBEdit.