Title: Widget CSS Classes Author: Jory Hogeveen Published: 16 de julio de 2012 Last modified: 12 de noviembre de 2024 --- Buscar plugins ![](https://ps.w.org/widget-css-classes/assets/banner-772x250.jpg?rev=1130650) ![](https://ps.w.org/widget-css-classes/assets/icon-256x256.jpg?rev=1130657) # Widget CSS Classes Por [Jory Hogeveen](https://profiles.wordpress.org/keraweb/) [Descargar](https://downloads.wordpress.org/plugin/widget-css-classes.1.5.4.1.zip) * [Detalles](https://es.wordpress.org/plugins/widget-css-classes/#description) * [Valoraciones](https://es.wordpress.org/plugins/widget-css-classes/#reviews) * [Instalación](https://es.wordpress.org/plugins/widget-css-classes/#installation) * [Desarrollo](https://es.wordpress.org/plugins/widget-css-classes/#developers) [Soporte](https://wordpress.org/support/plugin/widget-css-classes/) ## Descripción ### 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 [Plugin Website](https://github.com/JoryHogeveen/widget-css-classes/wiki) ### Agradecimientos * [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) ## Capturas * [[ * Basic Widget * [[ * Widget with ID field and Predefined Choices * [[ * Settings Page * [[ * Generated HTML ## Instalación 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**. ## FAQ ### Why aren’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’s `register_sidebar` functions, usually located in your theme’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' => '

', 'after_title' => '

' ) ); ### How do I add the CSS for my custom class? There are two ways: 1. Edit your theme’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). ## Reseñas ![](https://secure.gravatar.com/avatar/90ba5995d8eb6dc8041417f0a189a1a275d2f2df3c7348083604c74ddafc0493? s=60&d=retro&r=g) ### 󠀁[Not working on WordPress 5.8](https://wordpress.org/support/topic/not-working-on-wordpress-5-8/)󠁿 [Pouria Amjadzadeh](https://profiles.wordpress.org/pamjad/) 10 de agosto de 2021 1 respuesta Wordpress released new style of widget management. this lovely plugin not working on new version 🙁 ![](https://secure.gravatar.com/avatar/616de50077ab7cb718d024f7398ca217a88c44c9e28e485e43d740fdd150593c? s=60&d=retro&r=g) ### 󠀁[Good](https://wordpress.org/support/topic/good-6318/)󠁿 [Kasp](https://profiles.wordpress.org/kasp/) 27 de marzo de 2021 works ![](https://secure.gravatar.com/avatar/d51b00d993a2463b733547d6dc1be46abe2c5f03ff2ebcb41db235452be93565? s=60&d=retro&r=g) ### 󠀁[Invaluable!](https://wordpress.org/support/topic/invaluable-63/)󠁿 [andiszek](https://profiles.wordpress.org/andiszek/) 10 de marzo de 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! ![](https://secure.gravatar.com/avatar/eea8e8b36980f791f34dc4ec92fbab8311a1010ec35e89bf63695f91785a4b6c? s=60&d=retro&r=g) ### 󠀁[Superb!](https://wordpress.org/support/topic/superb-721/)󠁿 [Damiaan van Vliet](https://profiles.wordpress.org/damnsharp/) 2 de abril de 2020 1 respuesta A very useful plug-in for me as a front-end developer. It’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! ![](https://secure.gravatar.com/avatar/d3462a8239b704c5bd2d76f66f54e820910c550b6aef028307ec75833bfb72cc? s=60&d=retro&r=g) ### 󠀁[Great! 🙂](https://wordpress.org/support/topic/great-10883/)󠁿 [xszejdi](https://profiles.wordpress.org/xszejdi/) 17 de febrero de 2020 Great! 🙂 ![](https://secure.gravatar.com/avatar/9ad8028c0e84e4e321488590012ffcca9662da86a0b25eeb4bbe86f9ec1f63e7? s=60&d=retro&r=g) ### 󠀁[Works, simply and well…](https://wordpress.org/support/topic/works-simply-and-well/)󠁿 [crzyhrse](https://profiles.wordpress.org/crzyhrse/) 5 de diciembre de 2019 Works, simply and well… [ Leer todas las 74 reseñas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/) ## Colaboradores y desarrolladores «Widget CSS Classes» es un software de código abierto. Las siguientes personas han colaborado con este plugin. Colaboradores * [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/) * [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/) «Widget CSS Classes» está traducido en 17 idiomas. Gracias a [los traductores](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors) por sus contribuciones. [Traduce «Widget CSS Classes» a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes) ### ¿Interesado en el desarrollo? [Revisa el código](https://plugins.trac.wordpress.org/browser/widget-css-classes/), echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/widget-css-classes/) o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/widget-css-classes/) por [RSS](https://plugins.trac.wordpress.org/log/widget-css-classes/?limit=100&mode=stop_on_copy&format=rss). ## Registro de cambios #### 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’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’t show any previously added IDs in front end if Show Additional Field for ID is set to No * Don’t show any previously added classes in front end if Class Field Type is set to Hide #### 1.0 * First version ## Meta * Versión **1.5.4.1** * Última actualización **hace 1 año** * Instalaciones activas **90.000+** * Versión de WordPress ** 3.3 o superior ** * Probado hasta **6.7.5** * Versión de PHP ** 5.2.4 o superior ** * Idiomas * [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/) y [Swedish](https://sv.wordpress.org/plugins/widget-css-classes/). * [Traducir a tu idioma](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes) * Etiquetas: * [classes](https://es.wordpress.org/plugins/tags/classes/)[css](https://es.wordpress.org/plugins/tags/css/) [widget classes](https://es.wordpress.org/plugins/tags/widget-classes/)[widget css](https://es.wordpress.org/plugins/tags/widget-css/) [widgets](https://es.wordpress.org/plugins/tags/widgets/) * [Vista avanzada](https://es.wordpress.org/plugins/widget-css-classes/advanced/) ## Valoraciones 4.9 de 5 estrellas. * [ 70 valoraciones de 5 estrellas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=5) * [ 3 valoraciones de 4 estrellas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=4) * [ 0 valoraciones de 3 estrellas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=3) * [ 1 valoración de 2 estrellas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=2) * [ 0 valoraciones de 1 estrellas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/widget-css-classes/reviews/#new-post) [Ver todas las valoraciones](https://wordpress.org/support/plugin/widget-css-classes/reviews/) ## Colaboradores * [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/) * [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/) ## Soporte ¿Tienes algo que decir? ¿Necesitas ayuda? [Ver el foro de soporte](https://wordpress.org/support/plugin/widget-css-classes/) ## Donar ¿Te gustaría apoyar el progreso de este plugin? [ Dona a este plugin ](https://www.keraweb.nl/donate.php?for=widget-css-classes)