php - How do I use Parent page to get attributes for wp_nav_menu buttons? -
i have wordpress page working on have had change aid in optimising seo of page. part of optimisation, changed page titles, has caused issue menu's in header used page titles menu items.
i made custom menu , used wp_nav_menu have populate in header works well, however, original wp_list_pages menu had function if hovered on button, button colour change background colour of linked parent page.
the header file code is: (note original code commented out @ ul id="state-nav")
<div id="slideshow" <?php if (is_page_template("page-state.php") or is_page_template("page-state-2col.php")) { echo "class=\"subnav\"";} ?>> <div class="image"> <?php // featured image get_the_image( array( 'link_to_post' => 0, 'the_post_thumbnail' => 'true', 'size' => 'full', 'default_image' => ''.get_bloginfo('template_url').'/images/img-masthead.jpg' ) ); // image caption $args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'asc', 'post_mime_type' => 'image' ,'post_status' => null, 'numberposts' => null, 'post_parent' => $post->id ); /* $attachments = get_posts($args); if ($attachments) { foreach ( $attachments $attachment ) { //$alt = get_post_meta($attachment->id, '_wp_attachment_image_alt', true); $caption = $attachment->post_excerpt; $description = $attachment->post_content; echo "<p class=\"caption\">" .$caption. "</p>"; //echo "<p class=\"caption\">" .$description. "</p>"; } } */ // featured image caption echo the_post_thumbnail_caption(); ?> </div> <ul id="state-nav"> <!--?php wp_list_pages('sort_column=menu_order&title_li=&depth=1&child_of=19'); ?--> <?php wp_nav_menu(array( 'sort_column' => 'menu_order', 'menu' => 'state_menu', 'container_class' => 'state-nav', 'container_id' => 'header', 'theme_location' => 'header', 'child_of' => 19) ); ?> </ul> <?php // check if page using state template if (is_page_template("page-state.php") or is_page_template("page-state-2col.php")) { ?> <ul id="state-subnav"> <?php $id = $post->id; $pid = $post->post_parent; ?> <?php if($pid != 19) { ?> <li class="page_item"> <a href="<?php echo get_permalink( $pid ); ?>">overview</a> <? } else { ?> <li class="current_page_item"> <a href="<?php echo get_permalink( $id ); ?>">overview</a> <?php } ?> </li> <?php if($pid == 19) wp_list_pages('sort_column=menu_order&title_li=&depth=1&child_of='.$id.''); else wp_list_pages('sort_column=menu_order&title_li=&depth=1&child_of='.$pid.''); ?> </ul> <?php } ?> </div> the original css is:
#slideshow { position: relative; width: 981px; height: 279px; overflow: hidden; margin:0 0 20px 2px;} #slideshow.subnav { height: 317px; width: 950px; } #slideshow .image { position: relative; width: 982px; overflow: hidden; } #slideshow .image .caption { position: absolute; top: 55px; left: 23px; padding: 10px 25px; margin: 0; background: url(images/bg-slideshow_caption.png); color: #fff; font: 38px/40px rockwell, verdana, "times new roman", times, serif; max-width: 470px } #slideshow #state-nav { position: absolute; right: 0; top: 0; margin: 0; } #slideshow #state-nav li { border-bottom: 2px solid #36434d; padding: 0; text-align: center; width: 200px; height: 33px; line-height: 33px; } #slideshow #state-nav li.last { border-bottom: none; } #slideshow #state-nav li { display: block; font-size: 14px; color: #fff; text-decoration: none; text-transform: uppercase; background: #586169 url(images/bg-state_nav.png) top center repeat-y; } #slideshow #state-subnav { position: absolute; bottom: 1px; left: 0; background: #4dc1ff; overflow: hidden; width: 981px; } #slideshow #state-subnav li { list-style: none; float: left; display: inline; } #slideshow #state-subnav li { display: block; font-size: 14px; color: #000; text-decoration: none; padding: 10px 20px; } #slideshow #state-subnav li a:hover, #slideshow #state-subnav li.current_page_item { color: #fff; } #slideshow #state-nav li a:hover, #slideshow #state-nav li.current_page_item a, #slideshow #state-nav li.current_page_parent { background: #4dc1ff; color: #000; } /*nsw*/ body.page-id-20 #content h2, body.parent-pageid-20 #content h2 {color: #4dc1ff; } /*vic*/ #slideshow #state-nav li.page-item-31 a:hover, #slideshow #state-nav li.page-item-31.current_page_item a, #slideshow #state-nav li.page-item-31.current_page_parent a, body.page-id-31 #slideshow #state-subnav, body.parent-pageid-31 #slideshow #state-subnav { background: #87d853; color: #000; } body.page-id-31 #content h2, body.parent-pageid-31 #content h2 {color: #87d853; } /*qld*/ #slideshow #state-nav li.page-item-33 a:hover, #slideshow #state-nav li.page-item-33.current_page_item a, #slideshow #state-nav li.page-item-33.current_page_parent a, body.page-id-33 #slideshow #state-subnav, body.parent-pageid-33 #slideshow #state-subnav{ background: #cd3337; color: #000; } body.page-id-33 #content h2, body.parent-pageid-33 #content h2 {color: #cd3337; } /*sa*/ #slideshow #state-nav li.page-item-35 a:hover, #slideshow #state-nav li.page-item-35.current_page_item a, #slideshow #state-nav li.page-item-35.current_page_parent a, body.page-id-35 #slideshow #state-subnav, body.parent-pageid-35 #slideshow #state-subnav{ background: #f9b53a; color: #000; } body.page-id-35 #content h2, body.parent-pageid-35 #content h2 {color: #f9b53a; } /*wa*/ #slideshow #state-nav li.page-item-37 a:hover, #slideshow #state-nav li.page-item-37.current_page_item a, #slideshow #state-nav li.page-item-37.current_page_parent a, body.page-id-37 #slideshow #state-subnav, body.parent-pageid-37 #slideshow #state-subnav{ background: #68b1ae; color: #000; } body.page-id-37 #content h2, body.parent-pageid-37 #content h2 {color: #68b1ae; } /*nt*/ #slideshow #state-nav li.page-item-39 a:hover, #slideshow #state-nav li.page-item-39.current_page_item a, #slideshow #state-nav li.page-item-39.current_page_parent a, body.page-id-39 #slideshow #state-subnav, body.parent-pageid-39 #slideshow #state-subnav{ background: #cdb189; color: #000; } body.page-id-39 #content h2, body.parent-pageid-39 #content h2 {color: #cdb189; } /*tas*/ #slideshow #state-nav li.page-item-41 a:hover, #slideshow #state-nav li.page-item-41.current_page_item a, #slideshow #state-nav li.page-item-41.current_page_parent a, body.page-id-41 #slideshow #state-subnav, body.parent-pageid-41 #slideshow #state-subnav{ background: #2fb56c; color: #000; } body.page-id-41 #content h2, body.parent-pageid-41 #content h2 {color: #2fb56c; } /*act*/ #slideshow #state-nav li.page-item-43 a:hover, #slideshow #state-nav li.page-item-43.current_page_item a, #slideshow #state-nav li.page-item-43.current_page_parent a, body.page-id-43 #slideshow #state-subnav, body.parent-pageid-43 #slideshow #state-subnav{ background: #986fae; color: #000; } body.page-id-43 #content h2, body.parent-pageid-43 #content h2 {color: #986fae; } i have tried edit css include class new menu, cannot figure out how make replicate original functionality.
any appreciated.
cheers
lloyd
ok found answer.
my css referencing wrong part. when menu changed custom menu using wp_nav_menu, css needs reference .menu_item_$n.
example: in original css had referencing
#slideshow #state-nav li.page-item-31 a:hover, #slideshow #state-nav li.page-item-31.current_page_item a, #slideshow #state-nav li.page-item-31.current_page_parent a, which had no effect. in order reference custom menu items, needed reference li.menu-item-$n so:
#slideshow #state-nav li.menu-item-772 a:hover, #slideshow #state-nav li.menu-item-772.current_page_item a, #slideshow #state-nav li.menu-item-772.current_page_parent a, i hope helps else having issue.
Comments
Post a Comment