How to make a duotone page menu in WordPress

My husband needed something for a client’s website that I’ve seen in several places: a navigation menu that has a duotone effect, where the first word is a different color than the rest of the title. It took some work, but I whipped something up that does the trick. (There might be an easier way to do this out there, but I didn’t feel like looking for one.)

I’ve made it a PHP function, so if you want to use it, just put the function into your functions.php file in your blog’s theme. View the function after the break.

color_split_page_menu

This function has four parameters, only the first of which is required.

string color_split_page_menu(string $class_name [, bool $return = false [, bool $show_home = false [, bool $delete_space = false]]])

By default, the function generates a page menu that is echoed (displayed), does not include a link for “Home,” and preserves the spaces between the words. It will be in an unordered list that is wrapped in a div with the class “menu.”

$class_name (required)
This will be the class that the first word is wrapped in:
<span class="class_name">Word</span>

$return (optional)
If set to true (or any value other than 0, false, or null), the function will return a string instead of echoing the results.

$show_home (optional)
If set to true (or any value other than 0, false, or null), it will include a link to “Home” at the beginning of the page list.

$delete_space (optional)
If set to true (or any value other than 0, false, or null), it will delete the spaces between words in the list (for example, AboutMe instead of About Me).

To generate the page menu in a theme, just enter the following PHP wherever you want the menu to show up:

<?php color_split_page_menu('highlight'); ?>

Replace “highlight” with whatever class name you want on the span around the first word. Add the other three parameters if you want to. Style accordingly.

Click below to view the code (copy and paste it into a PHP file to use it): 
color_split_page_menu.php

No related posts.