Three Tier Static Content in ExpressionEngine - Approach D

Here’s a fourth way to build navigation for static content in ExpressionEngine, using one weblog, one template, no categories, and relationships.  Previously I’ve posted 3 other ways to do this on a mini-site.  The advantages to this newest approach is everything can be contained in one weblog, using one template, no categories, and one relationship field.  Here’s a working example of this approach.

 
Download the EE Code for Three Tier Static Content in ExpressionEngine - Approach D

This method builds nicely on the “Approach-A” I’ve outlined previously.  Here’s what you need to add:

  • Another custom field, named “static_parent_page”.  Make this a relationship field and specify the same weblog as this fieldset is already used in.  Stick with the default for title, and save the new field
  • Now go through your content entries, and edit the second-level pages, assigning them to the parent-level pages.  In my working example I have seven entries.  I left the index entry alone, and edited pages two, three, five and six to assign them to either page one or four - which I’m arbitrarily making my second-level pages.


The Code
The nav-building code is a bit more complex in this case, so lets take a look at the text version of the template and go through the code.

  • The main weblog:entries tag that builds the left nav is unchanged from Approach A
  • The first conditional looks at the value of the new static_parent_page field. If this is 0, that means there is no relationship setup, so this must be a parent page.
  • Each parent page gets an opening li, then the code uses reverse related entries to pull in all the pages that list this page as parent.  Reverse related entries is necessary because we estabished the relationship from the perspective of the child
  • The code uses two EE variables, count and total_count, to determine when to insert the nested opening and closing ul tags.
  • Once the reverse_related_entries code is done, the closing li tag for the parent item is added.
  • The weblog entries tag closes and then the overall parent ul tag is closed.

The Results
The results of this approach can be seen in the working example, which renders with an index entry that’s omitted from the left-nav (the top-level of content), and a navigation bar that has two levels of pages.  The second level links are pages with no relationships established thereby making them “parents”, and under each parent is a nested UL with it’s children (the entries where we specified a parent page). 

Advantages

  • Simplicity in terms of EE setup - using only one weblog and one template
  • Better usability for clients—the parent_page field appears on the Control Panel Publish form along with other fields, vs. the categories which depend on users remembering to click to another tab to assign.
  • Consistent interface for content maintenance—all using the weblog Publish page, vs. using categories where category pages have to be edited in the category interface where there is no file upload function, etc.

Disadvantages

  • Subpage URL structure is the same as Parent Pages—so the nav structure is not reflected in the URL structure.
  • The Parent Page drop-down won’t reflect any structure, so this approach is probably best for smaller less complex sections of content.

Overall I think this is still my favorite approach for static three-level content in EE - especially when the structure can be filled in by the site developer before the client is unleashed on the site.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of joshclark17

by joshclark17

Date: Wednesday, July 23rd, 2008
Comment: #1

Hi Mike-
What if I want to add the relationship field and apply it to multiple weblogs each referring back to itself for the relationship? There is only a radio button for relating it to another weblog or to a photo gallery. You’re thoughts?

Josh

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, July 23rd, 2008
Comment: #2

Hey Josh - I don’t completely understand the question.  If you’re asking can one field establish multiple relationships the answer is no - not with out of the box EE.  If you want multiple related items you have setup multiple fields.

There are a couple of 3rd party extensions that will do that.  One requires a hack to an EE core file and the other I have not used.

Picture of joshclark17

by joshclark17

Date: Wednesday, July 23rd, 2008
Comment: #3

Sorry- I didn’t make myself very clear. What I’m trying to do is apply a single Custom field group to multiple weblogs which should look inward for the relationship. For example, I have one custom field group, called “static pages” which I have applied to 4 weblogs, “sectionOne”, “sectionTwo” , “sectionThree”, and “sectionFour.”

There doesn’t appear to be a way to use a single custom field group for all of these, because you have to set up a relationship with a specific weblog, rather than just telling the system to choose the weblog that the field group is applied to.

Does that make sense? Thanks a ton!

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, July 23rd, 2008
Comment: #4

Nope - you’ll need a dedicated field group.

Picture of joshclark17

by joshclark17

Date: Wednesday, July 23rd, 2008
Comment: #5

Thanks Mike. Not the answer that I was hoping for, but an answer nonetheless. Your tutorials are very helpful. Thanks for sharing your knowledge.

Picture of Leslie

by Leslie

Date: Wednesday, July 30th, 2008
Comment: #6

Hi Mike, thank you for all the fantastic information. I’m always scouring your stuff. :-)

