This is the seventh chapter in the Building an ExpressionEngine Site Series, and 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 or 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 embedded 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 docs 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 to the end of the title declaration.  I’ve named my variable “my_page_title”.  Before editing you should have the following between your opening and closing title tags: (spaces added to prevent EE from parsing the variables):
{ site_name } | Building an ExpressionEngine Site

After editing it should be (again, remove the spaces):
{ site_name } | Building an ExpressionEngine Site | {embed:my_page_title }

Here is a text version of the updated html_header template for your reference:
chapter_7_html_head.txt

Modifying the Page Templates
With the html_header template setup to receive the variable, now we need to modify the Index and 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="building_series_ch7_embeds/html_header"}

After editing, the code for the Home Page is:
{embed="building_series_ch7_embeds/html_header" my_page_title="Ch. 7 Home"}

And the code for the About page is:
{embed="building_series_ch7_embeds/html_header" my_page_title="Ch. 7 About"}

Note: I’ll link you to text versions of the Home and About templates below, after we’ve made the changes for the navigation.

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 this approach.  As we get another layer deeper into the site (I’m thinking of areas like specific product pages, etc) we’ll have to put more code in there to get the desired page title - including weblog:info or 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 nav template which item to apply the selected class to.  So we need to:

• Modify the Home and About page templates
• Modify the main_nav embedded 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.

OK -so starting with the Home page we have currently have the following code that pulls in the main navigation:
{embed="building_series_ch7_embeds/main_nav"}

This needs to change to:
{embed="building_series_ch7_embeds/main_nav" my_location="home"}

The About page is currently:
{embed="building_series_ch7_embeds/main_nav"}

This needs to change to:
{embed="building_series_ch7_embeds/main_nav" my_location="about"}

Modifying the main_nav Template
The page templates now send a variable to the main navigation template, now 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.  The easiest way to present and see the code is to look at the text version of the template:

chapter_7_main_nav.txt

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.

And - as promised - here are the updated text versions of the Home and About page templates.  Again note - if you are following along and using these in another install of EE you’ll probably need to update the template group names, as they are coded to be chapter-specific.
Home Page Template: chapter_7_index.txt
About Page Template: chapter_7_about.txt

Here is the working example - you should be able to switch between the Home and About pages as expected.

What’s next?  Let’s begin on the Products section.  We might have to spend a chapter or three there as the Products section will be the most complex in the site as it will need a new field group, a new category group, two new templates, and updating the embedded “latest products” template.

FYI - I also found a stylesheet issue that was preventing some images from appearing in Firefox on Windows Vista - the paths were being rendered with double slashes because I had coded links as { site_name }/rest_of_path_here and they should be { site_name }rest_of_path_here.

On to Chapter 8.
Back to Chapter 6.