WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to style page parent menu (4 posts)

  1. Chanon
    Member
    Posted 3 years ago #

    Dear Guys

    I use wp_nav_menu() to generate the ul pages lists and got difficulties finding how to style the page li that have child page under its.

    Here is sample brief HTML output.

    <ul><li class="page_item page-item-2"><a href="#">main 1</a></li>
    <li class="page_item page-item-4"><ahref="#">main 2</a>
    <ul class="children">
    	<li class="page_item page-item-6"><a href="#">Sub 1</a></li>
    	<li class="page_item page-item-9"><a href="#">Sub 2</a></li>
    </ul>
    </li>
    </ul>

    Let's say I want to style 'main 2' to display differently in order to tell visitors that 'main 2' have child pages.

    Are there any possibility to style CSS in reverse order? So I could style li that have ul class='children' underneath.

    It may be a good idea if I can put class 'is_parent' in li that have children. If you could direct me which function in WP does that, it would be appreciated. I tried using 'walker' object but I'm not quite understand it.

    Cheers

  2. dkristine
    Member
    Posted 3 years ago #

    Have a look at this thread - the author of the last post seems to have a solution for this.

  3. Chanon
    Member
    Posted 3 years ago #

    Hey thanks so much dkristine!
    That is exactly what I want.

    For those who may come across the same issue,
    I edited /wp-includes/classes.php

    On start_el function - under Walker_Page class (Around line 1183)
    Under the line that say
    $css_class = array('page_item', 'page-item-'.$page->ID);

    Add the following code

    global $wpdb;
    $result = $wpdb->get_results('SELECT post_parent FROM '.$wpdb->posts.' WHERE post_status="publish" AND post_parent='.$page->ID .' LIMIT 1', ARRAY_A);
    if($result[0]['post_parent']) $css_class[] = 'parent-level-'.$depth;

    This may not a good idea if you have a massive navigation as I use the single query to check each nav. However, it did job for mine.

    Cheers

  4. carbonr
    Member
    Posted 3 years ago #

    ninenote thanks for this solution!.

    I was hoping can you help me in a adding a class "dropdown" to all those list item has subpages below them

    eg.

    <ul>
    <li class="page_item page-item-2"><a href="#">main 1</a></li>
    <li class="dropdown page_item page-item-4"><ahref="#">main 2</a>
    <ul class="children">
    	<li class="page_item page-item-6"><a href="#">Sub 1</a></li>
    	<li class="page_item page-item-9"><a href="#">Sub 2</a></li>
    </ul>
    </li>
    </ul>

    please help

Topic Closed

This topic has been closed to new replies.

About this Topic