07 - Building Page Titles and Setting Navigation Active State Dynamically

In Chapter 6 we finally moved off the Home page of our mock business site, and implemented the About page.

The job isn’t quite done, however, as neither the page title up in the browser title bar nor the main navigation indicates that we’ve moved off the Home page.  We’ll fix that in this chapter by using more Embedded Variables in our embedded templates.

 
Download the EE Code for 07 - Building Page Titles and Setting Navigation Active State Dynamically

Let’s tackle the titles first.  The overall approach is very similar to how we implemented the section intros in Chapter 5.  We want to pass a variable containing the current page title to the embedded template that holds our HTML header.  So we need to:

  • Modify the embeds/html_header template to receive and display the variable.
  • Modify each page template that uses that embedded template and specify what we want the page title to be.

Modifying the HTML Header Template
You’ll want to reference the EE documentation on Embedding Templates within Other Templates as they’re helpful for showing how things need get formatted.

You need to edit the title HTML by adding the Embedded Variable in between the title tags.  I’ve named my variable “my_page_title”.  Before editing you should have:

<title>{site_name}</title

After editing it should be:

{site_name} {embed:my_page_title} 

Here’s the entire updated embeds/html_header template for your reference:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<
head>
    <
meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
    <
meta name="author" content="free-css-templates.com" />

          <
link rel='stylesheet' type='text/css' media='screen' href='{stylesheet=site/stylesheet}' />
    <
title>{site_name} {embed:my_page_title}</title>
</
head


Modifying the Page Templates

With the embeds/html_header template setup to receive the variable, now we need to modify the site/index and site/about templates to send the desired page title.  You need to edit the very first embed statement, and add your variable name and value onto the end of it.

Before editing, the code is:

