Home » WordPress Tutorials » Basics » How to Add Tabs to Your WordPress Site with Gutenberg

How to Add Tabs to Your WordPress Site with Gutenberg

Tabs are quite useful in numerous situations and can be a fresh addition to your WordPress websites.

Massively used to showcase content categories, news, and various other types of posts in a very structured manner, tabs contribute to making your site content more easily readable and user-friendly to interact with.

Because of how useful tabs can be, in the following paragraphs, you will read how to use them on your website via Gutenberg Block Editor.


How to Add Tabs to Your WordPress Site with Gutenberg

The first thing you should do is to make sure that Gutenberg is set as your default editor. To do so, enter your WordPress admin dashboard.

Once you have entered the admin panel, head to Settings->Writing:

WordPress Gutenberg activate editor


Clicking on Writing will prompt WordPress to open a page such as this:

WordPress Gutenberg Settings


On this page search for the Default editor for all users options:

WordPress Gutenberg select editor


Once you find the default editor settings, select Block Editor:

Select Gutenberg editor in WordPress


Once you do, click on the blue Save Changes button located at the bottom left of the screen:

WordPress Save Changes


Now that you have activated Gutenberg, it is time to proceed forward and read how to add tabs to your site content.

Although there are numerous ways to add tabs to your site content, it is highly advisable to use WordPress plugins that are compatible with the Block Editor, as by far, this is the fastest, easiest, and most efficient way to include such functionality in any WordPress website.

More precisely, using Gutenberg plugins is great because:

  • Such plugins are very user-friendly.
  • You can use various code snippets.
  • Can be applied to blog posts, static pages, and widgets.
  • Most plugins come with a wide array of styling options.


There are numerous handy plugins that you can use to design and use tabs on your site. Browse the plugin library and install the one that best fits your needs.

If you are not sure what plugins are or how to use them, then have a look at our comprehensive article explaining everything about WordPress plugins:

What is a WordPress Plugin

For this demonstration, we will be using Tabs Responsive – a simple yet effective tabs plugin, completely compatible with Gutenberg Block Editor.

Once you have installed and activated a suitable plugin, it is time to start crafting the tabs. To do so, via the plugin’s settings, open the new tab setup section. Should you use the plugin we are using, you can do so by going to Tabs Responsive->Add New Tabs:

WordPress Gutenberg Add Tabs


Then, add a new tab by clicking on the large red Add New Tabs button:

WordPress Add New Tabs in Gutenberg


Clicking the button will prompt WordPress to display a new section in which you can add your tab details such as title and description:

Edit Tabs in WordPress


Add as many tabs as you need and then click on the blue Publish button at the top right of the screen, so WordPress applies and saves your settings:

Save changes with Gutenberg block editor


Now that you have published your first tab set, it is time to add it to a page. To do so, open the list with all published tabs and copy the Tab Shortcode.

Should you use Tabs Responsive, you can find the Shortcode by simply going to Tabs Responsive->All Tabs:

WordPress browse Tabs plugin


Clicking on All Tabs will open a list of all your saved tab sets. In our case, there’s only one, but you can create as many as you wish:

WordPress list of tabs


Now, while on this page, locate the Tabs Shortcode column. This column contains a short code for each of your tab sets – a simple code snippet that you insert in your blog posts or pages, so the tab set appears on them:

WordPress Tabs shortcode


Once you locate the Shortcode, copy it.

After you copy the snippet, open a web page or a blog post in which you wish to insert the tab set.

For this demonstration, we will insert our tabs on a static page.

To insert the snippet, simply go to Pages->All Pages->Edit Page, should you wish to insert your tab set within a page, or to Posts->All Posts->Edit Post:

Edit Page in WordPress with Gutenberg


This will activate Gutenberg:

Edit Page with WordPress Gutenberg block editor


Now, while the editor is active, select a location in which you wish to insert your tabs. In our case, this will be right below the image. To insert the Shortcode, first, insert a Paragraph block in the content area:

Add new blcock with the Gutenberg editor in WordPress


Now, within this newly inserted paragraph add the tab’s Shortcode:

Insert Shortcode in Gutenberg block editor


Then, click on the blue Update button (Publish, should this be a new web page or a blog post):

WordPress Save Changes


Once you publish or update your content, open the page or post that you have just edited to see how the tab appears:

Preview Changes


Now you have managed to insert tabs with the Gutenberg Block editor.

Depending on the plugin you are using, you can customize your tabs in numerous ways, so their design completely fits your website’s layout and purpose.



Tabs can become a very powerful addition to your website, thanks to their convincing way of distributing your content and making it easy for your site visitors to engage with your site.


Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

10 Best WordPress Themes for Gutenberg

If you craft your WordPress website by using Gutenberg, then it is likely that you have thought about working with a block editor-compatible theme. If that is the case, then you should know that there are numerous WordPress themes that are meant to be a perfect fit...

How to Copy a Page with WordPress Gutenberg Editor

Looking for ways to copy your WordPress web pages? The Gutenberg block editor got you covered. In this article, you will read about 3 different methods you can instantly apply when crafting your WordPress website.   How to Copy a Page with WordPress Gutenberg...

How to Create Tables in WordPress Using Gutenberg Editor

Creating a table in WordPress with the Gutenberg Block Editor is a straightforward task. Should you need to add one or several tables to your pages, the following paragraphs explain how to do so.   How to Create Tables in WordPress using Gutenberg Editor  ...

5 Best WordPress Slider Plugins for Gutenberg

When crafting your WordPress website, it is not only important to publish informative and well-structured content, but it is also crucial to make your web pages as aesthetically appealing as possible. An effective way of making your site more beautiful is by inserting...

How to Use the Navigation Block in Gutenberg

With the Gutenberg Navigation block, you can add various types of navigation on any page or within any blog post on your website. Similar to the classic WordPress menu, the Navigation block can be modified in numerous ways and become a handy tool in many situations....

Ready to Create Your Website?