The base for this code modification is Mystique WordPress Theme created by Digital Nature version 2.4.2.

Always make a copy of the file before you start editing so that you can replace it if something goes wrong!

Amusingly, one of the things that drew me towards using Mystique in the first place was the navigation bar. It offered the best look and versatility of the various themes I tried out, but in the end I ripped it out to put in category icons instead.

This can be used for any type of icons, so you could have some link to pages, some link to categories… it’s up to you!

The first thing you will need to do is make the tiny icons. I’m using and old version of Paint Shop Pro, since I’m a dinosaur and am too lazy to swap to GIMP (and too poor to afford Adobe).

I’m also using a new 2-3 word description of the category for the alt and title fields. This is personal choice, you could use a combination of the cat_name and cat_description if you’d rather.

Once you have your icons, pop open Appearance -> Editor and header.php.

In header.php, find and comment out the following:

          < ?php mystique_navigation(); ?>    

Becomes:

This single line is the entire Mystique navigation bar, so commenting (or deleting) will rip it clean out.

Because the code for creating the icons is repetitive, I’ve automated it using arrays. This makes it easier to add or remove icons or change the way the icons display. In the future I may write an add-on so this can be controlled through a web interface as opposed to mucking around in the code.

Below we are creating a nested array. The first array has the values 1 through 6, which represents the order of the categories. The second array has the three values for each icon.

Since the first portion of the icon_link and icon_location is the same for all my icons, I included it in the foreach loop instead of the array. Make sure to change these to match your own wordpress installation! (If you want to put the full paths in the array, use the second foreach loop listed.)

< ?php
// Create an array of your categories
//   icon_link: A link to the category page
//   icon_location: The location of the JPG
//   icon_alt: The ALT and Title string
$icon_menu = array ( "1" => array ( "icon_link" => "unquiet-bones/",
                                   "icon_location" => "Unquiet-Bones-Small.jpg",
                                   "icon_alt" => "Unquiet Bones - Fantasy, Science Fiction"
                                     ),
                     "2" => array ( "icon_link" => "custom-models-com/",
                                   "icon_location" => "Custom-Models-Small.jpg",
                                   "icon_alt" => "Custom-Models.com - Custom Model Horses"
                                     ),
                     "3" => array ( "icon_link" => "perish-twice/",
                                   "icon_location" => "Perish-Twice-Small.jpg",
                                   "icon_alt" => "Perish Twice - WoW Dual-boxing"
                                     ),
                     "4" => array ( "icon_link" => "everyday-dragons/",
                                   "icon_location" => "Everyday-Dragons-Small.jpg",
                                   "icon_alt" => "Everyday Dragons - Crafting Microbusiness"
                                     ),
                     "5" => array ( "icon_link" => "view-from-the-molehill/",
                                   "icon_location" => "View-From-The-Molehill-Small.jpg",
                                   "icon_alt" => "View from the Molehill - Ramblings"
                                     ),
                     "6" => array ( "icon_link" => "martha-net/",
                                   "icon_location" => "MarthaNet-Small.jpg",
                                   "icon_alt" => "Martha.net - Coding, Webpage Design"
                                     ),
                );

Then we put in the loop that will walk through the array and create the icon menu. The added line breaks are needed in order to keep the icons above the white body area. Please remember to replace my locations with your own!:

//Walk through the first array, pulling out the values of the subarray
foreach ($icon_menu as $key => $value) {
   echo "\n";
   echo "";
   echo "\n";

}; ?>

If you put the full paths in the array, use this look instead:

//Walk through the first array, pulling out the values of the subarray
foreach ($icon_menu as $key => $value) {
   echo "\n";
   echo "";
   echo "\n";

}; ?>

As always, if you run into problems with this code, just give me a holler and I’ll try and help you sort it out!