How to add jQuery Tabber widget in WordPress

Have you seen a tabber area on popular sites that allows you to view popular, recent, and featured posts with a single click? This is known as the jQuery tabber widget and it allows you to save space on the user's screen by combining different widgets into one. In this article, we will show you how to add a jQuery Tabber widget in WordPress.

Why should I add a jQuery Tabber widget?

Running a WordPress website, you can easily add elements to your sidebars using drag and drop widgets. As your site grows, you may find that you don't have enough space in the sidebar to display all the useful content. That's exactly when a tabber comes in handy. It allows you to display different elements in the same area. Users can click on each tab and see the content they are most interested in. Many big-name sites use it to display popular articles from today, this week, and this month. In this tutorial we will show you how to create a tabber widget. However, we don't show you what to add on your tabs. Basically you can add whatever you want.

Note:This tutorial is for intermediate users and will require knowledge of HTML and CSS. For beginner users, please refer to this article.

Creating the jQuery Tabber widget in WordPress

Let us begin. The first thing you need to do is create a folder on your desktop and name it wpbeginner-tabber-widget . After that, you need to create three files inside this folder using a plain text editor like Notepad.

The first file we are going to create is wpb-tabber-widget.php . It will contain HTML and PHP code to create tabs and a custom WordPress widget. The second file we will create is wpb-tabber-style.css , and will contain the CSS styling for the tab container. The third and last file we will create is wpb-tabber.js , which will contain the jQuery script to switch tabs and add animation.

Let's start with wpb-tabber-widget.php proceedings. The purpose of this file is to create a plugin that registers a widget. If this is your first time creating a WordPress widget, we recommend that you take a look at our how to create a custom WordPress widget guide or simply copy and paste this code. wpb-tabber-widget.php file:

 'WPBTabberWidget', 'description' => 'Simple jQuery Tabber Widget'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops); function widget ($ args, $ instance) // widget sidebar output function wpb_tabber () // Ahora ponemos en nuestra hoja de estilo y script jQuery wp_register_style ('wpb-tabber-style', plugins_url ('wpb-tabber-style. css ', __FILE__)); wp_register_script ('wpb-tabber-widget-js', plugins_url ('wpb-tabber.js', __FILE__), array ('jquery')); wp_enqueue_style ('wpb-tabber-style'); wp_enqueue_script ('wpb-tabber-widget-js'); // Creando pestañas, ¿agregará su propio código dentro de cada pestaña?>  Pestaña 1
 Pestaña 2
 Pestaña 3

In the code above, we first create a plugin and then inside that plugin we create a widget. In the widget's output section we add scripts and style sheets and then generate the HTML output for our tabs. Finally we register the widget. Remember to add the content you want to display on each tab.

Now that we've created the widget with the necessary PHP and HTML code for our tabs, the next step is to add jQuery to display them as tabs in the tab container. To do that you need to copy and paste this code into wp-tabber.js proceedings.

 (function ($) $ (". tab_content"). hide (); $ ("ul.tabs li: first"). addClass ("active"). show (); $ (". tab_content: first") .show (); $ ("ul.tabs li"). click (función () $ ("ul.tabs li"). removeClass ("active"); $ (this) .addClass ("active"); $ (". tab_content"). hide (); var activeTab = $ (this) .find ("a"). attr ("href"); // $ (activeTab) .fadeIn (); if ($ .browser .msie) $ (activeTab) .show (); else $ (activeTab) .fadeIn (); return false;);) (jQuery);

Now our widget is ready with jQuery, the last step is to style the tabs. We have created a sample style sheet that you can copy and paste wpb-tabber-style.css file:

 ul.tabs posición: relativa; índice z: 1000; flotador izquierdo; borde izquierdo: 1px sólido # C3D4EA; ul.tabs li posición: relativa; desbordamiento: oculto; altura: 26px; flotador izquierdo; margen: 0; relleno: 0; línea de altura: 26px; color de fondo: # 99B2B7; borde: 1px sólido # C3D4EA; borde izquierdo: ninguno; ul.tabs li a display: block; relleno: 0 10px; esquema: ninguno; texto-decoración: ninguno; html ul.tabs li.active, html ul.tabs li.active a: hover background-color: # D5DED9; borde inferior: 1px sólido # D5DED9; .widget-area .widget .tabs a color: #FFFFFF; .tab_container posición: relativo; arriba: -1px; índice z: 999; ancho: 100%; flotador izquierdo; tamaño de fuente: 11px; color de fondo: # D5DED9; borde: 1px sólido # C3D4EA; .tab_content relleno: 7px 11px 11px 11px; línea de altura: 1.5; .tab_content ul margen: 0; relleno: 0; estilo de lista: ninguno; .tab_content li margen: 3px 0; .tab-clear clear: ambos;

That is all. Now just load wpbeginner-tabber-widget folder to your WordPress site / wp-content / plugins / Directory via FTP. Alternatively, you can also add the folder to a zip file and go to Plugins »Add New In your WordPress admin area. Click the upload tab to install the plugin. Once the plugin is activated, go to Appearance »Widgets , drag and drop WPBeginner Tabber Widget into your sidebar and that's it.

How to add jQuery Tabber widget in WordPress

We hope this tutorial helped you create a jQuery table for your WordPress site. For questions and comments, you can leave a comment below or join us on Twitter or Google+.