How To Add Tabs To WordPress Posts and Pages

We’ve all seen them: those little tabs that show up at the tops of pages. When you click on one of the tabs it brings up new content but it doesn’t move you away from the current page you’re looking at.

adding-wordpress-tabs

You may even see a situation where the tabbed area is filled with other content such as videos, images and text. It’s kind of like having a second little website on your page, since users can click on the tab menu titles, moving from page to page, while still remaining on the same URL.

But how can you use them on your WordPress site? Read on to find out.

Why Would You Ever Consider Adding Tabs to Your WordPress Posts?

The short answer to this is that you save space by consolidating large portions of content on your site. This works particularly well when you don’t want to create a long page and force your users to keep scrolling down to learn more. We’ve all seen the FAQ pages that use accordion-style tabs to reveal new information that was once covered on a single page – using tabs isn’t dissimilar.

What are some other things you can use tabs for?

  • Displaying a media library with different categories
  • Featuring products (you could have Specs, Features and Review tabs)
  • Breaking up course content instead of cluttering a page with a huge list

The options are endless, but the point is to use tabs when you see that the content is too intimidating for the average person to start scrolling down and reading it. If you can picture readers getting lost quickly, consider incorporating tabs.

How Do You Incorporate Tabs on Your WordPress Posts?

Adding tabs to posts is fairly simple. You can often drop a few tabs right in the post and go about your business. However, inserting new content inside those tabs is where the fun part begins.

Step 1: Activate the Proper Plugin

Go to the backend of your WordPress site and click on the Plugins > Add New buttons. Search for the WordPress Post Tabs plugin in the plugin area. Install and activate the plugin.

Post Tabs

Step 2: Manage Your Tab Settings Before Implementing Them on Your Site

Go to Settings > WP Post Tabs.

WP Post Tab on the Left

This brings you to the Basic Settings page for the plugin. In theory, you can leave this completely as it is, but I like to change around some of the settings to make my tabs look more customized. I would recommend visiting this area at least once to understand what modification options are available for you. Who knows? You might hate the plugin until you change what the tabs look like.

To start, modify the Skin/Style if you want. I went with the default style, but you can choose from red, gray and simple gray. Pick your favorite, match it to your dashboard skin – you’re the only one who will be seeing it, and you can always change it later, so don’t stress about this one too much.

The Fade Effect option is fun to see the tabs sort of fade out when someone navigates away from them. The other options on this page all have question marks that explain exactly what each one does, so feel free to play around with these however much you want.

WordPress-Post-Tabs-Basic-Settings

I would recommend leaving the Open Tab Links in New Window box unchecked. You may even want to change what the navigation test looks like. They simply show Next >> and << Prev and the default options, but you can punch in anything you desire.

That’s not all for the Settings area. You’ll notice an option for disabling the resources on your posts and pages, but there’s really no reason to touch these settings. However, if you scroll down just a bit you’ll find some powerful settings to make your tabbed posts a little easier to implement.

Shortcodes and Misc

This basically explains that the plugin provides default shortcodes for dropping tabs and tab groups into your website. Write these down or copy them into a saved file to use for later. There is an easier way than just remembering them, but we’ll cover that a bit later. If you don’t think those default shortcodes are any good, change them to something you can remember a little easier.

Just keep in mind that you need to check the rest of your website to ensure that you weren’t using any of the older tab shortcodes. If you change the shortcodes, the older ones will not show anything until you modify them to reflect the new shortcodes. There’s also a Custom Styles field at the bottom of this Settings page, but we won’t go into that right now. Just remember that if you know CSS you can modify the tabs even further.

Click on the Save Changes button at the bottom of the page to proceed with this process.

Step 3: Drop the Tabs Area Into Your Posts

This is where the true functionality comes into play. Go to Posts > Add New.

WordPress-Post-Tabs-Posts-Add-New

Start your post just like you would any other blog post. Fill in the title field and type in whatever description you were thinking about. You can also complete all the other tasks required like checking off a category or typing in tags.

New Post

If you go to the top of the WordPress editor you can find the WordPress Post Tabs button, which looks like a little square and a green plus sign. Click on this to start incorporating tabs into your WordPress post.

Post Tabs Button

Enter the tab names, such as Overview, Features and Results. It seems tht you can type in as many tabs as you want. Click on the Insert button once complete.

WordPress-Post-Tabs-Names

This automatically creates a shortcode in your WordPress editor without you having to type in anything.

Tab Content

When you select the Preview button, it reveals the different tabs, which you can click on and see how they work in the single post. As you can see, the content is a little bit of text that they place in there for you. In order to change this content you have to go back to the WordPress editor and change what sits between the [wptab name=] and the [/wptab] shortcodes.

WordPress-Post-Tabs-Preview

Step 4: Drop in Your Favorite Content

