This tutorial will help you setup a custom page template with jQuery ui tabs setup as the main content area.
There are lots of plugins available that allow tabbed content areas in your posts or pages, but they are all a bit bloated to me. The jQuery that’s included in WP already has tabs built in, so why load extra stuff?
This tutorial gives you the basics of setting up a page template with tabs. From here, you can customize however you’d like. You can put ACF fields in your tabs, or shortcodes from other plugins like Easy Digital Downloads or WooCommerce for account and purchase history.
UPDATE: Once you get your template setup, view Part 2 to learn how to load content with ajax in your tabs.
UPDATE 2: If you are using ACF Pro, I built a nice little plugin to have nested tabs with a few great settings. Check out ACF Tabbed Content plugin on GitHub.
Create the page template
Create a file in your Genesis child theme called something like page_tabs.php.
At the top of the file you must include the Template Name tag in order for WordPress to recognize it as a template.
/**
* This file adds the tab template to your.
*
* @author Mike Hemberger - @JiveDig
* @link http://thestizmedia.com
* @package Genesis child theme
*
* Template Name: Tabs
*/
The final code will be in a snippet later in the post, so don’t worry about copying it yet unless you are trying to follow along part by part.
Setup tabbed content markup
jQuery tabs require a div wrapped around everything in order for the javascript to target it correctly. We will remove the default content from our template, create the tab markup and put the page content into the first tab. In your template you can remove the default content altogether, or put it before/after the tabs… whatever you want to do.
We use an unordered list to create the tabs themselves. Each list item has an anchor link that calls a specific div ID.
It’s important that you make sure your href’s are calling the correct div ID in the content area.
The .tsm-tab-content div is only there for styling later on, it’s not needed to make things work. Inside of you content divs can be anything you’d like. The tab world is at your fingertips!
Load the javascript
Next we need to load our tiny javascript file and make sure we include jquery-tab-ui in the process.
First, create a js file in your child theme. I call mine tsm-tabs.js. Put it somewhere organized, like in /child-theme/assets/js/ or just /child-theme/js/. If you’re using a Studiopress child theme there may already be a /js/ directory in the theme.
Inside that file is only a few lines of code. The only thing you need to do is make sure the div ID is the same as the main wrapper div in our page template. The content of the js file is as follows…
Now we need to enqueue the file we just created. We will make sure jQuery loads the tab files, and load it all in the footer. Here is the code to load our javascript file.
Put in your content
That’s all there is too it.
Put your content right in your template file, or use something like Advanced Custom Fields to create fields for your tab contents.
The Final Code
Once the template is setup, create a page inside WordPress and choose your new template for your page in the sidebar select box.
Here is the final code for our template with some dummy content in there.
Happy coding!
Here is some basic CSS to match the demo video.. it should be a good starting point for you.
Another great tutorial! Every time I read one of these, I want to dream up a reason to implement it right away. I really like the idea of creating a page template that uses custom fields to populate the tabs.
Thanks Dorian! Yes this one is great front end user profiles or specific custom post type stuff where there is a lot of fields and a lot of data that you need to keep organized on the post.
Quick question – trying to implement this on a site that has the Genesis Tabs plugin installed (used on a different page). It’s applying styles to the tabs on my nice new page template, even with Carrie’s Genesis Style Trump plugin installed. Do you have an approach you would recommend for this situation?
Disregard previous comment – I think I’ve figured out all of the places in the plugin’s CSS that were overriding the theme’s stylesheet.
Great tut, thanks! This will come in handy for a few sites I’m working on. Quick question, how might this be modified to allow for easy printing of the individual tabs is a user selects to print these pages?
Hey Craig, I’m not sure of the best solution here. I would assume it would require javascript printing only the contents of each tab’s specific ID. Something like this: http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div
In my example it would target #tab_2, and #tab_3, etc…
I’m no expert in print stuff or JS though, so I can’t help much more than that!
Awesome info thank you! I love the Genesis community so much there is such good content out there for everyone. Question: Do you have to hard-code the page tabs in php? I plan on using this for my own site so it’s not a big deal, but I’m thinking if I wanted to create something like this for the future for clients to modify….any thoughts on that? Again thanks for the great info!
Thanks Chrissy… best bet IMO would be to use something like Advanced Custom Fields or CMB2 to put metaboxes on the page you are editing. That way you can add whatever content you want via the WP backend.
What would be good to see is this tutorial use ACF Pro for content blocks. If content is in the content fields of ACF for a page, then it adds a tab to the content and renders out the ACF field in the new tab.
A scenario will be for tutorials, the tabbed content could be video and another for files related to the post/page
Ciaran
Hey Ciaran, thanks for stopping by. You’re right, ACF is great to use in this situation… it’s basic the flow for ACF though.. just add the field group to your Page, and use get_field or get_post_meta inside the tab content to grab the data. Maybe if I get time i’ll add another tutorial with more detail.
Thanks!
Love this, thanks for posting it! . Question- I am trying to to put shortcode output in the tabs using do_shortcode and the tabs (after the first) are not accommodating the shortcode output. You can see it here: http://upssealbeach.com/209-2/ Any ideas? I’ve had this problem using shortcodes in tab plugins as well.
Not sure what’s going on. Can you paste your code in a Gist or snippi.com?
Off the top of my head, i’m guessing you may have to use output buffering in your shortcode.
Great tutorial! One question, is the content hardcoded with the template file or will it work on by inserting by adding the div class on the visual editor when creating a page or post?
Thanks Brooke! It technically could work in the editor, but you’d have to modify it a bit. And you’ll still need to enqueue the javascript file somehow.
How can I add this tabbed content to a section of my homepage? Thx!
The main stuff is all in tsm_do_tabbed_content() function. You can just use that function in your front-page.php template as-is. As long as you enqueue the js file there.
You could also make the whole thing a shortcode, but not sure if that would be worth it. You’d have to decide.
Hi jiv, look easy but, its too much for me. btw, can you make it to plugin?
sorry my english bad im from indonesia.
Hi Karjaw. Each use of tabs is so different, not worth a plugin IMO. There are a bunch of tab plugins in the repo though, one of those may work for you.
Thanks for the great guide!
I’d like to show multiple posts from each category/tag as shown here: https://www.beach.com/
What exactly should I do to achieve that functionality?
Mike
Great tutorial. Currently have this working nicely but wondered if there’s a way to point to one of the tabs with a distinct url? I’ve tried but it always loads on the opening tab.
Sample: http://myurl/page/#tabs-2/ will always revert to /page/#tabs-1.
Thanks
Hey Scot, I don’t think jQuery Tabbed UI allows this out of the box. I actually just updated the tutorial with a link to a little plugin I built that uses ACF Pro to build nice tabbed groups. It may work for you. If not, it shows another script that I’ve been using lately that allows this. Check it out!