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?

  • 1
    How are you storing your second title? Are you storing both in the actual title field itself? Also, it seems what you really might be wanting is a taxonomy with Cities that you apply to your post titles. What is the reason you want it to behave this way? SEO? If yes, then you might want to use taxonomy and then introduce the taxonomy name into your menu. Commented Dec 27, 2010 at 2:06
  • @mike I would like to store the two titles by putting an asterisk between them, in the title field when editing a page. And then whatever function lists those titles would parse it and style the words before and after the asterisk differently. unless there is a better way to enter two titles. the example I used was perhaps confusing - i don't want any taxonomy - there will never be two pages with Berlin, or two pages with Sport. @hakre this is actually a completely different question.
    – cannyboy
    Commented Dec 27, 2010 at 11:11

3 Answers 3


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:

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.

  • @hakre: You modified my code above but did so in a way I'm strongly opposed to, so I reverted. Just as you are opposed to writing WordPress using casing that follow their trademark I strongly disagree with structure that allows a function to return early. I'm not purist about it; it's a pragmatic issue for me. Returning early makes it much, much harder when using a debugger and I want to discourage the practice. It's bad enough WordPress core returns early in so many places, I don't want people to see code appearing to have my name on it returning early too. Commented Dec 27, 2010 at 17:52
  • @Mike: No offence :) Returning early - early was meant to execution time, to deal with the fact that 99.9% of all cases the filter does not need to execute all code. It does not mean, that the return statement must be on top. Returning early can even be written with a single return statement at the very end of the function. You only need to if-clause a lot of code which can make it even harder for debugging. But your code, your choice :)
    – hakre
    Commented Dec 27, 2010 at 18:12
  • @hakre - No offense taken, I was just telling you I strongly disagree with code that returns in the middle of a function. Lots of ifs is only a problem for a sloppy coder. And mid-returns are never better for IDE debugging because mid-returns mean I can't set a breakpoint at the end of the function and know the logic flow won't bypass. Anyway looking at your code I saw no efficiency benefit over what I did, just different coding choices. Whenever I can learn how to do better I welcome it but I studied your code and couldn't find any specific benefits. Maybe you know of you can explain? Commented Dec 27, 2010 at 18:57
  • 1
    @goldenapples - Yes, to match the semantics you are correct, I fixed it. FYI and OTOH it doesn't actually have an effect, as either will work in either case because in WordPress core one just calls the other. But it's good for documentation. (Actually I wish the WordPress core team had just called it add_hook() and ignored the differences; after all we have functions only in PHP, not functions and subroutines and functions work just fine either way, right?) Commented Dec 28, 2010 at 0:12
  • 1
    @goldenapples - Exactly. It's just like functions in PHP; they can return values but do not have to. Just look at the code for add_action(); it just calls add_filter() directly; it's not even doing anything else, just passing on the exact same parameters. Look at line 324 of WP 3.0.3 in /wp-includes/plugins.php to see. BTW, (almost) everything I know about WordPress comes from reading the source code... Commented Dec 28, 2010 at 1:14

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.

  • Is there a way to alter the output of wp_list_pages without changing the core files? for instance, to get the second title as a custom field, as @goldenapples suggests below
    – cannyboy
    Commented Dec 27, 2010 at 11:24
  • 1
    @cannyboy: Look for a filter hook you can make use of. See adambrown.info/p/wp_hooks/hook/…
    – hakre
    Commented Dec 27, 2010 at 11:38

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...

  • thanks, do you know how I could use wp_list_pages to output the second title (entered as custom field)?
    – cannyboy
    Commented Dec 27, 2010 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.