[WordPress] A strategy for introducing tabbed navigation with multiple pages into a single page.

1-has-menu-pages.php

<?php

/**
 * @return	   TRUE if the theme has a menu in the 'Pages' location; FALSE, otherwise.
 * @package    Acme
 */
function acme_has_pages_menu() {

	$locations = get_nav_menu_locations();
	return ! empty( $locations['pages-menu'] );

}

2-get-post-ids.php

<?php

/**
 * Retrieves a listing of the IDs for the posts that are set to display on the homepage.
 *
 * @return     array    $post_ids    A listing of the post IDs that are contained in the Pages menu.
 * @package    Acme
 */
function acme_get_homepage_posts() {

	$locations = get_nav_menu_locations();

	// Grab the menu and the menu items
	$menu = wp_get_nav_menu_object( $locations['pages-menu'] );
	$menu_items = wp_get_nav_menu_items( $menu->term_id );

	// Grab all of the post IDs that are represented in this menu
	$post_ids = array();
	foreach( $menu_items as $post ) {
		$post_ids[] = $post->object_id;
	}

	return $post_ids;

}

3-create-html-tabs.php

<?php

/**
 * Creates the HTML element that is used to render the tabbed navigation
 * of the posts in the 'Pages' menu.
 *
 * @return     string    $html    The HTML for the tabbed navigation of the homepage.
 * @package    Acme
 */
function acme_get_tabbed_navigation() {

	// Get all of the IDs for the posts in the menu
	$post_ids = acme_get_homepage_posts();
	$count = 1;

	// Start the the data list for the tabs
	$html = '<dl class="tabs" data-tab>';

	// Iterate through the collection of post IDs to build the menu.
	foreach( $post_ids as $id ) {

		$html .= ( 1 === $count ) ? '<dd class="active">' : '<dd>';
			$html .= '<a href="#panel2-' . $count . '">';
				$html .= get_the_title( $id );
			$html .= '</a>';
		$html .= '</dd>';

		// Iterate the counter so we know what's active
		$count++;

	}

	$html .= '</dl><!-- .tabs -->';

	return $html;

}

4-get-page-content.php

<?php

/**
 * Retrieves and creates the HTML used to render the pages for the tabbed navigation
 * area of the homepage.
 *
 * @return     The HTML for each of the posts that's rendered in the 'Pages' menu
 * @package    Acme
 */
function acme_get_tabbed_content() {

	$args = array(
		'post_type'           => array( 'post', 'page' ),
		'post__in'            => acme_get_homepage_posts(),
		'post_status'         => 'publish',
		'ignore_sticky_posts' => 1,
		'orderby'             => 'menu_order'
	);
	$my_query = new WP_Query( $args );

	if ( $my_query->have_posts() ) {

		$html = '';
		$count = 1;

		while( $my_query->have_posts() ) {
			$my_query->the_post();

			$html .= ( 1 === $count ) ? '<div class="content panel active" id="panel2-' . $count . '">' : '<div class="content panel" id="panel2-' . $count . '">';
				$html .= get_the_content();
			$html .= '</div>';

			$count++;
		}
		wp_reset_postdata();
	}

	return $html;

}

5-example-template.php

<?php if ( acme_has_pages_menu() ) { ?>
	<div id="pages" class="row border">

		<div id="pages-menu-container" class="large-8 columns">
			<?php echo acme_get_tabbed_navigation(); ?>
		</div><!-- #pages-menu-container -->

		<div class="tabs-content large-8 columns">
			<?php echo acme_get_tabbed_content(); ?>
		</div><!-- .tabs-content -->

	</div><!-- #pages -->
<?php } ?>