«
»

Creating Author Anchors with NAVT

Published
by
Greg
on March 30, 2008
in NAVT, Plugins and Word Press
. Closed Tags: , , .

Introduction

NAVT adds the ability to create navigation groups or embedded lists that contain the authors, editors, contributors and even subscribers that are part of your web site. This is useful for those of you who have multiple authors publishing articles on your web site and they have regular readers. This is equally useful for organizations that want to display sales staff or other organizational information.

The Anatomy of an Author Anchor

Author anchors can be configured in one of the following ways:

  • Shown with a default avatar.
  • Shown with the user’s registered gravatar
  • Shown with a graphic from a user specified URI
  • Shown with a graphic without text
  • Shown without a graphic (text only)

Additional information can be attached to an Author anchor:

  • The Author’s email address
  • The Author’s Bio Summary
  • The Author’s web site address

All of the above information comes from the user’s profile on your Word Press Blog. The gravatar is obtained from here by using the user’s email address that appears in the user’s profile. NAVT provides an extensive number of CSS classes allowing you to style the way the user anchor appears in a sidebar or on a page.

A Full Monty Example

The most extreme example of an Author anchor is one in which all elements are used:

  • The user’s gravatar
  • The Author’s email address, Bio and web site address

Provided below is an example of the HTML created by the NAVT plugin. The CSS classes provided by NAVT has been turned off in this example.

<ul>
<li><a href='http://author' title='View all entries by Greg'>
<img alt='' src='http://image-source'/>Greg</a>
<div>
<a href='mailto:user@example.com' title='Send comments to Greg'>email</a>
<p>User bio information</p>
<a href='http://example.com' title='Visit this web site' rel='external'>Web Site</a>
</div>
</li>
</ul>

The example below shows all of the NAVT classes applied to the same anchor construct.


<ul class='menu example'>
<li class='orow topics_item page_item'><a href='http://example.com/?author=1' title='View all entries by Greg' class='navt_alink'>
<img alt='' src='http://www.gravatar.com/avatar/codes&amp;amp;amp;amp;amp;r=G' class='avatar avatar-96' height='96' width='96' />Greg</a>
<div class='navt_user_details'>
<a class='navt_email' href='mailto:greg@example.com' title='Send comments to Greg'>email</a>
<p class='navt_bio'>User bio text</p>
<a class='navt_weburl' href='http://example.com' title='Visit this web site' rel='external'>Web Site</a>
</div>
</li>
</ul>

You can add your own set of avatars by copying <strong>your jpg, gif or png files</strong> into the avatar directory located in NAVT's plugin directory.