Textpattern Resources at textpattern.org

Very Useful for a typical business-style web site with sub-pages in a section.

I searched for quite some time before I found the bits and pieces to put together this recipe for a dynamic sub navigation with a class=“active” attaching itself to the current menu item. This allows you to apply styling to the active menu item without having to hard code the links in your page (template) every time you add an article.

I use the txp:article_custom tag in combination with the rvm_if_this_article plugin to achieve this functionality.

I will give you a step by step scenario to accomplish the desired results. If my illustration seems painfully detailed, it is in an effort to make the information digestible to the novice TXP developer.

The sample scenario:

You have a “section” in your site called “about” which uses an “about” “page” (template).

First install and activate the following plugin: rvm_if_this_article
found here: http://vanmelick.com/txp/rvm_if_this_article.php

Within the “about” “page” you have the following two snippets of code—one for the navigation and one for the article output (novice note: you must have some articles assigned to the “about” “section”):

<ul id="subnav">
  <txp:article_custom form="subnav" limit="99" section="about" sort="Posted asc" />
</ul>

<div id="content"> 
  <txp:article form="static" limit="1" sort="Posted asc" />
</div>

The forms you are calling:

subnav (article-form):

<li<txp:rvm_if_this_article> class="active"</txp:rvm_if_this_article>><a href="<txp:permlink />"><txp:title /></a></li>

static (article-form):

<h2><txp:title /></h2>
<txp:body />

That’s it.

This will create the following html for your page (substitute your own articles).

<ul id="subnav">
  <li><a href="http://dynamicnav.local/about/about-article1">About Article#1</a></li>
  <li><a href="http://dynamicnav.local/about/about-article2">About Article#2</a></li>
  <li class="active"><a href="http://dynamicnav.local/about/about-article3">About Article#3</a></li>
</ul>

<div id="content"> 
  <h2>About Article#3</h2>
  <p>Article Content...</p>
</div>

Just style your .active links and you’re good to go.

btw: if there is a better way to do this now please post a tip in Texpattern Resources.
__________________________________________________________________

Side note: It beats adding the following type of hard-code to my template every time I create a new article just to get the class=“active” effect.

<li>
<a href="<txp:site_url />identity/shine-like-stars"<txp:if_article_id id="13"> class="active"</txp:if_article_id>>Shine Like Stars</a>
</li>

Although, it sure was a useful solution when I needed it.