Adding Tabs To Rockafella Theme

Hi there!

My friend Philip from Oklahoma asked me a question about how to add some information tab on the single rooms page. By default there is a tab displayed on the page with the information about the room.

Screen Shot 2014-06-17 at 14.06.56

The question now is how to add another one?

On this tutorial i will share to you how to add another tab and also add some meta information as the tab content.

Step#1

At this step you have to open a file named content-room.php. You can find this file via FTP at directory: wp-content > themes > rockafella > templates.

Find out this code:

<ul class="room-information-tab clearfix">
    <li class="active"><a href="#room-overview" data-toggle="tab"><?php _e('Room Overview','colabsthemes');?></a></li>
</ul>

That code is your tab navigation. If you want to add another one, modify that code become:

<ul class="room-information-tab clearfix">
    <li class="active"><a href="#room-overview" data-toggle="tab"><?php _e('Room Overview','colabsthemes');?></a></li>

<!-- this is the new code -->
<li><a href="#room-test" data-toggle="tab"><?php _e('Room Test','colabsthemes');?></a></li>
</ul>

At the new code, i remove the class active, so the default tab active is your room overview. If you want to change the active tab, feel free to move the active class to any li tag you want. And also don’t forget about the anchor target.

At that code, the anchor target is #room-test, so it will looking for a layer with id room-test.

Step#2

You already finish adding the tab navigation, now what you have to do is to add the new tab content. From the example above, we have to create a new layer with id room-test.

Still at the same file (content-room.php), find out this code:

<div class="tab-content">
	<div class="tab-pane active" id="room-overview">

That code is an opening layer, just find out that code and you are now ready to add another tab content. Edit that code become:

<div class="tab-content">

<!-- this is the new content -->
<div class="tab-pane" id="room-test">
<h1>YOUR NEW CONTENT HERE</h1>
</div>
<!-- end -->
	<div class="tab-pane active" id="room-overview">

And done! your tab should working good now. At those code, i add a new layer with class tab-pane and remove the class active. Also, i create a new ID for that layer, room test.

At the next part, we will make something for the new layer content (check at the code above, i write your new content here).

Step#3

At this third step you have to create a meta data for your room post type.

Untitled

Open a file named theme-options.php. You can find this file via FTP at directory: wp-content > themes > rockafella > includes.

Find out this code:

$colabs_metabox_settings['post'] = array(
											'id' => 'colabsthemes-settings',
											'title' => 'ColorLabs' . __( ' Image/Video Settings', 'colabsthemes' ),
											'callback' => 'colabsthemes_metabox_create',
											'page' => 'post',
											"class" => '',
											'context' => 'normal',
											'priority' => 'high',
											'callback_args' => ''
											);

Once you find out that code, add this one just after it:

$colabs_metabox_settings['room'] = array(
											'id' => 'colabsthemes-settings',
											'title' => 'ColorLabs' . __( ' Room New Field', 'colabsthemes' ),
											'callback' => 'colabsthemes_metabox_create',
											'page' => 'room',
											"class" => '',
											'context' => 'normal',
											'priority' => 'high',
											'callback_args' => ''
											);			

The first step already complete. Just after the code above, put this one:

if ( ( 'room' == get_post_type() ) || ( !get_post_type() ) ) {
	 $colabs_metaboxes[] = array (  "name"  => $shortname."_room_new_text",
											"std"  => "",
											"label" => "Rooms New Text",
											"class" => '',
											"type" => "textarea",
											"class" => "",
											"desc" => __("Enter new text on this box", "colabsthemes"));    
}	

And done! Your new post meta field already live and can be used.

Step#4

At this last type, open again the previous file (content-room.php). Remember that we just add some text:

<h1>YOUR NEW CODE HERE</h1>

Remove that code and put this one:

<?php echo get_post_meta($post->ID, 'colabs_room_new_text', true);?>

And that’s it! Have fun!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s