By default most WordPress themes uses same style for all sidebar and other widget areas. This tutorial is on how you can make selected widgets on your website look differently in some custom style given by you.
First of all install and activate the WordPress plugin called Widget CSS Classes. This is a well known WP plugin that allows you to add custom classes and ids plus first, last, even, odd, and numbered classes to your widgets. Not only this much but it also adds some additional classes to help you style your widgets more easily:
- widget-first: added to the first widget in a sidebar
- widget-last: added to the last widget in a sidebar
- widget-odd: added to odd numbered widgets in a sidebar
- widget-even: added to even numbered widgets in a sidebar
- widget-#: added to every widget, such as widget-1, widget-2
After activation visit your admin area Dashboard -> Appearance -> Widgets page and you will see a new CSS class field is added under each widget. Now all you have to do is write custom CSS and add its class to individual widgets.
Screenshot showing basic widget after the plugin is activated:
Screenshot showing widget with ID field and Dropdown option enabled:
Widget Options & Features:
There are some more options this widgets provides you (Settings -> Widget CSS Classes) like you can enable Widget Number Classes, First/Last Classes, Even/Odd Classes, Show Additional Field for ID, Class Field Type Text Dropdown Hide etc. Also you can define Classes for Dropdown from the options page.
Features:
- Adds a text field to a widget for defining a class
- You can specify multiple classes by putting a space between them
- Optionally adds a dropdown menu with predefined classes instead of a text field
- Optionally adds a text field to add an id to a widget
- Adds first and last classes to the first and last widget instances in a sidebar
- Adds even/odd classes to widgets
- Adds number classes to widgets
- Fully translatable
- Multi-site compatible
- Compatible with Widget Logic and Widget Context plugins
- Has filters and hooks for customizing output including class names