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
 
Download the EE Code for 06 - Moving Footer Content, EE Conditionals, and Implementing the About Section

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.”
  • For the “Duplicate existing weblog’s preferences” - Choose the “Home” weblog.
  • 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><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.

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 Entry   

Next Entry >>

 

Previous Comments

Picture of Matthew

by Matthew

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.

Mike Boyink

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.

Picture of Dan

by Dan

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/

http://expressionengine.com/forums/viewthread/74436/

Picture of Matthew

by Matthew

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!

http://expressionengine.com/forums/viewthread/100878/

Picture of Casey Hill

by Casey Hill

Date: Tuesday, January 20th, 2009
Comment: #5

In the footer, the copyright para will not float to the right.

If I leave the in the copyright post itself, it works perfectly. Looks just like your working copy.

But if I remove class=“right” from the post and just rely on the EE conditional in the footer template, it fails. Both paras flush left.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, January 20th, 2009
Comment: #6

I’m guessing it’s a sort order issue.  Try changing the sort order on the footer weblog entries tag.

Picture of Casey Hill

by Casey Hill

Date: Tuesday, January 20th, 2009
Comment: #7

Changed to sort=“desc” ...  Both paras still flush left (although copyright para now at bottom).

I can see from my earlier post that I may not have been clar in 2nd para! If I leave the <p class=“right”) in the copyright post itself, it works fine. But in your copyright post, have you actually removed that?

My embed/footer code is pasted in from your download code, so I don’t think I fat-fingered anything.

This isn’t a “show stopper” and I know yr busy with class this week, but hopefully it can be worked out when there’s time.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, January 24th, 2009
Comment: #8

Yes - the entire point of the conditional is to be able to apply the class in the template vs. relying on it being stored in the weblog post.

Is the class coming out in the rendered code?

Does the conditional match the url_title as it exists in the system?

Picture of Alex

by Alex

Date: Saturday, January 24th, 2009
Comment: #9

Hey Mike, I’m trying to create a new weblog going to:

CP Home ›  Admin ›  Weblog Administration ›  Weblog Management

After I hit the ‘Create a New Weblog’ button I’ll have two sections, ‘Create a New Weblog’ and ’ Create a New Template for this Weblog?’

Am I in the right place?

These are the steps:

. Create a new weblog with a Full Weblog Name of “About” and a Short Name of “about.”
. Choose to duplicate the Home page preferences. I AM STUCK RIGHT HERE, I DO NOT SEE IT!


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

Thanks.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, January 24th, 2009
Comment: #10

The third item in the create new weblog interface is an option of “Duplicate existing weblog’s preferences” - choose the “Home” weblog there.

Picture of Alex

by Alex

Date: Saturday, January 24th, 2009
Comment: #11

Humm! I just came back from the ee user guide and saw a picture there. I don’t have that option. Is that option only for ee 1.6?

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, January 25th, 2009
Comment: #12

Hey Alex - I’m not sure what picture you are talking about.

Picture of Alex

by Alex

Date: Sunday, January 25th, 2009
Comment: #13

http://expressionengine.com/docs/cp/admin/weblog_administration/weblog_create.html

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, January 25th, 2009
Comment: #14

Are you not on EE 1.6?

Picture of Alex

by Alex

Date: Sunday, January 25th, 2009
Comment: #15

I’m using an old version so I’m going to update to core 1.6

Picture of lebisol

by lebisol

Date: Friday, March 27th, 2009
Comment: #16

Just curious….why implement weblog=“misc_content”
for something as trivial as 1-2 lines of text that should not be changing at all….isn’t it an overkill to involve the database to for this?
Thanks Mike!

Mike Boyink

by Mike Boyink (Author)

Date: Friday, March 27th, 2009
Comment: #17

Well - I’ve never had to develop with the database in mind.  That’s what I pay a good host for. 

What I develop for is my client - who I’ve sold on the fact that they will be able to change any bit of text on the website without having to delve into the templates.

Add in caching and the db is even less of a concern.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, April 7th, 2009
Comment: #18

Hi Anton -

One of the revisions I have in mind for this series is to re-code these navigation links using path variables:

<a href="{path='site/about'}">About</a

These are a more reliable way to create the main navigation links - as they will work no matter the installation path of EE.

Your approach will work as well.

Picture of billseymour

by billseymour

Date: Monday, April 27th, 2009
Comment: #19

Working through the tutorials successfully. Thanks again.

My question relates to field names. In both tut 05 and this one, you use page_body in the new code relating to weblog misc_content, the same name as used in weblog Home.

I got error messages when attempting to name a field in weblog misc_content “page_body”, saying that the name was already in use. (I assume meaning the name page_body being used in weblog Home).

I also see that EE documentation says field names must be unique: The field name must be unique within the system, which means that you cannot have two field groups each containing a field with the field name of “body”.

