How can I use AnyFont to change my menu text in WordPress?

This must be the most frequently asked question I get about AnyFont.  It was always my plan to automate this feature in AnyFont with a simple on/off switch, but due to serious time constraints over the past year and the way the filters work for the function wp_list_pages, I have not yet been able to nail it. But until I do, here is a quick solution which allows you to create a customized menu that uses AnyFont styles.

Open your themes function.php file if it has one, otherwise open up header.php and add in the following PHP function at the bottom of the page.

function menu_compare($a, $b){
    if ($a->menu_order == $b->menu_order) {
        return 0;
    }
    return ($a->menu_order < $b->menu_order) ? -1 : 1;
}

This function takes care of sorting your menus correctly using the standard page sort order. Feel free to modify this should you prefer to sort your menus in some other way.

Now you need to determine where on your page you want your menu to appear, and insert the bit of code below into the corresponding theme file (header.php is usually a good place for the menu to sit)

<ul class="menu">
    <li>
        <a href="<?php bloginfo('url'); ?>/">
            <img src="<?php bloginfo('url')?>/images/stylename/Home.png" alt="Home" />
        </a>
    </li><?php
    $pages = get_pages();
    usort($pages, "menu_compare");
    foreach($pages as $page){
        if($page->menu_order < 10){?>
            <li>
                <a href="<?php bloginfo('url'); ?>/<?=$page->post_name?>/">
                    <img src="<?php bloginfo('url'); ?>/images/stylename/<?=urlencode($page->post_title)?>.png" alt="<?=$page->post_title?>" />
                </a>
            </li><?php
        }
    }?>
</ul>

Before this code will work effectively on your site you need to first go to the AnyFont style manager and create a new style for menu items. Once you have created a style, change “stylename” in the img tags src attribute on lines 4 and 13 in the code above to whatever you named your menu style.

Another very important thing to note, if you look at line 10 you will see an if statement which basically says if the pages menu_order number is higher than 10, do not create a menu item for the page. This is part of a rather simple, although very effective, page ordering/organising method I use. The rules for this system are very simple:

• Assign all your top level pages that you want to have included in the menu,  a menu order number between 1 & 9
• If the page has any other pages below it assign it a number which starts with its parent pages menu order number. ie: if the parent pages menu order number is 2, then the first child page would be numbered 20 and the next child page would be numbered 21 and so on.

The primary reason for this is to make sure only top level pages are included in the main menu.  However, if you manage your pages differently and would like to continue managing them your own way, you can either remove lines 10 and 16 from the code above, or change the number “10″ on line 10 to a number higher than your highest menu order number.   Something like 999999999 should do it.

Enjoy!