Support » Fixing WordPress » wp_list_pages change css

  • Resolved x_maras



    I want to change the css of the list that comes as output of the wp_list_pages().
    I tried to place it inside a div and put some css via this but didn’t
    work properly.

    Does anyone know where I can find the code of the wp_list_pages?
    If I change the css class of this output, will it affect more widgets in my layout. (I ve got a category list and a tag cloud).


Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Mark Ratledge


    Forum Moderator

    Look at the wp list pages docs to see how page code is generated, and then look in your theme CSS for<ul> and <li> calls.



    Forum Moderator

    You can’t change the output of wp_list_pages() without modifying core WP files – something I would strongly recommend against unless you really, really, know what you;re doing and are fully aware of the potential ramifications.

    Why do you need to change the output of wp_list_pages? What’s the problem?

    Why do you need to change the output of wp_list_pages? What’s the problem?

    No reason actually, I fixed the problem.
    I m just new in wordpress (2 months) and in php, html, css (4-5 months) and there are times that I have things in front of my eyes and I can’t see them.

    Thanks for the responses.

    You can modify the data produced if you return the data instead.. echo=0 …

    Place the results into an array, do what you want with it, then print/echo it out.

    Hi you all,

    aren’t there overrides I can put in my template to use instead of the core output (like, for example, in Joomla?) If WordPress doesn’t have that option yet it’d be wicked to implement it, don’t you think? Customisable HTML output does make a CMS a whole lot more flexible.

    Have a good one,

    The classes output by the function already give enough control over CSS.

    If you want to change how the functions operates then you could write your own function (some themes do this) or as i said, use echo=0 and do some PHP magic on the output.

    For clarification: Example of code use
    HTML & PHP

    <ul class="mypages">
    <?php wp_list_pages() ?>


    .mypages {}
    .mypages li {}
    .mypages li ul {}
    .mypages li li {}
    .mypages li.current_item {}
    .mypages {}

    If you want to add more classes, then the issue is not with the code, but with your understanding of how to reference the existing classes via CSS (not intended as an insult, so excuse the blatantness).

    If you need specific functionality, then please clarify exactly what it is you’d like it to do.

    Hey t31os_,

    I have read your reference to “echo=0” in several posts as being a good method for modifying the output of the wp_list_pages.

    Can you provide a sample code of how you would use this?

    I am trying to create a mouse over menu, which is relatively easy with html. Just need to put a couple spans into the output.

    E.g. < a href=”url”><span class=”a”></span><span class=”b”></span><span class=”c”>Page</span></ a>

    I’m a relatively new student of php but have been coding for about 5 years. Just a quick sample should get me up and running.


                        $menu =  explode('<li ',substr((wp_list_pages("sort_order=asc&echo=0&depth=0&title_li=")),4));
                        $color = array('blue','orange','green');
                        $sub = 0;
                        $i = 0;
                        $id = array();
                        foreach ($menu as $key => $val) {
                            $match = $matches = 0;
                            if ($sub == 0){
                                $id[] = $key;
                                $pos = strpos($val,'<a');
                                $text = '<li><div class="'.$color[$i].'-left"></div><div class="'.$color[$i].'-mid">'.substr($val,$pos);
                                $text1 = str_replace('</a>','</a></div><div class="'.$color[$i].'-right"></div><div class="clear"></div>',$text);
                                $text2 = str_replace('<a','<a class="top" ',$text1);
                                echo $text2;
                                echo '<li '.$val;
                            if (preg_match_all("/(<ul>)/",$val,$match,PREG_PATTERN_ORDER)){
                                $sub = $sub + count($match[0]);
                            }else if (preg_match_all("/(<\/ul>)/",$val,$matches,PREG_PATTERN_ORDER)){
                                $sub = $sub - count($matches[0]);

    I use this code to modify only the first parent of list.
    you can make another methods too.
    I hope its solve your problem.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘wp_list_pages change css’ is closed to new replies.