Do I misunderstand, or (as I did) is it necessary to name one of the fields something else (I used misc_body for the field in the misc_content weblog).

Thanks.—Bill

Mike Boyink

by Mike Boyink (Author)

Date: Monday, April 27th, 2009
Comment: #20

Hey Bill -

Field names must be unique, but you can assign the same field group to multiple weblogs.

In this site I’m using the same Simple Content field group for the Home, About and Misc Content weblogs.

Picture of billseymour

by billseymour

Date: Monday, April 27th, 2009
Comment: #21

Mike-
They say ‘you learn something every day’; sometimes I even learn 2 or 3 things in a day! I didn’t understand the field name (unique) vs. field group (can assign to multiple weblogs) distinction until your explanation.

I changed the field group to Simple Content, altered the code to page_body (from my variable misc_body), and everything works just fine.

(an aside: when I made changes, I experienced the ‘both footer elements flush left’; after some poking around, the problem was that I still had ‘formatting’ set to xhtml; once footer_links and copyright were changed to ‘none’, the copyright formatted properly to right side)

This ‘walk through’ method of learning EE is proving very effective.—Bill

Mike Boyink

by Mike Boyink (Author)

Date: Monday, April 27th, 2009
Comment: #22

Glad to hear it!

Picture of Kris Utter

by Kris Utter

Date: Friday, May 29th, 2009
Comment: #23

This About  helped me out with getting a blank page.

Picture of Chris

by Chris

Date: Wednesday, June 24th, 2009
Comment: #24

This has been a doosy!  I’m barely hanging on.

Just when I think I’m lost - I get it.  Just when I get it - I’m lost again.  LOL

Great tutorial.  I’m finally ready for the next page.  Hey, I even got my index.php removed too.  :)

Thanks so much for your great info here.

p.s.  After the GoDaddy fix every time I refresh my about page, it signs me out of my EE account.  Hmmm

Picture of Colin

by Colin

Date: Thursday, December 9th, 2010
Comment: #25

Okay, I tried numerous things to fix this, and I realize this is a small issue, but I just want to figure out what’s going wrong.

Regarding the conditional paragraph tag… I’m using expression engine 2.1.1, so I’ve changed all the references to weblog to channel, but what’s happening is that it’s recognizing the conditional tag for the copyright, and if you look in the code it produces it looks like this:


Copyright

All the links here

So I assume that some formatting option is selected for the channel entries that automatically puts them in a tag, but I can’t figure out how to disable this. Suggestions? Help? Something?

Picture of Colin

by Colin

Date: Thursday, December 9th, 2010
Comment: #26

err, didn’t realize that it would hide my paragraph code,

here’s how it formatted it:

<class="right"></p>
<
p>copyright</p>
<
p></p>
<
p>links here</p
Mike Boyink

by Mike Boyink (Author)

Date: Thursday, December 9th, 2010
Comment: #27

Your field formatting is also adding paragraph tags. You can turn set that to none on a per-entry basis m

Picture of Colin

by Colin

Date: Thursday, December 9th, 2010
Comment: #28

Thanks! that actually not only fixed the problem, but totally helped reinforce everything in field management does.

Picture of Matt

by Matt

Date: Tuesday, February 1st, 2011
Comment: #29

Ah, yes. @Collin I got stuck on the same thing.

To clear up for any super newbies like myself I had trouble locating where the option was to set the formatting. You can set it when you’re add/editing your entry:

[EE2]: Content > Edit > (Entry Title) > Drop down box just above the [Submit] button. In this instance, obviously set that to “None”.

I was originally looking for a parameter that I might of needed to add to the {page_body} tag in the footer template…oops!

Picture of Matt Jenkins

by Matt Jenkins

Date: Monday, March 28th, 2011
Comment: #30

I too struggled finding the drop down for formatting but that was because it just wasnt there!?

Admin > Channel Administration > Custom Fields

Edit the custom field and make sure that in the “Default Text Formatting for This Field” section that “Allow override on publish page?” is set to yes.

You should then see the formatting dropdown on the entry page.

Picture of BJay

by BJay

Date: Tuesday, May 10th, 2011
Comment: #31

Thanks Mike for the wonderful tutorial.

I am a newbie and this is my first encounter with EE. I am using ExpressionEngine: Version 2.1.3

I have followed the steps to implement the Footer as well as the search box content but for some reason they also appear in the main body of the page.

Can you please advice how to fix this issue? Please visit http://balancec.w01.winhost.com/Sites/WRD_EE/Preview/index.php# to see the issue.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, May 10th, 2011
Comment: #32

Did you figure it out?

Picture of BJay

by BJay

Date: Tuesday, May 10th, 2011
Comment: #33

Yes, I was using exp:weblog:entries instead of exp:channel:entries

Thanks for checking it out anyway.

This tutorials have helped me get started.

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>