Atalaya Studio » Tips/Hints

NAVT Update 1.0.33

Greg — Sun, 12 Jul 2009 14:26:34 +0000

Contains a minor change for user roles and was tested against wp 2.8.1. If you are having trouble finding the NAVT List menu item once the plugin is activated I suggest you do the following:

Temporarily change the permissions on the NAVT directory to 777.
Reactivate the NAVT plugin.
Change the NAVT directory permissions to 755

As of version 1.0.29, NAVT needs to create a file in it’s own installation directory – the file is only created once. If it can’t create the file then it will not display the NAVT List menu item.

You may find that the Word Press automatic plugin upgrade routine removes all files from the previous version and you may have to temporarily change the permissions on the NAVT directory after upgrading. Make sure you change the permissions back to 755 after activating the plugin.

Visually Controlling Menus using CSS Body Classes

Greg — Mon, 30 Mar 2009 18:21:52 +0000

This was written in response to a discussion on the topic of conditionally managing menus… To control the visual presence of various menu levels, a fairly simple theme modification can be made using a php function written as a WordPress action and used in conjunction with a few CSS rules.

WordPress knows which type of query has been requested and as a result, it sets one of the is_* conditional tags. For example, is_page(), is_single(), is_category(), etc. (An explanation of the topic is provided here)

If I want to modify the contents or behavior of a menu I simply add a couple of things to the theme.

In the theme’s functions.php file, create a function that can determine which conditional tag is active; assign a php variable to a CSS class that corresponds to the current conditional tag. Here I have named a function setBodyClass


/**
 * This function echos a CSS class statement
* that corresponds to the current conditional tag
 */
function setBodyClass() {

    /* Home page or front page ? */
    $class = (is_home() ? "homepage" : is_front_page() ? "frontpage" : '');

   /* single page ? */
   $class = (is_single() ? "single-page" : $class);

   /* any category ? */
   $class = (is_category() ? "category" : $class):

   /* A specific category ? */
   if( is_category() ) {
      $cat_id = get_category_by_slug("news-category");
      if($cat_id) {
         $class = (is_category($cat_id) ? "news-category": $class);
      }
   }

   if( '' != $class ) {
      echo ' class="' . $class . '"';
   }
}// end function

/**
 * add this action
 */
add_action('setBodyClass');

Now that we have the function written we want to use the routine in the template file where the BODY tag is created. The BODY tag can typically be found in the header.php or index.php file of your theme. After locating the BODY tag modify the tag as follows:

What have we done here?

We’ve just provided a method for dynamically adding a CSS class to the body tag of the page based on a set of conditional tags. The do_action call is an action hook that is exclusively provided by the theme’s functions.php file. Theme’s can act as their own plugin functionality provider and mine often do. This technique is a preferred (by me) over a direct php call to the setBodyClass function. The action will add the semantic class to the BODY tag if one of the conditions I care about is true. If the none of the conditions are met, then a CSS class is not added to the BODY tag. If the setBodyClass function was not present in the theme’s functions.php file then nothing would happen.

Body Class

To visually control navigation menus I can now create CSS rules that determine what the web site visitor can see when specific content is displayed on the site. This works in conjunction with the applied BODY class. For example, NAVT applies specific classes to various types of menu items. The class page_item is applied to the unordered list tag that encapsulates an anchor to a page. It also applies the class cat_item to the unordered list tag that encapsulates an anchor to a category. More specific classes are also applied by NAVT for pages, categories and other list assets that are contained in the menus. There are too many to enumerate here.

Example Menu with CSS

Here is a simple menu that was generated by NAVT.


  
    
      Home
    
    
      About
    
    
      Local News

If, for example, I did not want to display the “Local News” category on the homepage or the front page I can easily write a CSS rule to hide the category when the visitor is on the home page or the front page:

body.frontpage ul.samplemenu li.local-news-cat,
body.homepage ul.samplemenu li.local-news-cat {
    display: none;
}

