The Blog Studio

We are internet culture creators with a focus on

Blog > How-to's > More on using segment_x in Expression Engine

More on using segment_x in Expression Engine

Peter F, 01 September, 2006 0 Comments

Yesterday Mike posted a tip about using segment_x in expression
engine templates. This is a very powerful feature of EE, and is worth a
bit more explanation.

First, you’ve got to know what the heck a segment is! Expression
Engine uses a unique url structure. Every url in an EE site looks
something like

In this example segment_1 sectionName, segment_2 templateName and
segement_3 articleName. Knowing this, we can get our templates to do
some pretty flexible things, without a lot of heavy lifting on our part.

I’m going to assume that like us, you build your templates to be
modular. For example, our index page for a given template group might
look like like so:

{embed global/header}
{embed weblog/content}
{embed weblog/sidebar}
{embed global/footer}

Now, if you use that structure, you’ll need to change each template
group’s index page to the correct weblog name. But using Mike’s trick,
you could replace the word weblog with {segment_1} and use the same
template for all your weblogs.

Admittedly, this is a pretty small time saver. Inspired by Mike’s
post though, I saved myself a whole bunch of time this morning when I
decided I wanted to use a different background image for a particular
section on a site I’m building. Instead of making changes to the
individual weblog’s template, I changed the body tag in the global
header (we use a template group called “global” to store all the
reusable bits and embed them as needed) to

<body id="{segment_1}">

Now all the weblogs can be easily targeted individually via my stylesheet. In my css I just added this new rule

// note that I'm using #weblog for this example.
//In actuality, I used the name of the template
//group I'm targeting

#weblog #wrapper{ background: url(path/to/images/newImage.jpg) repeat-y #fff; }

Here’s another way I used segment_1 on a recent project. I wanted to
create an active state for my navigation. This is always a tricky thing
to do. But with EE, it’s dead simple. Check it out:

note - ee keeps parsing the if statement so I've
removed the {} for this example

a href=”/blah/” if segment_1 “home” id=”active”/if>home

What happens here is that each link is evaluated, and if the first
segment of the url following the /index.php/ is found to match the
criteria, then id=”active” is written in the html.

Now that I think about it, I can combine the body id=”{segment_1}”
trick with the id=”active” trick and save myself even more time. Here’s

Because I’m assigning the body tag the id of the active weblog, I can
clean up my nav and get rid of the if statements entirely. In my css, I
can write

#nav #weblogName a:link {background: url(path/to/images/activestate.jpg)}

This will make my EE templates a bit cleaner, but will add to the
file size of my css. Since the css is only loaded once per session, it
will make a small performance upgrade, since EE won’t have to assess the
if statement each time the page loads.

As you can see, using segment_x opens up a huge world of
possibilities. Bottom line, however you use it, it can save you a bunch
of time.

Comments are closed.


We are looking forward to the holidays. We'll all be at #hohoto supporting an amazing cause & dancing our butts off. Come dance with us.


Excited? So are we! Fill out our RFP and start from there!

Request For Proposal




Subscribe to our newsletter!

Subscribe to our mailing list

* indicates required