{embed="embeds/html_header"

After editing, the code for the Home page is:

{embed="embeds/html_header" my_page_title="Home"

And the code for the About page is:

{embed="embeds/html_header" my_page_title="About"

Once you’ve made those edits and saved your changes, you should be able to move between the Home and About pages and see the browser title bar change.

Granted, this is a pretty simple implementation of dynamic page titles. As we get another layer deeper into the site (like specific product pages, etc) we’ll have to put more code in there to get the desired page title - including exp:weblog:info or exp:weblog:entries tags.  But that’s down the road, this will suffice for now.

Dynamic Navigation Styling
The other, more visual, issue with the results of Chapter 6 was that the main navigation still indicated we were on the Home page although we had navigated to the About page.  If you look at the HTML for the main navigation, you’ll see that the tabs of the design are triggered by applying a “class=selected” to the one you want to be active.

So, the question is, how do we both keep our main navigation as one embedded template but still provide the proper class to set the active tab in different areas of the site?

The easiest and cleanest approach is one that EE’s Derek Jones detailed in his Behind the Curtain - Part One on the EE company blog.

Essentially the idea is to use Embedded Variables along with conditionals to set a variable in each page template that tells the embedded main navigation template which item to apply the selected class to.  So we need to:

  • Modify the site/index and site/about templates.
  • Modify the embeds/main_nav template.

Modifying the Page Templates
This is very similar to the process above, where we added variables for the page titles.  The only difference here is the text we’re entering as the value of the variable will never be displayed on the site—it’s just something for the conditional in the embedded template to work with.

Starting with the Home page, we currently have the following code that pulls in the main navigation:

{embed="embeds/main_nav"

This needs to change to:

{embed="embeds/main_nav" my_location="home"

The About page is currently:

{embed="embeds/main_nav"


This needs to change to:

{embed="embeds/main_nav" my_location="about"

Modifying the Main Navigation Template
The page templates now send a variable to the main navigation template.  The main navigation template needs to be modified to change the HTML depending on what the contents of the “my_location” variable.  Per Derek’s approach we’ll put a conditional within each list item.  Since we pass only one value, only one of these will ever evaluate as “true,” so only one active class will be applied.

Here’s the updated code for the embed/main_nav template:

<div id="menu">
    <
div class="submit">
        <
ul>
            <
li><a{if '{embed:my_location}'=="home"class="selected"{/if} href="{homepage}" ><span>Home</span></a></li>
            <
li><a{if '{embed:my_location}'=="about"class="selected"{/if} href="/index.php/site/about/"><span>About</span></a></li>
            <
li><a href="#"><span>Products</span></a></li>
            <
li><a href="#" ><span>Services</span></a></li>
            <
li><a href="#"><span>Weblog</span></a></li>
            <
li><a href="#"><span>Contact</span></a></li>
        </
ul>
    </
div>
</
div

Note that you have to be a bit picky with the spacing - mainly so that when the conditional evaluates to “false” and the active class is not applied, you don’t get extra spaces in your linking code.

See the attached files for the updated site/index and site/about templates - Chapter_7/index.txt and Chapter_7/about.txt.

The Results
With these changes made to your templates, you should be able to switch between the Home and About pages and have the page titles and active tabs update as expected.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Nate Hamilton

by Nate Hamilton

Date: Friday, December 12th, 2008
Comment: #1

Hey Mike, wondering if you can come to my rescue again. I am setting up a splash page that has several pages of content. I am wondering if there is a way to load in certain content through embed tags after clicking a link. The functionality that I am trying to go for is located here: www.northpoint.org. It seems to me that it should be pretty easy but I can’t find any simple solutions. Any ideas? Let me know, thanks. The site I am developing can be found here: www.lcbcchurch.com/sites/Splash2

Picture of Nate Hamilton

by Nate Hamilton

Date: Friday, December 12th, 2008
Comment: #2

Sorry the site url is actually http://www.lcbcchurch.com/sites/Splash.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, December 12th, 2008
Comment: #3

Hey Nate -

I’m no javascript expert but that all looks to be done with it.  The basic approach would be to get EE to write out the HTML and just use js to control the visibility.

Picture of David Clugh

by David Clugh

Date: Friday, December 26th, 2008
Comment: #4

Hello,

I was wondering if the quotes around the embedded variables in the main/nav template was “supported”?

I think I understand that text has to be compared to text, but on point number 6 of this knowledge base article: http://expressionengine.com/knowledge_base/article/troubleshooting_conditionals/ it says that quoted variables are “not supported”.

I was never really sure what they meant by quoted variables. Maybe the rule doesn’t apply to embedded variables?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, December 26th, 2008
Comment: #5

Hmmm…either this is something that changed or my 41 year old brain is mis-firing.  I recall taking this anv approach straight from this EE Blog Post which I remember showing quotes around the embed variables.  However re-reading it I now see that the quotes aren’t there.

In fact if you read the Discussion Thread for that article you’ll see Derek Jones quoting himself where he used the quotes around the variable.

Looks like the root issue is that we are not passing variables that contain user input, so in this specific case there is no security risk.

However if it works w/o the quotes the don’t use them. I’ll update my approach from now on as well.

And note - not sure if it’s significant or not but just thought I’d point it out - my code uses single quotes vs. the double quotes mentioned in the KB article.

Picture of Kevin

by Kevin

Date: Wednesday, January 21st, 2009
Comment: #6

Mike,

It looks like when you click the “About” top navigation, it doesn’t move from the “Home” tab. Think there might be a space or something not changed on the backend with the embeds.

Just a note!

Picture of Alex

by Alex

Date: Thursday, January 29th, 2009
Comment: #7

Hi Mike! man I can’t get to work the the title of the page. When I click the about page, still have the ‘Home’ title in it. Any help?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, January 29th, 2009
Comment: #8

Hi Alex -

First - make sure you are actually loading the About page by looking at the URL.

If it’s loading, then you’re not getting the embed variable connected.  Make sure the variable name is the same in both templates.

Finally - if you can post your sending embed code and the receiving embed code it would help debug.

Picture of Brenna

by Brenna

Date: Sunday, July 26th, 2009
Comment: #9

This is a great tutorial Mike has put together.

I had a similar problem as others where my About page appeared same as the Home page. I am running EE on a GoDaddy host, found my solution here: http://expressionengine.com/forums/viewthread/74436/

I followed philfreo’s solution posted there and it worked like a charm!

Picture of Rory Bernstein

by Rory Bernstein

Date: Thursday, August 27th, 2009
Comment: #10

I have a navigation bar that uses images, not text, in an unordered list. (I use mouseover/mouseout javascript to make them roll over.) How can I use this technique to make the image be the “on” state image when I am in that section? In other words, I have an on and off state graphic for each nav button, and I want to show the “on” state graphic when inside that section, and not have it roll over. Thanks!

Picture of Rory Bernstein

by Rory Bernstein

Date: Thursday, August 27th, 2009
Comment: #11

A bit more info on the previous post:

Here is the code for one of my list items, with the image and the javascript. I the the conditional tag in there:

<li ><img></li>

In my template, I set the “loc” variable.

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, August 27th, 2009
Comment: #12

Hey Rory -

it’s possible, but you’ll need to figure out the exact code that uses the concept Ive presented here and just applies your necessary HTML

I don’t use images for nav because they don’t index as well in search engines, aren’t acessible by screen readers, and are just harder to change down the road.

Picture of zacwoe

by zacwoe

Date: Tuesday, October 27th, 2009
Comment: #13

Many thanks for this excellent tutorial.
It is incredible to see all what I could learn within 2 days.
You guys rock!

Picture of Rory Bernstein

by Rory Bernstein

Date: Tuesday, October 27th, 2009
Comment: #14

Mike, I seem to have figured out a way to do it. I agree that using imgs for navigation is not great; I am going to stop designing nav bars with images!

Please bring EE training to NYC!
Rory

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, October 27th, 2009
Comment: #15

Zacwoe - glad to hear it.

Rory - there have been discussions but NYC but nothing set in stone.  The biggest issue for us is the cost - we can just do the class so much cheaper here in W.MI.  The difference in cost would probably amount to most of the travel/lodging on our end, and you’re just a short plane ride away..;)

Picture of Drew Stauffer

by Drew Stauffer

Date: Thursday, November 12th, 2009
Comment: #16

Hey Mike,

Thank you soo much for these tutorials. I’ve had to learn EE in a hurry and these have saved my life.

Any thoughts on the easiest way to achieve custom titles and meta data for each page.

Thanks

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, November 12th, 2009
Comment: #17

Hey Drew - thanks for the comments.

This chapter included setting page titles—you can extend it if you need to by using additional tags in the embed statement on the parent template (ie using a weblog entries loop to send the entry title as page title).

Meta data—if you think it’s worth it anymore - could be done the same way.

Picture of Drew Stauffer

by Drew Stauffer

Date: Thursday, November 12th, 2009
Comment: #18

ok cool. I think i get it. yeah wanting to add a meta description…no keywords anymore. hahaha.

Picture of matt

by matt

Date: Thursday, December 3rd, 2009
Comment: #19

Very long tutorial… But i found some useful things from it.

Picture of Jason Lynx

by Jason Lynx

Date: Monday, January 17th, 2011
Comment: #20

Is there a way to rewrite the if then statement in the nav to default to a certain class if the statement in false?

For instance, in my nav the first and last options have different classes assigned to them then the other options.

Picture of Boyink

by Boyink

Date: Tuesday, January 18th, 2011
Comment: #21

Sure - look at the docs on conditionals for how to use an “else” clause.

Picture of Den

by Den

Date: Friday, May 13th, 2011
Comment: #22

hi Mike, i have question regarding navigation menu on website. Im using EE 2 and cant set up dynamically navigation. Could you help me with that?

<div class=“menu”>
<div class=“menu-left menu-left-sel”></div>
 

  <div class=“menu-right”></div>
  <div class=“menu-center”>
   
<table>
</tbody>

</tr>
      <td >Home</td>
   
      <td >About</td>
      <td >News & Events</td>
   
      <td >Services</td>
      <td >Portfolio</td>
      <td >Our Blog</td>
      <td >Contact us</td>
       
    </tr></table>
  </div>

Mike Boyink

by Mike Boyink (Author)

Date: Friday, May 13th, 2011
Comment: #23

Hey Den- there are a number of tutorials here on the site showing how to build dynamic nav. Take a look around…:)

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>