Tags are a fairly common feature on many websites, especially e-commerce stores. E-commerce store owners usually use tags in the product description area. They divide reviews, descriptions, technical specifications, etc. into multiple tags.

Example of running tabs on an e-commerce website

Nevertheless, tags have been used in many other different types of websites, not just e-commerce websites. Even the official WordPress.org website uses tabs on the plugin description page. Refer to the image below to see the highlighted tabs on WP.org.

The tabs on the description page of the wordpress.org plugin

Many other website owners use tags on different types of websites.However, don’t associate the tabs with accordion, Expand to display information. Below, please observe how I use the accordion on my website.

Accordion on vistamedia.xyz

But leaving aside the accordion, what we are talking about here is Label, So let’s not lose focus; I just need to be clear about the difference between label and accordion. Now I hope we are on the same page 🙂

Essentially, web owners use tags to split up information, otherwise the information will take up the entire page or post. This means that tags make information easier to digest without forcing users to click the scroll wheel a million times.

In other words, tags can improve the usability of your website, especially in Shorter attention spanTherefore, if you want to allow users to stay on your site longer without annoying them with long pages, then you should consider using tags.

In today’s post, we will show you how to add tags to your WordPress posts and pages. Before the end of this article, you will have all the instructions you need to make the most of your tabs. We hope you enjoy it till the end, please do not leave before sharing your thoughts in the comments section. let’s start.

Use page builder

If you have installed a page builder, you are in luck-you may already have a tab module at your fingertips. Most major page builders provide tabs as part of their core set of page builder elements. Take a quick look at two of our favorites.

Elementor free page builder

Elementor page builder tab

Information and download view demo

The popular Elementor page builder includes tags as part of the free version of the plugin. All you need to do is to insert a tab element on the page, and then edit the title, content, style, etc. that’s all!

WPBakery Advanced Page Builder

WPBakery page builder tab

Use advanced themes that include the WPBakery page builder (e.g. our own General theme)? great! The label is built-in and easy to use.

The WPBakery tab module is slightly different from the previous example because the tabs are initially empty when they are added. You need to insert other page elements (text areas, images, icons, etc.) in the tab to add your content. But this gives you a lot of freedom to create the tags you want (except for the built-in style options). We have introduced this page builder on the blog before, so if you want a more detailed description, please check our WPBakery guide (note-this plugin was formerly called Visual Composer, please apologize in advance for any confusion).

Install the Tag WordPress plugin

Tags free WordPress plugin

If you don’t use page builders, you don’t need to use page builders only for tabs. There are many good choices, such as free WordPress plugins, WP Shop Mart is referred to as Tabs for short. Tabs is a beautiful WordPress plugin that can help you create an unlimited number of beautiful tabs without sweating.

Let’s start by installing the Tabs WordPress plugin. Since it is available in the official WordPress plugin library, you can install the plugin directly from the WordPress admin dashboard.

We are using the free version, but if you want to upgrade to get additional features in the future, you can use the paid version.

Install Tabs WordPress plugin

Log in to your WordPress admin dashboard and navigate to Plugins> Add New And enter “tabs wpshopmart” in the keyword search box.After finding a suitable plug-in, click Install now The button is shown in the figure below.

Install tag wordpress plugin

After that, click Enable Button. That’s it, your Tabs Responsive WordPress plugin is ready to use. Now, let’s create a few tabs to understand the features that this plugin must provide.

Configure tag responsive WordPress plugin

Activating the plugin will add a new item to your WordPress admin menu.To create a new tab, navigate to Tag response> add new tag As we explain in detail in the screenshot below.

Use tag responsive wordpress plugin to add new tags

Doing so will lead you to use Tabs Responsive Builder, which contains all the features needed to create beautiful labels like a boss. Please refer to the image below to understand what happens.

Tag responsive wordpress plugin tag generator

Quite a scroll, isn’t it? Well, you can find most of the features on the right sidebar. Also note that each tab has its settings. You can even use the WYSIWYG editor on the tabs, which means you can fully control your tabs.

Now, let’s create a few sample tabs and display them on the page or post.

Add title

Add label title

