11 - ExpressionEngine-izing the Home Page

In this chapter of the Building a Church Site series I’ll begin the ExpressionEngine integration, starting with the home page.  I’ll cover creating a new weblog and a new field group.  Then I’ll create some new content in the weblog, and add the necessary EE tags the template to pull that new content back from the weblog back to the Home Page.

 
Download the EE Code for 11 - ExpressionEngine-izing the Home Page

Up to this point in the series I’ve done more HTML/CSS wrangling than ExpressionEngine work, but I think this post is the tipping point in the process and from here on out I’ll be working through the EE integration for this site.

Home Page Approach
The task at hand is the site’s home page.  Let’s step back a moment and look at the content on this page:

  • Events
  • Welcome Statement
  • Worship Schedule
  • Mission Statement

I tend to look at site sections and think of content as either “living there” or “visiting”.  If the content lives there then it’s stored in the weblog associated with this section of the site.  If it’s visiting content then it’s probably an abbreviated version of content found elsewhere on the site.  On the backend, the visiting content is stored in a different weblog than the one associated with the section of the site I’m looking at.

So - what I need to do for our church site Home Page is determine what content lives here and what content is visiting.  I need to know this so that I can decide what fields I need to create for the weblog that will hold the Home Page Content. 

I’ve determined that Events are a main nav item - so what shows on the Home Page is visiting content getting pulled where it lives under Events.  The Welcome Statement is unique to this page - so it lives here and will be one entry in our Home Page weblog.

Join Us is more of a puzzle.  I want this information both here and on the Worship page.  However the rest of the content in the Worship section will have a different “shape” as it will have a different fields for short and long descriptions, possibly some pictures, more detail on exactly where the worship event takes place, etc.  So what I’ll do then is have Join Us live in the home page weblog, and it will be visiting content in the Worship section.

I’m also going to reshuffle Join Us a bit.  For a church site there are two target audiences - members and potential visitors.  If I’m a potential visitor there are two things I need to know in order to visit; when and where.  Currently the home page tells me when but not where—I’d have to click around to find the church address and location. That’s just silly - let’s get the church address and a link to a map right on the Home Page so potential visitors get everything they need at one glance.  I’ll put the “when” information in one column and the “where” in the other.  The church address will live in the Home Page weblog—and be visiting content on the Contact page so the church name/address/phone number is only stored in one place.

I’m not a fan of posting Mission Statements on Home Pages.  Mission Statements are really important to organizations internally - especially those folks who suffered the three-day workshop that it took to create the thing to begin with.  For visitors?  Not so much.  Home page real estate is just too valuable to waste on a boring mission statement - I’m goint to assume the tagline under the logo or the Welcome Statement will encapsulate the church’s mission and any more detail can be moved to the Our Beliefs section.  I’ll use the space here for something more interesting and timely - the latest Weblog post or latest Photos, etc.


The Game Plan
So, based on the above analysis, here are the specific steps we’ll need to do:

  • Create a custom field group
  • Add a new field in the field group
  • Create a Home Page weblog
  • Publish three new posts in the new weblog (Welcome, Worship Times, and Church Address/Map Link/Phone)
  • Create a new template group for the production version of the Home Page
  • Create a new index template in the new Template Group
  • Replace static Home Page content with ExpressionEngine tags to pull the new weblog posts.
  • Set the new template as the site home page

Creating the Custom Field Group

  • Select the Admin Tab
  • Select Weblog Administration
  • Select Custom Weblog Fields
  • Select “Create a New Weblog Field Group”
  • Set the Field Group Name to “Simple Content”
  • Click Submit

Adding a New Field
Custom field groups are created by default with only Title and URL Title fields.  I’ll need to add a field to hold additional content.

  • Select Add/Edit Custom Fields
  • Click Create a New Custom Field
  • Enter a Field Name of page_content
  • Enter a Field Label of Page Content
  • Set the Field Type to “Textarea”
  • Set the Textarea Rows drop-down to 12
  • Leave the Default Text Formatting for This Field set to “XHTML”
  • Set Is Field Searchable to “Yes”
  • Leave other options set to defaults
  • Click Submit

