So my question is this… What is really broken? WordPress or the plugin? Does the user really know for sure? Could it be another plugin that is causing the problem? Is it the browser? Does this really give an accurate accounting of a plugin’s compatibility? I honestly don’t think so.

Do I think that if a plugin is working for someone and not working for someone else that the person that the plugin IS working for will even bother to make a special visit the site and click the Working button? – NO, I don’t. It’s like the plugin comment area; if something isn’t working someone will comment. If it is working – they never comment. No one has ever visited my plugin page hosted on wordpress.org to make a comment that the plugin was working.

To truly reflect an honest and fair compatibility value, every plugin user experience would have to be recorded. I personally don’t think it’s going to happen. As a result, most of the information regarding the compatibility of a plugin with any specific WordPress version will be distorted because more people tend to visit the hosting site looking for solutions than those that don’t need them – for that reason I think more people will click the Broken button than those caring enough to click the Working button. I believe that people will shy away from installing and trying a plugin because of this; I find the entire thing irritating.

Matt and company should stop making changes to WordPress that give people the impression that their plugins will break and their sites will stop working. Arbitrarily adding a Plugin Compatibility box to the hosting site under the guise that it somehow measures Plugin Compatibility with WordPress is a joke.

The NAVT plug supports three anchor types in addition to the standard everyday text anchor people typically use. The additional anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors. The anchor styles supported are:

• Standard text link (no graphics)
• Text over Graphics
• Text with a side graphic
• Graphic only (no text)

Anatomy of a Graphic Anchor

A graphic anchor is generally a button or graphic of some type with text (HTML font) on top of it. This anchor typically uses a background image. Some of the time the same graphic image is used to create each link. This makes it necessary to provide a unique set of css classes making it possible to distinguish one anchor from another. NAVT provides several unique class names from which you can create distinct rules for each anchor.

CSS Styling

CSS styling is the cornerstone of creating graphic anchors. NAVT provides anchors wrapped in a DIV tag or anchors outside of a DIV tag. Using a DIV tag enables you to set the width and height of the DIV and then backgrounding it with the desired graphic.

Additional Information

I’ve written additional articles on each of the graphic link types.

• Text with Side Graphic
• Text over Graphic
• Graphic Only Anchors

In the article NAVT and Graphic Anchors, I explained how NAVT plug supported three anchor types that can be used on your web site. The new graphic anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors.
In this article I’ll explain how NAVT creates the Graphic only anchors and what you need to know about the required CSS.

Anatomy of a Graphic Anchor

Along with plain text links, graphic links are probably the most common anchors created for use on web sites. Graphics offer the most options for personalization and remain popular with web site designers. NAVT constructs these links by wrapping a surrogate image inside an anchor. The space reserved can be backgrounded with any image. The anchor text is wrapped within a span that allows the text to be moved off screen while still retaining the HTML text information in the anchor for curious robots crawling your web site.

The graphic below illustrates how to configure an item to create a graphics only navigation item:

The following is the exprected HTML output containing a Graphic Anchor created by the NAVT plugin for a category that has the title World News.

<ul class='menu example'>
<li class='erow topics_item page_item world-news-cat categorytab'>
<div class='navt_gl'><a href='http://example.com/world-news' title='World News' class='navt_glink'>
<img src='http://example.com/wp-content/plugins/navt/images/blank.gif' alt='' class='world-news-img worldgraphic'/>
<span style='margin-left:-5000px;'>World News</span></a>
</div>
</li>
</ul>

Styling a Graphics Only Anchor

NAVT assigns several classes for styling this type of anchor. The following is an example of how to style a NAVT graphic anchor.

ul li.world-news-cat div.navt_gl img.world-news-img,
ul li.world-news-cat div.navt_gl  {
/* set the background image, width and height of the graphic */
width: 100px;
height: 100px;
background: url(images/world.jpg) no-repeat left top;
}

The CSS rules target both the IMG tag and and the image DIV wrapper. The anchor text is automatically moved off the page so it is not visible to site viewers and remains SEO friendly.

Other Types

Each type of navigation item pages, categories, URI anchors, etc) is constructed the same way and each is provided with a unique set of classes similar to the example shown above. Below is a list of the classes created for each type of item. When in doubt, look at the source code created by NAVT by using your Browser.

In the article NAVT and Graphic Anchors, I explained how the NAVT plugin supported three anchor types that can be used on your web site. The new graphic anchor styles are for those who want to use graphics or a mixture of graphics and text as anchors.

In this article I’ll explain how NAVT creates the Text with Side Graphic anchors and what you need to know about the required CSS.

Anatomy of a Text Anchor with a Side Graphic

Perhaps you’ve seen them. This is a anchor that has a graphic positioned somewhere near it. The graphic can be above, to the right or left or below the anchor text. Often they are used to show a small teaser of a much larger graphic. The construction of these anchors separates the graphic from the anchor. By making the position of the anchor absolute, the anchor can generally be placed anywhere around the graphic.

The graphic used to provide the background image is obtained from a class that you provide from your stylesheet. You supply the name of the class at the time the link type is configured.
The graphic below shows the configuration of a category using text with side graphic. The Anchor type is set to Text with side graphic and the user CSS class worldgraphic has been entered into the text box.

The NAVT output for the navigation group would appear as:

<ul class='menu example'>
<li class='erow example_item page_item world-news-cat categorytab'>
<div class='navt_twsg worldgraphic'>&nbsp;</div>
<a href='http://example.com/world-news' title='World News'>World News</a>
</li>
</ul>

Notice that the DIV is assigned the user defined class worldgraphic and contains only a non-breaking space as a place holder. The anchor appears outside of the DIV so it can be moved using absolute positioning relative to the LI parent container.

Here is a CSS example that would place the anchor to the right of the graphic:

li.world-news-cat { /* parent container must be relative */
position:relative;
}

ul li.world-news-cat div.worldgraphic { /* set size of background and image */
background: transparent url(images/world.jpg) no-repeat left top;
width: 100px;
height: 100px;
}

ul li.world-news-cat a { /* set for absolute positioning */
position: absolute;
top: 50%;
right: 0;
z-index: 50;
}

Other Types

Each type of navigation item: pages, categories, URI anchors, etc) is constructed the same way and each is provided with a unique set of classes similar to the example shown above.