Integrate Links Into Navigation

If you are using wp_list_categories sometimes you want to manually add HTML/links before and after the categories that are generated in order to preserve the ul list. Similarly, you’d want to bundle the ul tags within an if else statement. Most PHP gurus know this but basically you can use an echo output to generate the needed HTML. I used this for TwinCityScene in adding a home link to the front and social networking buttons to the end. Why would you want to go to the hassle to do this? Accessibility! Special browsers will love you for logically grouping all your links into one ul nav.

<?php 
global $post; 
echo '<ul class="catnav"><li class="cat-item homelink"><a href="/">Home</a>'; 
wp_list_categories('orderby=name&amp;title_li='); 
echo '</li> 
<li class="socnet iconrss"><a title="RSS Feed" href="rss.xml">RSS Feed</a></li> 
<li class="socnet icontw"><a title="Twitter@TwinCityScene" href="https://www.twitter.com/twincityscene">Twitter</a></li> 
<li class="socnet iconfb"><a title="Facebook Fan Page" href="https://www.facebook.com/twincityscene">Facebook</a></li> 
'; } 
else { }; 
?>

The attached CSS follows. Of course it’s a bit gussied up but the main elements are there.

.catnav { background: #000 url('images/bgnav.png') center top no-repeat; clear: both; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #111; border-top: 1px solid #111; width: 100%; display: block; height: 35px; text-align: center;}
.catnav li.cat-item { color: #555; display: inline; text-align: left; margin: 0 5px 0 0; padding: 10px 0 10px 2px;}
.catnav li.cat-item a { text-shadow: 1px 1px #333; text-transform: uppercase; padding: 0 7px 0 7px; height: 35px; color: #ccc; border-right: 1px solid #333; font: 300 1.3em Helvetica, Arial, sans-serif; letter-spacing: -0.5px; line-height: 1.9em; }
.catnav li:hover a, .catnav li a:hover { text-shadow: 1px 1px #333; color: #fff; text-decoration: underline;}
.catnav li:hover { color: #fff; background: transparent url('images/bghover.png') center top no-repeat;}
.catnav li.homelink { color: #000;}
.catnav li.homelink a { padding-left: 5px; border-left: none; }
.catnav li.homelink:hover a { color: #fff;}

.catnav li.socnet { border: none; float: right; margin: 0 10px 0 10px; padding: 0;}
.catnav li.socnet a { margin: 2px 0 0 0; width: 30px; height: 30px; display: block; text-indent: -999em;}
.catnav li.icontw a { background: transparent url('images/twitter.png') center center no-repeat; }
.catnav li.iconfb a { background: transparent url('images/facebook.png') center center no-repeat; }
.catnav li.iconrss a { background: transparent url('images/rss.png') center center no-repeat; }

More Posts

Donate

Hey was this useful? Please consider tipping or subscribing as a member. Even just $1 or $5 can help me improve this content and keep it ad-free.