Create a New Weblog

  • Select the Admin Tab
  • Select Weblog Administration
  • Select Weblog Management
  • Click Create a New Weblog
  • Enter a Full Weblog Name of Home Page (this value will appear in the Control Panel menu, etc)
  • Enter a Short Name of home_page
  • Leave the Duplicate existing weblog’s preferences drop-down set to Do Not Duplicate
  • Select the Yes option of Edit Group Preferences
  • In the Field Group drop-down, choose the “Simple Content” field group you just created
  • Leave other options set to defaults
  • Click Submit

Publish Content
Your new weblog should now show up when you select the Publish tab of the EE Control Panel.  If you select Publish/Home Page, you should get a blank entry form with three fields - Title, URL Title, and Page Content. I’m not going to cover the specifics of formatting text or adding links here - you can review the pMcode Reference for how to add bolding, links etc.

Note: If the Page Content field does not appear (all you see are title and url_title fields), you didn’t get the Weblog and Field Group connected.  Go to Admin >  Weblog Administration > Weblog Management, select Edit Groups” for the Home Page weblog, choose Simple Content in the Field Group drop-down, and click Update.

The first post should be the Welcome Statement.  I’m going to create my post with a title of “Welcome to Church.Train-ee.com!” and project overview text in the Page Content field.

When you have your entry done click “Submit”.

The second post should be the Join Us worship times.  Since this section will be made up of two weblog posts I’ll leave the “Join Us” text in the template, and the title of the post won’t matter.  I’m titling mine “Worship Times” and putting the Wednesday and Sunday information in as two paragraphs, with the days being bolded.

The third post will be the church name and address.  I’m titling my post “Name and Address”, and putting the name and address in one paragraph with the church name getting bold tags. I’ll put a link to a Google Map under the church name and address. The phone number and fax number will be in another paragraph with the phone and fax words in bold.

OK - I’ve got a new weblog with new field group now containing the content that I want to pull to the template, in place of hard coded content that the templates came with.  Before I go edit the template, however, I’m going to create a new template group to hold the “production” templates, leaving our chunked up versions as page-comps for future use.

  • Select the Templates Tab
  • Click Create a New Template Group
  • Enter a Template Group Name of site
  • Leave the Duplicate an Existing Template Group dropdown set to Do Not Duplicate
  • Eventually I do want the index template in this group to be the home page, but I’m going to wait to do that until after I’ve got it re-coded to pull content dynamically, etc.

The template group will be created with an empty index template by default - so I need to copy the code from page-comps/index now to site/index as a starting point for my EE-enabled page.

Replacing Static Content with EE Tags
Finally - to the heart of this chapter!  With all of the setup work now completed, I can edit the new site/index template to replace static content with the EE tags required to pull the new posts from the new weblog.  I’ll give you the complete new template code below, for now I want to focus on the right column div.  Let’s take a look at the updated code and walk through what it’s doing:

<!--BEGIN RIGHT COLUMN CONTENT SECTION-->
<
div class="rightColumn">
{exp:weblog:entries site="church" weblog="home_page" url_title="welcome-to-churchtrain-eecom" disable="member_data|pagination|categories|trackbacks" dynamic="off"}
<h3>{title}</h3>
{page_content}
{
/exp:weblog:entries}

<div class="spacer"></div>

<
h3>Join Us</h3>
{exp:weblog:entries weblog="home_page"  url_title="worship-times|name-and-address" disable="member_data|pagination|categories|trackbacks"  dynamic="off"}
<div class="join_us_column">
{page_content}
</div>
{/exp:weblog:entries}
                
<div class="spacer"></div>

<
h3>Our Mission</h3>
<
p>Imperdiet doming id quod mazim placerat sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat

