One of the nicest features of the latter versions of WordPress includes the custom menu system. Although people can always introduce too many areas in which custom menus can be introduced, the core feature and customization options make it possible to do some really cool stuff with custom menus.
Case in point: With many of the popular front end frameworks that are now available, such as Foundation and Bootstrap, it’s really easy to add tabbed navigation in WordPress in templates, widgets, and so on.
Though there are a number ways of to do this, one flexible way that I’ve used multiple times requires two things:
- A function for retrieving the post IDs for the post types contained in a custom menu
- An instance of `WP_Query`
At that point, all you need is the name of the menu for which you want to retrieve the post IDs.
Adding Tabbed Navigation in WordPress
To give a concrete example, here’s a look at a project that I’m currently working on. Obviously the design leaves much to be desired, but you get the idea: There’s a custom menu that’s represented by the tabs, and the content for each page is rendered below the tabbed navigation.
The design leaves a bit to be desired, but the functionality is in place.
Notice in the shot above, there are four menu items with the About menu being the one that is selected and the content of the page being displayed below it.
If you were to click on Home, Sample Page, or Sample Video, then you’d see the content for each of those places in the content area directly beneath the tabs.
Nothing surprising – this is how tabbed navigation works, right?
Retrieving the Post IDs
In order to retrieve the IDs for the post IDs associated with a given custom menu, I use a single function that accepts the name of the menu for which I want to retrieve the information.
See the following gist:
In the function, we could check to see if the $post_ids array is empty, but since we’re initializing an empty array, we could setup a conditional once the function has returned.
After this, we need to setup a query to retrieve the post content.
Our Custom Query
Once we have the array of post IDs, it’s a relatively standard setup of WP_Query in order to retrieve the information. The only thing that you’ll notice in the gist I’ve opted to ignore sticky posts. This may or may not be something you want to do depending on your implementation.
Here, I’ve obviously left out the markup because depending on the front end framework that you opt to use, your markup may vary. Whatever the case, though, you’ll have all of the post content returned in the order of the menus.
Additionally, you can see that I’m querying for several post types – this, again, is something that you may or may not need to do depending on your implementation.
As Usual, YMMV
As with most things in development, this specific implementation may not be the most ideal solution for you, but it should demonstrate the general idea that’s needed in order to retrieve post content for tabbed navigation in WordPress.
Regardless of how you opt to approach it, the primary idea is to retrieve the post IDs for the custom menu, and then query for the post content based on those IDs.
Lookin’ good, Tom. ;-)
Still needs a bit of design work :).
Nice solution!
I just wonder if these kind of implementations, where other pages are ‘included’ into one parent page, are a good practice for SEO… What do you think of duplicate content issues? And do you have an ideo on how to do that properly? Thanks again for your interesting articles Tom!
I’m not an SEO expert so know that based on what I’m about to say; however, it’s not much different than any given blog page where you have a listing of the blogs over a period of time.
The only difference is that the content is being dynamically hidden by JavaScript. If you were to disable JavaScript (which I’m not a fan of doing) or you were to just look at the markup, it wouldn’t be all together different than a standard blog.
That said, the theme on which I’m working is not a standard blog theme, so SEO isn’t the main priority as it relates to the traditional discussions around blogs and SEO.
Yes, I understand ;) Keep writing, I really enjoy this blog!
Regards
Thank you, thank you, thank you and thank you.
You know that feeling when you have worked hard and thinking too complicated and booom, Tom rescues everything.
In my case I wanted to have loop in the same order as menu items so I used ‘orderby’ => ‘post__in’.
I just want to know that where do i have to put this whole code… i mean do i have to put it in function.php or some where else and is yes then where in it???
Sorry I am new in WordPress, Migrated from Blogger :D