06 - Moving Footer Content, EE Conditionals, and Implementing the About Section
OK – so we’re still working on getting our site’s Home page fully implemented in ExpressionEngine. The items left to implement are:
- The Search functionality - which I want to leave for later
- The Latest News block - which will draw from the weblog so needs to wait until that section is implemented
- The Latest Products block - which will draw from the Products section so needs to wait until that section is implemented
- The Footer content - which can go in the Miscellaneous Content Weblog implemented in Chapter 5
Note that since we’ve used embedded templates for the Search, Latest News, and Latest Products we can implement them later, in one place, and they’ll immediately show up throughout the site.
So let’s do the Footer, then start moving through the site’s main navigation by implementing the About section - since it’s both next in the navigation and very similar in structure to the Home page.
Moving the Footer Content to the Miscellaneous Weblog
Overall this is a very similar process to what we did with the section-specific intro paragraphs or the Home page main content. We need to:
- Copy the content in the current Footer embedded template.
- Create a new post in the Miscellaneous Content Weblog.
- Edit the Footer template to replace the static content with a exp:weblog:entries tag to pull the content from the weblog post.
Copying the Footer Content into a Weblog
- Open your “embeds/footer” template for editing.
- OK, this is another point where the template’s HTML structure is going to change our EE implementation approach just a bit. The footer is constructed from two paragraphs, one (the copyright) with a class of “right” which floats this content to the right:
- I wouldn’t want clients to have to worry about applying that class to their content, so the easier way to implement this is to split the footer content into two separate posts. This way we can leave the p class=“right” in the template where users won’t have to worry about it. So, select and copy everything between the first p tags - the copyright and the link.
- Click the Publish tab, and choose the Miscellaneous Content Weblog.
- Enter a title of “Copyright”.
- Paste the code into the Page Body field.
- I’m also going to update the copyright info with my company information.
- Since we have p tags in the template, we don’t want EE to apply any formatting to this content. Move to the bottom right of the Page Body field and select None in the Formatting drop-down:
- Click Submit to save the new post.
Repeat the process above for the second paragraph of content in the Footer template:
- Leave the p tags in Footer template.
- Title the post as “Footer Links”.
- Set the formatting on the Page Body field to None.
- Make sure to note the URL Title that EE creates for you—you’ll need it later.
- Click Update and save the new post.
Modifying the Footer Template
Now we have two weblog entries to bring into the footer, and one of them needs to be handled differently by getting a p class=“right”.
There are two ways that come to mind to do this: Use two exp:weblog:entries tags, or one exp:weblog:entries tag with a conditional. What’s a conditional? The best place to start is again with the EE documentation on them.
I’m going to go with the approach using conditionals as it’ll be less code and I think the overall performance of the {exp:weblog:entries} tag and conditional will be better than two exp:weblog:entries tags.
So again let’s look at the changed code for the embeds/footer template and work through what it’s doing. Here’s the code:
<div id="footer">
{exp:weblog:entries weblog="misc_content" disable="pagination|categories|member_data|trackbacks" url_title="copyright|footer-links" sort="asc" dynamic="off"}
<p{if url_title=="copyright"} class="right"{/if}>
{page_body}
</p>
{/exp:weblog:entries}
</div>
Starting at the exp:weblog:entries tag there is:
- The weblog parameter - “misc_content” in my case. Remember this is the Short Name you’ve specified for the weblog.
- The disable parameter - again I’d highly recommend getting in the habit of disabling whatever you can on every exp:weblog:entries tag for better site performance . It’s much easier to do this as you go than having to work back through all your templates at a later date.
- url_title=“copyright|footer-links” parameter - this is how we tell EE that we want only the two posts that comprise the footer content. Again note that the word separator on footer-links could be different for you, depending on what you’ve specified under Admin > Weblog Administration > Global Weblog Preferences > Word Separator for URL Titles. I have dash, you could have underscore.
- sort=“asc” parameter - because we entered the Copyright post first, by default EE will return it first, with the footer links on top of the Copyright post. We need the Copyright post to be on top, or the floated content will have space on top of it when the page is rendered. By reversing the default EE sort order our content will be returned in the order the HTML needs.
- dynamic=“off” - required because this content needs to function independently of the URL for any given page.
- if url_title==“copyright” - this is our nifty EE conditional, which will apply the class=“right” formatting to only the copyright post.
Homepage Results
If you load this new template, save the changes, and refresh your Home page it should be visually the same, but updated now with our company info. This footer content will now be editable via two weblog posts rather than having to muck about in the template code.
Implementing the About Section
Let’s start making that main navigation go somewhere besides the Home page, shall we? The steps to implementing the About section will be:
- Creating an About Weblog
- Publishing some content to it
- Publishing a new About page section intro in the Miscellaneous Content Weblog
- Creating an EE template to display the content
- Updating the embed/main_nav template
Creating the About Weblog
We covered the exact steps for creating a weblog in Chapter 4, so I won’t repeat them in detail here. Here are the specifics:
- Create a new weblog with a Full Weblog Name of “About” and a Short Name of “about.”
- Choose to duplicate the Home page preferences.
- Assign it the default Status Group.
- Assign it to the same Simple Content Field Group as the Home page.
- I’m not going to have EE create any templates automatically, as I won’t need a whole group but rather just one template.
Publishing Content to the New About Weblog
In order to know that our templates are working right, we’ll need some content in this new weblog. Publish three entries - one each for the company, the founders and the products. Since there is nothing special required from these new entries and we’ve already covered the publishing process in this chapter, I’m going to leave out the step by step details and assume you can get through it OK.
Publishing a Section Intro for the About Page
In Chapter 5 we implemented the white on green Section Intros using a new Miscellaneous Content Weblog. We’ll need another post in the Miscellaneous Content Weblog to serve as the section intro for our new About section:
- Publish a new entry to the Miscellaneous Content Weblog.
- Title your new entry “About” - so the URL Title should be “about”. We’ll need the URL title in the next step.
- Enter a description of the About section and save your new entry.
Creating a New Template
With the new weblog in place and the new content published, let’s create the new template to display this new section:
- Click on the Templates tab in the EE Control Panel.
- Find the Template Group that currently holds your index template (“site” in my case).
- Click the New Template link in the second column.
- Enter a name for your template. I’m going to specify “about.”
- Under Default Template Data choose the option to Duplicate an Existing Template, and choose the site/index template that we’ve been working with.
- Click Submit to create the template.
So now we have a site/about template that’s a copy of the current site/index template. We need to edit the site/about template to get it to draw out our new About content instead of Home page content:
{embed="embeds/html_header"}
<body>
<div id="content">
{embed="embeds/logo_title"}
{embed="embeds/main_nav"}
{embed="embeds/search_section_intros" the_url_title="about"}
<div id="maincontent">
<div id="right_side">
{embed="embeds/latest_news"}
{embed="embeds/latest_products"}
</div><!-- close right_side -->
<div id="left_side">
{exp:weblog:entries weblog="about" disable="categories|member_data|pagination|trackbacks" sort="asc" }
<h2 class="underline">{title}</h2>
{page_body}
{/exp:weblog:entries}
</div><!-- close left side div -->
</div><!-- close main content div -->
{embed="embeds/footer"}
</div> <!-- close content div -->
</body>
</html>
Wow - looks very similar to the Home page template, no? All that had to change was:
- In the embed statement that brings in our section intros, change “the_url_title” to specify the new “about” entry.
- In the exp:weblog:entries tag, change the weblog from “home” to “about”.
Note - since the site/index and site/about templates are so close in content they could be actually be combined into one template, using URL segments and conditionals to tell EE what content to pull based on the URL. Since this tutorial is geared towards people new to EE I’m going to stick with the simpler-to-understand approach of separate templates for each.
Save your changes, and click View Rendered Template. You should get your new About content showing on the rendered page.
This is a good time to grab the URL so that we can update the link in the embedded main navigation template. To do that:
- Copy the URL.
- Open the embeds/main_nav template for editing.
- Find the link to the About page and paste in the URL. I usually start from /index.php/. For me the URL then is “/index.php/site/about/”.
- Whoops - we also need the Home page link. I’m going to use the homepage Global Variable.
- Save your changes.
Here’s my updated embeds/main_nav template:
<div id="menu">
<div class="submit">
<ul>
<li><a class="selected" href="{homepage}" ><span>Home</span></a></li>
<li><a 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>
The Results
With these new templates loaded and saved, you should be able to bring up your site Home page and navigate back and forth between the Home and About pages. The section header text should change when you do. Here’s my working example.
And yes, I see the same issue that you’re noticing. The main navigation isn’t showing the About tab as being active so it looks like we’re still on the Home page. We also are lacking a specific page title.
We’ll address both those issues in Chapter 7—again making use of Embedded Variables and conditionals.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Sunday, December 28th, 2008
Comment: #2
Matthew -
Sounds like some troubleshooting tips are in order.
Create a test template and put just one of the weblog:entries loops in it, pulling content from the About weblog. See if that works. If it does - slowly rebuild the template step by step, working incrementally so you know when a particular chunk of code is throwing off the template.
by
Date: Monday, December 29th, 2008
Comment: #3
Mathew, I was having the same problem and this fixed it:
http://expressionengine.com/wiki/Workaround_for_Forced_Query_Strings/
by
Date: Tuesday, December 30th, 2008
Comment: #4
Dan, you’re the man! Oh and Mike so are you. This EE community is pretty cool. Everyone really makes an effort to help each other out. This solved my problem and now I can continue with this tutorial. Thanks guys!
by
Date: Sunday, December 28th, 2008
Comment: #1
I’m having trouble with the last step here. I have followed you quite closely up to this point.
The problem is no matter what I do, on the about page it shows the exact same thing as the homepage, but without graphics. I cannot get it to show the 3 new pieces of content associated with the newly created about weblog. I’m totally baffled so I’m going to skip this step knowing what we are “trying” to accomplish. I’m testing EE with the core and no license. Would this cause this problem? Any advise would be appreciated :-)
Again, thanks for the excellent tutorial.