Esse molestie conseq uatvel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio qui blandtum nulla facilisis at 
vero eros et accumsan et iusto odio qui blandtum zzril delenit auge duis 
dolore te feugait nulla facilisi
. <a href="#" class="redBglink">more &raquo;</a>    
</
p>

</
div><!--END RIGHT COLUMN CONTENT SECTION--> 

Let’s start at the top.  I’ve used the EE weblog:entries tag here to pull the Welcome text.  If you’re new to EE development I’d strongly suggest reviewing the documentation around this tag—it’s the workhorse tag of ExpressionEngine and you’ll be using it often.  Specifically what I’ve done is

  • Specify the weblog - which you should always do otherwise it will look at and show all weblogs.
  • Specify the url_title - this is a way of pulling a specific post from the weblog.  The other way is to use the entry_id.  I prefer the url_title because if the entry gets accidentally deleted you can just re-publish an entry using the same url_title.  Entry_id’s are not re-used so in that approach the template would need to be edited to look for the new entry_id.
  • Disable unnecessary aspects of the tag - this is for performance reasons.  I’d suggest reviewing the docs for this parameter as using it is just good practice.
  • Turned off the dynamic nature of the tag.  This one little parameter is probably the most-overlooked and most important in EE (We joked about having t-shirts made up with it). Essentially if you don’t want the weblog:entries tag to look at the current page URL for information then this needs to be turned off.  Again, please review the docs to get a good understanding of this parameter.  For our home page I want to tell the weblog:entries tag what to pull and not worry about the URL so I’ve turned it off here.
  • From there it’s pretty basic - within the weblog:entries tag I just pull the title and page_content fields, putting the title between h3 tags so it gets marked up by the template.

I then used a second weblog:entries tag to pull the Join Us content. Why?  Because the entries in this section needed to be within the join_us_column divs, so the structure of the HTML led the decision.  This tag is essentially the same as the first weblog:entries except that I’ve specified two url_titles so that I get both the worship times and church name/address posts.

That really covers all the template changes I need at this point.  I’ll come back to this template as the events and weblog sections are implemented, and add more weblog:entries tags to pull that visiting content into this page.


Setting a New Template as Home Page
Now that I’ve got the code updated I want to set this template as my new site home page.  To do that

  • Templates Tab
  • Select the site group
  • Select Edit Group
  • Check the “Make the index template in this group your site’s home page?” checkbox
  • Click Update

Now go reload your home page to make sure the new template loads.

What’s Next?
In the next chapter I’ll begin the Weblog section of the site.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, May 29th, 2008
Comment: #1

EE uses the URL to pull content.

So - if you have a weblog:entries tag on an index template, and load the index template directly the weblog:entries tag will load all the posts in a blog - unless you’ve applied any limiting etc.

Take that same template, and manually append on a url-title from one specific post in the blog, and the weblog:entries tag will load *only* that entry.

This is how a single-entry template works, for example. 

But - there are often times where you don’t want the weblog:entries tag to even be concerned with what’s showing in the URL - you want it to return the same thing regardless.  That’s what dynamic=“off” does…just tells the weblog:entries tag to go about it’s business, nothing to see here, just return what I tell you to return without looking at that URL.

Picture of parsoncraig

by parsoncraig

Date: Monday, June 30th, 2008
Comment: #2

When I did this myself, I find that the entries for worship times and name/address are in reverse order.  Is there a setting I was supposed to attend to get the entries in the order I entered them?

Mike Boyink

by Mike Boyink (Author)

Date: Monday, June 30th, 2008
Comment: #3

Hi Craig: Keep in mind you’re working with a weblog:entries tag which by default will sort oldest to newest.  In this case the order is also affected by HTML and floats. 

So I’m not sure if you entered the content in a different order than I did - but you can try either reversing the order specified in the url_title parameter:

url_title="worship-times|name-and-address" 

or adding a sort parameter to the tag:

