Widget Method
The Widget method does not require any programming and only works if your theme supports Word Press widgets. NAVT transparently adds five NAVT widgets to the widget page. The widget page can be found from the Word Press Design or Presentation Menu. You must create one or more NAVT Navigation Groups before you can use a NAVT widget.
Begin by moving a NAVT widget into one of the columns displayed on the widget page. This assigns the widget to a dynamic area of the web page – typically this is a sidebar. Click the NAVT widget to open it and assign one of the NAVT Navigation Groups to the widget using the drop-down box. When you view your web site, the widget should display the selected navigation group on the page.
The procedure is the same if you are using the K2 theme and you have chosen to use K2 Sidebar modules. NAVT transparently adds a single NAVT Sidebar Module to the K2 Sidebar Module list. However, any number of NAVT modules can be used by K2 simply by dragging another copy of the NAVT sidebar module into one of the columns on the screen.
NAVT Template Integration
NAVT version 1.0+ offers a theme integration option for each Navigation Group you create. Theme integration requires you to know a little about CSS selectors, CSS classes and how they are applied in your theme.
NAVT utilizes XPATH expressions with an accompanying action to inject a navigation group into your theme. To understand what this means, examine the theme code fragment below:
<body> <div class="page-wrapper"> <div id="header"> <ul class="menu"> <li><a href="#" title="">Item 1</li> <li><a href="#" title="">Item 2</li> <li><a href="#" title="">Item 3</li> </ul> </div><!-- end #header --> <div class="sidebar"> <ul class="menu sidebar-nav"> <li><a href="#" title="">Item 4</li> <li><a href="#" title="">Item 5</li> <li><a href="#" title="">Item 6</li> <li><a href="#" title="">Item 7</li> </ul> </div> </div><!-- end .page-wrapper --> </body>
Problem: I want to replace the UL menu with a NAVT navigation group without doing any programming in my theme. See? Nothing up my sleeve…
In XPATH-speak the location in the DOM to the UL with the class menu is:
This is expressed the same way you’d define this location in a CSS style sheet. CSS classes are define by using a single DOT before the class name and ID selectors are defined by a # (hash) symbol followed by the identifier. This is also true for XPATH expressions.
In the Group Options/Theme Integration tab is where you define the xpath expression for NAVT to use. The actions that can be associated with the expression are:
- Insert Before – inserts the group before the target container
- Insert After – inserts the group after the target container
- Insert at top – inserts the group -> inside the container -> at the top
- Insert at bottom – inserts the group -> inside the container -> at the bottom
- Replace With – replaces the container with the navigation group
In our example, the action would be Replace With.
A Word of Caution
If the XPATH expression isn’t explicit enough, the action will be applied to all DOM nodes that meet the criteria in the expression. For example, we could replace BOTH the UL tags (the one in the header AND the one in the sidebar) in the example by changing the XPATH expression to body ul.menu ; both UL tags have been assigned the CSS class menu
Very interesting article.
I have tried to hack my theme with the following code, but without success… basically i just end up with the site showing a blank page and no page source (suggesting a PHP code error)
Here’s the code:
<?php (if( function_exists(“navt_getlist”) ) {
echo “Pages”;
echo “”;
navt_getlist(“external”);
echo “”:
}
else {
?>
<a href=”/”>Home
<a href=”/”>Home
Would be very grateful if you spotted anything wrong if you could let me know.
Thamnks