Tag Archives: CSS

How To Add Custom CSS Classes To Individual WordPress Widgets?

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

New Easy Way Of Overriding Text Selection Color In WordPress

You can change text color of your WordPress site to whatever you like, few months back we discussed how you can change text selection color by editing style.css or by adding the css to Jetpack’s Edit CSS editor etc. But now you can do this more easy, without digging inside your theme files etc. Now you can do this with an easy to use WordPress plugin.

Continue reading New Easy Way Of Overriding Text Selection Color In WordPress

How To Activate Separate Themes In Different Frontent Areas Of WordPress ?

You can use a separate theme in your site Home Page, Individual Posts & Pages, Post & Page Archives and other non-admin areas of your WordPress based website. Earlier we discussed about a WordPress plugin that allows you to assign a custom theme to individual posts and pages.

Continue reading How To Activate Separate Themes In Different Frontent Areas Of WordPress ?

How To Display Icons With Widget Titles In WordPress ?

Rather than displaying simple text widget title you can easily add related icons to it. You can enhance your website with 530+ icons specially designed for Twitter Bootstrap simply by using Widget Icon plugin.   Continue reading How To Display Icons With Widget Titles In WordPress ?