Shows all the children under the current root item and all other root items.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | function jma_sidebar_addon() { global $post; $ancestors = get_ancestors( $post->ID, 'page' ); $ancestor_id = array_pop($ancestors); $ancestor_id = $ancestor_id? $ancestor_id: $post->ID; $root_pages = get_pages(array('parent' => 0)); echo '<ul>'; foreach ($root_pages as $root_page) { $jma_classes = ''; $show_kids = false; $has_kids = false; if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){ $jma_classes .= ' show-children'; $show_kids = true; } $children = get_pages('child_of='.$root_page->ID); if( count( $children ) != 0 ){ $jma_classes .= ' has-cildren'; $has_kids = true; } echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' . $root_page->post_title . '</a>'; if( $show_kids && $has_kids ){ echo '<ul>'; wp_list_pages(array("child_of" => $ancestor_id, "link_before" => "", "title_li" => "", "sort_column" => "title")); echo '</ul>'; } echo '</li>'; } echo '<ul>'; } add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon'); |
This is the code for an accordion based on the portfolio_item post type (php):
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | function sidebar_portfolio_tax(){ global $post; $terms= get_the_terms($post->id, 'portfolio'); if(is_array($terms)) foreach($terms as $term){ $this_term_ids[] = $term->term_id; } ob_start(); $services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included echo '<div class="panel-group event-accordion" id="accordion">'; foreach ($services as $service) { $args = array( 'post_type' => 'portfolio_item', 'tax_query' => array( array( 'taxonomy' => 'portfolio', 'field' => 'id', 'terms' => $service->term_id ) ), 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => -1 ); $x = new WP_Query($args); if($x->have_posts()){ $in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category echo '<div class="panel">';// panel-default echo '<div class="">';//panel-heading echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">'; echo $service->name; echo '</a>'; echo '</div><!--panel-heading-->'; echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">'; while ( $x->have_posts() ) : $x->the_post(); echo '<li>'; echo '<a href="'; the_permalink(); echo '">'; the_title(); echo '</a>'; echo '</li>'; endwhile; wp_reset_postdata(); echo '</ul></div><!--panel-default-->'; } } echo '</div><!--panel-group-->'; $x = ob_get_contents(); ob_end_clean(); return $x; } |
and the css:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .event-accordion ul { padding-left: 0; margin-bottom: 0; } .event-accordion ul li { list-style: none; border-bottom: solid 1px #eeeeee; background-color: #999999; text-align: right; } .event-accordion ul li:hover { background-color: #eeeeee; } /* optional chevron .event-accordion ul li:after { font-family:'FontAwesome'; content: "\f054"; float: right; color: #97c1da; }*/ .event-accordion .panel { margin: 0!important; border-width: 0!important; } .event-accordion .panel > div { text-align: right; } .event-accordion a { padding: 10px 20px 10px 5px; display: block; } .event-accordion .service-cat { min-height: 45px; background-color: #a3a3a2; color: #ffffff; background-repeat: no-repeat; /*border-top: solid 1px #ffffff;*/ } .event-accordion .service-cat:hover { background-color: #666666; } |
If we want to create an horizontal menu instead:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | function aux_menu(){ global $post; $terms= get_the_terms($post->id, 'portfolio'); if(is_array($terms)) foreach($terms as $term){ $this_term_ids[] = $term->term_id; } ob_start(); $services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>'; echo '<div class="aux-menu clearfix "><div>'; echo '<ul class="sf-menu sf-menu-with-fontawesome">'; foreach ($services as $service) { $args = array( 'post_type' => 'portfolio_item', 'tax_query' => array( array( 'taxonomy' => 'portfolio', 'field' => 'id', 'terms' => $service->term_id ) ), 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => -1 ); $x = new WP_Query($args); if($x->have_posts()){ $active = in_array($service->term_id, $this_term_ids)? ' current': ''; echo '<li class="menu-item level-1 ' . $service->slug . $active . '">'; echo '<button class="menu-btn sf-with-ul" >'; echo $service->name; echo '</button>'; echo '<ul class="sub-menu non-mega-sub-menu">'; while ( $x->have_posts() ) : $x->the_post(); echo '<li class="menu-item level-2">'; echo '<a class="menu-btn" href="'; the_permalink(); echo '">'; the_title(); echo '</a>'; echo '</li>'; endwhile; wp_reset_postdata(); echo '</ul><!--sub-menu-->'; echo '</li><!--menu-item level-1-->'; } } echo '</ul></div></div><!--aux-menu-->'; $x = ob_get_contents(); ob_end_clean(); echo $x; } |
Then style it including current distinctions and going to vertical accordion at 768px (first the css):
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | @media (max-width: 768px){ .aux-menu ul.sf-menu > li { float: none; } .aux-menu ul.sf-menu > li:hover ul.non-mega-sub-menu { opacity: 1 } .aux-menu ul.sf-menu ul.non-mega-sub-menu { position: relative; -webkit-transition: height 0.5s, display 0.5s, opacity 0.5s; transition: height 0.5s, display 0.5s, opacity 0.5s; overflow: hidden; display: block!important; opacity: 0 } .aux-menu ul.sf-menu > li > button, .aux-menu > div { text-align: center!important; } } .aux-menu > div > ul { display: inline-block; text-align: left; } .aux-menu ul.sf-menu > li > button { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #ffffff; border: none; border-radius: 0; cursor: text; display: block; text-transform: none; width: 100%; } .aux-menu ul ul { background: #666d70; } .aux-menu .sf-menu ul.sub-menu .menu-btn { color: #ffffff; /*font-size: 18px*/ } .aux-menu ul.sf-menu > li.current > button, .aux-menu ul.sf-menu > li > button:hover, .aux-menu .sf-menu ul.sub-menu .menu-btn:hover { color: #000000 } |
and the jquery:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | jQuery(document).ready(function($){ $('.aux-menu ul.sf-menu ul.non-mega-sub-menu').each(function(){ $this = $(this); $this.data('height', $this.height()); }); /* Put any theme-specific JS here... */ var aux_adjust = function() { if($window_width < 768 && $('.aux-menu').length > 0){ $('.aux-menu ul.sf-menu ul.non-mega-sub-menu').css('height', 0); $('.aux-menu .level-1').click(function(){ $height = $(this).find('.non-mega-sub-menu').data('height'); $(this).find('.non-mega-sub-menu').css({'height':$height + 'px', 'opacity': 1}); $(this).siblings().find('.non-mega-sub-menu').css({'height':0, 'opacity': 0}); }); } }; $(window).load(aux_adjust); $(window).resize(aux_adjust); }); |