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:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?