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
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 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