mercredi 1 juillet 2015

How do I use Parent page to get attributes for wp_nav_menu buttons?

I have a WordPress page that I am working on that I have had to change to aid in optimising the SEO of the page. as part of this optimisation, I changed the Page Titles, which has caused an issue with menu's in the header as they originally used the Page Titles as Menu Items.

I made a custom menu and used the wp_nav_menu to have it populate in the header which works well, however, the original wp_list_pages menu had a function where if you hovered over the button, the button colour would change to the background colour of the linked parent page.

The header file code is:

<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 

            // Get 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' ) );             

            // Get 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 as $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>";



                    }

                }
                */
            // Get 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 is using the 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 a { 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 a { 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 a { color: #fff; }

#slideshow #state-nav li a:hover,
#slideshow #state-nav li.current_page_item a,
#slideshow #state-nav li.current_page_parent a { 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 to edit the CSS to include the class from the new menu, but I cannot figure out how to make it replicate the original functionality.

Any help would be appreciated.

Cheers

Lloyd

Aucun commentaire:

Enregistrer un commentaire