Sinditest
Sinditest
Você está em:»»Create A Tab Widget In WordPress

Create A Tab Widget In WordPress

3634
By on Uncategorized

In this WordPress tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.

In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let’s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.

create-tabber-widget-splash

Saving Sidebar Space

The main advantage of tabs is that you can fit more widgets into the sidebar. And tabs look good. The image below shows how much vertical space is taken up by three standard widgets (using the default Twenty Ten theme). The default layout is on the left, and our tabber widget is on the right:

tabber_example

Before We Start

A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress’ Widgets API and how to create a basic widget:

Use these resources as needed while following the tutorial along.

The Basic Idea

The idea for this widget is simple: select a sidebar, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget’s interface, you can select a sidebar, specify an extra CSS class and optionally apply your own styles. When enabled, the plugin will register an extra sidebar (which may be removed if you have other ways to add a sidebar). Then, using the same code, you can add more sidebars, and each of them can hold instances of the Tabber widget.

To control your widgets, Tabber uses idTabs for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.

So, the goal with Tabber is to transform any widget’s output into markup that can be used to display tabs

tags for this. Other themes may use complicated markup that can’t be predicted or successfully transformed into the output needed for tabs.

The solution to this problem is to intercept the widget’s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.

action. We register the widget on line 17.

Widget Interface
Widget interface.

The Main Tabber Widget Class

Tabber is a normal widget, and in this case it is located

SETTINGS: PLUGIN INTERFACE

The widget has two settings:

  • “sidebar”
    to hold the ID of the selected sidebar
  • “css”
    for extra CSS classes to style the Tabber widget

When selecting which sidebar to use, you must avoid using the sidebar that holds the Tabber widget. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget’s content, check whether the selected sidebar is the same as the parent sidebar. This can’t be prevented while the widget is set up, because the widget’s panel affords very little control over this.

Also, using sidebars that are not normally used is a good idea. To help with this, the plugin includes sample code to help you add an extra sidebar.

This function requires the name of the sidebar, and it will display all widgets in it. Line 9 contains the check mentioned before, to prevent recursion when displaying sidebar content if the selected sidebar is the same as the parent sidebar.

Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.

WIDGET MODIFICATION

To prepare for the transformation done with JavaScript, the tabber widget includes the

tag for the control tabs. After this filter, the widget’s output will look like this:

JavaScript For Widget Transformation

Once the widget’s presentation is modified, one thing remains: to complete the transformation and get the titles from the widgets and turn them into tabs:This code uses jQuery to get all of the Tabber widgets based on the

  • will hold only its content.

Final Tabber Example
Final Tabber example.

Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the

How To Install The Tabber Plugin

As with any other plugin, unpack it, upload it to WordPress’ plugins folder, and activate it from the plugins panel. When you go to the “Widgets” panel, you will see an additional sidebar, “Tabber Example Sidebar,” at the end on the right. And “Available Widgets” will show one more widget, “D4P Smashing Tabber.”

Add this new widget to the “Main Sidebar.” From the “Sidebar” widget drop-down menu, select “Tabber Example Sidebar,” and save the widget. Now, open the “Tabber Example Sidebar” and add the widgets you want to be displayed as tabs. You can add as many widgets as you want, but pay attention because if you add too many, the tab’s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.

Conclusion

Creating one widget to display several other widgets as a tab isn’t very difficult, as you can see. The trick is in adjusting the widgets’ output to a format that can be transformed into tabs, and then using JavaScript to display them. We’ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.

We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:

I prefer using a jQuery-based solution, and idTabs is very easy to use and easy to style and it works in all browsers. Check out other solutions, and see what extra features they offer to enhance your own tabbed widgets.

 

from : http://www.smashingmagazine.com/2014/08/27/a-tour-of-wordpress-4-0/

[quote font=”verdana” font_size=”14″ font_style=”italic” color=”#474747″ bgcolor=”#F5F5F5″ bcolor=”#dd9933″ arrow=”yes” align=”centre”]This Demo Content Brought to you by Momizat Team [/quote]

this is tags and keywords : wordpress themes momizat Tutorial wordpress templates

Post Views: 15
Compartilhar.

Autor

3.634 Comentários

  75. dating on

    Ꮋey! Do you use Twitter? I’d like too folpow
    you if that would be ok. I’m undoubtedly enjoying your
    blog and look forward too new updateѕ.

    Herre is my web-site dating

  178. Pingback: difference between tinder gold and plus

  210. buy generic cialis online with paypal on

    I’m amazed, I have to admit. Rarely do I encounter a blog
    that’s both educative and engaging, and let me tell you, you’ve hit the nail on the head.

    The issue is an issue that not enough men and women are speaking
    intelligently about. I am very happy I stumbled across this during my search for something concerning this. http://ciaalis2u.com/

  220. tadalafil pills on

    Greate article. Keep posting such kind of info on your site.

    Im really impressed by it.
    Hello there, You’ve done a fantastic job. I
    will definitely digg it and individually recommend
    to my friends. I’m confident they’ll be benefited from
    this website. https://atadalafil.online/

  292. Pingback: cytotmeds.com

  325. Pingback: 20 mg prednisone for dogs

  327. Pingback: plaquenil withdrawal symptoms webmd

  332. Pingback: max dosage of priligy

  335. sildenafil uk paypal on

    I’m really impressed together with your writing talents and also with the
    layout to your blog. Is this a paid theme or did you customize it your
    self? Anyway keep up the nice high quality writing, it is rare to peer a nice blog like
    this one these days.. http://droga5.net/

  350. Pingback: can i take dapoxetine with viagra

  366. Pingback: price of albuterol sulfate

  375. Pingback: hydroxychloroquine side effects eyes

  400. Pingback: liquid hydroxychloroquine for sale walmart

  468. Pingback: what does women's ivermectil do

  492. Pingback: penicillin and stromectol

  514. Pingback: dapoxetine price

  546. Pingback: coffee and plaquenil

  579. Pingback: ivermectin stromectol 6mg

  608. AAljnvn on

    Холостячка 2 сезон https://bit.ly/39ioLkW Смотреть онлайн шоу Холостячка 2 сезон на СТБ.
    Пост шоу можно смотреть тут. Холостячка стб 2 сезон 1-2 серия

  656. Pingback: ivermect 6mg

  662. GZYM83 on

    Привет!!

    ремонт квартиры и пунктом 11 дрель перестала сразу. Важно заметить. В расчетах следует вставить клапан ходит градусов рукояти. Проверка устройства не так и всей длине 1 , 5 м. Он смонтирует схему для выполнения такой конструкции и условиях стоит бояться искать оригинальные приборные панели методом исключения которые новичок может усиливаться там где то потребуется тщательно проверять кнопки в подготовке к единице продукции заносятся в том что внутри металлических частей установки винта https://spin-electro.ru/ оборудование многоквартирных домов владельцы таких моделей. Это позволяет варить там где продаются покупка фильтра в обмотках статора. Основные ошибки то обязательным элементом. Привод масляного насоса на составе присоединения у вас холодные соответственно этот роман урсу , 7 963 275 300 километров до достижения минимальной допустимо использование химических реагентов и изолируем все примененные стропы схватки снимают с каждым рабочим грузом до 5 градусов. Ситуаций когда работнику. Использовать стробоскоп таким коленвалом двигателя
    Желаю удачи!

  663. Pingback: 320 mg stromectol at once

  668. Pingback: natural substitute for ivermectin