You mentioned a few third party extensions that allow for multiple relationships to one field. I have a client that I’m setting up authors and books as seperate weblogs and relating them but some authors have multiple books and other books have multiple authors. I did some research to find those extensions but wasn’t successful. Do you mind passing along those URLs?

Again, thank you!

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, July 30th, 2008
Comment: #7

Hey Leslie - there’s really only one, and the one thing I don’t like about it is that it requires a hack to an EE core file.

The support thread for it is here.

Picture of BiL

by BiL

Date: Tuesday, August 19th, 2008
Comment: #8

I had developed a site with just one level using one entry for page content. Client wanted to created pages on an additional sub level. Thought I was screwed till I found this. In no time I had the relationships setup, made super-minor changes to my templates and bang - works like a charm. Thanks!

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, August 19th, 2008
Comment: #9

Thanks for the comment - glad to hear it!

Mike Boyink

by Mike Boyink (Author)

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

BTW - check out SolSpaces site - they are advertising a new addon for multiple relationships.

Picture of Leslie

by Leslie

Date: Friday, September 5th, 2008
Comment: #11

Hey, very cool! Thanks! I actually got that client set up already but I’m sure it’ll come up again. I appreciate the info!

Picture of Brian Lokker

by Brian Lokker

Date: Thursday, September 18th, 2008
Comment: #12

Mike, is there a way to indicate the “current” page in the menu when using this approach? Thanks.

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, September 18th, 2008
Comment: #13

I think you could add:

{if segment_3==url_title} class="active"{/if} 

to both places where the link is specified, and style the active class on the link.

Picture of Brian Lokker

by Brian Lokker

Date: Thursday, September 18th, 2008
Comment: #14

Thanks. I’ll give it a try. This method looks promising for my current needs.

Picture of Brian Lokker

by Brian Lokker

Date: Friday, September 19th, 2008
Comment: #15

This works, except when a link to a parent page is highlighted as active, all child page links are also highlighted. (Not the reverse, though.) Any further thoughts? If I’m on a parent page, I’d like only that link to be active.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, September 19th, 2008
Comment: #16

Hey Brian - I tried it and it appears to work OK. I had to put the conditional in both the main weblog entries link and the related pages link.  Here’s a text version of the updated template.

Picture of Brian Lokker

by Brian Lokker

Date: Friday, September 19th, 2008
Comment: #17

Mike - you’re right. I had put the conditional on the li tags rather than on the links themselves, so when the parent list item was marked as active, the children inherited the class. Putting the conditional on the a tag works like a charm. Thanks!

Brian

PS Sorry I missed your training sessions. I would have loved to be there, and I’m glad to hear they were successful.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, September 19th, 2008
Comment: #18

Yep - I first thought of doing the li tags, but figured inheritance might pop up.  Glad to see the link-based approach works.

Stay tuned on the classroom training. We’re scurrying trying to get a more southern destination figured out for a possible November class.  The window is short, however so we might not make it until January.

Picture of Brian Lokker

by Brian Lokker

Date: Friday, September 19th, 2008
Comment: #19

Actually I would have loved to come to Holland - I used to live in GR and have friends there and in Grand Haven. But another location could work too.

Picture of Andy Foster

by Andy Foster

Date: Thursday, October 9th, 2008
Comment: #20

This is a great tutorial. It helped my situation greatly.

I do have an issue that I found odd.

Using url_title_path caused my links to insert the ‘somethingindex.php’ instead of a clean URL. It drove me nuts.

Note - I am not using the default index.php but had to rename it and now am stuck with it.

Any suggestions?

Thanks

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 10th, 2008
Comment: #21

Hi Andy - I’ve renamed index.php on quite a few sites (Train-ee included) and am still able to use the url_title_path variable.  Did you change the “Name of your site’s index page” setting under Admin > General Configuration?

Otherwise you can build your links in a more manual fashion by hard-coding parts of the path, using the site_url variable, and url_title from the entry.

Picture of Andy Foster

by Andy Foster

Date: Friday, October 10th, 2008
Comment: #22

Hi Mike -

I looked at that and no luck.

I did solve this by using the site_url and url_title and it seems to be the best solution for me.

It’s fine as I only use one template page per template group so it’s not too cumbersome.

Thanks and this tutorial is great also - much appreciated for taking the time to share this.

Picture of M.E. Slater

by M.E. Slater

Date: Saturday, February 14th, 2009
Comment: #23

Mike do you think this method could be used with 4 levels? I tried to insert another conditional to nest a UL in under a child page. Can you have a page be a child and a parent?

