Building our ExpressionEngine Website Templates with Embeds
I began to build our BabyFilter templates in part 4 of the series, where I set up our template groups and showed you how to quickly display static content on the website homepage.
One thing I failed to mention was that once you designate a specific template as your site’s homepage, you can access it via several URL’s. For example, our BabyFilter homepage is in the “home” template group, and it is called “index”. The URL’s where you can view this page are:
babyfilter.wi-staging.com/home/index
babyfilter.wi-staging.com/home
babyfilter.wi-staging.com
If I went into the CP and designated the index template of the “telephone” template group the homepage, it would be like so:
babyfilter.wi-staging.com/telephone/index
babyfilter.wi-staging.com/telephone
babyfilter.wi-staging.com
Of course, since it is your homepage, you’d only want to access it at the root URL, but I wanted to demonstrate that the standard URL structure still applies, but the designated homepage is the only page accessible at the root URL. For this reason, no matter what my template group structure looks like, I make it easy and always create a template group called “home” with a single template in it for the site homepage. That way I always know just where to find it without even thinking.
Moving on- at the end of the last article I showed you how to get static content onto the website homepage (recall the ExpressionEngine Rocks code), let’s go ahead and make the first draft of our full page template. We’ll do it all in the homepage for now, and then break it up later to make it more flexible. So, open up your project in your text/HTML editor and go back to the /system_bf/templates/home/index.php homepage file.
If we refer to the original site, we can see the basic page structure is a typical header, content, footer layout with a left column for the categories and related information, and a right column for the main content.
I’ll begin by replacing the existing code in the file with a basic XHTML layout that will represent our template. Save the page and upload to the staging site, and we see that the changes are reflected right away:
I’ll go ahead now and fill out this code to add in the main menu and other HTML elements, and here is how that more complete template looks on our staging server:
I’ll now go ahead and bring in the images from the original site. I have created an /images/layout/ folder at the root of the site and brought in my logo, background, and other images. I FTP them up to my staging server and we’re ready to bring them into the template with CSS. Pretty simple.
Now I’ll load in the CSS from the original site. With ExpressionEngine, CSS files are also managed in the Templates area of the CP, and here is how. Create a new template group called “stylesheets” and then create templates called “layout”, “styles”, “ie” and “print” in that group. This time, though, choose CSS Stylesheet as the template type as you create each template. Then, view each template in the CP and check the box to save each one as a file. Finally, open your FTP program and download that new /templates/stylesheets/ folder to your local machine for editing.
As you can see, CSS files are managed just like other template files. I’ve copied the layout.css and styles.css code from the original site into my new ExpressionEngine CSS templates, and uploaded them to the staging server. However, to get them to work with our homepage template, a small change is required to the CSS link code in the template head area:
<link rel="stylesheet" href="{stylesheet=stylesheets/layout}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="{stylesheet=stylesheets/styles}" type="text/css" media="screen, projection" />
As you can see, it is a pretty easy change- instead of referencing an absolute or relative path to the css files, just replace the href value with
{stylesheet=template_group/template_name}
ExpressionEngine will do the rest. You can, as with non-ExpressionEngine sites, call as many CSS files as necessary in your site.
Now, with my images uploaded, CSS templates uploaded, and homepage template modified to call the CSS templates correctly, I upload the homepage template and the staging site is beginning to resemble the original site.
Good! Looks like some tweaking will be needed, but the engine is working great. Let’s switch gears completely. In both of the menus, there are menu choices visible for both a logged out and logged in state. Let’s fix that quickly. ExpressionEngine if/then statements look like this:
{if x == y}
Do this
{if:else}
Do this instead
{/if}
Different than you are used to, but it works. ExpressionEngine has some core if statements that work great for the fix we need- if logged_in and if logged_out. Let’s use these to fix our menus. In the original site, the top right account menu looked like this:
<ul>
<?php
//if not logged in, show register and login button
if ($_COOKIE['loggedin'] != "true") {
echo '<li class="first">[ <a href="/newuser.php">Join Us</a> </li>';
echo '<li class="last">| <a href="/account/login.php">Login</a> ]</li>';
}
//if logged in, show my account, logout and new post button
if ($_COOKIE['loggedin'] == "true") {
echo '<li class="hello">Hello, ' . $_COOKIE['username'] . '!</li>';
echo '<li class="first">[ <a href="/account/view.php">My Account</a> </li>';
echo '<li class="last">| <a href="/account/logout.php">Logout</a> ]</li>';
}
?>
</ul>
In our new site, here is the code for the account menu:
<ul>
{if logged_out}
<li class="first">[ <a href="/newuser.php">Join Us</a> </li>
<li class="last">| <a href="/account/login.php">Login</a> ]</li>
{/if}
{if logged_in}
<li class="hello">Hello, Username</li>
<li class="first">[ <a href="/account/view.php">My Account</a> </li>
<li class="last">| <a href="/account/logout.php">Logout</a> ]</li>
{/if}
</ul>
Pretty simple, and the main menu would be modified in exactly the same way. Now that we have the correct links showing up, we need to update the account menu to include the correct ExpressionEngine reference to the user’s username, and also update the links to ExpressionEngine style href’s along the lines of what we did for the stylesheet references.
The username edit is very simple. If a user is logged in, you can display the username in any template simply by putting
{username}
in your code. So I’ll just replace $_COOKIE[’username’] with the ExpressionEngine username code. Done.
To update the href link code, replace your absolute or relative link with
{path=template_group/template_name}
So, our new account menu, fully updated for use in ExpressionEngine looks like this:
<ul>
{if logged_out}
<li class="first">[ <a href="{path=member/register}">Join Us</a> </li>
<li class="last">| <a href="{path= member/login}">Login</a> ]</li>
{/if}
{if logged_in}
<li class="hello">Hello, {username}</li>
<li class="first">[ <a href="{path=member/profile}">My Account</a> </li>
<li class="last">| <a href="{path=logout}">Logout</a> ]</li>
{/if}
</ul>
And the updated main menu looks like this:
<div id="mainmenu">
<ul>
<li><a href="{path=site_index}">Home</a></li>
<li><a href="{path=about}">About</a></li>
{if logged_out}
<li><a href="{path=member/register}">Join Us</a></li>
<li><a href="{path=member/login}">Login</a></li>
{/if}
<li><a href="{path=faq}">F.A.Q.</a></li>
{if logged_in}
<li><a href="{path=invite}">Invite Friends</a></li>
{/if}
</ul>
</div>
Some notes about the links in the account menu and main menu: ExpressionEngine has a built-in membership system that includes registration, login, password recovery, profile and logout pages. These can be replaced with custom pages, but for launch, we’ll leave them alone. The default versions of these pages are referenced above as member/login, member/profile, member/register and logout. And one more note- whenever you link to the site’s homepage, be sure to use
{path=site_index}
That is pretty much everything that is needed to update our main template for use in ExpressionEngine. There may be some changes as we get farther into this project, but I hope you can see how quickly you can turn a typical HTML template into something that integrates into ExpressionEngine templates very quickly.
With that, let’s turn this single page into a template we can use site-wide as a common header and footer. Actually, the left column of the content area will also be part of the template, for this particular site. Here is our final template with the new ExpessionEngine code.
Log back into the CP and go to templates. Click on the “includes” template group that you created in the last article of this series. Create these HTML templates: header_top, header_bottom, sidebar, footer. Save them as files and FTP them down to your machine, then open them in your editor. Also, be sure that the homepage template we’ve been working on is open.
We’ll chop this baby up starting at the bottom - open your new footer template. Cut the following code from the bottom of the homepage template and paste it into the footer template:
</div>
<div id="footer">
<p>©2008 Web Inception. All rights reserved.</p>
</div>
</div>
</body>
</html>
Next, cut this code from the bottom of the homepage template and paste it into the sidebar template:
</div>
<div id="sidebar">
<p>Categories</p>
</div>
Yes, there is a closing div tag at the top of that code. This is the closing content div. You’ll see why I did it this way in just a bit.
Next, move to the top of the homepage template and cut this code, pasting it into the header_top template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>BabyFilter: Intelligent Baby Talk.</title>
<link rel="stylesheet" href="{stylesheet=stylesheets/layout}" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="{stylesheet=stylesheets/styles}" type="text/css" media="screen, projection" />
<!--[if IE]><link rel="stylesheet" href="{stylesheet=stylesheets/ie}" type="text/css" media="screen, projection" /><![endif]-->
<link rel="stylesheet" href="{stylesheet=stylesheets/print}" type="text/css" media="print" />
Finally, grab this code, cut it, and paste into header_bottom:
</head>
<body>
<div id="container">
<div id="header">
<div id="accountmenu">
<ul>
{if logged_out}
<li class="first">[ <a href="{path=member/register}">Join Us</a> </li>
<li class="last">| <a href="{path= member/login}">Login</a> ]</li>
{/if}
{if logged_in}
<li class="hello">Hello, {username}</li>
<li class="first">[ <a href="{path=member/profile}">My Account</a> </li>
<li class="last">| <a href="{path=logout}">Logout</a> ]</li>
{/if}
</ul>
</div>
<h1><a href="/"><img src="/images/bflogo_site.gif" alt="BabyFilter: Intelligent Baby Talk" width="300" height="67" longdesc="http://www.babyfilter.com" /></a></h1>
</div>
<div id="mainmenu">
<ul>
<li><a href="{path=site_index}">Home</a></li>
<li><a href="{path=about}">About</a></li>
{if logged_out}
<li><a href="{path=member/register}">Join Us</a></li>
<li><a href="{path=member/login}">Login</a></li>
{/if}
<li><a href="{path=faq}">F.A.Q.</a></li>
{if logged_in}
<li><a href="{path=invite}">Invite Friends</a></li>
{/if}
</ul>
</div>
<div id="content">
<div id="content-box">
As you can see, this is the remainder of the header and everything common, down to the opening content div.
Save all four of your new templates and you should be left with this in the original homepage template:
<div id="welcome">
<p class="message">BabyFilter is a community of parents who contribute to intelligent conversations about their babies. We welcome new members who seek a safe haven from message boards where flaming and useless comments outnumber helpful ones. Our community polices itself, so if you want sensible discussion and valid answers from parents with their own experiences to share, please <a href="/newuser.php">join BabyFilter</a>. <a href="/about.php">Want to know more?</a></p></div>
<p>Content</p>
Pretty sparse, eh? Let me introduce you to a powerful ExpressionEngine tool called “embed”. This is very much like an include (or server side include) in other languages. The best way to explain it is to just show it to you. Working in what’s left of the homepage template, add this code to the very top of the page:
{embed="includes/header_top"}
{embed="includes/header_bottom"}
And add this code to the bottom of the page:
{embed="includes/sidebar"}
{embed="includes/footer"}
Go ahead and save all the include templates and the homepage, and FTP them up to your staging server. Now navigate to the homepage and, viola… it should be a fully intact page with the header, footer, sidebar and content area. I love how easy it is to do this sort of thing in ExpressionEngine. It just makes sense.
Now I’ll show you the extended power of embeds. Let’s make some dynamic title tags. Change the header_top embed code in the homepage template to read this way:
{embed="includes/header_top" title="Homepage"}
Now open your header_top template and update your title tag to read this way:
<title>{embed:title} | BabyFilter: Intelligent Baby Talk.</title>
As you can see, the new title tag looks for a variable called “title” in the embed call from any template that calls it. You can pass any number of variables through an embed tag. Save and upload these files and your homepage title should change accordingly. Here is another example. Change the header_bottom embed code to read this way:
{embed="includes/header_bottom" loc="home"}
And change the main menu portion of the header_bottom template to look like this:
<div id="mainmenu">
<ul>
<li{if '{embed:loc}'=="home"} class="current"{/if}><a href="{path=site_index}">Home</a></li>
<li{if '{embed:loc}'=="about"} class="current"{/if}><a href="{path=about}">About</a></li>
{if logged_out}
<li><a href="{path=member/register}">Join Us</a></li>
<li><a href="{path=member/login}">Login</a></li>
{/if}
<li{if '{embed:loc}'=="faq"} class="current"{/if}><a href="{path=faq}">F.A.Q.</a></li>
{if logged_in}
<li{if '{embed:loc}'=="invite"} class="current"{/if}><a href="{path=invite}">Invite Friends</a></li>
{/if}
</ul>
</div>
This code within each li tag of the main menu will look for the embed variable named “loc” and if that variable is equivalent to the given value, class=current will be written to the HTML code. Just change the value of “loc” in each template that calls header_bottom and add some CSS for ul.mainmenu li.current and you have your “I am here” locator.
One last thing…why in the world did I divide the header into two separate embedded templates? This is one of those techniques that I have developed over time, and every site I build now works this way. Notice that the division between the two header templates is below the CSS template links (and also where you might call any javascript templates that you want to use site-wide) and above the closing head tag. Add this HTML comment code between the two header embed calls on your homepage template and you’ll see where I am going with this:
{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}
By building the template this way, I can place a call to one or more javascript or CSS files, or write out some style or javascript code for this particular template and it will be rendered in the head of the HTML, as it should be. So, our final BabyFilter.com page template looks like this:
{embed="includes/header_top" title="Homepage"}
<!-- Place any additional JS and CSS links or code here -->
{embed="includes/header_bottom" loc="home"}
<p>Content</p>
{embed="includes/sidebar"}
{embed="includes/footer"}
Yes, that is it! (I have removed the welcome message now as it only applies to the homepage). This is the code we will use as a starting point for each page on this website. Of course, the title and current page locator will change for each page on the site, but that is easy as pie with ExpressionEngine embeds and variables.
Last tip for this installment- where to keep this template code? You could set it up as a snippet in your text editor or a tool like TextPander, but I prefer to do it this way: There is an unused template called “index” in our “includes” template group. We won’t be using it in the future, either. So, go to the CP, save the template as a file and FTP it down. Paste the above code into it and save and upload it. Now, whenever you create a new template for the site, choose to base the new template on the existing includes/index template, and the default code will be waiting for you when you open your new template to edit.
See you next time, when we will work on displaying categories and get the existing data into the system.
Series Introduction
Next Article in Series
Previous Article in Series
Subscribe to updates
3 Comments
posted 3 months, 3 weeks ago by Casey Reid:
Great write up Chad. Thought I’d mention that for some reason since I’ve commented on your site before that is replaces {username} with my actual name in this text of the article:
“If a user is logged in, you can display the username in any template simply by putting {username} in your code. So I’ll just replace $_COOKIE[’username’] with {username}. Done. “
So it showed up as:
“If a user is logged in, you can display the username in any template simply by putting Casey Reid in your code. So I’ll just replace $_COOKIE[’username’] with Casey Reid. Done.”
For a second there I thought you were using my name in your article
LOL. Probably need to just wrap the {username} in a code block or something so EE doesn’t parse it as an EE tag.
posted 3 months, 3 weeks ago by Chad Crowell:
The EE caseyreid tag is one of the more powerful tools in the engine… I highly recommend you give it a try. Look through the EE docs and you’ll find it. Keep looking…
(thanks Casey - this is what happens when I cram too much into a week)
posted 3 months, 2 weeks ago by Kippi:
Hi Chad,
Excellent article series!
Best I have seen, very well explained and nice to see you are diving into some advanced stuff.
Cheers, I´ll be following along.
Leave a Comment