Tabbed Navigation in WordPress Themes

One of the neater trends that we’re seeing in WordPress themes is that we’re able to introduce tabbed content into a single page when leveraging front-end frameworks – like Bootstrap or Foundation – so you can load up all of the content in a single request and not have to use outdated elements like iframe.

For example, say that you have an index template like this:

  • The template includes the usual header information
  • There’s a content area that’s composed of tabbed navigation (where each tab is a menu item)
  • When the user clicks on a menu item, it brings the corresponding content to the activate state and hides the other content
  • It then includes whatever other widgetized areas and footer content necessary for completing the page

It’s pretty cool when it’s executed correctly. Though I’m not saying I have the definitive way to go about doing this in WordPress, here’s what I’ve found to be most effective.

Tabbed Navigation in WordPress

The general purpose of this post is not to provide code that you can copy and paste into your particular project (not that I’m a fan of doing that anyway), but to demonstrate several principles at work each of which are applicable regardless of the front-end framework with which you’re working.

So although this code may look differently depending on how you’re building your front-end, the general approach should work just as well across frameworks.

1. Get The Menu Items in Order

The first thing that we need to do is to grab the menu items from the menu location as defined in the theme. In our case, we’re looking for the pages-menu.

They key thing to note above the code above is that we’re setting up an array and pushing the ID of each menu item into an index of that array.

2. Render The Menu Items

Next, we need to use the previously defined function in order to grab the collection of menu items and create a list of menu items that correspond to the menu items that are defined in the menus in the WordPress dashboard.

Here, I’m using a definition list; however, you may also use an unordered list or any other type of element as long as you have a way to create the tab effect for your

3. Get The Content in Menu Order

Finally, we need to be able to display all of the content in the same order that the menu items are displayed. Luckily, WP_Query makes this trivially easy:

Essentially, we’re grabbing all of the page content that corresponds to the menus that have been displayed in the tabs that will render above the content.

4. Render The Content When Its Tab is Clicked

At this point, it’s a matter of making sure that whenever a tab is clicked that it’s corresponding content element is displayed. This can be achieved by using a combination of class names, JavaScript, and CSS, or it can be done by leveraging the classnames and functionality offered by the features of your framework of choice.

There Are Alternatives

As with anything in programming, there are always alternatives especially depending on the framework that you’re opting to use to drive the front-end of your site.

But the principles still remain the same:

  1. Grab the menu items in the order they’re configured in the dashboard
  2. Render them out in a list that corresponds to tabs
  3. Grab the content that corresponds to each menu item
  4. Render the content out that corresponds to their menu item
  5. Toggle the display of content based on the tab that’s clicked

Whether or not your code looks exactly like what’s above – and it likely won’t – the general flow of control is the same.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.