03 - Moving into the Index Template and Designing a Data Structure

In this chapter we’ll make a few coding tweaks to our site and make a plan for how to implement the rest of the site content with a combination of EE weblogs, Category Groups, and Field Groups.

 
Download the EE Code for 03 - Moving into the Index Template and Designing a Data Structure

Browser Title Bar
For now, we’ll edit this to just show a “root” title that shows our site name.  In a future chapter I’ll cover how to append a dynamic element onto the end of it for sections deeper into the site.

For this step you’ll need to edit the embeds/html_head template created in Chapter 2.  Currently it just has “Template1” in the title tags - I’m going to use an EE Standard Global Variable called site_name instead.

View the complete documentation on this and other Global Variables.

The contents of the site_name variable are initially specified during EE installation, but are also set in your EE Control Panel under Admin > System Preferences > General Configuration > Name of your site.

In my case I’ve specified this as “Building an ExpressionEngine Site”.

Here’s how the code looks now in my embeds/html_header template:

<!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}</title>
</
head

Make your changes, click Update and Finished, and refresh the template in your browser to see changes.

Editing the Masthead
Now for some changes to the page itself – let’s change out the site name and slogan.

Pretty simple here - in the embeds/logo_title template I’m going to again use the Global Variable site_name in the h1 tags, along with the homepage variable.  Using these two variables together will result in a link to the homepage of the site using the site name.

I’m also going to hardcode a slogan into the spanned text.  Here’s what my template looks like now:

Template Name: embeds/logo_title

<div id="title">
    <
h1><span class="green"><a href="{homepage}">{site_name}</a></span></h1>
    <
span id="slogan">A Tutorial Series from Train-ee.com</span>
</
div


Make your changes, click Update and Finished, and refresh the site/index template in your browser to see the changes.

After making the site title in the masthead a link, I can see that now is one of those times when the template will need its CSS tweaked, as evidently the creator didn’t think we’d want the main name linked anywhere.

Again I’m going to assume you’re comfortable tweaking CSS and just try to stick to the specifics of EE implementation here - you just need an entry in the CSS template that covers a #title .green a element.  I just copied the color values from the #title .green declaration.

OK - with the site masthead edited to include our site name and a home page link, let’s move down the page to the main navigation.

Tweaking Navigation
For my site I want main navigation of

  • Home
  • About
  • Products
  • Services
  • Weblog
  • Contact Us

So I need to edit the embeds/main_nav template.  The template is a simple unordered list—which I’m going to assume you are capable of editing to suit as well as I am.  Since we’re building the home page first, I’m also going to move the active class indicator from “about” to “home”.  Also note that you can again use the EE Global Variable

{homepage} 

as the href value in the home page link.

Here’s what my updated embeds/main_nav template code looks like:

Template Name: embeds/main_nav

<div id="menu">
    <
div class="submit">
        <
ul>
            <
li><class="selected" href="{homepage}" ><span>Home</span></a></li>
            <
li><a href="#"><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

Make your changes to the main navigation, and click Update and Finished.  Your results should now show an updated browser title, mast head, and main navigation.

Developing a Data Structure
One natural next step right at this place would be to start implementing weblogs, fields, and Category Groups to hold our content.  That was my original intent, in fact, for this chapter.

However, before making that move, let’s step back and think about the overall site data structure.  This is a point of confusion for many newcomers to ExpressionEngine - due at least in part to how flexible EE is. This is a good time to read the Category or Weblog entry in the EE Wiki if you haven’t already.

In addition to the issues covered in that wiki post, another important one for me - since I’m usually building EE-based sites for clients - is what structure is going to be most understandable for them. Let’s work backwards through our main navigation and see what the requirements of each section will be.  The potential spot for client confusion will come up as we get back to the Home and About sections:

  • Contact Us.  This will only require one template - no weblog, categories, or custom fields needed.
  • Weblog.  An obvious one—the weblog needs to be self-contained, needs a discreet set of categories, and will need the typical title/body/extended text data fields.
  • Services. Typically a services section will have multiple entries and a specific set of categories. The field structure can be a simple title/page content structure. All in all I think we’d be best served by creating another weblog to hold Services content, with its own Category Group and custom Field Group.
  • Products. These may align with services by sharing the same categories, but usually the content has more fields—for price, stock #, availability, etc.  So let’s go with another dedicated weblog and another custom field set, but look into sharing a Category Group with Services so that we can show related Products when viewing Services, and vice/versa.
  • About.  This is where things get a bit fuzzy - some sites have a one-page About section, with no categories and a simple title/page content field structure—very similar to the requirements for the Home page. One option is a shared weblog for the Home and About sections - an approach I’ve used in the past. What I don’t like about that was how it became an exception for content management while training the client.  With dedicated weblogs for all other site sections the publishing/editing process was very straightforward - choose a section, publish or edit, and save.  Sharing a weblog added an extra step for maintaining the sections contained in that shared weblog.  Based on that experience, I’ll now go with a dedicated weblog for the About section—even if it only ever contains one post.  The About section can share the same title/page content custom Field Group as the Services section, and doesn’t need categories.
  • Home.  Same decision as the About section—dedicated weblog, no categories, and will share a Field Group with Services and About.

So there’s our data structure requirements—five weblogs, two Category Groups, and three custom Field Groups.

I always end up adding one weblog to that structure for miscellaneous content—like site footers, messages returned after searches with no results, and in this case specifically I’ll use this weblog to hold the paragraph to the left of the search field.  I think these would work well as section overviews or customer testimonials and I would prefer they be editable in weblog posts rather than hardcoded into templates.

The Results
After implementing the template changes in this chapter your home page should load with an updated title, tagline, and main navigation.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Arda

by Arda

Date: Saturday, November 1st, 2008
Comment: #1

Thanks for such a great tutorial. You are perfect..

Just a very small correction…

Template Name: embeds/logo_title

Here in the code there is just a missing space.

“ahref” should be “a href”

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, November 1st, 2008
Comment: #2

Fixed - thanks!

Picture of Matthew

by Matthew

Date: Friday, December 26th, 2008
Comment: #3

Thanks for doing this. I would have spend much much longer reading the wiki and documentation. Even though this example site will vary from my site the fact that I’m building an EE site right away gives me confidence and shortens the learning curve. You rock man! Thanks again!

Picture of akira

by akira

Date: Thursday, January 15th, 2009
Comment: #4

Ditto.  This is such a good resource!  There should be a direct link from the official site/wiki though; it took me a few weeks to get here.

Picture of Janesse

by Janesse

Date: Friday, February 6th, 2009
Comment: #5

Agreed. I was floundering in the official site and wiki and even considering just rolling back on the research I’d done about what or organization needed and going with another CMS. Comparatively speaking, I am flying, now.

Picture of kurt

by kurt

Date: Monday, March 23rd, 2009
Comment: #6

Thanks for the great tutorial - with another very small correction: Under ‘Tweaking Navigation’, the URL in the sentence “Also note that you can again use the EE Global Variable http://www.train-ee.com/courseware as the href value in the home page link.” should be replaced with “{homepage}” (I think) - it looks like it needs to be escaped so EE won’t replace the variable with its value.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, March 23rd, 2009
Comment: #7

Fixed - thanks!

Picture of uk

by uk

Date: Wednesday, April 7th, 2010
Comment: #8

Mike boyink..man..u r awesome…!!!!

Picture of Hans

by Hans

Date: Thursday, January 27th, 2011
Comment: #9

Thanks a lot for these tutorials! It’s just what I needed: a good and useable example after which I understand the way the system works and can find additional information on my own. Thanks!

Picture of Boyink

by Boyink

Date: Thursday, January 27th, 2011
Comment: #10

My pleasure..glad you found them.

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>