sort="asc" 
Picture of Marcus Mucha

by Marcus Mucha

Date: Saturday, November 15th, 2008
Comment: #4

Mike,

Finally making my way through this great series, and just wanted to say thanks for this post. Most especially the idea of content placement. The “living there” or “visiting” analogy really helped make it clear.

Thanks again!

Picture of Nate Hamilton

by Nate Hamilton

Date: Friday, December 5th, 2008
Comment: #5

I have a website that multiple users with varied skill-sets are going to be editing the content. I am looking for a way to hide the url-title for certain users so they do not get confused. If anyone knows how to do this please share, thanks!

Mike Boyink

by Mike Boyink (Author)

Date: Friday, December 5th, 2008
Comment: #6

Whatever you choose for the url_title will apply to all users, it cannot be controlled per user or per member group.

Picture of Nate Hamilton

by Nate Hamilton

Date: Friday, December 5th, 2008
Comment: #7

Yeah, I do know that. What I am trying to do though is to hide the field completely so they aren’t even tempted to edit the field. Any ideas?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, December 5th, 2008
Comment: #8

Yep - you can hide it entirely.  Just remember that it will also be hidden for you as SuperAdmin as well.

Admin ›  Weblog Administration ›  Weblog Management ›  Edit Weblog > Publish Page Customization > Display URL Title Field.

Picture of Nate Hamilton

by Nate Hamilton

Date: Friday, December 5th, 2008
Comment: #9

Thanks, I really appreciate this site btw. Very helpful for budding expression engine designer…couldn’t have done it without ya!

Mike Boyink

by Mike Boyink (Author)

Date: Friday, December 5th, 2008
Comment: #10

Glad to hear it Nate.

Picture of Derek Traver

by Derek Traver

Date: Friday, July 3rd, 2009
Comment: #11

Amazing tutorial Mike… the most comprehensive and down to earth guide I’ve found to learning EE.  I know I’m a little late to this party though, hahaha.

I have one question about this particular step though…

What is the benefit to breaking up the home_page weblog into 3 seperate entries (Welcome, Worship Times, Name and Address) versus setting up the home_page weblog custom fields to have them all on one entry (like Welcome Title, Welcome Content, Worship Times Content, Name and Address content) and spitting them out in one whole ee tag?

I only ask because it seems to me from a client perspective it would be easier to understand the editing process.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, July 3rd, 2009
Comment: #12

Hey Derek

in general EE is going to work better for you if you structure you fields to match the content type rather than the design. This specific page isnt the greatest example with how it ended up being coded, but with your approach if the client wanted to add a new content item on the page you’d have to go in,add a field and then modify the template.

If you keep the fields more generic you usually can have them just publish a new post to add the new item.

Usually you don’t have a page-specific weblog like in this case either-so specific fields would be an exception to how the rest of the site will function.

I’ve never had clients who couldn’t grasp the editing process—especially if you use the ‘edit this’ links within each weblog entry loop.

Picture of photoradius

by photoradius

Date: Saturday, August 15th, 2009
Comment: #13

I see in one of your weblog:entries you set the variable site=“church” but it is not in the others. What is the purpose of site=“church”?

Thanks,
Chris

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, August 15th, 2009
Comment: #14

Ah—good catch.  That’s due to Train-ee.com running the multiple site manager expansion.  Running the code one a single-site install you won’t need that.

Picture of KB

by KB

Date: Tuesday, January 19th, 2010
Comment: #15

I noticed that there aren’t any template group names in the URLs when going through the example site. Did you remove them from your paths or did I not configure my EE install properly?

Picture of KB

by KB

Date: Tuesday, January 19th, 2010
Comment: #16

I answered my own question. You created template groups for each section which uses the index file by default. This removes the need to specify the template name in the URL. Still learning…

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, January 19th, 2010
Comment: #17

Only if you are using the index template.  If you are using another template in the group then you do need to specify it in a link.

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>