Title: Widget CSS Classes
Author: Jory Hogeveen
Published: <strong>16 juli 2012</strong>
Last modified: 12 november 2024

---

Plugins zoeken

![](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

 Door [Jory Hogeveen](https://profiles.wordpress.org/keraweb/)

[Download](https://downloads.wordpress.org/plugin/widget-css-classes.1.5.4.1.zip)

 * [Details](https://nl-be.wordpress.org/plugins/widget-css-classes/#description)
 * [Beoordelingen](https://nl-be.wordpress.org/plugins/widget-css-classes/#reviews)
 *  [Installatie](https://nl-be.wordpress.org/plugins/widget-css-classes/#installation)
 * [Ontwikkeling](https://nl-be.wordpress.org/plugins/widget-css-classes/#developers)

 [Ondersteuning](https://wordpress.org/support/plugin/widget-css-classes/)

## Beschrijving

### 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: toegevoegd aan de eerste widget in een zijbalk
 * widget-last: toegevoegd aan de laatste widget in een zijbalk
 * widget-odd: toegevoegd aan oneven genummerde widgets in een zijbalk
 * widget-even: toegevoegd aan even genummerde widgets in een zijbalk
 * widget-#: toegevoegd aan elke widget, zoals widget-1, widget-2

#### Functies

 * Voegt een tekstveld toe aan een widget om een ​​klasse te definiëren
 * 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
 * Voegt eerste en laatste klassen toe aan de eerste en laatste widget instanties
   in een zijbalk
 * Voegt even/oneven klassen toe aan widgets
 * Voegt nummerklassen toe aan widgets
 * Volledig vertaalbaar
 * Multi-site compatible
 * Compatible with Widget Logic, Widget Context, and WP Page Widget plugins
 * Heeft filters en hooks voor het personaliseren van uitvoer inclusief klasse namen

[Plugin website](https://github.com/JoryHogeveen/widget-css-classes/wiki)

### Credits

 * [Het toevoegen van aangepaste CSS klassen naar 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/)
 * Slowaakse vertaling door Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
 * Poolse vertaling toegevoegd, Slowaakse vertaalbestanden hernoemd door [Tomasz Wesołowski](https://github.com/ittw)
 * Spaanse vertaling door [Maria Ramos bij WebHostingHub](http://www.webhostinghub.com/)
 * Servische-Kroatische vertaling door [Borisa Djuraskovic op WebHostingHub](http://www.webhostinghub.com/)
 * Nederlandse vertaling en voorgedefinieerde klassen probleem oplossing door [Jory Hogeveen op Keraweb](https://www.keraweb.nl/)
 * Russische vertaling door Наталия Завьялова
 * Zweedse vertaling door [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)

## Schermafbeeldingen

 * [[
 * Basic Widget
 * [[
 * Widget met ID veld en vooraf gedefinieerde keuzes
 * [[
 * Settings Page
 * [[
 * Gegenereerde HTML

## Installatie

 1. Upload the folder _/widget-css-classes/_ to the _/wp-content/plugins/_ directory
 2. Activeer de plugin via de **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. Vouw de juiste widget in de gewenste zijbalk uit.
 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

### Waarom worden de klassen niet getoond in mijn widget?

Je moet ervoor zorgen dat je een HTML-element hebt gedefinieerd voor `before_widget`
en `after_widget` in je actieve thema’s `register_sidebar` functies,
 meestal te
vinden in de functies van je thema’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.

Voorbeeld:
 `register_sidebar( array( 'name' => 'Sidebar', 'before_widget' => '<
div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' 
=> '<h2 class="widget-title">', 'after_title' => '</h2>' ) );

### How do I add the CSS for my custom class?

Er zijn twee manieren:

 1. Bewerk het bestand style.css van je thema (meestal te vinden in_/wp- content/themes/
    yourtheme/_).
 2. Use a plugin such as [Simple Custom CSS](https://wordpress.org/plugins/simple-custom-css/).

### Hoe exporteer ik de instellingen?

You can export the Settings from **Settings > Widget CSS Classes > Import/Export**.

### Wat moet ik doen als ik een bug vind?

Maak een [foutrapport op GitHub](https://github.com/JoryHogeveen/widget-css-classes/issues/new).

## Beoordelingen

![](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 augustus 2021 1 
reactie

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 maart 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 maart 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 april 2020 1 reactie

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 februari 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 december 2019

Works, simply and well…

 [ Lees alle 74 beoordelingen ](https://wordpress.org/support/plugin/widget-css-classes/reviews/)

## Bijdragers & ontwikkelaars

“Widget CSS Classes” is open source software. De volgende personen hebben bijgedragen
aan deze plugin.

Bijdragers

 *   [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
 *   [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)

“Widget CSS Classes” is vertaald in 17 talen. Dank voor [de vertalers](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors)
voor hun bijdragen.

[Vertaal “Widget CSS Classes” naar jouw taal.](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)

### Interesse in de ontwikkeling?

[Bekijk de code](https://plugins.trac.wordpress.org/browser/widget-css-classes/),
haal de [SVN repository](https://plugins.svn.wordpress.org/widget-css-classes/) 
op, of abonneer je op het [ontwikkellog](https://plugins.trac.wordpress.org/log/widget-css-classes/)
via [RSS](https://plugins.trac.wordpress.org/log/widget-css-classes/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 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)
 * Getest met WP 5.0.

#### 1.5.2.1

 * **i18n:** verwijder sv_SE vertaling uit de plugin directory. Het is 95% op translate.
   wordpress.org en geaccepteerd als de betere versie.[#23](https://github.com/cleverness/widget-css-classes/issues/23)
 * **Documentatie:**leesmij & Wiki.[#31](https://github.com/cleverness/widget-css-classes/issues/31)
 * **Compatibiliteit:** getest met WordPress 4.9

Gedetailleerde info: [PR op 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.

Gedetailleerde info: [PR op GitHub](https://github.com/cleverness/widget-css-classes/pull/30)

#### 1.5.1

 * **Fix:** Widget Logic `widget_content` filter compatibiliteit. [#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`: klasseninvoer
    - `widget_css_classes_class_select_capability`: voorgedefinieerde klassen selecteren(
      verbergt ook klasseninvoer indien ongeldig)
 * **Compatibiliteit:** WP externe links.[#17](https://github.com/cleverness/widget-css-classes/issues/17),
   dankzij Victor [@freelancephp](https://profiles.wordpress.org/freelancephp)
 * **Opgelost:** van wrapper div-stijl. [#18](https://github.com/cleverness/widget-css-classes/issues/18),
   dankzij 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:** verbeteren van de instelling pagina JavaScript en verwijder relCopy bibliotheek
   afhankelijkheid.
 * **i18n:** verwijder van de Nederlandse en de Russische taal uit plugin distributie(
   beschikbaar op [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)).
   [#23](https://github.com/cleverness/widget-css-classes/issues/23)
 * Begonnen met gebruik van TravisCI en CodeClimate. [#15](https://github.com/cleverness/widget-css-classes/issues/15)

Gedetailleerde info: [PR op GitHub](https://github.com/cleverness/widget-css-classes/pull/22)

#### 1.4.0

 * Functie: sorteer vooraf gedefinieerde klassen (bedankt Jory Hogeveen)
 * Beveiliging: voorkom niet-geverifieerde import van instellingen
 * Fix: Notice message when classes is empty (thanks Jory Hogeveen)

#### 1.3.0

 * Functie: verander de dropdown naar selectievakjes voor meerdere klassen selectie
 * Functie: mogelijkheid om zowel voorgedefinieerde als tekstinvoer klassen te gebruiken
 * Functie: klassen migreren wanneer vooraf gedefinieerde klassen beschikbaar zijn
 * Verbetering: niet tonen eerder gedefinieerde klassen die worden verwijderd in
   de instellingen pagina wanneer een widget nog niet is bijgewerkt
 * 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: toegevoegd Nederlandse vertaling door [Jory Hogeveen op Keraweb](https://www.keraweb.nl/)
 * i18n: toegevoegd Russische vertaling door Наталия Завьялова
 * i18n: toegevoegd Zweedse vertaling door[Olle Gustafsson](http://www.ollegustafsson.com/)

#### 1.2.9

 * Aanpassing van h2 naar h1 op de instellingen pagina
 * Veranderd plus / minus iconen op de instellingen pagina te 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

 * Toegevoegd Servo-Kroatisch vertaling door [Borisa Djuraskovic op WebHostingHub](http://www.webhostinghub.com/)
 * Added support for WP Page Widget

#### 1.2.3

 * Toegevoegd Poolse vertaling, Slowaaks vertaling bestanden hernoemd door [Tomasz Wesołowski](https://github.com/ittw)
 * Toegevoegd Spaanse vertaling door [Maria Ramos bij WebHostingHub](http://www.webhostinghub.com/)

#### 1.2.2

 * Fix for notice on line 103 when using Widget Logic
 * Getest met WordPress 3.7 beta 1

#### 1.2.1

 * Toegevoegd Slowaaks vertaling door 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
 * Toegevoegen van instellingen niet tonen genummerde widget klassen, eerste/laatste
   klassen, en even/oneven klassen

#### 1.1

 * Toegevoegen van ondersteuning voor Widget Context plugin
 * Fixed notices appearing when Widget Logic plugin was enabled but filter was disabled
 * Toevoeging van de verberg optie voor de klasse veld type in instellingen
 * Don’t show any previously added IDs in front end if Show Additional Field for
   ID is set to No
 * Niet tonen van een eerder toegevoegde klasse in de front-end als het klasse veldtype
   ingesteld is op verbergen

#### 1.0

 * Eerste versie

## Meta

 *  Versie **1.5.4.1**
 *  Laatst bijgewerkt: **1 jaar geleden**
 *  Actieve installaties: **90.000+**
 *  WordPress versie ** 3.3 of nieuwer **
 *  Getest t/m **6.7.5**
 *  PHP versie ** 5.2.4 of nieuwer **
 *  Talen
 * [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/),
   en [Swedish](https://sv.wordpress.org/plugins/widget-css-classes/).
 *  [Vertaal in jouw taal](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
 * Tags
 * [classes](https://nl-be.wordpress.org/plugins/tags/classes/)[css](https://nl-be.wordpress.org/plugins/tags/css/)
   [widget classes](https://nl-be.wordpress.org/plugins/tags/widget-classes/)[widget css](https://nl-be.wordpress.org/plugins/tags/widget-css/)
   [widgets](https://nl-be.wordpress.org/plugins/tags/widgets/)
 *  [Geavanceerde weergave](https://nl-be.wordpress.org/plugins/widget-css-classes/advanced/)

## Beoordelingen

 4.9 van 5 sterren.

 *  [  70 5 sterren beoordeling     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=5)
 *  [  3 4 sterren beoordeling     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=4)
 *  [  0 3 sterren beoordeling     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=3)
 *  [  1 2 ster beoordeling     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=2)
 *  [  0 1 sterren beoordeling     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/widget-css-classes/reviews/#new-post)

[Bekijk alle beoordelingen](https://wordpress.org/support/plugin/widget-css-classes/reviews/)

## Bijdragers

 *   [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
 *   [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)

## Ondersteuning

Iets te melden? Hulp nodig?

 [Het supportforum bekijken](https://wordpress.org/support/plugin/widget-css-classes/)

## Doneren

Wil je de groei van deze plugin ondersteunen?

 [ Doneer aan deze plugin ](https://www.keraweb.nl/donate.php?for=widget-css-classes)