No-Module-Required Static Content in ExpressionEngine

Here’s a “back to basics” tutorial for newcomers to ExpressionEngine - how to build a static portion of a website, with no plugins, extensions, or modules required.

While this has always been possible in EE, I think the popularity of Mark Huots “Tome” Module or the availability of the native EE Pages Module has mislead some folks into thinking that these modules are required for presenting static content in EE. 

Nothing could be further from the truth - and in fact there are some advantages to sticking with native EE functionality for static content.

 
Download the EE Code for No-Module-Required Static Content in ExpressionEngine

This tutorial is meant in no way to disparage the Tome module - I’ve used it and do appreciate many aspects of it including the site-map based UI, the easy breadcrumbs and nice URL’s.  I also appreciate the authors contribution to the EE community and will readily confess that his coding skills are on another plane from my own…

Having said that, using native EE code for building a static section of content has a number of advantages over the Static Page module.  I’ll cover those after taking you through how to build a static content section using the native EE code approach. I do also want to note that there is an entry on the EEWiki regarding static content outside the Pages Module, but I felt it could be improved upon - especially for newcomers to EE.

When finished with this build approach adding a page to this section of a site is just a matter of publishing a new post to the designated weblog.  Need to delete a page?  Just delete that post and the page is gone from the site.  Want a page to show up on a certain date?  Just publish the entry with a Entry Date set to the future date required.

OK - with the disclaimers out of the way let’s proceed.  In the following tutorial I’ll show how to build a simple static section with a default Index page and some subpages.  I’ve posted both a working example of this approach so you can see it in action.

For this native-EE static content approach you’ll need a new weblog, field group, content, and a new template.

Note on Links/URL’s
Here on Train-ee.com “courseware” is my renamed EE index.php.

Weblog Setup

  • In the EE control panel, navigate to Admin >  Weblog Administration >  Weblog Management
  • Click the “Create a New Weblog” button and create a weblog to hold the content.  I’ve called mine “Static”.

Field Group Setup

  • In the EE Control Panel, navigate to Admin >  Weblog Administration.  Click on “Custom Weblog Fields”, then the “Create a New Weblog Field Group” button.  Name your new field group - I’ve created one called “staticpage”.
  • Now click the “Add/Edit Custom Fields” link by your new Field Group and add a new field.  I have just one field in the group, called “static_page_content” - which is a textarea with 12 rows.  This assumes my static pages are very simple, with a title and paragraphs of text.
  • Now back under Admin >  Weblog Administration >  Weblog Management, click the “Edit Groups” link by the “Static” weblog.  Assign the new field group to the weblog and save.

Content Entry

  • Index Content
    This approach assumes the the Index page (or section default page) content is entered first - so click the Publish tab and choose your new weblog.  Enter your Index content and save the entry.
  • Subpages
    The next posts entered in the new weblog will become our sub-pages, so create a new post for every sub-page you’ll need. I’ve entered 6 posts for six subpages.

No worries if you enter the content out of order - you can always tweak the publish dates to push the Index content to be the oldest entry.

Template Coding
For the purposes of this tutorial, I’ve created a new template group and called it “static”.  All we’ll need is the index template that EE provides by default.  For reference, download the text version of my template.  Copy/paste anything you need - just tweak for any path or name differences.

The template uses two weblog:entries tags—one to build the left navigation, and one to display the page content. 

  • Left Navigation
    For left navigation we want links to all the sub-pages, but not a link to the Index page.  This is done by using the “sort=“asc” parameter to put the oldest post (our Index content) last, then using the “offset=“1” parameter to drop that one from the list.  The “dynamic=“off” parameter is important here - if you don’t use it you will lose the subnavigation as soon as you click one of the links to a sub page.  Note that using a date-sort on this tag means the left navigation list can be ordered in any way just by tweaking the pubish date of the entries.
  • Page Content
    A second weblog:entries tag brings in the page content.  The “limit=1” parameter ensures that we will only see content from one post. The “sort=“asc” parameter ensures that, if no url-title is passed to this template by one of the subnavigation links (like a link from your main navigation bar), the Index content will be loaded.

That’s really all there is to building a simple, two-level static section of content with ExpressionEngine.  And this is just one approach - as with anything ExpressionEngine there are always multiple ways to achieve your goals.

Advantages
There are a few advantages of using this approach over the Tome module:

  • An obvious one - no additional software to install or update, or worry about when upgrading EE
  • Adding subpages is easier - all you (or your clients) need to do is publish a new entry to the Static weblog and it will immediately appear in the subnavigation.  No creation of categories is required.
  • Removing pages is easier - you can either close out pages (great for content that’s being edited) or just delete the post from the weblog.  No deleting categories requried.
  • All native EE segments and conditionals are available for more advanced template coding.

Category Navigation

Next Entry >>

 

Previous Comments

Picture of Addison Hall

by Addison Hall

Date: Wednesday, November 26th, 2008
Comment: #1

Sorry I’m late to this—great article. Just to make sure I understand correctly, you’d have to create a new weblog for each main section of your site, correct? I’m trying to see this in the scope of an entire site…

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, November 26th, 2008
Comment: #2

Yes - but that’s an approach I take generally anyway.  I like the pubish&edit;menus to reflect the same main navigation as the rest of the site.

Picture of Addison Hall

by Addison Hall

Date: Wednesday, November 26th, 2008
Comment: #3

This is beautiful. I’m about to revise a small site now and ditch the static pages module.

Can you recommend a good dynamic method of generating the top-level navigation? I’m guessing I could assign a special category and use the “not” parameter to leave out weblogs I don’t want included.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, November 26th, 2008
Comment: #4

