Wayfinder
Modx is a open source content management system written in PHP which makes the use of SQL database. Just like joomla and drupal, Modx allows you to have control over your website While setting up a website, you will encouter wayfinder. Wayfinder is a navigation builder for modx. As with all websites, a menu is always needed as it provides the user an easy to use navigation of the website. Though wayfinder is documented in Wikipedia (http://wiki.modxcms.com/index.php/Wayfinder) and the modx website, it is not as clear as water. For this, here is an explanation to understanding wayfinder, and then I will provide an example on how to build a 3 level menu. As with all websites, they all follow a template. In here, it is where the menu must be placed. This is because all content of your website will be placed in a template which will have the repeated information such as the menus,header and footer. Once your pages have been created in modx, you want them to appear in the menu so the user can navigate through them. To make this possible, in the template, write the following in you menu divs :
This calls for the wayfinder menu builder which will read every document in your document tree and from it build a menu. The startId is to specify from which(page [document ID]) of the document tree should it start building a menu from. To incorporate your own style (css) you can do this by creating a chunk where you will put your css code. Once done you will go back to your template and modify :
Now we have a menu customed style up and working. As simple as that. The tricky part comes when you want to build much more complexed menus. Let’s take a look at a 3 level menu.
Wayfinder 3 Level-MenuA 3 level menu would look like this:
In order to achieve this the following must be done:
First we must create 4 chunks
a. menuContainer (outer menu structure)b. inner Container (submenu menu outer structure)c. menuRows (inner menu structure)d. submenuRows (inner submenu structure)
Here is what each chunk must contain :
menuContainer
innerContainer
menuRows
submenuRows
Now to make this 3 level menu work you need to modify the snipped call to:
The hideSubMenus=`TRUE` hides the submenus and they will only appear when the parent menu is clicked. The level is &level=`3`, because it is a 3 level menu, if you want a two level menu you can change it to 2.
If you’re a newbie, then the chunk’s code this isn’t clear as it is. So let’s take a look at it.
To achieve the structure we want, we would manually enter the following.
<ul>
<li><a href="one.htm">menu 1</a></li>
<ul>
<li><a href="one.htm">submenu 1</a></li>
<li><a href="two.htm">submenu 2</a></li>
<ul>
<li><a href="one.htm">sub-sub menu 1</a></li>
</ul>
</ul>
<li><a href="three.htm">menu 2</a></li>
<li><a href="four.htm">menu 3</a></li>
<ul>
<li><a href="one.htm">submenu 1</a></li>
<li><a href="two.htm">submenu 2</a></li>
<ul>
<li><a href="one.htm">sub-sub menu 1</a></li>
<li><a href="one.htm">sub-sub menu 2</a></li>
</ul>
</ul>
</ul>
Now let’s apply wayfinder to this
Explanation of menuContainer and innerContainer
Explanation of menuRows and submenuRows
There you go, you have a 3 level menu. Now if you want the submenus to appear in a different part of the page and not right under the parent menu, there needs to be a second snippet call to wayfinder where the startId will equal 1 this is because it will travel up to know which is the parent of the submenu that was clicked.
For example :
Though there are many flexibilities that wayfinder offers, with this basic tutorial you will have achieved a good understanding of the basics of wayfinder.