WordPress Plugin to add CSS classes to Widgets
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
bin Add TravisCI files + phpunit library error with WP Unit Tests Apr 29, 2017
css
includes
js
languages
tests
.codeclimate.yml
.editorconfig
.gitattributes
.gitignore
.travis.yml
README.md
composer.json
license.txt
phpunit.xml
readme.txt
uninstall.php
widget-css-classes.php

README.md

Widget CSS Classes

Add custom classes and ids plus first, last, even, odd, and numbered classes to your widgets.

WordPress Plugin version WordPress Plugin WP tested version WordPress Plugin downloads WordPress Plugin rating License Travis Code Climate

Widget CSS Classes gives you the ability to add custom classes and ids to your WordPress widgets

Please note that this plugin doesn't enable you to enter custom CSS. You'll need to edit your theme's style.css or add another plugin that allows you to input custom CSS.

This plugin also adds additional classes to widgets to help you style them easier:

  • 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

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 checkboxes with predefined classes
  • 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, Widget Context, and WP Page Widget plugins
  • Has filters and hooks for customizing output including class names

Installation

  1. Upload the folder /widget-css-classes/ to the /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins menu in WordPress
  3. Configure the settings under Settings > Widget CSS Classes
  4. Visit Appearance > Widgets to add or change the custom classes and ids for a widget.
  5. Expand the appropriate widget in the desired sidebar.
  6. You'll see a field labeled CSS Class. Depending on your settings, this will be a text field and/or checkboxes.
  7. If you are using the text field you can enter multiple class names by separating them with a space.
  8. If you've enabled the id field, you will see a text field called CSS ID.

More info and documentation

See our wiki!