Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin
Created December 19, 2014 03:10
Embed
What would you like to do?
[WordPress] An example for how to setup tabbed navigation within a single WordPress template.
<?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-' . $id . '">';
$html .= get_the_title( $id );
$html .= '</a>';
$html .= '</dd>';
$count++;
}
$html .= '</dl><!-- .tabs -->';
return $html;
}
l<?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( 'page' ),
'post__in' => acme_get_homepage_posts(),
'post_status' => 'publish',
'ignore_sticky_posts' => 1,
'orderby' => 'menu_order',
'order' => 'asc'
);
$my_query = new WP_Query( $args );
if ( $my_query->have_posts() ) {
$html = '';
while( $my_query->have_posts() ) {
$my_query->the_post();
$html .= '<div class="content panel" id="panel2-' . get_the_ID() . '">';
$html .= get_the_content();
$html .= '</div><!-- .content.panel -->';
}
wp_reset_postdata();
}
return $html;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment