Hebrew Bible and Christian Scriptures

Well, the folks at Wordpress tell me there’s no easy solution for creating an additional page widget to make it easy for a user on the backend to have unique page navigation in a top nav area and also in the sidebar (without rewriting the code for the page widget). You can read the forum here. However, this can still be done, but it will require tweaking some paramaters of the wp_list_pages() function.

In my previous post about creating a top nav bar, you can use the same code I provide to create your top navigation, but here’s how you’ll have to use it in the header.php file: In the theme editor, open the header.php file and scroll to the bottom of that document to find the <div id="header"> </div> code and paste the following code after it:

<ul id="topNav">
<?php wp_list_pages('exclude=7,8,9&title_li=' ); ?>
</ul>

The parameters 'exclude=7,8,9&title_li=' tell Wordpress to 1). exclude the pages you don’t want to show up in the top nav area, and to 2). not list the widget <h2> header by passing a null value to the 'title_li=' parameter. This appears to be the only way that you can have unique page navigation in a top navigation area and ALSO in the sidebar. When you want to exlcude pages from the top nav, you’ll have to list your own page IDs in the code provided; and of course, to exclude the pages that appear in the top nav from the sidebar page widget, all you have to do is use the widget interface to configure that widget to list only the pages you want.

Thanks to the moderators at Wordpress for helping me figure this out …

OK, so I’m retooling the default Kubrick theme for a project I’m working on. I’ve ran into a situation where I’d like to have more than one page widget to be able to display a unique page listing in a horizontal, top navigation area and also the sidebar. I’ve been able to create a topnav <div> with the wp_list_pages() Template Tag using the list coding I referenced in my last post. However, there’s no way to get a unique list of page links in both areas without an additional page widget. The page widget allows you to exclude certain pages from showing up; but even while using the wp_list_pages() Template Tag in the topnav and the page widget in the sidebar (with topnav page links excluded), you will still get a full listing of all your pages in the top navigation area, which is problematic in a fixed-width space like that anyway. I thought that merely 1). adding a THIRD sidebar in the same method proposed here for adding a second sidebar in the form of a top navigation area, and then 2). duplicating the PHP code for the page widget in wp-includes/widgets.php would create a second widget which you could then drag to the top nav area. But no dice yet …

If you’ve used or seen Vault9’s “Contempt” WordPress theme, you’ve probably noticed the slick-looking top navigation, which is pure CSS using unordered lists. Making vertical navigation this way is easy enough if you’re not particulary concerned about the graphical presentation–but when it comes to doing it the “Contempt” way, there are a few extra steps you’ll need to take to make sure your link borders are flush with the top and bottom of the nav bar itself (and that’s tricky to do across multiple browsers).

Here’s the basic CSS you’ll need to do this:

#topNav {
height:25px;
background-color:#ccc;
margin:0px;
padding:0px;
}

#topNav li {
display:inline;
}

#topNav a {
border-right:1px solid #000;
float:left;
text-decoration:none;
padding: 4px 15px 0px 15px;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
height:21px;
}

#topNav a:hover {
background-color:red;
}

To see what this looks like in an HTML page, download this text file, change the file extention to .html, and view it in a browser. This should work in most, if not all, of the latest browsers (including IE6). From my experience in repurposing this code for a project I’m working on, the key to making this work is making sure that the height property applied to the a selector for the list links is set to the proper height in pixels. Again, this will vary depending on how tall you want your nav bar to be.

In addition to that, the other important part is setting the links’ padding and font size to work with the pixel height of the #topNav ID to get that really clean look.