First give your label a descriptive title (just like your navigation menu), as shown in the image above. This way, you can easily identify your tabs in the WordPress admin dashboard in the future, in case you need to edit anything. For the purpose of this tutorial, I named my tag “Test Home Tag”.

Choose a tab design template

Choose a label design template

As shown in the screenshot above, the next step involves selecting a design template to be used for the tab. The free version of the Tabs WordPress plugin only provides you with a design template, but you can upgrade to the premium version at any time 19 more. Talk about design freedom.

add tag

Next, add as many tabs as needed, as shown below.

Add new label

We have created a numbered list, detailing that you can add tag The part is shown above. The numbers correspond to each area.

  1. Label title – Add your label title in this field, for example Description, specifications, details, and many more.
  2. Label description – Add a description of the tab here. This field allows you to add the content of the tab.The best part is that you can use the WYSIWYG editor (shown by number 3 below) to add rich content to the tabs, including images, music, and videos
  3. Use WYSIWYG – If you want to use the familiar widthhat-withWhere-Secondee-A generations-widthhat-withWhere-GWait for the editor to create your label content, click this button at will to launch a pop-up window
  4. Label icon – This field helps you select the icon to use on the tab. The Tabs WordPress plugin gives you access to a large number of Font Awesome icons, making your tabs as vibrant as a professional
  5. Show above the icon -If you want to display the label title next to the icon, you will like this feature.In addition, it allows you to disable the icon without touching the label title
  6. delete -Click this button to delete a specific tab
  7. Add new label -Click this button to add more tabs
  8. Delete all – Tired of all the tags?Just hit Delete all Button to reset everything

Some additional tips can help you. First, you can drag and drop the tabs to reorder and arrange them as needed.

Second-don’t forget to click save draft Press the button once or twice when creating the tab to ensure that you don’t lose any changes if you accidentally leave the tab builder.

Finally-if you need support, there is a big blue Get support Directly below the button add tag Section (and on most plugin pages) directs you to the official Tabs support forum on WordPress.org. If you need help, please feel free to click the support button.

Label shortcode

Label shortcode

Next, you will find tag shortcodes for adding and displaying your tags or posts you want on any page.For example, our shortcode is [TABS_R id=443]. To display the tabs on the page, I just copy and paste the above shortcode into that particular page.

Label gadget

Label widget support

Do you want to add tags to the widget area on your website? If this is a resounding affirmation, you will love the widget support that comes with the Tabs WordPress plugin.

hit click here The link in the image above takes you to the WordPress widget screen, where you can add tags at will, as long as you have a widget area in the theme.

Label widget

Custom CSS

Although the Tabs WordPress plugin comes with a large number of tab customization options (just take a look at the right sidebar; it is full of style options!), you can add your own custom CSS styles as shown below.

Tags wordpress plugin custom css

In addition, you can set custom settings as the default settings for all new tabs, just click Update default settings Button, as shown in the picture above.

Right sidebar

Tag wordpress plugin style options

Our right sidebar highlighted in the image above brings you a real day. It contains all the options you need to style the label to your liking. Notable options include:

  • Label background color
  • Label font color
  • Font family and style
  • Display options for tab title and icon
  • The position of the label icon is aligned, that is, before or after the label title
  • Label border
  • Multiple tab description animation
  • there are more

Add your tags to a WordPress page or post

After adding label content and style options, scroll up and click release The button is shown in the figure below.

At this point, your tab is ready. You only need to add tags to your WordPress page or post. Just copy the tab shortcode we saw earlier.Ours is [TABS_R id=443].

Start your post editor (even if you are using Gutenberg) And paste the shortcode into your post/page.After that, click release The button is shown in the figure below.

After about 5 minutes of setup; I was using twenty-seven themes and a lot of Lorem Ipsum, and I came up with the following results.

Please note that I don’t have custom colors or anything. Tell me what you think; isn’t it easy?

Adding tags to your WordPress pages and posts is a matter for fourth graders. I don’t want you to encounter any problems, especially when you use plug-ins such as WP Shop Mart’s Tabs.

How to add tags in WordPress pages and posts? Which is your favorite tab WordPress plugin? Please share your thoughts in the comments. Happy creating!