What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
What Are WordPress Tabs? Why and How to Use Them in WordPress Sites?

What Are WordPress Tabs? Why and How to Use Them in WordPress Sites?

Tabs can be seen on most web pages, especially on the websites including many sorts of web content. So, what are WordPress tabs? As many readers ask the same question, we make this comprehensive introduction to reveal the secret of this function. By the way, the reasons and guidelines for the use of tabs in WordPress sites are also mentioned here.

What Are WordPress Tabs?

Often, tabs are also known as “modules tabs”, commonly seen in websites. To make the chaotic web content orderly and clear, tabs come in handy to classify the information into different groups. For instance, if you want visitors to browse 5 modules within one view angle, it can be shown in the following form. Visitors don’t need to shift the web page or even move the slider to view the information under difference classifications. The only thing to do is pointing to the tabs.

what are wordpress tabs

Besides, the tabs existing in the form of navigation are used to guide visitors to search for the targeted content after a quick view, which is also a common form seen in many websites. As we can see in the following example, each option represents a category and is pointed to a certain page so as to help people find what they want in the shortest time. It is suitable for shopping sites.

what are wordpress tabs navigation

Why Use WordPress Tabs?

After getting a clear understanding of what WordPress tabs are, you may have had a rough idea about the usability of this helpful function. Obviously, tabs are good assistant to help you put multifarious web content into multiple categories. In this case, visitors can get better user experience for they don’t need to take too much time to find what they want.

And also, tabs make a big difference on web design because all web content is set in an orderly way, therefore making a pleasing site looking. Various tabs can be added in the same section, so it is a good method to add different information on one page but occupy less screen space.

How to Create Tabs in WordPress Sites?

Here we have made a guide on how to create tabs on your WordPress website. No matter you are an old hand or new comer without any professional knowledge about code, the following cookbook instruction makes the whole process much easier. Here, we take the Settings Page as an example.

The first step is to create tabs by following the code below. The ‘homepage’ means to set options for the homepage, which is shown by default. And then, the ‘general’ refers to a page including options available for all web content. The following ‘footer’ instructs the tracking code in the footer. The task allocation of those three roles is shown as the second image.

create wordpress tabs

create wordpress tabs

The following code is used to display the tabbed content. The capability of “ilc_settings_page” is evolved by the “add_theme_page”, so you are allowed to customize it based on your own needs.

create wordpress tabs

Following code shows the function of displaying a settings tab fields, which depends on the value of “$tab”.

create wordpress tabs
create wordpress tabs

Here, we’d like to show how to save the tabbed fields.

create wordpress tabs

To enable users to view the tab as well as make full use of it, the last step is to redirect users to the right tab.

create wordpress tabs

How About WordPress Tab Plugin?

Do you feel puzzled about creating WordPress tabs by using the code above? If you cannot understand well how to use this method, we are going to introduce some WordPress tab plugins to ease the process. According to our investigation on over one hundred plugins used to add tabs, we finally pick out one of the most popular called Easy Responsive Tabs to make a comprehensive introduction.

easy responsive tabs

This plugin serves the purposes of controlling tab heading color, active tab heading color, tab hover color, and tab content bg color. Besides, it also has the ability to set tab right or left align and make tabs top or bottom. Some other options, like WP Responsive Tabs, WP Bootstrp Tabs, and WordPress Post Tabs, are also recommended to you.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.