Skip to content

Instantly share code, notes, and snippets.

@Sjouw
Created December 18, 2014 16:02
Show Gist options
  • Save Sjouw/b9672b2e2d5566245fc3 to your computer and use it in GitHub Desktop.
Save Sjouw/b9672b2e2d5566245fc3 to your computer and use it in GitHub Desktop.
WordPress - Sidebar latest posts widget with toggle dropdown for small screens

Notes

This solution uses the responsiveNav (http://responsive-nav.com/) jQuery plugin to toggle the dropdown menu and make height CSS transitions available for dynamic menu's

<?php
// Get the poststype of the current post
$posttype = get_post_type();
$obj = get_post_type_object( $posttype );
$args = array (
'post_type' => $posttype,
'post_status' => 'publish',
'post_count' => 5
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) : ?>
<nav id="subnavi" class="widget">
<header class="widget-header">
<?php // We'll use this h3 for big screens ?>
<h3>
Latest <span class="posttype-name"><?php echo $obj->labels->name; ?></span>
</h3>
<?php // We'll use this h3 on small screens to toggle the dropdown menu ?>
<h3 id="subnavi-toggle">
Latest <span class="posttype-name"><?php echo $obj->labels->name; ?></span>
</h3>
</header>
<ul class="sub-menu">
<?php while ( $query->have_posts() ) :
$query->the_post();
$queried_object = get_queried_object();
if( $queried_object->ID == get_the_ID() ):
// Add active class if this is the current post
$class = 'current_page_item';
else:
// Add no class if this is not the current post
$class = '';
endif;
?>
<?php // print the list items with the correct classes ?>
<li<?php echo $class !='' ? ' class="' . $class . '"' : '';?>><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</nav>
<?php endif;
wp_reset_postdata();
?>
jQuery( document ).ready( function () {
'use strict';
// @plugin init: responsiveNav
if( 'function' === typeof responsiveNav ){
if (jQuery('#subnavi').length){
var navigation = responsiveNav( '.sub-menu', {
label: '',
customToggle: '#subnavi-toggle'
} );
}
}
});
#subnavi{
h3{
display:none; // Hide h3 for small screens
@media only screen and (min-width:860px){
display: block; // Show h3 for large screens
}
&#subnavi-toggle{
display:block; // Show h3 with toggle link for small screens
.js-nav-active &{
// Add styling for opened menu
}
@media only screen and (min-width:860px){
display: none; // Hide h3 with toggle link for large screens
}
}
}
ul.sub-menu { // styles needed for responsiveNav animation
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
&.opened {
max-height: 9999px;
}
@media only screen and (min-width:860px){
position: relative;
&.closed{
max-height: none;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment