Simple WordPress Tabs With Custom Post Types

Many custom themes use tabs in their design; they not just save you space but they offer a more convenient real-world alternative to opening up a new window.

Similarly, like the idea of putting tabs in the drawer of a file cabinet, they improve content organization and (since most people know how to sort through a file cabinet) tabs make it simple for the user to achieve your specified call to action..

In this tutorial you will learn how to create tabs with WordPress using custom post types.

Want to see a live demo? Click below!

View Live Demo

If you are interested in knowing how I build my tabs, continue reading. If you want to do even more with WordPress custom post types, check out one of my other tutorials: How To Build A Slider With WordPress Custom Post Types.

Briefly, custom post types is just another way to edit and store information with WordPress, very similar to or almost the same as Post and Pages.

Probably the biggest benefit of custom post types is that they make it super simple for non-technical folks to use the WordPress admin to edit their content. Hence, the first thing we need to do is make a custom post type.

We can add a custom post type to any theme by updating our functions.php file.

You can access this file either via cPanel or simply through WordPress.

Creating the Tabs Post Type

To make our Tabs custom post type, lets open our functions.php file. Copy the following code and paste it in a new line under the original.

/* Tabs */
function my_post_type_tabs() {
	register_post_type( 'tabs',
                array( 
				'label' => __('Tabs'), 
				'singular_label' => __('Tabs', 'my_framework'),
				'_builtin' => false,
				'exclude_from_search' => true, // Exclude from Search Results
				'capability_type' => 'page',
				'public' => true, 
				'show_ui' => true,
				'show_in_nav_menus' => false,
				'rewrite' => array(
					'slug' => 'tab-view',
					'with_front' => FALSE,
				),
				'query_var' => "tabs", // This goes to the WP_Query schema
				'menu_icon' => get_template_directory_uri() . '/inc/images/slides.png',
				'supports' => array(
						'title',
						'custom-fields',
						'editor',
            					'thumbnail')
					) 
				);
}

add_action('init', 'my_post_type_tabs');

Setting up the Tabs

If all went well, you should see a new menu item in your WordPress admin called Tabs. Here you can add/remove/edit tab items (just as you would normal posts).

1. To set up a new tab, login to your WordPress admin and create a new tab by clicking Tabs > Add New.
2. Make sure to name your tab then click Update or Publish. The name you give will be displayed in the tab title.
3. To make another tab, follow the same steps as above; make as many tabs as you wish.

Adding just a little touch of markup

First things first, we need to write the markup that our tabs will use.

In order to do that, I want you to make a new file tabs.php or my-tabs.php etc and place it in your theme directory.

After you’ve created the tabs.php file, open it up, and copy and paste this code into it.

All this is, is just a little HTML/CSS sprinkled with some WordPress code to help us fetch the requested post type (i.e post_type=tabs).

<div id="tabs_wrapper">
	<div id="tabs_container">
		<ul id="tabs">
		<?php $posts_counter = 0; ?>
         <?php
		query_posts("post_type=tabs&posts_per_page=-1&post_status=publish");
		while ( have_posts() ) : the_post(); $posts_counter++;
	?>
  
	
	<li class="<?php if($posts_counter == 1){echo 'active';} ?>"><a href="#tab<?php echo $posts_counter ?>"> <?php echo get_the_title(); ?> </a></li>
	  <?php endwhile; ?>
  <?php wp_reset_query();?>
    </ul>
</div>
	<div id="tabs_content_container">
<?php $posts_counter = 0; ?>
<?php
	query_posts("post_type=tabs&posts_per_page=-1&post_status=publish");
	while ( have_posts() ) : the_post(); $posts_counter++;
?>

	<?php
		$url = get_post_custom_values("tabs-url");
	?>


        <div id="tab<?php echo $posts_counter ?>" class="tab_content" style="<?php if($posts_counter == 1){echo 'display: block;';} ?>"><?php the_content(); ?><p><a href="<?php if($url!=""){ echo $url[0]; } ?>">Read more..</a></p></div>
<?php endwhile; ?>
<?php wp_reset_query();?>
	</div>
</div>

Next, we add some CSS to see what the tabs will look like after we’re done. Note that we’re adding this in the head section of our HTML just for demo purposes.

In a real-world project – always separate CSS and Javascript from the markup, and refer it from external files. Likewise, remember to compress your live stylesheet and keep an uncompressed backup.

1 – copy this code. 2 – paste it right before the closing head tag in your theme’s header.php file

<script>
#tabs_wrapper {
    padding: 5px 0 4px 80px;
    
    width: 822px;
}
#tabs_container {
    border-bottom: 1px solid #ccc;
}
#tabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font: 1em arial;
}
#tabs li {
    display: inline;
    padding-right:4px;
}
#tabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#tabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#tabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#tabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
 
#tabs_content_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
    width: 800px;
}
.tab_content {
    display: none;
}

</script>

Remember, this is only if you want to make your tabs look like my demo – then again, you could use your own HTML, or somebody else’s, to make your custom post type tabs look however you want them to look.

As I mentioned in my previous post, you can Convert Any Website to WordPress (I don’t know why I’m capitalizing everything) because with WordPress the core code is separate from the rest of the website stuff. And, so the same is true of custom post types, you can add your own markup and WordPress won’t get in the way.

Add some flare to your tabs

Lastly, we’ll give our tabs some, how you say, “finezza” with a little jQuery style on a click action.

Make a new file myScript.js and place it in your theme’s /wp-content/themes/my_theme/js/ directory.

After you’ve created the myScript.js file, open it up, and copy and paste this code into it. This code is really simple, and comes courtesy of Anze Stokelj. Thank you!

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $("#tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');
 
        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
 
        //  Hide all tab content
        $(".tab_content").hide();
 
        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");
 
        //  Show the selected tab content
        $(selected_tab).fadeIn();
 
        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

Loading your script

The next thing we need to do is load the script. The easiest way to load our script is to place the wp_enqueue_script where ever you want it on your page.

<?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>  
    <?php wp_head(); ?> 

Easy enough, just not to elegant. A better way, is to use your function.php file to load your scripts. To do this you need to make a custom function. Then use add_action to initialize your function.

<?php   
    function load_my_scripts() {  
        wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0', true );  
        wp_enqueue_script('myscript');  
    }  
    add_action('init', 'load_my_scripts');  
    ?> 

Displaying your tabs on your page

Finally, to display our tabs post type: 1 – Open your header.php file 2 – Copy this code and paste it under the main div tag or wherever you’d like your tabs to show on your blog.

<?php if(is_front_page()):?> 
	<?php include_once(TEMPLATEPATH . '/tabs.php'); ?>
	<?php endif; ?>

Here on line 1, the is_front_page() conditional tag checks to see if this is the main page of your blog, if so then line 2 includes our tabs.php file which contains the markup to display our tabs post type.

You actually don’t need the conditional tag, I just threw that in there for my purposes. You could add just the file without the conditional tag.

And that’s all there is to it. Hope you like it.