This is Chapter 3 in a series on building a complete small-business website on ExpressionEngine. 

In Chapter 1 we found a free HTML/CSS template to use as a basis for the site, downloaded it, tweaked image paths and CSS links, and loaded it into EE.  In Chapter 2, we took the main template and “chunked it up” by pulling out HTML elements that would repeat throughout the site, saved them into discreet templates, and embedded them back into the main page template.

In this chapter we’ll start “moving into” the template by tweaking the navigation structure, getting our site name in the masthead and browser title bar, and deciding what our data structure will be.

Just as an aside—I’ve created a specific category for this series with it’s own RSS feed for those who want to subscribe to it specifically.  I’ll continue to place these articles in the main EE category as well.

OK - let’s work from the top down on making our changes to the template.

Browser Title Bar
For now, we’ll edit this to just show a “root” title—in a future chapter I’ll cover how to append a dynamic element onto the end of it for sections deeper into the site.  You’ll want to edit the “html” 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 } (remove the spaces).  The contents of this 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 this will render as “Boyink Interactive”.  I’ll also append the “Building an ExpressionEngine Site” positioning text. 

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

Editing the Masthead
Pretty simple here - in the “logo_title” embedded template I’m going to again use the Global Variable { site_name } (remove the spaces) in the h1 tags, and hardcode a slogan into the spanned text.  Make your changes, click “Update and Finished”, and refresh the parent template in your browser to see the changes. 

On second thought - as we round out this site we’ll want the h1 text to link back to the index page, so I added a link directly to this Building Series index template.  In your case, if this is a true site-wide home page link you can use another EE Standard Global Variable called { homepage } (remove the spaces) for the link target URL.  This way both the link target and link text of your homepage link are set by variables that are easily changed.  This is nice for when you are building a new site at a temporary URL.  As part of your “go-live” process you can update the homepage URL in the Control Panel and this link will reflect the change.

After making the main site title a link, I can see that now is one of those times when the template will need it’s 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 “main_” embedded 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 } (remove the spaces) as the href value in the home page link. 

Make your changes to the main navigation, and click “Update and Finished”.  Here are the results of my work - the template now showing 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 nav 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 it’s 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—5 weblogs, two category groups, and 3 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 would rather they be editable in weblog posts rather than hardcoded into templates.

Changing the Plan
In Chapter 2 I said that this in this chapter we’d actually implement at weblog and move our index template content into it, then add the EE tags on the template to pull that content back out of the EE database.

Well, I lied…

After reading through what I already have in this chapter and how long it is already I think this is a good place to break.  I’d forgotten how important and potentially confusing the data structure issue can be for people new to EE.  The number of items in the data structure is a key variable for me in estimating the scope and related costs for developing EE-based sites for clients as it directly determines the amount of time setting up and configuring the backend of EE for a given site.

In Chapter 4 we’ll start implementing the data structure and replacing static content on our template with EE tags to pull content from the database.

On to Chapter 4.
Back to Chapter 2.