Title: Widget CSS Classes
Author: Jory Hogeveen
Published: جولائی 16, 2012
Last modified: نومبر 12, 2024
---
پلگ انز تلاش کریں
یہ پلگ ان **ورڈپریس کے تازہ ترین 3 ریلیزوں کے ساتھ ٹیسٹ نہیں کیا گیا ہے**۔ اب یہ
برقرار نہیں رکھا جا سکتا یا معاونت نہیں کی جا سکتی اور اس کو ورڈپریس کے تازہ ترین
ورژنز کے ساتھ استعمال کیے جانے پر مطابقت کے مسائل ہو سکتے ہیں۔
# Widget CSS Classes
منجانب [Jory Hogeveen](https://profiles.wordpress.org/keraweb/)
[ڈاؤن لوڈ کریں](https://downloads.wordpress.org/plugin/widget-css-classes.1.5.4.1.zip)
* [تفصیلات](https://ur.wordpress.org/plugins/widget-css-classes/#description)
* [جائزے](https://ur.wordpress.org/plugins/widget-css-classes/#reviews)
* [انسٹالیشن](https://ur.wordpress.org/plugins/widget-css-classes/#installation)
* [ڈیولپمنٹ](https://ur.wordpress.org/plugins/widget-css-classes/#developers)
[معاونت](https://wordpress.org/support/plugin/widget-css-classes/)
## تفصیل
### 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)
### 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)
## اسکرین شاٹس
[⌊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
## انسٹالیشن
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**.
## عمومی سوالات
### 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' => '
' ) );
### 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).
## جائزے
### [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, 2021 1 reply
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/) مارچ 27, 2021
works
### [Invaluable!](https://wordpress.org/support/topic/invaluable-63/)
[andiszek](https://profiles.wordpress.org/andiszek/) مارچ 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/) اپریل 2, 2020 1
reply
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!
### [Great! 🙂](https://wordpress.org/support/topic/great-10883/)
[xszejdi](https://profiles.wordpress.org/xszejdi/) فروری 17, 2020
Great! 🙂
### [Works, simply and well…](https://wordpress.org/support/topic/works-simply-and-well/)
[crzyhrse](https://profiles.wordpress.org/crzyhrse/) دسمبر 5, 2019
Works, simply and well…
[ تمام 74 جائزے پڑھیں ](https://wordpress.org/support/plugin/widget-css-classes/reviews/)
## شراکت دار اور ڈیویلپرز
“Widget CSS Classes” اوپن سورس سافٹ ویئر ہے۔ مندرجہ ذیل لوگوں نے اس پلگ ان میں حصہ
لیا:
شراکت دار
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
* [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)
“Widget CSS Classes” کا 17 زبانوں میں ترجمہ کیا گیا ہے۔ تعاون کے لیے [مترجمین](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors)
کا شکریہ۔
[“Widget CSS Classes” کا اپنی زبان میں ترجمہ کریں۔](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
### ڈویلپمینٹ میں دلچسپی ہے؟
[کوڈ براؤز کریں](https://plugins.trac.wordpress.org/browser/widget-css-classes/)،
[ایس این وی ریپوزیٹری](https://plugins.svn.wordpress.org/widget-css-classes/) کو
چیک کریں یا [ڈویلپمینٹ لاگ](https://plugins.trac.wordpress.org/log/widget-css-classes/)
کو سبسکرائب کریں بذریعہ [آر ایس ایس](https://plugins.trac.wordpress.org/log/widget-css-classes/?limit=100&mode=stop_on_copy&format=rss)۔
## چینج لاگ
#### 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
## میٹا
* Version **1.5.4.1**
* Last updated **2 سال پہلے**
* Active installations **90,000+**
* WordPress version ** 3.3 یا اس سے جدید **
* Tested up to **6.7.5**
* PHP version ** 5.2.4 یا اس سے جدید **
* Languages
* [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/)،
اور [Swedish](https://sv.wordpress.org/plugins/widget-css-classes/).
* [اپنی زبان میں ترجمہ کریں](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
* Tags
* [classes](https://ur.wordpress.org/plugins/tags/classes/)[css](https://ur.wordpress.org/plugins/tags/css/)
[widget classes](https://ur.wordpress.org/plugins/tags/widget-classes/)[widget css](https://ur.wordpress.org/plugins/tags/widget-css/)
[widgets](https://ur.wordpress.org/plugins/tags/widgets/)
* [اعلی درجے کا منظر](https://ur.wordpress.org/plugins/widget-css-classes/advanced/)
## درجہ بندیاں
4.9 out of 5 stars.
* [ 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/)
## شراکت دار
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
* [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)
## معاونت
کچھ کہنا ہے؟ مدد چاہیے؟
[معاونتی فورم دیکھیں](https://wordpress.org/support/plugin/widget-css-classes/)
## عطیہ دیں
کیا آپ اس پلگ ان کی ترقی میں معاونت کرنا چاہتے ہیں؟
[ اس پلگ ان کو عطیہ دیں ](https://www.keraweb.nl/donate.php?for=widget-css-classes)