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.wordpress.org/plugins/widget-css-classes/#description)
 * [Beoordelingen](https://nl.wordpress.org/plugins/widget-css-classes/#reviews)
 *  [Installatie](https://nl.wordpress.org/plugins/widget-css-classes/#installation)
 * [Ontwikkeling](https://nl.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-oneven: 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

#### Features

 * 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
 * Voegt optioneel een tekstveld toe om een id aan een widget toe te voegen
 * Voegt eerste en laatste klassen toe aan de eerste en laatste widgetinstanties
   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 aanpassen van uitvoer inclusief klassenamen

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

### Credits

 * [Het toevoegen van eigen CSS Classes 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 compatibiliteitsopgave geleverd door [Joan Piedra](http://joanpiedra.com/)
 * Slowaakse vertaling door Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
 * Poolse vertaling toegevoegd , Slowaakse vertaalbestanden hernoemd naar[Tomasz Wesołowski](https://github.com/ittw)
 * Spaanse vertaling door [Maria Ramos bij WebHostingHub](http://www.webhostinghub.com/)
 * Servo-Kroatische vertaling door [Borisa Djuraskovic op WebHostingHub](http://www.webhostinghub.com/)
 * Dutch translation and predefined classes fix by [Jory Hogeveen at 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
 * [[
 * instellingen Pagina
 * [[
 * 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. Configureer de instellingen onder **Instellingen > Widget CSS klassen**
 4. Bezoek **Uiterlijk > widgets** om aangepaste klassen en ids voor een widget toe
    te voegen of te wijzigen.
 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 weergegeven in mijn 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.

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>' ) );

### Hoe kan ik toevoegen aan de CSS voor mijn aangepaste klasse?

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?

Gelieve een bestand in te dienen [foutrapport op GitHub](https://github.com/cleverness/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 localen. Dank voor [de vertalers](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors)
voor hun bijdragen.

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

### Interesse in 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 & amp; 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`: aangepaste invoerklassen wijzigen.
 * **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)
 * **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:**Verbeter het instellen van pagina JavaScript en verwijder relCopy bibliotheek
   afhankelijkheid.
 * **i18n:** verwijder 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 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 vervolgkeuzelijst naar selectievakjes voor meerdere klassenelectie
 * Functie: mogelijkheid om zowel voorgedefinieerde als tekstinvoer klassen te gebruiken
 * Functie: klassen migreren wanneer vooraf gedefinieerde klassen beschikbaar zijn
 * Verbetering: Niet eerder gedefinieerde klassen die worden verwijderd in de instellingen
   weer te geven 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
 * Oplossing: Ids index- melding
 * i18n: Toegevoegd Nederlandse vertaling door[Jory Hogeveen op Keraweb](https://www.keraweb.nl/)
 * i18n: Russische vertaling toegevoegd door Наталия Завьялова
 * i18n: Zweedse vertaling toegevoegd door [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

 * Toegevoegd tekst domein plugin header ter voorbereiding van automatische vertalingen

#### 1.2.7

 * Klasse en ID velden op volledige breedte gewijzigd
 * Toegevoegd ontbrekende ontsnappen uit instellingen pagina
 * 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

 * Servo-Kroatisch vertaling toegevoegd door [Borisa Djuraskovic op WebHostingHub](http://www.webhostinghub.com/)
 * Toegevoegde ondersteuning voor WP Page Widget

#### 1.2.3

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

#### 1.2.2

 * Oplossing voor kennisgeving op regel 103 bij het gebruik van Widget Logic
 * Getest met WordPress 3.7 beta 1

#### 1.2.1

 * Slowaaks vertaling toegevoegd door Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
 * Updated Widget Context compatibility fix plus notice fix by [Joan Piedra](http://joanpiedra.com/)
 * De functionaliteit van jQuery live aan voor 1.9-compatibiliteit gewijzigd

#### 1.2

 * Vervang ID met aangepaste ID in plaats van toe te voegen aan bestaande ID
 * Toegevoegd instellingen al dan niet weer genummerd widget klassen, eerste / laatste
   klassen, en even / oneven klassen

#### 1.1

 * Toegevoegde ondersteuning voor 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
 * Toon geen eerder toegevoegde ID’s aan de voorkant als Extra veld voor ID weergeven
   is ingesteld op Nee
 * Laat aan het begin geen eerder toegevoegde klassen zien als Klasse veldtype is
   ingesteld op Verbergen

#### 1.0

 * Eerste versie

## Meta

 *  Versie **1.5.4.1**
 *  Laatst geüpdatet **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 je eigen taal](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
 * Tags
 * [classes](https://nl.wordpress.org/plugins/tags/classes/)[css](https://nl.wordpress.org/plugins/tags/css/)
   [widget classes](https://nl.wordpress.org/plugins/tags/widget-classes/)[widget css](https://nl.wordpress.org/plugins/tags/widget-css/)
   [widgets](https://nl.wordpress.org/plugins/tags/widgets/)
 *  [Geavanceerde weergave](https://nl.wordpress.org/plugins/widget-css-classes/advanced/)

## Waarderingen

 4.9 van 5 sterren.

 *  [  70 5 sterren beoordelingen     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=5)
 *  [  3 4 sterren beoordelingen     ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=4)
 *  [  0 3 sterren beoordelingen     ](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 beoordelingen     ](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)