The CSS rule above hides the display of the LI tag assigned the class local-news-cat that is a descendant of the UL tag with the class samplemenu that is a descendant of the BODY tag assigned the class frontpage or homepage.

Conclusion

This is an easy technique to apply (your milage may vary). Create the menus you want with NAVT, examine the tags created by the plugin and decide what you want to control and under what conditions then write the CSS rules accordingly.

I hope this was helpful, have fun…

Notes on NAVT 1.0.28 and 1.0.29

Greg — Fri, 27 Mar 2009 18:38:35 +0000

Since the release of WordPress 2.7, people now have the ability to install WordPress in ways that make it difficult for the NAVT plugin to determine the location of the WordPress file wp-config.php. The ajax portion of NAVT includes the wp-config.php file so it can use all of the features and functions provided by the WordPress core code. If NAVT can’t find the file because the WordPress installation isn’t where it would normally be located (in the root directory) OR the WordPress wp-content directory is NOT located inside the WordPress installation directory then NAVT has no chance of working correctly.

Several people have offered solutions for the PHP include statement that is used to include the wp-config.php file and some of the code has been published in comments on this site. I didn’t make change to the plugin until recently… I just haven’t had the time. In version 1.0.28, I decided that instead of attempting to include the wp-config.php using a relative path from the location of the NAVT installtion directory – I would simply create a file on the fly that contained the name of the Word Press installation directory. NAVT knows the name of the installation directory but the ajax code in the plugin does not. The new file is called wp-root.php and it is created/located in the directory where NAVT is installed. The file is created only once and only when NAVT realizes it doesn’t exist. The ajax portion of NAVT includes the wp-root.php file to obtain the name of the WordPress installation directory.

Version 1.0.29

In version 1.0.29, I decided to add a code to ensure the NAVT installation directory had writable permissions and then change the permissions back to 0755 after the file was created. If the file cannot be created for some reason, the plugin will not work. If you do not see the NAVT Lists Tool item in your WordPress dashboard try changing the NAVT installation directory permissions to 0777 using your favorite FTP program or your web site dashboard application. Go to your web site using your browser then using your FTP program or web site file manager, look for the wp-root.php file in the NAVT installation directory. If it exists then change the directory permissions to 0755. If it doesn’t exist then the directory did not have the correct permission settings – try it again.

Working with CSS Collapsing Menus and NAVT

Greg — Tue, 13 May 2008 07:37:54 +0000

A discussion in the NAVT forum has promoted me to sit down and explain how you can use CSS collapsing menus with the NAVT plugin. This article assumes you have some working knowledge of Cascaded Style Sheets used to style your Word Press theme and some experience with NAVT. The article explains where and how to begin integrating a collapsing menu into your web site using NAVT to construct the correct tag structure. This article applies to NAVT version 1.0.23 and above.

Example Menu

Below is an example of the type of menu we’re going to create using NAVT and two cascaded style sheets. The navigation elements shown in the menu are arbitrary items I put together from this web site.

These types of menus are relatively easy to construct. However, the tricky part is making them work with IE6 and most of this article deals with the IE6 solution.

Getting Started

Examples of CSS style sheets that contain rules for formatting horizontal, vertical, fly-out, drop-down, and cascading menus can be found all over the Internet. When asked, I usually send people to CSS Play which is owned by Stuart Nicholls. CSS Play has dozens of examples of pure CSS menus that you can freely use on your non-commercial web site provided you leave the copyright statements intact that appear in the CSS file. These can also be used on Commercial web site’s provided you obtain permission from CSS Play. For this tutorial, I’m going to use this CSS Play flyout menu to demonstrate the process of integrating the CSS into your web site in concert with NAVT.

You will, of course, need to change the menu text and background colors, adjust the menu width and heights and make any other style alterations to make the menu look right with the theme you intend to use the menu with.

The !DOCTYPE

Before I begin, it’s important to understand that your Word Press theme MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html. Using will switch IE into quirks mode and your menu will not work correctly.