Two-tone menu items

Question

wp_list_pages seems to print out menus ok, but is there a way to alter the functionality so that i can display the menu in two colors..?

So, if the titles of 3 actual pages are:

Big Cinema * Monaco
Theatre * San Franciso
Sport * Berlin

(each page really has two titles, the asterisk used to separate them. another character could be used..... or is there a way of entering two titles?)

When these are displayed you would get the two titles for each page displayed a little differently:

Big Cinema Monaco

Theatre San Franciso

Sport Berlin

(the italics above representing blue, the rest green)

Is there a way to alter the wp_list_pages behaviour, or is there a better technique to do this?

Answer 1

Hi @cannyboy:

Unless I misunderstand, I think what you need is to use 'the_title' filter.

If you simplly enter "Title 1 * Title2" into your title field, this code I've written for this hook should wrap your Title2 in a <span class="title2"> which will allow you to style it with CSS. You can put the following code into your theme's functions.php file:

add_filter('the_title','yoursite_the_title');
function yoursite_the_title($title) {
  $titles = explode('*',$title);
  $title = trim($title[0]);
  if (isset($title[1])) 
    $title .= ' * <span class="title2">' . trim($title[1]) . '</span>';
  return $title;
}

Of course this will wrap your second title everywhere so you might have some places it does it that you don't want it to do it which case you'll need to figure out how to tell the function not run for only those cases.

Answer 2

Sure, this is. Just locate the code of the function wp_list_pages() (good to know that wordpress is free software so you can access the source) and then look for anything releated to action -or- hook -or- callback. Change the output according to your needs (good to know that HTML is an open standard as well as CSS is, so you can access ANYTHING you like).

So to answer your question: YES you can achieve. Please see the PHP Manual for string functions, '*' is the string representation for the asterisk, then visit the w3c website to see the definition of HTML and CSS which is the base for YOUR browser to display websites.

Have fun.

Answer 3

You can include HTML tags in your page titles if you want - maybe the easiest way to do what you want is to include a span tag around the city in your page title, which you can style with css.

Or, include the "second title" as a custom field and recover it with a filter on the_content...