Title: Widget CSS Classes
Author: Jory Hogeveen
Published: Agẹmọ 16, 2012
Last modified: Bélú 12, 2024
---
Ṣàwárí àwọn plugin
Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**.
Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu
nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun.
# Widget CSS Classes
Láti ọwọ́ [Jory Hogeveen](https://profiles.wordpress.org/keraweb/)
[Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/widget-css-classes.1.5.4.1.zip)
* [Àwọn àlàyé](https://yor.wordpress.org/plugins/widget-css-classes/#description)
* [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/widget-css-classes/#reviews)
* [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/widget-css-classes/#installation)
* [Ìdàgbàsókè](https://yor.wordpress.org/plugins/widget-css-classes/#developers)
[Ìrànlọ́wọ́](https://wordpress.org/support/plugin/widget-css-classes/)
## Àpèjúwe
### Widget CSS Classes gives you the ability to add custom classes and ids to your WordPress widgets
_Please note that this plugin doesnÌtumọ̀ Yorùbá: ’t enable you to enter custom
CSS. YouÌtumọ̀ Yorùbá: ’ll need to edit your themeÌtumọ̀ Yorùbá: ’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
[Plugin Website](https://github.com/JoryHogeveen/widget-css-classes/wiki)
### Credits
* [Adding Custom CSS Classes to WordPress Widgets](http://ednailor.com/2011/01/24/adding-custom-css-classes-to-sidebar-widgets/)
* [Add .first & .last CSS Class Automatically To WordPress Widgets](http://wpshock.com/add-first-last-css-class-automatically-to-wordpress-widgets/)
* Widget Context compatibility fix provided by [Joan Piedra](http://joanpiedra.com/)
* Slovak translation by Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
* Polish translation added, Slovak translation files renamed by [Tomasz Wesołowski](https://github.com/ittw)
* Spanish translation by [Maria Ramos at WebHostingHub](http://www.webhostinghub.com/)
* Serbo-Croatian translation by [Borisa Djuraskovic at WebHostingHub](http://www.webhostinghub.com/)
* Dutch translation and predefined classes fix by [Jory Hogeveen at Keraweb](https://www.keraweb.nl/)
* Russian translation by Наталия Завьялова
* Swedish translation by [Olle Gustafsson](http://www.ollegustafsson.com/)
* Fix ids notice by [Ricardo Lüders](http://www.luders.com.br/)
* Brazilian Portuguese translation by [Jonathan Xavier at Mealfan](https://mealfan.com/)
[Translation Contributors](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors/)
[GitHub Contributors](https://github.com/JoryHogeveen/widget-css-classes/graphs/contributors)
## Àwọn àwòrán ìbòjú
[⌊Basic Widget⌉⌊Basic Widget⌉[
Basic Widget
[⌊Widget with ID field and Predefined Choices⌉⌊Widget with ID field and Predefined
Choices⌉[
Widget with ID field and Predefined Choices
[⌊Settings Page⌉⌊Settings Page⌉[
Settings Page
[⌊Generated HTML⌉⌊Generated HTML⌉[
Generated HTML
## Ìgbéwọlẹ̀
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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’ve enabled the id field, you will see a text field called**
CSS ID**.
## FAQ
### Why arenÌtumọ̀ Yorùbá: ’t the classes showing up in my widget?
You need to make sure you have an HTML element defined for `before_widget` and `
after_widget` in your active themeÌtumọ̀ Yorùbá: ’s `register_sidebar` functions,
usually located in your themeÌtumọ̀ Yorùbá: ’s functions.php (_/wp-content/themes/
yourtheme/functions.php_).
This HTML element must have class and id attributes. This plugin will not work if`
before_widget` and `after_widget` are blank.
Example:
`register_sidebar( array( 'name' => 'Sidebar', 'before_widget' => '', 'after_widget' => '
', 'before_title' => '
' ) );
### How do I add the CSS for my custom class?
There are two ways:
1. Edit your themeÌtumọ̀ Yorùbá: ’s style.css file (usually located in _/wp-content/
themes/yourtheme/_).
2. Use a plugin such as [Simple Custom CSS](https://wordpress.org/plugins/simple-custom-css/).
### How I export the Settings?
You can export the Settings from **Settings > Widget CSS Classes > Import/Export**.
### What should I do if I find a bug?
Please file a [bug report on GitHub](https://github.com/JoryHogeveen/widget-css-classes/issues/new).
## Àwọn àgbéyẹ̀wò
### [Not working on WordPress 5.8](https://wordpress.org/support/topic/not-working-on-wordpress-5-8/)
[Pouria Amjadzadeh](https://profiles.wordpress.org/pamjad/) Ògún 10, 2021 1 ìdáhùn
Wordpress released new style of widget management. this lovely plugin not working
on new version 🙁
### [Good](https://wordpress.org/support/topic/good-6318/)
[Kasp](https://profiles.wordpress.org/kasp/) Ẹrẹ́nà 27, 2021
works
### [Invaluable!](https://wordpress.org/support/topic/invaluable-63/)
[andiszek](https://profiles.wordpress.org/andiszek/) Ẹrẹ́nà 10, 2021
This is a great and invaluable help for us frontend developers! the plugin lets
you easily add your classes to any widget. thank you for developing it!
### [Superb!](https://wordpress.org/support/topic/superb-721/)
[Damiaan van Vliet](https://profiles.wordpress.org/damnsharp/) Igbe 2, 2020 1 ìdáhùn
A very useful plug-in for me as a front-end developer. ItÌtumọ̀ Yorùbá: ’s very
easy now to address directly a widget with CSS code instead of all kind of different
classes to use. Thanks very, very much!
### [Great! 🙂](https://wordpress.org/support/topic/great-10883/)
[xszejdi](https://profiles.wordpress.org/xszejdi/) Èrèlé 17, 2020
Great! 🙂
### [Works, simply and well…](https://wordpress.org/support/topic/works-simply-and-well/)
[crzyhrse](https://profiles.wordpress.org/crzyhrse/) Ọ̀pẹ 5, 2019
Works, simply and well…
[ Ka gbogbo àwọn àgbéyẹ̀wò 74 ](https://wordpress.org/support/plugin/widget-css-classes/reviews/)
## Àwọn Olùkópa & Olùgbéejáde
“Widget CSS Classes” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe
ìkópa sí plugin yìí.
Àwọn Olùkópa
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
* [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)
A ti túmọ̀ “Widget CSS Classes” sí àwọn èdè agbègbè 17. Ọpẹ́lọpẹ́ fún [àwọn atúmọ̀ èdè](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors)
fún àwọn ìkópa wọn.
[Túmọ̀ “Widget CSS Classes” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?
[Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/widget-css-classes/),
ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/widget-css-classes/),
tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/widget-css-classes/)
nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/widget-css-classes/?limit=100&mode=stop_on_copy&format=rss).
## Àkọsílẹ̀ àwọn àyípadà
#### 1.5.4.1
* Tested with WP 5.5.
* Update plugin owner.
#### 1.5.4
* **Compatibility:** Fix for old single widgets (remove notice). [#37](https://github.com/cleverness/widget-css-classes/issues/37)(
props @westonruter)
* Tested with WP 5.2.
#### 1.5.3
* **Compatibility:** dFactory Responsive Lightbox widget option. [#33](https://github.com/cleverness/widget-css-classes/issues/33)
* Tested with WP 5.0.
#### 1.5.2.1
* **i18n:** Remove sv_SE translation from the plugin directory. ItÌtumọ̀ Yorùbá:’
s 95% on translate.wordpress.org and accepted as the better version. [#23](https://github.com/cleverness/widget-css-classes/issues/23)
* **Documentation:** Readme & Wiki. [#31](https://github.com/cleverness/widget-css-classes/issues/31)
* **Compatibility:** Tested with WordPress 4.9
Detailed info: [PR on GitHub](https://github.com/cleverness/widget-css-classes/pull/32)
#### 1.5.2
* **Enhancement:** Make translations of core widget classes optional instead of
default. [#29](https://github.com/cleverness/widget-css-classes/issues/29)
* **Enhancement:** Allow vertical resize of defined classes box for CSS3 compatible
browsers.
Detailed info: [PR on GitHub](https://github.com/cleverness/widget-css-classes/pull/30)
#### 1.5.1
* **Fix:** Widget Logic `widget_content` filter compatibility. [#27](https://github.com/cleverness/widget-css-classes/issues/27)
* **Enhancement:** Make uninstall script compatible with network installations.
#### 1.5.0
* **Feature:** Option to try and fix the widget parameters if they are invalid.
[#24](https://github.com/cleverness/widget-css-classes/issues/24)
* **Feature:** Option to remove duplicate classes. [#25](https://github.com/cleverness/widget-css-classes/issues/25)
* **Enhancement:** Sort classes based on the predefined classes on the frontend
by default. [#19](https://github.com/cleverness/widget-css-classes/issues/19)
* **Enhancement:** Classes filter for frontend (for sorting or modifications).
[#19](https://github.com/cleverness/widget-css-classes/issues/19)
- `widget_css_classes`: modify all classes added by this plugin.
- `widget_css_classes_custom`: modify custom input classes.
* **Enhancement:** Plugin settings filter (`widget_css_classes_set_settings`),
overwrites user settings. [#16](https://github.com/cleverness/widget-css-classes/issues/16)
* **Enhancement:** Plugin default settings filter (`widget_css_classes_default_settings`).
[#4](https://github.com/cleverness/widget-css-classes/issues/4)
* **Enhancement:** Capability filters for form fields. [#21](https://github.com/cleverness/widget-css-classes/issues/21)
- `widget_css_classes_id_input_capability`: ID input
- `widget_css_classes_class_input_capability`: classes input
- `widget_css_classes_class_select_capability`: predefined classes select (also
hides classes input if invalid)
* **Compatibility:** WP External Links. [#17](https://github.com/cleverness/widget-css-classes/issues/17),
thanks to Victor [@freelancephp](https://profiles.wordpress.org/freelancephp)
* **Fix:** Form wrapper div style. [#18](https://github.com/cleverness/widget-css-classes/issues/18),
thanks to Chuck Reynolds [@ryno267](https://profiles.wordpress.org/ryno267)
* **Fix:** Enable sortable input selection (IE-11 fix). [#20](https://github.com/cleverness/widget-css-classes/issues/20)
* **UI:** Enhance setting page JavaScript and remove relCopy library dependency.
* **i18n:** Remove Dutch and Russian languages from plugin distribution (available
on [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)).
[#23](https://github.com/cleverness/widget-css-classes/issues/23)
* Started using TravisCI and CodeClimate. [#15](https://github.com/cleverness/widget-css-classes/issues/15)
Detailed info: [PR on GitHub](https://github.com/cleverness/widget-css-classes/pull/22)
#### 1.4.0
* Feature: Sort Pre-defined classes (thanks Jory Hogeveen)
* Security: Prevent unauthenticated import of settings
* Fix: Notice message when classes is empty (thanks Jory Hogeveen)
#### 1.3.0
* Feature: Change dropdown to checkboxes for multiple class selection
* Feature: Option to use both predefined and text input classes
* Feature: Migrate classes when predefined classes are available
* Improvement: Do not show previously defined classes that are removed in the settings
page when a widget is not updated yet
* Fix: Only show stored classes if the field-type in the setting page is correct
* Fix: When predefined is selected, show previous text input classes if they are
defined
* Fix: Ids index notice
* i18n: Added Dutch translation by [Jory Hogeveen at Keraweb](https://www.keraweb.nl/)
* i18n: Added Russian translation by Наталия Завьялова
* i18n: Added Swedish translation by [Olle Gustafsson](http://www.ollegustafsson.com/)
#### 1.2.9
* Changed h2 to h1 on settings page
* Changed plus/minus icons on settings page to dashicons
#### 1.2.8
* Added text domain to plugin header in preparation for automatic language translations
#### 1.2.7
* Changed class and ID fields to full-width
* Added missing escaping from settings page
* Enqueue admin scripts on correct hook
* Fixed undefined notice when option was not found
#### 1.2.6
* Fixed error notice
#### 1.2.5
* Fixed notice
#### 1.2.4
* Added Serbo-Croatian translation by [Borisa Djuraskovic at WebHostingHub](http://www.webhostinghub.com/)
* Added support for WP Page Widget
#### 1.2.3
* Added Polish translation, Slovak translation files renamed by [Tomasz Wesołowski](https://github.com/ittw)
* Added Spanish translation by [Maria Ramos at WebHostingHub](http://www.webhostinghub.com/)
#### 1.2.2
* Fix for notice on line 103 when using Widget Logic
* Tested with WordPress 3.7 beta 1
#### 1.2.1
* Added Slovak translation by Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
* Updated Widget Context compatibility fix plus notice fix by [Joan Piedra](http://joanpiedra.com/)
* Changed jQuery live to on for 1.9 compatibility
#### 1.2
* Replace ID with custom ID rather than appending to existing ID
* Added settings to not show numbered widget classes, first/last classes, and even/
odd classes
#### 1.1
* Added support for Widget Context plugin
* Fixed notices appearing when Widget Logic plugin was enabled but filter was disabled
* Added Hide option for the Class Field Type in Settings
* DonÌtumọ̀ Yorùbá: ’t show any previously added IDs in front end if Show Additional
Field for ID is set to No
* DonÌtumọ̀ Yorùbá: ’t show any previously added classes in front end if Class
Field Type is set to Hide
#### 1.0
* First version
## Àkójọpọ̀ Meta
* Ẹ̀yà **1.5.4.1**
* Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 2 sẹ́yìn**
* Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **80,000+**
* Ẹ̀yà WordPress ** 3.3 tàbí ju bẹ́ẹ̀ lọ **
* Dánwò dé **6.7.5**
* Ẹ̀yà PHP ** 5.2.4 tàbí ju bẹ́ẹ̀ lọ **
* Àwọn èdè
* [Danish](https://da.wordpress.org/plugins/widget-css-classes/), [Dutch](https://nl.wordpress.org/plugins/widget-css-classes/),
[Dutch (Belgium)](https://nl-be.wordpress.org/plugins/widget-css-classes/), [English (Australia)](https://en-au.wordpress.org/plugins/widget-css-classes/),
[English (Canada)](https://en-ca.wordpress.org/plugins/widget-css-classes/),
[English (New Zealand)](https://en-nz.wordpress.org/plugins/widget-css-classes/),
[English (UK)](https://en-gb.wordpress.org/plugins/widget-css-classes/), [English (US)](https://wordpress.org/plugins/widget-css-classes/),
[French (France)](https://fr.wordpress.org/plugins/widget-css-classes/), [Galician](https://gl.wordpress.org/plugins/widget-css-classes/),
[German](https://de.wordpress.org/plugins/widget-css-classes/), [Korean](https://ko.wordpress.org/plugins/widget-css-classes/),
[Portuguese (Brazil)](https://br.wordpress.org/plugins/widget-css-classes/),
[Russian](https://ru.wordpress.org/plugins/widget-css-classes/), [Spanish (Chile)](https://cl.wordpress.org/plugins/widget-css-classes/),
[Spanish (Spain)](https://es.wordpress.org/plugins/widget-css-classes/), [Spanish (Venezuela)](https://ve.wordpress.org/plugins/widget-css-classes/),
àti [Swedish](https://sv.wordpress.org/plugins/widget-css-classes/).
* [Túmọ̀ sí èdè rẹ](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
* Àwọn àmì
* [classes](https://yor.wordpress.org/plugins/tags/classes/)[css](https://yor.wordpress.org/plugins/tags/css/)
[widget classes](https://yor.wordpress.org/plugins/tags/widget-classes/)[widget css](https://yor.wordpress.org/plugins/tags/widget-css/)
[widgets](https://yor.wordpress.org/plugins/tags/widgets/)
* [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/widget-css-classes/advanced/)
## Àwọn ìbò
4.9 lára àwọn ìràwọ̀ 5.
* [ 70 5-star reviews ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=5)
* [ 3 4-star reviews ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=4)
* [ 0 3-star reviews ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=3)
* [ 1 2-star review ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=2)
* [ 0 1-star reviews ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/widget-css-classes/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/widget-css-classes/reviews/)
## Àwọn Olùkópa
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
* [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)
## Ìrànlọ́wọ́
Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́?
[Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/widget-css-classes/)
## Ṣe ìtọrẹ
Ṣé o fẹ́ ṣe àtìlẹ́yìn fún ìlọsíwájú plugin yìí?
[ Ṣe ìtọrẹ sí plugin yìí ](https://www.keraweb.nl/donate.php?for=widget-css-classes)