WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» WordPress Plugins» How to Add Tabbed Content in WordPress Posts and Pages

How to Add Tabbed Content in WordPress Posts and Pages

Last updated on January 14th, 2015 by Editorial Staff
0 Shares
Share
Tweet
Share
Pin
Special WordPress Hosting offer for WPBeginner Readers
How to Add Tabbed Content in WordPress Posts and Pages

Do you want to divide your posts into tabs to save space and make it easier for users to find what they’re looking for? In this article, we will show you how to add tabbed content in WordPress posts and pages.

A WordPress post with tabbed content

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

First thing you need to do is install and activate the Tabs Shortcode and Widget plugin. This plugin works out of the box, and there are no settings for you to configure.

Simply create a new post, and on the post edit screen, you will notice a new shortcode button. Clicking on the button will reveal a menu.

Tabs layout button

Click on the tabs layout option in the menu, and it will launch the plugin’s tab editor interface.

Adding tabs

The first option on the tab editor is to choose the number of tabs you want to display. Next, you can choose the layout type. The plugin supports, horizontal and vertical tabs. After that you need to provide each of your tabs a title, choose an icon if you like, and then add the tab content.

Repeat the process for all your tabs. The last option on the popup is to add a custom CSS class. If you would like to change the appearance of the tabs, then you should enter a CSS class here.

During the whole process, you will be able to see a live preview of your tabs on the right side. Once you are done, click on the insert button to add the tabs in your WordPress post.

Save and preview your post and you will see your tabs in action.

Adding a Tabbed Widget in WordPress

The plugin also provides a widget to add tabbed content into your WordPress sidebars. Simply visit Appearance » Widgets and add OTW Shortcode Widget to a sidebar.

Adding a tabbed content widget

In the widget settings area, click on the add button to add tab layout. This will bring up the same tab editor we showed you earlier. Simply create your tabs using the user interface and add it to the widget. Lastly, click on the save button to store your widget settings.

You can now preview your website to see the tabbed content widget in action.

More adventurous users can also check out this tutorial on how to add a jQuery tabber widget in WordPress.

We hope this article helped you learn how to add tabbed content in WordPress posts and pages. You may also want to take a look at our list of 8 best jQuery tutorials for WordPress beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

0 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

27 Comments

Leave a Reply
  1. navya says:
    Oct 30, 2018 at 12:12 am

    I am beginner in wp.Can anyone help me to solve my problem?
    in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance

    Reply
  2. Dan Acton says:
    Aug 31, 2017 at 8:07 pm

    I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?

    Reply
  3. Andi Sutrisnya says:
    Jan 1, 2017 at 11:30 pm

    How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me

    Reply
  4. dany says:
    Jul 28, 2016 at 3:35 am

    thanks bro this helpful

    Reply
  5. Lena says:
    Apr 27, 2016 at 10:43 am

    Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
    I’m planning a Content sharing platform …

    Reply
  6. David says:
    Apr 11, 2016 at 2:48 am

    Hi,
    I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
    Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
    Thanks for any help

    David

    Reply
  7. Soni says:
    Mar 29, 2016 at 11:24 pm

    This is a helpful article.
    I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
    Or you use another plugin to create that tabbed content?
    I think that tab is great.

    Reply
  8. Ssekito says:
    Feb 3, 2016 at 11:22 am

    Kindly show me how to post content under the different tabs i have put on my blog.

    Thanks

    Reply
    • WPBeginner Support says:
      Feb 3, 2016 at 8:41 pm

      Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

      Reply
      • Ssekito says:
        Feb 4, 2016 at 2:10 am

        Thanks for the reply!

        I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.

        I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!

        Please guide me this.

        Thanks.

        Reply
  9. Sase Antic says:
    Oct 16, 2015 at 10:38 am

    Helpful info on tabs in WordPress!

    However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?

    For example: I need one “tabs group” consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
    Is this possible?

    Otherwise, it’s a lot of work to add the same “tabs group” to all pages and posts one by one.

    Thanks in advance for the reply!

    Reply
  10. uvie says:
    Oct 11, 2015 at 2:23 pm

    what if i need the tab to display contents in the form of widgets.how can i achieve that

    Reply
  11. Tony says:
    Aug 12, 2015 at 4:35 pm

    This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?

    Reply
  12. Sameer says:
    Jul 4, 2015 at 12:07 pm

    Hello,

    Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.

    Reply
    • WPBeginner Support says:
      Jul 5, 2015 at 3:43 pm

      Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.

      Reply
  13. Weiwei says:
    Mar 3, 2015 at 6:09 pm

    if in the content , there are more pages, what should I do?

    Reply
  14. WPBeginner Staff says:
    Feb 3, 2015 at 3:20 pm

    If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.

    Reply
  15. Shah says:
    Jan 31, 2015 at 11:22 pm

    I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!

    Reply
  16. Heather Lewis says:
    Jan 5, 2015 at 1:25 am

    This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.

    Reply
  17. vinayak says:
    Dec 29, 2014 at 12:25 pm

    hi and thanks for providing a post where i could add tabbed content in my blog.
    i was looking for a plugin that could do this.

    Reply
  18. Amjaru says:
    Dec 28, 2014 at 11:02 am

    Is the content in the tabs searchable or does the short code prevent the content from being searched?

    Reply
    • WPBeginner Staff says:
      Dec 28, 2014 at 11:47 pm

      It will still be searchable.

      Reply
  19. Knitwit23 says:
    Dec 28, 2014 at 10:08 am

    can you show us a post where this is in use?

    Reply
  20. KonaGirl says:
    Dec 26, 2014 at 1:27 pm

    Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?

    Reply
    • WPBeginner Staff says:
      Dec 27, 2014 at 1:02 am

      It is used inside posts and pages to display content in tabs.

      Reply
      • Sally Bennett says:
        Dec 28, 2014 at 10:40 am

        It would be very useful if you explained what ‘tabs’ are to a complete novice

        Reply
        • WPBeginner Staff says:
          Dec 28, 2014 at 11:49 pm

          Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.