Trick: Thesis Feature Box For A Dynamic Navigation Bar

Our website Bully.ws has been retired since this article was written. This article is complete except for the link to the site – screenshots included instead.

The main purpose of the site was to provide a portal to our other sites but we had trouble managing so many blogs so the personal one has been shelved for now. This article is complete except for the link to the site – screenshots included instead.

Just to be different we did two main things with Bully that we haven’t done with our other sites:

1. Designed a “dark theme”

by adding code to the custom style sheet (custom.css file); and

2. Replaced the standard navigation bar

with links and images using the feature box

The Genesis of a Bright Idea

I got the idea to fiddle with the navigation bar after cruising the Thesis Forum.

First, I came across a thread that asked “Has anyone done anything with the feature box?“

I started thinking about how creative I could be, to assist mainly with adding more red colour to the site without overpowering the overall comfort level for readers.

I then read the Thesis forum thread about custom hooks and adding images before posts – see our article Marketing Tip: Add Your Logo Before Each Headline to read all about that one!

I put them together and thought…

“Why don’t I add an image to before a navigation button and replace the standard navigation bar with images and words?”

Designing a Custom Navigation Button

The most enjoyable aspects were designing navigation buttons using our logo image, with a fancy font and learning how quick and easy (and reversible) it was to remove the sometimes ordinary looking navigation bar that is standard with Thesis out-of-the-box.

Tweaking the Custom Style Sheet & Custom Functions Files

To change our custom style sheet and custom functions files, we made heavy use of the Thesis OpenHook plugin. I can’t recommend it enough for helping self-taught hackers like myself how to tweak the code. At first I was hesitant to add another plugin and use it, but after so many recommendations and commendations in the Thesis Forum I thought I would give it a whirl and now use it all the time.

You can easily add Thesis OpenHook to your WordPress site via the Plugins area of your Dashboard. Click on Plugins, scroll down to the bottom and select “Plugin browser/installer”. Next type in OpenHook as a search term. When you find it, you just need to click install, activate it and “Bob is your uncle”. [Australian saying for everything is okay!] If you want to read about it first, read here.

While our way probably isn’t the only way to do things (as any visit to the Thesis Forum will demonstrate), this is how we made our changes…

Extract of the HTML Code used in the Feature Box within Thesis OpenHook:

<center><a href="http://bully.ws/" title="Home"><img src="http://bully.ws/wp-content/themes/thesis/custom/images/BullyHomeNav.jpg"></a>
<img src="http://bully.ws/wp-content/themes/thesis/custom/images/Bull head.jpg"><a href="http://bully.ws/category/entertainment/books/" title="Read"><img src="http://bully.ws/wp-content/themes/thesis/custom/images/Read nav.jpg"></a>
<img src="http://bully.ws/wp-content/themes/thesis/custom/images/Bull head.jpg"></a>
<a href="http://bully.ws/category/alternative/relax/" title="Relax"><img src="http://bully.ws/wp-content/themes/thesis/custom/images/Relax nav.jpg"></a>

…[more of the same, alternating between image, followed by link details}…

<img src="http://bully.ws/wp-content/themes/thesis/custom/images/Bull head.jpg"></a>
<a href="http://bully.ws/category/aha/seedy/" title="Seedy & Rude"><img src="http://bully.ws/wp-content/themes/thesis/custom/images/Seedy Rude nav.jpg"></a></center>

Feature Box HINTS:

• If you don’t want your navigation bars centred – and you want them left-aligned – leave off the <center> tags.
• Don’t check the “Execute PHP on this hook” box – you are only using basic HTML.
• Check your links (when clicked) surround the first image and first word. This will assist your reader by having maximum clicking room, which includes the image to the left of the word.
• I ran all of the above code together in the feature box, that is without line returns – but I have separated it out above to show the patterns of images, words, images, words… I actually take the spaces out after I know I have everything in the right order.

Feature Box CSS

/* Featured */
.custom #feature_box {
background: #000;
border: none;
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
a.featured {
background: url('images/bully content mini.jpg') repeat #fff center;
position: relative;
display: block;
margin-top: 1em;
height: 135px;
border: none;
}

And Finally … say goodbye to the default navigation bar

All you have to do here, is check the “Remove Thesis nav menu” in the “Before Header” box, using the Thesis OpenHook plugin.

If you don’t want to get rid of your Thesis Navigation Bar, you may want to consider…

• Adding a second navigation bar

I tried this but ending up sticking with the one I made with images because it just looked more polished. I would reconsider having the standard navigation bar again with a plain black background and strong white font so it seems to float above my structured image-rich nav bar.

• Surfing the Thesis Forum for inspiration for blog design/redesign – a fabulous up-to-date resource about all things blog, web and design related for users/purchasers of the Thesis Theme for WordPress.
• Playing with your feature box a little and stay tuned for some killer customisations from the Thesis development team in versions 1.5+
• Adding Thesis OpenHook plugin to your arsenal. It is great for those of you who don’t have access to your back-end (sounds rude doesn’t it?!) You won’t have to worry with accessing your server and using FTP if you use the Thesis openHook plugin = the backdoor to your style sheet and custom functions.

Still here? Go and have a play…

Related Posts

1. 4 Nifty Code Snippets to Trick Out Your Thesis Theme
2. Customize When Your Sidebars Show What & Widgetize Your Thesis Multimedia Box
3. Marketing Tip: Add Your Logo Before Each Headline
4. Demystifying Thesis Theme Hooks
5. Thesis Theme Tutorial: Image Line Up