Everything flies for the most part when inserting content in your tabs. For example, let’s say you need a video in one of the tabs. Just walk through the normal insertion process for a video, but make sure the cursor is between the specified shortcodes before inserting.

WordPress-Post-Tabs-Video-in-Tabs

Once you preview the content you should see everything like you would with a regular page or post. Try implementing other content like bold letters, image galleries, bullet points and more.

What If Your WordPress Theme Already Includes Tabs?

If you’re using one of the many WordPress themes that already has a page builder, then you probably already have tabs built-in so you can skip the plugin and start adding tabs right away using your theme. Most page builders include block or page elements for adding tabs, tours and accordions to your posts and pages. All you need to do is insert any of these options as you’re building your page.

For example, our Total WordPress Theme uses the Visual Composer to add styled tabs, tours and accordions to any post or page layout. When creating your custom layout, simply select the module to insert.

visual-composer-tabs

Then add your content, images and more to each tab, tour or accordion section. It’s that simple. When you’re done, just save your page and checkout your fully responsive tabs, tours and accordions!

visual-composer-tours-ex

Conclusion

Tabs are the ideal solution for showcasing features and descriptions for products. Think about how almost every e-commerce site displays a tabbed layout for the product pages. For example, you may be shopping for a computer and look at the Description tab, which explains the newest features and how the smallness can help with portability and the bright screen can help with watching videos. Then you may move to the Specs tab to view technical details like dimensions, weight, RAM, and more.

Tabs are for consolidating your information and making it easier for your users to move around, instead of forcing them to scroll for minutes or jump around from page to page. If you have any questions about how to incorporate tabs on your WordPress page, please feel free to share your thoughts in the comments section below!

Tom Ewer
Post Author: Tom Ewer

Tom Ewer is a professional blogger, longtime WordPress enthusiast and the founder of WordCandy.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. Karen Batista says:
    Brilliant! And to think I was just here wondering how I'd organize all the content of the "band profile" pages on my website about German music...of course, tabs! :D Thank you so much Tom!
  2. Michelle McGinnis says:
    You might also like Tabby responsive tabs. It doesn't have quite the same functionality but I really like how it handles responsiveness and it's maintained through the current release of WP: https://wordpress.org/plugins/tabby-responsive-tabs/ (I'm not affiliated in any way, I've just used it on a few sites. I've never used it's customizer / pro addons).
    • Kyla
      That looks like another great free tab option :) Thanks for recommending it!
      Admin
  3. nonin1211 says:
    Thanks a lot for this great post.. Its really helpful.
  4. I love to use Simple shortcode by Wpexplorer ;)
  5. Thanks for the tip, it really helps.
  6. Hi, You might also like : https://wordpress.org/plugins/tabsy/ . It's a free smart responsive tabs plugin for wordpress. Cheers!
  7. Shafiuddin says:
    Hello,I Want to create Different Tabs for Images like Indian Startups on One Tab and American Startups on other tab [Only Images] Is there any plugin for that.This plugin can be used on text only
    • Kyla
      When I check the WordPress Post Tabs plugin page, it looks like you can insert anything you want into the shortcode - images, links & videos included! :-) And if you're using a theme like Total that comes with the Visual Composer plugin, the tabs & tours modules also support images. Although, since it sounds to me like you're creating image grids or galleries it would probably be better to use a theme with filterable portfolios for your images (plus then you can add information for all of your images!).
      Admin
  8. My theme has tabs function built in, but can i use this post tabs plugin to add tabs inside of tabs?
    • Kyla
      Well you really shouldn't put tabs inside of tabs... but if you really must you can probably do it by nesting the tab shortcode included with your theme (but i really don't recommend this!)
      Admin
  9. Voogarix says:
    Hi. thanks for good tutorial. but i need little bit different way to show tabs. i use wpmovilelibrary plugin and gridthemeresponsive free theme.. i want to make movie website. so i need the code to add my template file to show TAB on each post and in each tabs show different custom fields... for example TAb with 3 buttons and in each button embed players. can you give some suggestion?
    • AJ Clarke says:
      AJ Clarke
      Hi, What you need isn't a shortcode then. You should customize your theme via a child theme to manually include the HTML needed for these tabs. While you could use a plugin, it will be a really big pain in the butt to keep it updated in the future and it will take longer to work add new posts. This is something that should be done via a child theme modification. If you are using a theme framework like Total then hopefully you can use theme action hooks for inserting your tabs otherwise you'll need to move the template files into your child theme to add your tabs. You could still use a plugin for the tabs but you'll need to use get_post_meta() to display content from your custom fields.
      Admin
  10. Chriscia says:
    Thank you so much! Very helpful, especially for a beginner like me. Great Job!
  11. Biplab Acharjee says:
    Thanks a lot for this article. I found my desire content here.

Leave a Reply