I don’t make top-level nav dynamic, as for the sites I’m working on it’s hardly likely to change.  I just implement it usually with an unordered list, which only takes a few seconds to update if need be.

And - if top-level nav is changing other EE work is likely required anyway.

Picture of Addison Hall

by Addison Hall

Date: Wednesday, November 26th, 2008
Comment: #5

Good point—thanks!

Picture of Geof Harries

by Geof Harries

Date: Wednesday, December 17th, 2008
Comment: #6

This is the same method in which I always build static pages, as long as they don’t go more than two levels deep, in which case things get more complicated. The Pages module is just too limiting when it comes to parameters and variables. I love this site, Mike.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, December 17th, 2008
Comment: #7

Thanks Geof!

Picture of pab

by pab

Date: Tuesday, April 14th, 2009
Comment: #8

Excellent tutorial. really enjoyed the way you explained everything.

Thanks

Picture of Jay Lee

by .(JavaScript must be enabled to view this email address)

Date: Tuesday, April 14th, 2009
Comment: #9

Great stuff!  I was wondering how you could get the first weblog entry to display as the default content that shows up when someone goes directly to the static index section.  Right now, the last entry shows (6th entry) when no URL-title is passed, but I’m trying to create an “overview” entry to show if someone goes directly to the static section index (i.e. the “/static/” page).

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, April 14th, 2009
Comment: #10

Hi Jay—
Essentially you just use the sort parameter to get the right one to show by default.  It only gets used when the page is loaded without a URL title

Picture of pab

by .(JavaScript must be enabled to view this email address)

Date: Tuesday, April 14th, 2009
Comment: #11

Hi, i was wondering if it was possible to use mark huot’s translation plug in with this

i have to set up 5 different teams with 20 players each and in 2 languages

i currently have this but it wont let me switch to the french content

{exp:weblog:entries weblog=”{exp:translator:simple weblog=“team_2”}”  sort=“asc” offset=“0” dynamic=“off”}
              <li>{title}</li>
          {/exp:weblog:entries}

Picture of pab

by .(JavaScript must be enabled to view this email address)

Date: Wednesday, April 15th, 2009
Comment: #12

*update

got the content to switch but not the titles

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, April 15th, 2009
Comment: #13

Pab - I have no experience with that plugin, but consider this to be about the simplest EE template you’ll ever use in a production site.  If the plugin can’t work with it I’d look to another method of doing a multilingual site.

Picture of pab

by .(JavaScript must be enabled to view this email address)

Date: Wednesday, April 15th, 2009
Comment: #14

Thanks Mike, i found another method that i will try out. do you have any tips for multilingual sites,

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, April 16th, 2009
Comment: #15

Hi Pab - there’s been a fair amount of discussion around multilingual sites so a search of both the EE forums and Wiki should prove fruitful.

Picture of Jay Lee

by .(JavaScript must be enabled to view this email address)

Date: Thursday, April 16th, 2009
Comment: #16

Hi Mike, I just implemented your method and it works great!  I was wondering if you had a recommendation on how the left navigation can be coded so that a “selected” class can be added to improve usability.

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, April 16th, 2009
Comment: #17

Hi Jay

If you go to the little static site linked to in this example there is a version there that handles the active class using URL segment variables and a conditional.

Picture of Janesse

by .(JavaScript must be enabled to view this email address)

Date: Thursday, April 30th, 2009
Comment: #18

I am a total beginner who sort of got pitched into EE. I have really appreciating both your free and downloadable resources.

I tried this tutorial particular using the same names and got the navigation to appear, but I get a 404 error when I click on any of the items.

I started from scratch using my own content but get the same problem exactly the same problem. What might I be doing wrong?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, May 1st, 2009
Comment: #19

Hi Janesse -

Have you compared the link that EE is generating vs. your install directory, template group and template names?

Picture of Janesse

by .(JavaScript must be enabled to view this email address)

Date: Friday, May 1st, 2009
Comment: #20

Is there a summary somewhere of how to troubleshoot generated links? (I’m a Communications person and I’m really having trouble getting my head around this stuff. I don’t find the documentation all that helpful.)

Link:

http://actra.ehclients.com/index.php/contact/index/

Content:

<div id=“content_main”>
      {exp:weblog:entries weblog=“about” limit=“1” sort=“asc”} <h2>{title}</h2>
      {static_page_content}
      {/exp:weblog:entries}
</div>

Structure:

Weblog/Short Name/Template/FieldGroup/Custom Field Name

Contact/contact/contact/Contact/Contact

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, May 2nd, 2009
Comment: #21

Hey Janesse -

My degree is actually in Communications as well, so take heart- there is hope..;)

I will say that if you aren’t pretty savvy with HTML/CSS in general then trying to learn EE may be a bit too much at one time.  It’s hard to troubleshoot when you’re not sure where one ends and the other starts.

I followed your link - and just to make sure, its the nav on the right that isn’t working?

The link is rendering out looking for a template group named “static”, and either a template name of “staff_list” or using the index template and pulling a weblog entry with a url_title of “staff_list”.

If that’s not where those links need to connect to then the pathing needs to change in the weblog:entries loop that builds that right-column nav.

Picture of Janesse

by .(JavaScript must be enabled to view this email address)

Date: Monday, May 4th, 2009
Comment: #22

Thanks so much, Mike, that points me in the right direction.

I’m okay with HTML and learning CSS, so if I can’t make it work I’ll this way I’ll just surrender and use a different navigation set-up.

Add Your Comment

Comment on this Post

  

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...