auto widget | Internet Growth Engine: the startup interface

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.