The Shiba Widgets plugin allows you to assign different widgets to different posts, pages, categories, or tags. You can create different widget sets using the standard WordPress widget interface, and then assign these widget sets from a drop-down menu in your edit post, page, category or tag screens.
To retrieve your lost widgets, go into Widget Set >> Options and check the Show Lost Widgets box. When you edit widget sets, all unassigned widgets will show up at the bottom of the interface.
[Most recent Shiba Widget updates]
December 26th 2015 – Update 2.2.3
- Fixed duplicate function issue in widgets.php.
- Updated Recent Comments and Recent Posts widget thumbnail functions for WP 4.4.
- Tested on WordPress 4.4.
September 2015 – Update 2.2.1
- Replaced WP_Widget with __construct function.
- Fixed Shiba Author widget.
- Updated for WordPress 4.3.
[Page header and footer images from Web Widget Girl WordPress Theme]
Key Features of the Shiba Widgets Plugin
- Lets you assign different widget sets to posts, pages, categories, and tags.
- Mobile responsive widget sets. Assign widget sets to different devices depending on screen width. In this way, we can easily customize our sidebars for phones, tablets, and desktops.
- The Multi Column Widget allows you to turn regular sidebars into multi-column sidebars.
- You can style your widgets by adding your own CSS classes.
- Render widgets within a post using shortcodes. Here is a list of standard widget classes and their input attributes.
- We can copy widget sets and quickly tweak them to suit the needs of particular posts or pages.
- Standard WordPress core interfaces, and objects are used in this plugin to facilitate ease of use.
- Widget sets are saved as custom post type objects, thus they can be transferred from blog to blog using the standard WordPress import/export tools. However, individual widget settings (such as the text in your Text widget) are stored by WordPress core as options. As of WordPress 3.0, these DO NOT get transferred using the standard import/export tools.
For example, this page uses a 3-column header widget at the top, and a 2-column widget after the post content.
Here is another example widget page which uses the Thematic Test widget set together with the Thematic theme. It has a multi-column header area, and a double column sidebar.
In contrast, my blog frontpage and my regular blog pages use their own widget configurations.
Create and Assign a Widget Set
To create a widget set, go into Widget Set >> Add New.
The interface used for creating widget sets is identical to the standard WordPress Widgets menu. The only difference is the text input box at the top that allows you to set the name of your widget. Once you are done assigning your widget instances, remember to hit the Publish or Update button to the right of the title box. This will save your widget set, and now it will be listed in the Widget Set menu.
Note – The plugin will create a Default widget set upon activation (if one does not already exist). This Default widget set will be used for all blog pages that do not have explicit widget sets assigned to them. The standard WordPress Appearance >> Widgets menu is no longer used to assign widgets.
If you want the change the widgets of your regular pages, then edit and update the Default widget set.
Once you are done creating your widgets, you can easily assign them to posts, pages, categories, or tags through a new drop-down menu in the Edit screen.
You can also hook into the plugin and specify your own widget set conditions by using the pre_shiba_get_widget filter.
add_filter('pre_shiba_get_widget', 'gallery_get_widget', 10, 2); function gallery_get_widget($widget, $post) { if ($post->post_type == 'gallery') return 1234; // Return relevant widget set id else return 0; }
Multi-Column Widget
The Shiba Widgets Plugin also includes a new Multi-Column Widget. This widget allows you to turn standard widget areas (or sidebars) into multi-column widget areas.
For example, this page uses the Multi-Column Widget to convert the Header and After Post areas into a 3 column and 2 column layout respectively.
To do this, simply drag and drop the Multi-Column Widget into the target widget area (sidebar) on the right of the Edit Widget Set screen.
Then, continue to add the other widgets that you want to appear in the area. Once you are done, you may set additional properties on the Multi-Column Widget to further define your layout.
In particular, you may set –
- Number of columns – This will divide up a widget area into 2-4 columns. The default is 2.
- Number of widgets – This specifies the number of widgets to include in our multi-column layout.
- Height – This sets the height of the widget area (in pixels). Any overflow is hidden. If you set the height to blank or 0, the area will have variable height.
For example I have set the top widget area on this page to have 3 columns, and a height of 300 pixels.
If you want to create your own multi-column widget areas, here is a tutorial on how to do it.
We can make our multi-column widgets mobile responsive by adding something like this –
@media only screen and (max-width: 600px) { .multi-column-div .widget { width:100% !important; } }
Add Widget Styles
Finally, the Shiba Widgets Plugin also allows you to easily add your own widget classes. This was a great suggestion made by Andre.
All widgets now have a new input box at the bottom where you can add your own widget classes. Simply list all the classes you want as a comma separated list. For example –
test1,test2,test3
Shiba Widgets Shortcode
As of version 2.0, we can now render widgets within our posts using shortcodes. For example –
[shiba-widget class="WP_Widget_Archives" title="My Yearly Archive" count="1" type="yearly" limit="5"]
More widget shortcode examples are shown here.
My Yearly ArchiveAdd Custom Post Types and Custom Taxonomies
We can add shiba widgets support to our own custom post types and taxonomies by using the shiba_widgets_post_types and shiba_widgets_taxonomies filters.
add_filter('shiba_widgets_taxonomies', 'my_shiba_widgets_taxonomies'); function my_shiba_widgets_taxonomies($taxonomies) { return array_merge($taxonomies, array('mytaxonomy')); }
Other Widget Settings
1. Show Lost Widgets
Show Lost Widgets is very useful when you accidentally delete widget sets. When you delete a widget set, the individual widgets within it are not automatically deleted (unless specified in the Delete Widgets option below).
However, they are now lost because they are no longer attached to a widget set. You may retrieve your lost widgets by checking this option.
If this option is checked, then lost widgets will be shown in your Edit Widget Set screen (at the very bottom). You may then reassign or delete those lost widgets.
2. Delete Widgets in Widget Set
This option tells the plugin to delete all the individual widgets within a widget set whenever the widget set is permanently deleted.
For safety, it is best to leave this option turned off so that you may retrieve your individual widgets even if you accidentally delete your widget set.
3. Inherit Widget from Parent
Allows you to specify whether you want a child page to inherit the widget set of its parent page.
A Note About Specialized Widgets
The Shiba Widgets plugin uses the same widget editing interface as the native WordPress system. However, there are some key differences –
- Widget editing now occurs in the post.php page because widget sets are custom post types. In the WordPress native system widget editing occurs in the widget.php page. Some specialized widgets may assume that editing still occurs in the widget.php page, and as a result not load properly under Shiba Widgets. An example is the Image Widget.
- The multi-column and style objects may not work with specialized widgets that do not extend from the WP_Widget class. This is because both objects hook into specific functions that get called in the WP_Widget class. However, widgets that are created from scratch may not call those hooks.In particular, the style object does not work with Akismet. The multi-column object will not work when Akismet, or other specialized widgets are placed as the last widget. If you do not place these widgets at the end, then it will function properly.
Shiba Widgets Plugin Updates
Shiba Widgets 2.2
April 30th 2015
- Properly deal with deactivated widgets in the Edit Widget Set screen.
- Fixed Inactive Widgets area in the Edit Widget Set screen so that it works as before.
- Updated for WordPress 4.2.
Shiba Widgets 2.1.4
Jan 12th 2015
- Updated widget.php and shiba-widgets.js to reflect changes in widget edit core files. This is necessary for the Edit Widget Set screen.
- Tested on WordPress 4.1.
Shiba Widgets 2.1.2
April 25th 2014
- Updated some of the Shiba Social Widget buttons.
- Tested on WordPress 4.0.
Shiba Widgets 2.1
April 25th 2014
- Enable multiple widget sets to be edited simultaneously.
- Use functions for determining plugin directory and url instead of constants.
- Added a later priority to the widget building hook so that it works with Jetpack.
- Turned off widget customizer in theme previewer. Since the very purpose of Shiba Widgets is to enable multiple different widget configurations, it does not make much sense (and can be confusing) to do widget customization within the theme previewer. However, I am thinking about using the theme previewer interface to edit widget sets. If you have suggestions about this, please let me know.
- Tested on WordPress 3.9.
Shiba Widgets 2.0.1
IMPORTANT: wp_get_current_user error with WordPress 3.7
Shiba Widgets 2.0 caused a wp_get_current_user error after installing WordPress 3.7. If you have the Shiba Widgets plugin installed, please update to version 2.0.1 before updating to WordPress 3.7.
If you have already updated to WordPress 3.7 and cannot get into your admin panel because of this error, then the easiest thing to do is to delete the Shiba Widgets plugin directly from your server.
Shiba Widgets 2.0
Aug 17th, 2013
- Tested on WordPress 3.6.
- Render widgets within a post using shortcodes.
- Added support for custom taxonomies.
- Updated Widget Options screen. Now uses metaboxes.
- Added pinterest button for Shiba Social Widget.
Shiba Widgets 1.9
December 17th, 2012
- Updated for WordPress 3.5.
- We can now assign widget sets based on device screen width (using cookies). We can turn this functionality on or off in the Widget Set >> Options screen.
Shiba Widgets 1.8
September 5th, 2012
- Updated for WordPress 3.4.
- Multi column widget has been expanded. It can now be placed anywhere in a sidebar. We can specify the number of widgets to include, and even have multiple different multi column widgets in the same sidebar.
- Expanded propagate widget options capability.
- Quick edit for assigning widget sets is enabled for custom post type objects.
- Themes associated with widget sets are now reflected in 3.4.
- Turned off autosave in the Edit Widget Set screen.
- Added is_home option.
Shiba Widgets 1.5
June 28th, 2011
- Thumbnail image option added to WP Page Widget, WP Recent Posts Widget, WP Recent Comments Widget, and Popularity Contest Widget.
- New widgets added:
- Shiba Tag Cloud – Show all tags or only article tags. Choose from a set of cool tag styles.
- Shiba Social – Add Facebook Like, Twitter, and Google+1 buttons.
- Shiba Author – Show author description and author link.
- Expanded existing WordPress widgets with new display options.
- WP Recent Comments Widget – Comments are now grouped by post. Can also filter out blog author comments and set maximum comment length. Supports thumbnail images.
- WP Archives Widget – Set what type of archives to display including a new Monthly & Yearly archive type. Set post count and number of archive links shown.
- Easily add Shiba Widgets to new custom post types by adding ‘shiba-widgets’ to the supports attribute of the register_post_type function. Many thanks to Greg Bellucci for adding this.
- Assign different themes to different widget sets and easily edit widget sets according to their associated themes.
- Change wordpress themes on a page by page basis based on their assigned widget sets.
- Include or exclude any of these new features through the Widget Set >> Options screen.
Shiba Widgets 1.4
March 7th, 2011
- Updated for WordPress 3.1. Tested on WordPress 3.0 and 3.1.
- Widget sets can now be assigned through Quick Edit and Bulk Edit.
- Only published widget sets will be applied. If a widget set gets unpublished, put in the trash, or deleted, then all posts or pages assigned to it will use the Default widget set.
Shiba Widgets Patch 1.3.1
September 4th, 2010
- Fixed the disappearing widgets bug identified by Axel. Many thanks for Axel for letting me test the plugin on his test site.
- When you add a widget, there is a rotating wheel indicating that the widget is being created and saved. Only save your widget set after the rotating wheel has disappeared.
Shiba Widgets 1.3
August 24th, 2010
- Widget sets are now represented as custom post types. This provides a cleaner back-end and enhances usability. However, this new release requires WordPress 3.0 and above.
- Expanded plugin to work on WordPress multisite and network activation.
- The Default widget set now tries to preserve your previous widget sidebar settings.
- Added ability to assign widget sets to archive pages. Thanks to James for this great suggestion.
- Fixed Text Widget propagate bug. Thanks to Sheryl for reporting this.
Shiba Widgets Patch 1.2.2
- Fixed some bugs with the add_styles function.
Shiba Widgets Patch 1.2.1
- Fixed converting old widget style data. Old widget style information from 1.0 should now automatically transfer to new releases.
- Fixed Manage Widgets screen for WordPress 3.0.
- Fixed PHP notices.
Shiba Widgets 1.1
- Updated for WordPress 3.0. Plugin will now work on 2.9 and 3.0. However, multi-site support has not yet been added.
- Copy widget sets.
- Assign widget sets for front-page, search, file not found (404), all posts, all pages, etc.
- Retrieve and delete lost widgets.
- Tag and Category widget information is now stored in a metadata table. It no longer shows up in the description section.
- Propagate text widget changes.
- The Multi-Column Widget and Style Widget now use standard WordPress core options to store their results.
Thanks to Rob for making some of the great feature suggestions that went into this release.
Sheryl says
Hi Shiba – Changing the default page worked! So now I have the widgets I want on every blog page. The individual links (under Recent Posts) originally looked pretty crowded. I added some space and they look better. But, ideally, I’d like to add a line between the links. Similar to how HubSpot treats Recent Posts on their site http://www.hubspot.com/blog. Do you know what CSS code I would enter into the CSS Inserts for this to work? Thanks!
ShibaShake says
Try something like –
Sheryl says
Another question for you Shiba. As you can tell, I am using your plugin! I have set up a right sidebar widget for my blog and post home pages I have specified this custom widget for both pages. The widget includes “Recent Posts,” “Categories,” “Blog Archive” and “Meta Data.” The widget shows up fine on the Posts home page, however, it is not showing up on my Blog home page. The blog sidebar includes “Recent Posts,” “Blogroll,” and “Meta.” This appears to be a default sidebar, and my custom widget is not overriding it? How do I get the Blog home page to include the custom widget I set upt? Thank you!
ShibaShake says
Go into Appearance >> Widget Options. Set the widget set under is_frontpage to what you want.
Sheryl says
I had already tried that; about 10 times! Doesn’t work…
ShibaShake says
I must have misunderstood you then. There is a static front page and a page that shows all your blog posts (posts page). If you go into Reading Settings the first is defined as Front page and the second as Posts page.
From your description it seems like you are having trouble with the static front page but from looking at your site I now see it is an issue with the posts page – which makes a lot more sense.
The Posts page in WordPress is just a placeholder and none of the styles, templates etc are used from it.
Currently the Posts page will always use the Default widget set. I can set up an extra condition for it but that might be confusing to the people who do not use static front pages. One of those things …
Btw – Your site is shaping up really nicely. Good work!
Sheryl says
Thank you so much. This is my first web site, so lots of learning! I understand your comment about confusing people who use WP for blog only. Is there anything I can do to change the default settings for the Post page? Thanks so much. My site wouldn’t look this way without your plugin!
ShibaShake says
You can change the Default widget set. This is the widget set that gets used for all pages that do not have widgets associated with them.
Sheryl says
Hi Shiba –
Hoping you can help with this one. I added a text box widget to my home page right side bar containing a link to my blog. I have a unique widget set specifically for my home page. The link then started appearing automatically in text boxes on other sidebars, even though those sidebars contained a completely different widget set. The link actually replaced the code I had previously entered in these text boxes (). For example, I didn’t like the spacing on my blog page so I added the text boxes with the <div code to open up the space between widgets. I ended up removing the widget with the link and re-entering the <div code in all other text boxes. Any thought on why this happened?
ShibaShake says
There is a checkbox that appears on text widgets that allows you to propagate the changes made in the text box. It should only propagate to other text widgets that have the same previous text.
My guess is that you had copied the widget set so the text widget had the same text as some other ones. When you changed its text and saved it, the changes got propagated to other text widgets with the same text.
To turn off propagation, simply uncheck the propagate checkbox. I should probably have it default to unchecked. Will definitely do that on next update which I will start on after I finish moving all my blogs to a multisite setup.
Thanks for letting me know of these issues. Please continue to give me input so that I can improve the plugin UI
Sheryl says
OK – I unchecked the box and that fixed the problem. It does automatically recheck before saving the widget set, though, so I have to really watch out for that. Would be great to have default unchecked as you suggest.
Another question. I’d like to change the link color within a widget. What is the CSS code for that? I’ve tried many things, but seems to change the link style throughout my site. I just want to change the color in one specific text box.
Also, when I changed the font size of the text box, it also changed the size of the title, which I did not want. Is there a way to set styles for just the text box and not the title? Thanks…
ShibaShake says
Try something like –
where my-css-class is the style you added. You can also do the same thing using other ids in the widget div.
Yeah you want to apply the font-size just to the div for the text. Currently you are probably applying the font-size to the outer div that contains both the text and the widget-title. You can do something like –
Either menu or menu-item should work.
Also Google Chrome is very handy for getting a quick view of divs. If you right click on any page element in Chrome you can choose to ‘Inspect element’ which shows you the div and all the css styles applied. Very useful.
Sheryl says
Hi Shiba. I have both the 1.2.1 and 1.2.2 versions of the plugin in WordPress. Only 1.2.2 is active. Can I safely delete version 1.2.1 or will that affect my site? Also, could this be causing some of the problems I am having with the style classes attaching to the wrong widgets?
Sheryl says
That’s the strange part. I applied the css style to the text box in the left sidebar (I added some text in the box so you can see it), yet the style change is being applied to the box in the right sidebar…
ShibaShake says
Hmmm … this sounds like a bug I just fixed a couple of days ago. Try reloading the plugin zip, and reinstalling it and let me know what happens. Thanks!
Sheryl says
Can I safely delete version 1.2.1 when I re-install 1.2.2?
ShibaShake says
Yeah I would delete version 1.2.1 – which would probably delete the whole plugin. Then just reinstall 1.2.2.
Sheryl says
Not good. I deleted the version, and now my site is gone and I cannot even access my wordpress admin panel through GoDaddy. I am on hold with GoDaddy. I am afraid they will not support me because it is not a WP plug-in. Can you help, please…
Sheryl says
Here is the code I get when I try to access my site or the admin control panel:
Warning: require(/home/content/53/6096253/html/wp-content/plugins/shiba-widgets/shiba-widget-general.php) [function.require]: failed to open stream: No such file or directory in /home/content/53/6096253/html/wp-content/plugins/shiba-widgets-1/shiba-widgets.php on line 45
Fatal error: require() [function.require]: Failed opening required ‘/home/content/53/6096253/html/wp-content/plugins/shiba-widgets/shiba-widget-general.php’ (include_path=’.:/usr/local/php5/lib/php’) in /home/content/53/6096253/html/wp-content/plugins/shiba-widgets-1/shiba-widgets.php on line 45
ShibaShake says
Just delete the whole shiba-widgets directory. Go into your hosting server admin panel – go into
wp-content/plugins and delete the shiba-widgets or shiba-widgets-1 directory. Your site is still there- there is just an error that is preventing it to load.
Here are the instructions from GoDaddy on how to delete files-
http://help.godaddy.com/article/3243
Make sure to only delete the shiba-widgets-1 directory and not anything else.
Sheryl says
I can breathe again. Deleting the Shiba directory allowed me to access the admin panel and installing the new version corrected all of the style problems. Thanks for your help and patience…
ShibaShake says
I am so glad it is all fixed 😀
Remember to backup your blog on a regular basis so that you can restore it if you ever need to. I think GoDaddy may have an automatic backup function.
Sheryl says
I found where to put the code in the Atahualpa theme, and I’m seeing the changes. Finding something strange, though. I added a text box to the left sidebar and added the style code there. However, the change is showing up in the right sidebar. I tried it many different times with the same result. Have you heard of this problem before? Maybe it’s late??
Sheryl says
Well — I’m trying! I added the code at the bottom of the css style sheet as you can see below. I tried it with the */ and without, but it didn’t work either way. I then added my-css-class1 in the style box of the widget, but nothing happened. I’m simply trying to change the background color and font color of this widget. Thank you for your help!
ShibaShake says
Ok I looked briefly at your site.
1. The my-css-class1 is appearing on the first text widget, however all that widget seems to contain is an image. Are you trying to change the color and background of the image? If so it is necessary to change that on the image itself. The CSS will only affect regular text and background.
2. The /* and */ symbols are for comments – i.e. whatever is put between those symbols won’t actually get executed. In this case you want to leave the symbols out.
3. Often the text color and background color of a widget may already be defined by the theme you are using. To change those colors you will need to override those specific styles which can sometimes be non-trivial.
Sheryl says
Really stupid question to you, I’m sure. But where do I place the code:
.my-css-class1 { color:#00f; background-color:#f00; }
Thanks!
ShibaShake says
Usually CSS styles go into the style.css file of your theme (or child theme). If you want to create dynamic styles – then it goes into the functions.php file.
If you let me know what your end goal is, I could probably point you in the right direction.
Sheryl says
Hi Shiba – Love your plugins! Quite new to WordPress and have virtually no CSS/HTML knowledge. In spite of this, am doing ok with the Atahualpa theme. I am trying to “Add Widget Styles” to one of my widgets. Your instructions seems simple, but I can’t get it to work. Can you provide an example of the exact code that should be entered in the style box as opposed to “test 1, test 2, test 3.” Thanks!
ShibaShake says
Hello Sheryl,
Just enter in the CSS class names you want to use separated by commas. So for example –
Then within the style box enter –
Note – there are no spaces.
Also there were some bugs with the style module that I just fixed so make sure you have the most recent version of the plugin. Let me know if you run into any problems.
ShibaShake says
Hello Indra,
Could you let me know some of the details of your setup –
1. What theme are you using?
2. What plugins are you using?
3. When you first activate the plugin, does the Default widget appear in Appearance >> Manage Widgets?
4. Can you edit Default widget and make changes?
5. Do the changes of Default widget show up on the main page?
It may also help if you include a link to the HTML page that is showing the error.
I am currently unable to duplicate this error. To properly debug it I would need more information or I could debug it on your setup – but I would need a temporary account for that.
Indra says
I have sent you temp login, please check.
Here’s what I experienced:
1. What theme are you using? elegantthemes 13th Floor
2. What plugins are you using? several, please see in admin page
3. When you first activate the plugin, does the Default widget appear in Appearance >> Manage Widgets? when i first activate plugin, my original widget were all erased.
4. Can you edit Default widget and make changes? Yes, i can in the setup panel, but in website, it says those warning error.
5. Do the changes of Default widget show up on the main page? No, i get warning there’s error in plugin php and widget php.
Thank you so much for you help
ShibaShake says
Hello Indra,
Unfortunately, I am unable to access your site. It goes into transferring data but never loads up. Here are some things to try –
1. Go into shiba-widget-style and go to line 13. Change add_styles(&$params) to add_styles($params).
Do you still get the error messages?
2. Go into shiba-widgets.php and comment out line 161 –
Do you still get the error messages?
3. It could be a plugin conflict. Turn off all plugins. Do you still get the error messages?
4. It could be a theme conflict. Switch to Twenty-Ten. Do you still get the error messages?
Thanks for helping me debug the plugin. Let me know how it goes.
Indra says
Hi Shiba
I want to tell you that your plugin is running now
The error messages was disappear after I apply your 1st solution
Thank you Shiba 🙂
ShibaShake says
Thanks for getting back to me Indra. Glad to hear that everything is fixed.