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.
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. Here’s my working example.
Category Navigation
Previous Comments
Date: Friday, December 12th, 2008
Comment: #2
Sorry the site url is actually http://www.lcbcchurch.com/sites/Splash.
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.
by .(JavaScript must be enabled to view this email address)
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?
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.
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!
by .(JavaScript must be enabled to view this email address)
Date: Wednesday, January 28th, 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?
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.
by .(JavaScript must be enabled to view this email address)
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!
Date: Wednesday, August 26th, 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!
Date: Wednesday, August 26th, 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.
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.
by .(JavaScript must be enabled to view this email address)
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!
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
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..;)
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
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.
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.
by .(JavaScript must be enabled to view this email address)
Date: Thursday, December 3rd, 2009
Comment: #19
Very long tutorial… But i found some useful things from it.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, April 20th, 2010
Comment: #20
Hi, Mike:
Okay, I’ve tried everything on this one, and all was cool until I tried to modify the main navigation template, at which point what I got on my refreshed index page was:
Parse error: syntax error, unexpected T_ENDIF in /home/content/blahblah/html/domainname/system/core/core.functions.php(634) : eval()‘d code on line 7
I’ve tried copying your code, literally; that didn’t work. I tried removing the quotes from around the variables; that didn’t work, either. I do have to use /index.php?/site in lieu of {homepage}, but that wasn’t causing me any brain-damage until I got here. I even tried downloading your txt files, to see if there was a typo in the tutorial, but, that doesn’t seem to be it.
Nor do I see anything in the template debugging that should be causing this.
Any suggestions? Besides considering a different career path? ;-)
Hitch
by Mike Boyink (Author)
Date: Tuesday, April 20th, 2010
Comment: #21
This error usually means you’ve got a formatting issue with a conditional statement. The trick here is to work very incrementally and systematically to figure out what the offending code is.
Try pulling out all the main nav and see if the error goes away. Then add each LI back in one line at a time and see when the error crops up again.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, April 20th, 2010
Comment: #22
Hi, Mike:
Durn, I was just getting ready to re-comment and to tell you that it was fixed, although I have no idea what actually happened. (Whuhappen?)
I simply removed and then re-typed the single quotes around the variable, and, lo and behold, it worked. (I’d tried removing them altogether first, with no joy). Do I know why? Nope. However, as a breadcrumb, just in case somebody comes after me, that’s what worked for me. Doesn’t make sense, as I actually typed them manually in the first place—not cut-n-paste—but there it is.
Thanks for your rapid response!
—Hitch
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: http://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: http://www.lcbcchurch.com/sites/Splash2