Support » Themes and Templates » How to highlight a parent page item?

  • I try to use wordpress 2.0.5 as a CMS.
    Is it possible to keep the menu item of the parent page highlightened on child pages?

Viewing 4 replies - 1 through 4 (of 4 total)
  • I tried to answer this question just yesterday, could you please try to search before opening a new topic here?

    http://wordpress.org/support/topic/97997?replies=2

    It is when the pages are displayed through wp_list_pages(). This function returns a list where the parent item has a class “current_page_parent”. Use your style.css to format this menu item.

    Sorry, but I followed the instructions here and on the thread mentioned above and it’s not working. I managed to set up my submenu, you can check it out at http://www.ainhoavega.com/prueba . Any suggestions on how to highlight the parent page when you’re on the children page? For example how to highlight “PRUEBA” when you’re in http://www.ainhoavega.com/prueba/subpagina-1 . Which selector should I used or what condition (php). Right now my code for the submenu is:

    <h7><?php if(intval($post->post_parent)>0)
    {
    	while(intval($post->post_parent)>0)
    		$post = get_post($post->post_parent);
    }
    echo '<a href="'.get_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'; ?>:</h7>
    
    <?php
    global $wp_query;
    if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
    } else {
    $parent = $wp_query->post->post_parent;
    }
    wp_list_pages("title_li=&child_of=$parent");
    ?>

    And the CSS:

    #submenu {
      padding-top:12px;
    }
    
    #submenu ul {
      margin:0;
      padding:0;
    }
    
    #submenu li {
      float:left;
      margin:0;
      padding:0;
      list-style-type:none;
    }
    
    #submenu li a {
      display:block;
      padding:0 10px 0 10px;
      font-size:0.9em;
      letter-spacing:1px;
    }
    
    * html #submenu a {width:1%;} /* see http://www.positioniseverything.net/explorer/escape-floats.html */
    
    h7 a, h7 a:hover, h7 {color: #fec42d;
    	font-weight: bold;
    	text-transform: uppercase;
    	font-size: 0.9em;
    	float: left;
    }
    
    #submenu li {
    	border-right: 1px dotted #fec42d;
    	margin: 0 5px 0 5px;
    }
    
    #submenu a {color:#fec42d;}
    
    #submenu li.current_page_item a:link,
    #submenu li.current_page_item a:visited,
    #submenu li.current_page_item a:hover,
    #submenu li.current_page_item a:active,
    #submenu a:hover {color:#fec42d;
    	font-weight: bold;
    	border-right-color: 1px solid #fec42d;
    }

    Thanks, anshiTecch!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to highlight a parent page item?’ is closed to new replies.