Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[WordPress] A strategy for introducing tabbed navigation with multiple pages into a single page.
<?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'] );
}
<?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;
}
<?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;
}
<?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;
}
<?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 } ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment