How to Create Unique Sidebar Tabbed Widget for Your WordPress Blog. Sidebar Tabbed Widget: http://hubskills.com/?p=5173
The video transcript is as under:
Hi, welcome to this video lesson.
Tabbed widget on the sidebar is a great space saver for any blog. It gives opportunity to store more items on the sidebar.
In this video I will explain how to create a unique tabbed widget for your blog using the WordPress plugin, jQuery Tabber Widget.
jQuery Tabber Widget enjoys a healthy 5-star rating, and it allows you to add 3 tabs for recent posts, popular posts, and random posts. To show popular posts, you need to install yet another plugin called WordPress Popular Posts.
In this video I am going to show how you can discard one tab, and add completely different items in one of the 2 other tabs. You will also know how to change the styles of the different elements in the tabber widget.
Ok let's begin.
To install the plugin, I go to the add plugins page from the Dashboard menu. Here I will search for the plugin, so I put the plugin name and click the search button.
In these results, the jQuery Tabber Widget comes at the top. I already have the plugin installed and activated.
If not, a link Install Now will come which has to be clicked and then activated to use the plugin.
To use the plugin let me go to the Widgets page from appearance. The plugin Tabber Widget appears in the available widgets area. From here I have to drag the widget on to the sidebar.
This I have already done. So the widget appears in the primary sidebar of my blog. If open the widget, it says -- There are no options for this widget.
But we can still make changes in the widget. And we will see how to do that shortly.
The tabbed widget -- when it is first installed -- will look like this. There are 3 tabs for recent posts, popular posts and random posts. The popular posts tab has no items, because -- if you remember -- it needs the WordPress popular posts plugin to actually work.
Okay let's now make the changes to make the tabber exactly as we want.
To do it let me first go to the dashboard, and from here I click on Editor under Plugins to go to the Edit Plugins page.
Now to the right, in this dropdown of all plugins in my blog let me choose jQuery Tabber Plugin, and then click the button Select.
As you see, all the files under the plugin open. There are 4 files, but we are concerned with the PHP and the CSS files.
The important changes are to be made in the PHP file. Let me open the PHP file separately in Notepad.
The first big change will be in this code snippet that defines the respective tab headings. The next change will be in the tab contents for the second tab, Tab2.
I have already made these changes in the PHP file of my blog as you can see here. The first tab heading is Recent Posts. The Tab2 heading is Free Guides.
As for Tab3 I have put in a specific style, display:none -- which means the third tab will not be seen in the widget.
The next change is for the Tab2 contents. Instead of the PHP code for popular posts that was there originally, I have now included a simple list of the free guides I am giving away to the subscribers.
This is not a dynamic list, but that's alright for me.
Next let's go to the CSS code. As you can see I have many changes here -- in the style of the tabs like link and background colors, font size, borders, and more.
Don't forget -- after each change you make in the files here you must click the Update File button to save those changes.
There are other tabber widgets available, like for example WP Tabber Widget, but each has its own purpose. So don't hesitate to explore other tabbed widgets before you decide the ideal one for your need.
This completes the video lesson. Thanks for watching.
- - - - - - - - - - - - -
For more information, visit:
This video: http://youtu.be/dFu5ByBqJyI
Video Library: http://hubskills.com/video-library/
Sidebar Tabbed Widget
Tags: How to Create Unique Sidebar Tabbed Widget for Your WordPress Blog, WordPress (Software), Tutorial (Industry), Blog (Award Discipline), Widget Toolkit (Software Genre)