{"id":4455,"date":"2014-05-17T09:47:36","date_gmt":"2014-05-17T09:47:36","guid":{"rendered":"http:\/\/demo.momizat.net\/goodnews\/?p=123"},"modified":"2014-05-17T09:47:36","modified_gmt":"2014-05-17T09:47:36","slug":"create-a-tab-widget-in-wordpress","status":"publish","type":"post","link":"https:\/\/bulandrashtrawadi.in\/?p=4455","title":{"rendered":"Create A Tab Widget In WordPress"},"content":{"rendered":"<p>In this WordPress tutorial, you\u2019ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It <strong>saves space and streamlines the appearance<\/strong> and functionality of your WordPress-powered website.<\/p>\n<p>In the past, there were different methods of doing this, most of which were theme-dependent. As we\u2019ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let\u2019s jump in and learn how to create our own Tabber widget, which we\u2019ve made available for downloading at the end of this article.<\/p>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/create-tabber-widget-splash.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-108415 disappear appear\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/create-tabber-widget-splash.png\" alt=\"create-tabber-widget-splash\" \/><\/a><\/p>\n<h3>Saving Sidebar Space<\/h3>\n<p>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:<\/p>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/tabber_example.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-108407 disappear appear\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/tabber_example.png\" alt=\"tabber_example\" \/><\/a><\/p>\n<h3>Before We Start<\/h3>\n<p>A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress\u2019 Widgets API and how to create a basic widget:<\/p>\n<ul>\n<li>\u201c<a href=\"http:\/\/codex.wordpress.org\/Widgets_API\">Widgets API<\/a>,\u201d WordPress Codex<\/li>\n<li>\u201c<a href=\"http:\/\/azuliadesigns.com\/creating-widgets-wordpress-28\/\">Creating Widgets for WordPress 2.8<\/a>,\u201d Tim Trott, Azulia Designs<\/li>\n<li>\u201c<a href=\"http:\/\/www.wproots.com\/advanced-wordpress-widgets\/\">Advanced WordPress Widgets<\/a>,\u201d WP Roots<\/li>\n<\/ul>\n<p>Use these resources as needed while following the tutorial along.<\/p>\n<h3>The Basic Idea<\/h3>\n<p>The idea for this widget is simple: <strong>select a sidebar<\/strong>, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget\u2019s 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.<\/p>\n<p>To control your widgets, Tabber uses <a href=\"http:\/\/www.sunsean.com\/idTabs\/\">idTabs<\/a> for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.<\/p>\n<p>So, the goal with Tabber is to <strong>transform any widget\u2019s output into markup that can be used to display tabs<\/strong><\/p>\n<p>tags for this. Other themes may use complicated markup that can\u2019t be predicted or successfully transformed into the output needed for tabs.<\/p>\n<p>The solution to this problem is to intercept the widget\u2019s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.<\/p>\n<p>action. We register the widget on line 17.<\/p>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/tabber_widget.png\"><img decoding=\"async\" class=\"size-full wp-image-108410 disappear appear\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/tabber_widget.png\" alt=\"Widget Interface\" \/><\/a><br \/>\n<em>Widget interface.<\/em><\/p>\n<h3>The Main Tabber Widget Class<\/h3>\n<p>Tabber is a normal widget, and in this case it is located<\/p>\n<h4>SETTINGS: PLUGIN INTERFACE<\/h4>\n<p>The widget has two settings:<\/p>\n<ul>\n<li>\u201csidebar\u201d<br \/>\nto hold the ID of the selected sidebar<\/li>\n<li>\u201ccss\u201d<br \/>\nfor extra CSS classes to style the Tabber widget<\/li>\n<\/ul>\n<p>When selecting which sidebar to use, you must <strong>avoid using the sidebar that holds the Tabber widget<\/strong>. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget\u2019s content, check whether the selected sidebar is the same as the parent sidebar. This can\u2019t be prevented while the widget is set up, because the widget\u2019s panel affords very little control over this.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.<\/p>\n<h4>WIDGET MODIFICATION<\/h4>\n<p>To prepare for the transformation done with JavaScript, the tabber widget includes the<\/p>\n<p>tag for the control tabs. After this filter, the widget\u2019s output will look like this:<\/p>\n<p><strong>JavaScript For Widget Transformation<\/strong><\/p>\n<p>Once the widget\u2019s 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<\/p>\n<ul>\n<li>will hold only its content.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/tabber_example_final.png\"><img decoding=\"async\" class=\"size-full wp-image-108409 disappear appear\" src=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/tabber_example_final.png\" alt=\"Final Tabber Example\" \/><\/a><br \/>\n<em>Final Tabber example.<\/em><\/p>\n<p>Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the<\/p>\n<h3>How To Install The Tabber Plugin<\/h3>\n<ul>\n<li><a href=\"http:\/\/media.mediatemple.netdna-cdn.com\/wp-content\/uploads\/2013\/02\/d4p-smashing-tabber.1.0.0.zip\">Download version 1.0.0 of the Tabber plugin.<\/a><\/li>\n<\/ul>\n<p>As with any other plugin, unpack it, upload it to WordPress\u2019 plugins folder, and activate it from the plugins panel. When you go to the \u201cWidgets\u201d panel, you will see an additional sidebar, \u201cTabber Example Sidebar,\u201d at the end on the right. And \u201cAvailable Widgets\u201d will show one more widget, \u201cD4P Smashing Tabber.\u201d<\/p>\n<p>Add this new widget to the \u201cMain Sidebar.\u201d From the \u201cSidebar\u201d widget drop-down menu, select \u201cTabber Example Sidebar,\u201d and save the widget. Now, open the \u201cTabber Example Sidebar\u201d 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\u2019s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.<\/p>\n<h3>Conclusion<\/h3>\n<p>Creating one widget to display several other widgets as a tab isn\u2019t very difficult, as you can see. The trick is in adjusting the widgets\u2019 output to a format that can be transformed into tabs, and then using JavaScript to display them. We\u2019ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.<\/p>\n<p>We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.sunsean.com\/idTabs\/\">idTabs<\/a><\/li>\n<li><a href=\"http:\/\/os.alfajango.com\/easytabs\/\">EasyTabs<\/a><\/li>\n<li><a href=\"http:\/\/jqueryui.com\/tabs\/\">jQueryUI Tabs<\/a><\/li>\n<li><a href=\"http:\/\/unwrongest.com\/projects\/tabify\/\">Tabify<\/a><\/li>\n<\/ul>\n<p>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.<\/p>\n<p>&nbsp;<\/p>\n<p>from : http:\/\/www.smashingmagazine.com\/2014\/08\/27\/a-tour-of-wordpress-4-0\/<\/p>\n<blockquote class=\"mom_quote \" style=\"font-family:verdana;font-size:14px;font-style:italic;border-left-color:#dd9933; color:#474747; background-color:#F5F5F5; \"><span class=\"quote-arrow\" style=\"border-left-color:#dd9933;\"><\/span>This Demo Content Brought to you by <a href=\"http:\/\/momizat.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Momizat Team<\/a> <\/blockquote>\n<h2>this is tags and keywords : wordpress themes momizat Tutorial wordpress templates<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>In this WordPress tutorial, you\u2019ll 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"video","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[75,78,79,80,83],"_links":{"self":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts\/4455"}],"collection":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4455"}],"version-history":[{"count":0,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=\/wp\/v2\/posts\/4455\/revisions"}],"wp:attachment":[{"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bulandrashtrawadi.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}