Last active
August 29, 2015 14:16
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 »</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 »</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 »</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