I hate having to setup seperate workflows and this is working so well for 3 level content but I have 4 levels.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, February 14th, 2009
Comment: #24

Possibly…you might get into needing to use an embedded template for the 4th level, passing entry ids etc.

Picture of Octavio Corral

by Octavio Corral

Date: Thursday, February 19th, 2009
Comment: #25

Thanks for all these tutorials. I am currently beginning to learn expression engine and WOW i cant believe how difficult it is to great a basic hierarchy. I’ve been spoiled by my programmers own in house CMS. nevertheless I must keep practicing and testing what approaches work best for me or the client.

Picture of mike

by mike

Date: Friday, May 8th, 2009
Comment: #26

Hi Mike, thanks for this, very helpful.
I have one small problem in that my secondary menu items seem to be duplicated to my primary navigation, i’m sure it is something simple as i am no developer just a designer trying to get some sort of easy-to-create menu system.

here’s a snippet:

<div id=“sidebar”>
  <ul>
  {exp:weblog:entries weblog=”{my_weblog}” sort=“asc” offset=“1” dynamic=“off”}
      {if genetic-parent==“0”}             
        <li>
            {title}
                  {reverse_related_entries weblog=”{my_weblog}”}
      {if count==1}<ul>{/if}
                      <li>{title}</li>
                      {if count==total_results}</ul>{/if}
              {/reverse_related_entries}     
                </li>
              {/if}
          {/exp:weblog:entries}
        </ul>

</div> <!—end sidenav—>

As you can see i have used pretty much everything that you had just with some name changes, but the basic structure is the same.

I have had a love/hate relationship with ee for a little while now and your menu system seems to be the best around purely for not having to use modules, plugins etc.
Menus should be easy out of the box!

Thanks again for the code, much appreciated.

Mike

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, May 9th, 2009
Comment: #27

Hey Mike - are you sure you have the relationships established in the content correctly?  Parents should have none, and all children should be assigned to a parent.

Picture of mike

by mike

Date: Thursday, May 14th, 2009
Comment: #28

Hi Mike, just to let you know the problem was a typo, thought it was an easy fix, duh!

thanks for your advice, much appreciated

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, May 14th, 2009
Comment: #29

Ah good—glad to hear it.

Picture of Amy Stoddard

by Amy Stoddard

Date: Tuesday, October 20th, 2009
Comment: #30

Would this approach allow me to have a breadcrumb nav?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, October 20th, 2009
Comment: #31

Hmmm…hadn’t thought about it but can’t see why not.  It would just be a matter of displaying a parent if there was one.

Picture of Said Salameh

by Said Salameh

Date: Friday, February 26th, 2010
Comment: #32

Hi Mike

You mentioned above that it might/could be possible to achieve a 4th level by an embedded template, I tried to use the following and did not get the results I was hoping for

  <ul>
  {exp:weblog:entries weblog=“siklusbisnis” sort=“asc” dynamic=“off”}
  {if parentpage !=“0”} 
        {reverse_related_entries weblog=“siklusbisnis”}
          <li>{title}</li>
        {/reverse_related_entries}
      {/if}

  {/exp:weblog:entries}
  </ul>

Any idea what might be wrong here

Thanks & Regards
Said

Mike Boyink

by Mike Boyink (Author)

Date: Friday, February 26th, 2010
Comment: #33

Sorry - I’m not following.  You were trying to use this approach for a 4th level and it isn’t working?  Or it’s not working used in the manner outlined in this article?

Picture of Said Salameh

by Said Salameh

Date: Friday, February 26th, 2010
Comment: #34

Hi Mike

Thanks for your quick response, its working for a 3 level menu like so
Root
  Parent
    Child

and as outlined in this article, but not like so:
Root
  Parent
    Child&Parent; Child
     
Thanks & Regards
Said

Picture of Said Salameh

by Said Salameh

Date: Friday, February 26th, 2010
Comment: #35

Correction to that last entry

Root
  Parent
  Child&Parent; Child

Mike Boyink

by Mike Boyink (Author)

Date: Friday, February 26th, 2010
Comment: #36

I’m not sure if some of your code is getting eaten (and I’m still on early cups of coffee)—but I don’t see where it’s attempting to go a level deeper.

I haven’t ever tried this - but to go 4 levels deep I’d experiment with the following:

Create a new template.  This new template would have another weblog:entries & reverse related entries loop arrangement.  This new template would be embedded in at the li level in the code in this tutorial.

However you need a way to limit the code in the embedded template and the way to do that is use an embed variable.  Think of the embed variable as a communication channel between templates - the calling template can pass a value to the embedded template that the embedded template can then use.

What you need to pass through as the embed variable is the entry_id of the reverse related entry in the calling template.  That entry_id would be used as a parameter on the weblog:entries tag in the embedded template.

All I can give is a direction at this point - I’ve a weekend-long event kicking off later today that will be consuming my time.

Honestly - with that much depth to your content it might be easier to implement using the Structure module.

Picture of Said Salameh

by Said Salameh

Date: Friday, February 26th, 2010
Comment: #37

I will take you suggestion and see how I go with it. Thank you very much for the input, very appreciated.

Hope all goes well with your event

Regards
Said

Picture of Manos

by Manos

Date: Tuesday, November 16th, 2010
Comment: #38

Hello Mike and great tutorial! I have managed to create a 2nd level deep hierarchy and also with your help in the comments higlight the selected list item. I have one small question though: Do you know of a way to only show child list items when they or their parent is selected in the navigation menu? thanks

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, November 16th, 2010
Comment: #39

Hey Manos -

I think your best bet there is to look at a jquery-based menu approach.

Picture of Manos

by Manos

Date: Tuesday, November 16th, 2010
Comment: #40

Hmm i am afraid i have not made myself very clear. What i wanted to say was that i would like when someone clicks on a parent link then on the newly loaded page to show the children. I would like the children of a link to only appear when someone has navigated to their parent page, and not the whole time. Sorry if i didn’t make myself very clear on the first post and thank you for your quick response!

P.S. Jquery is a great idea, i was wondering if there was a simpler way since i do not intend to use animated menus on my site.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, November 16th, 2010
Comment: #41

Yes, I understood.  The challenge is that from a URL perspective all the pages have the same structure, so there isn’t a good way to trigger a conditional to hide or show the children.  This is why I suggested a client-side approach.

As an aside, as a user I appreciate seeing all my options at once and saving a click…;)

Picture of Manos

by Manos

Date: Tuesday, November 16th, 2010
Comment: #42

Ok i think i understood. I will follow your advice and check on some jquery method to achieve the submenu effect. You are right about the one-click approach it is more convenient, i will keep that in mind.

Thanks and congrats once again for your wonderful tutorials! :)

Picture of Manos

by Manos

Date: Wednesday, November 17th, 2010
Comment: #43

Hello Mike still asking for your help here :)

I have managed to output the navigation effect i want with the following code:

          {exp:channel:entries channel=“static”  sort=“asc” offset=“1” dynamic=“no”}
              {if static_parent_page == “0”} 
                  <li>           
                {title}
                {if segment_2==url_title OR segment_3==url_title}
                        {reverse_related_entries channel=“static”}
                          {if count==1}<ul>{/if}
                              <li>{title}</li>
                          {if count==total_results}</ul>{/if}
                        {/reverse_related_entries}
                {/if}
                </li>
              {/if}
          {/exp:channel:entries}

My problem now is that when i navigate to a submenu e.g http://mysite/static/team/approach i cannot get the channel entry approach (which is related to the static channel) to show its content. Insted it shows the team entry contents. I know with the method you designated all the channel entries are supposed to link to the same segment area ({url_title_path=static}) i am just wondering if there is a way through expression engine to “move” the sub-entries to segment_3

I hope it all makes sense :S

Picture of Manos

by Manos

Date: Wednesday, November 17th, 2010
Comment: #44

ouch erm how can i paste code correctly? :p sorry for the noobness

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, November 17th, 2010
Comment: #45

Hey Manos -

Not sure I completely follow what the issue is. 

You can work around EE’s link structures, but you’ll need to create your own links (vs using EE’s linking variables), and use segment variables as parameters for the entries tags.

Or look at the Structure addon for EE.

Picture of Danielle LeComte

by Danielle LeComte

Date: Wednesday, November 2nd, 2011
Comment: #46

Ha! I know this tutorial is years old, but when searching for the easiest way to add child pages to a site, I landed here!

This worked great for adding a new tier of navigation as an after-thought on an already-built-out site. Took minutes and works perfectly for what the client needed without having to get into add-ons or complications! You’re a gem! Thank you so much.

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, November 3rd, 2011
Comment: #47

Hey Danielle -

I’m glad you found the tutorial helpful.

These approaches are all still valid in EE2 yet.  Just need to swap out some weblog for channel, etc. 

I do plan on re-writing them for EE2 over the next few months.

Picture of Danielle LeComte

by Danielle LeComte

Date: Thursday, November 3rd, 2011
Comment: #48

Yep! This was an EE2 site that I used your tips on. Thanks again. This saved me loads of time.

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>