Skip to content

Instantly share code, notes, and snippets.

@crondeau
Last active August 29, 2015 14:16
Show Gist options
  • Save crondeau/175b720e5f00408ad5ef to your computer and use it in GitHub Desktop.
Save crondeau/175b720e5f00408ad5ef to your computer and use it in GitHub Desktop.
This code snippet pulls posts from three different categories and sets them up as tabs.
/* Basic styles for tabs and tabbed content. */
/* Tabs */
.tab {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.tab li {
float: left;
margin: 0;
}
.tab li a {
display: block;
color: #000;
font-size: 1em;
padding: 5px 20px;
margin: 0px;
text-decoration: none;
}
.tab li.active {
background-color: #000;
}
.tab li.active a {
color: #fff;
}
.tab-container {
display: none;
}
.tab-container.active {
display:block;
}
.flex-video{
position: relative;
padding-top: emCalc(25px);
padding-bottom: 67.5%;
height: 0;
margin-bottom: emCalc(16px);
overflow: hidden;
}
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
/* left and right columns */
.tabcontent-left {
float: left;
padding-right: 2%%;
width: 28%;
}
.tabcontent-right {
float: left;
width: 70%;
}
<div id="tabbed-content">
<?php
/* Set up tabs at the top using your three categories.
* I've created three posts in News, Photos and Videos categories
* Both news and photos have featured images.
* The videos have a custom field (video) with the youtube embed code.
*
*/
?>
<ul class="tab">
<li><a class="tab-switch" data-tab-container="tab-news" href="#tab-news">NEWS</a></li>
<li><a class="tab-switch" data-tab-container="tab-videos" href="#tab-videos">VIDEOS</a></li>
<li><a class="tab-switch" data-tab-container="tab-photos" href="#tab-photos">PHOTOS</a></li>
</ul>
<?php
/*
* Next you want to create three separate loops for each category
*/
?>
<div id="#tab-news" class="tab-container tab-news active">
<?php
$news = get_posts( array(
'numberposts' => 3,
'category_name' => 'News'
) );
if ( $news ) :
foreach( (array) $news as $post ) {
setup_postdata( $post ); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="tabcontent-left">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'featured-image' ); ?></a>
<?php endif; ?>
</div>
<div class="tabcontent-right">
<?php the_excerpt(); ?>
</div>
</div>
<?php }
endif;
wp_reset_postdata(); ?>
<p class="view-more"><a href="<?php echo esc_url( home_url() ); ?>/category/news/">View More &raquo;</a></p>
</div>
<div id="#tab-videos" class="tab-container tab-videos">
<?php
$videos = get_posts( array(
'numberposts' => 3,
'category_name' => 'Videos'
) );
if ( $videos ) :
foreach( (array) $videos as $post ) {
setup_postdata( $post ); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="tabcontent-left flexvideo">
<?php $key="video"; echo get_post_meta($post->ID, $key, true);?>
</div>
<div class="tabcontent-right">
<?php the_excerpt(); ?>
</div>
</div>
<?php }
endif;
wp_reset_postdata(); ?>
<p class="view-more"><a href="<?php echo esc_url( home_url() ); ?>/category/videos/">View More &raquo;</a></p>
</div>
<div id="#tab-photos" class="tab-container tab-photos">
<?php
$photos = get_posts( array(
'numberposts' => 3,
'category_name' => 'Photos'
) );
if ( $photos ) :
foreach( (array) $photos as $post ) {
setup_postdata( $post ); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="tabcontent-left">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'featured-image' ); ?></a>
<?php endif; ?>
</div>
<div class="tabcontent-right">
<?php the_excerpt(); ?>
</div>
</div>
<?php }
endif;
wp_reset_postdata(); ?>
<p class="view-more"><a href="<?php echo esc_url( home_url() ); ?>/category/photos/">View More &raquo;</a></p>
</div>
</div><!-- #tab-content -->
<?php
/* Js needed to make the tabs work.
* You could put this into an external file and enqueue it.
*/
?>
<script>
jQuery(document).ready(function($){
$('#tabbed-content').on('click','.tab-switch',function(e){
e.preventDefault();
$(this).parent().addClass('active').siblings().removeClass('active');
var tabContent = "." + $(this).attr('data-tab-container');
console.log(tabContent);
$('.tab-container').removeClass('active');
$('.tab-container' + tabContent).addClass('active');
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment