How to show child pages as tabs

In this post I will talk about how to view child pages as tabs in WordPress. We have several plugins where different tabs need to be linked directly from WordPress.org.

Readers don’t like to click and search for content. If you don’t serve what people are searching for, they will leave. One example is our FAQ page for the plugin. We weren’t satisfied with JavaScript solutions where people were sent to the main page of our SF Bootstrap Menu plugin and needed to find the FAQ tab themselves.

No plugin satisfied our criterias, so we decided that the easiest solution would be to make a two-page template in our WordPress theme “SF Parent”: a parent-tab page and a child-tab page.

The idea is that the parent page will have all the code for both parent page and all the tabs, while child pages will tell the parent page what tab to show.

Here is a live example of the solution. All tabs are clickable.

Child page Template

As the parent page will have all the code, the content of the child page template will be very simple:

• Get parent page ID
• Include parent page template

PHP example of the child page template:

// Defines active tab
$active_page = get_the_ID();

// Get parent page info
$parent = $post->post_parent;

// Include parent page template into current page
include( locate_template( 'parent-tab.php' ) );

Parent page Template

The parent page will have all the code so we start making it like any other page template. You can copy it from page.php in your theme directory:

<div class="container">
	<div class="content">
		//...content
	</div>
	<div>
	   <?php get_sidebar(); ?>
	</div>
</div>

Now, inside the parent page template we will use the data send by the child page: $active_page and $parent.

First, we need to find whether the calling page is a child page or a parent page itself:

if(!isset($parent)) {
	$parent = $post->ID;
}

Now, we retrieve and echo the title and the content of the parent page with all HTML formatting:

$content_post = get_post($parent);
$title = $content_post->post_title;

if($title) {
?>
<h1><?php echo $title; ?></h1>
<?php
}

$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
echo $content;

Next, we get the child pages and make tabs if there are some:

$mypages = get_pages( array( 'child_of' => $parent, 'sort_column' => 'menu_order', 'sort_order' => 'desc' ) );

if(count($mypages) > 0) {
   ///show tabs here
}

If there are child pages to show as tabs, we will draw the tabs first:

<ul class="nav nav-tabs">
<?php
	$counter = 0;
	foreach( $mypages as $page ) {	
				
		//show first page as active if no child page is chosen
		if(!isset($active_page) && $counter <1) {
			$active_page = $page->ID;
		}
		
		//show the chosen child page as active
		if($active_page == $page->ID) {
			$page_content_to_show = $page;
		?>
		<li role="presentation" class="active"><a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a></li>					
		<?php
		} else {
		?>
		<li role="presentation"><a href="<?php echo get_page_link( $page->ID ); ?>" ><?php echo $page->post_title; ?></a></li>
		<?php
		}
		
		$counter++;
	}
?>
</ul>

We need the $counter variable to know what child page to show as active. If no child page is chosen as the active one, the first one will be chosen.

As for CSS for the tabs we are using Bootstrap 3.0 framework and class="nav nav-tabs".

In the end we show the content of the active child page:

if(!empty($page_content_to_show)) { 			
	$child_content = $page_content_to_show->post_content;
	$child_content = apply_filters('the_content', $child_content);
	
	echo $child_content; 
	
	$page_content_to_show = "";
}

That’s all. Enjoy!