--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak přidat vlastní CSS třídu k widgetu ve WordPress url: https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/ date: 2016-03-06 modified: 2017-11-13 author: Tomáš Cirkl type: post categories: [WordPress návody] tags: [css, plugin, widget, WordPress] --- WordPress návody # Jak přidat vlastní CSS třídu k widgetu ve WordPress [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 6. 3. 2016 Aktualizováno **13. 11. 2017** 2 min čtení Pozor: Článek je z roku 2016. Některé postupy se mohly změnit. ![widget wordpress scaled](https://www.wplama.cz/wp-content/uploads/2016/03/widget-wordpress-scaled.jpg "widget wordpress scaled") WordPress již sám o sobě k určitým prvkům ve zdrojovém kódu přiřazuje **CSS třídy**. Přímo k widgetu standardně přiřazuje obecnou třídu *widget* a pak třídu podle typu widgetu. Takže například text widget má ještě třídu *widget_text*, widget s výpisem rubrik pak třídu *widget_categories*. To by samo o sobě mohlo docela dobře stačit, ale co když chcete ke specifickým widgetům přiřadit stejné styly, například podbarvený nadpis. Pak už nemůžete spoléhat na výchozí třídy, ale je třeba si **vytvořit třídy vlastní** a ty si k daným widgetům přiřadit. > CSS třída je prvek, který pomáhá vybrat specifickou část HTML. K vybrané části HTML kódu pak můžeme přiřadit například styly pomocí souborů css. ## Přidání vlastní CSS třídy k widgetu pomocí pluginu K přidání vlastní CSS třídy k WordPress widgetu využijeme plugin [Widget CSS Classes](https://wordpress.org/plugins/widget-css-classes/). [Plugin nainstalujte](https://www.wplama.cz/3-zpusoby-jak-nainstalovat-wordpress-plugin/) a aktivujte. Od této chvíle když půjdete do *Vzhled -> Widgety*, tak bude možné ke každému widgetu přiřadit vlastní CSS třídu. Tříd můžete přidat kolik chcete, stačí je jednotlivé třídy oddělit čárkou. ![CSS třída ve Widgetu](https://www.wplama.cz/wp-content/uploads/2016/03/css-trida-ve-widgetu-1024x481.png "CSS třída ve Widgetu") CSS třída ve Widgetu Kromě toho plugin **Widget CSS Classes** automaticky přidává následující CSS třídy: - Třídu pro první/poslední widget (Add First/Last Classes) - Třídu podle čísla widgetu (Add Widget Number Classes) - Třídu podle toho zda je plugin v seznamu na sudé nebo liché pozici (Add Even/Odd Classes) Další možnosti najdete na stránce nastavení pluginu v sekci *Nastavení -> Widget CSS classes*. **Třídy přidané pluginem** v HTML vypadají následovně: - widget-first: třída přidaná prvnímu pluginu v sidebaru - widget-last: třída přidaná poslednímu pluginu v sidebaru - widget-odd: třída přidaná každému lichému pluginu v sidebaru - widget-even: třída přidaná každému sudému pluginu v sidebaru - widget-#: třída přidaná ke každému widgetu, například widget-1, widget-2 Plugin Widget CSS Classes nabízí velké množství nastavení a způsobů jak přiřadit CSS třídu k widgetu. Díky tomu dokáže značně ulehčit výběr daného prvku. Plugin ale **neumožňuje vložení vlastních stylů**. K tomu budete muset použít například úpravu šablony nebo ještě lépe [child theme](https://www.wplama.cz/jak-vytvorit-child-theme-a-proc-ji-vyuzivat/) či jiný [plugin](https://www.wplama.cz/vlastni-css-styly/). - [#css](https://www.wplama.cz/stitek/css/) - [#plugin](https://www.wplama.cz/stitek/plugin/) - [#widget](https://www.wplama.cz/stitek/widget/) - [#WordPress](https://www.wplama.cz/stitek/wordpress/) Sdílet - - [](mailto:?subject=Jak přidat vlastní CSS třídu k widgetu ve WordPress&body=Jak přidat vlastní CSS třídu k widgetu ve WordPress https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fjak-pridat-css-tridu-k-widgetu%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fjak-pridat-css-tridu-k-widgetu%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (2) [Přidat komentář →](https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/#respond) N noro [21. 1. 2019](https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/#comment-76196) vobec nechapen o ake triedy ide, skratka ak chcem nejaky odskok napriklad: div { padding: 25px 50px 75px 100px; } co k tomu treba pridat, lebo to nepracuje [Odpovědět](https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/#comment-76196) TC Tomáš Cirkl WPlama [23. 1. 2019](https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/#comment-76235) Je třeba si ten div, který chcete upravit označit nějakou třídou a tu pak použijete pro úpravu CSS. Vypadat to bude takto: .vasetrida { padding: 25px 50px 75px 100px; } [Odpovědět](https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/#comment-76235) --- --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/jak-pridat-css-tridu-k-widgetu/#respond) [← Předchozí článek Jaký byl WordCamp Prague 2016](https://www.wplama.cz/jaky-byl-wordcamp-prague-2016/) [Další článek → Jak nainstalovat WordPress na Windows počítač s využítím WAMP](https://www.wplama.cz/wordpress-windows-wamp/) Související ## Mohlo by vás zajímat [Všechny články z rubriky WordPress návody →](https://www.wplama.cz/wordpress/navody/) ![llms txt scaled](https://www.wplama.cz/wp-content/uploads/2026/03/llms-txt-scaled.png "llms txt scaled") WordPress návody ### [Konec tradičního SEO? Jak a proč začít optimalizovat WordPress web pro AI vyhledávače](https://www.wplama.cz/optimalizace-pro-ai-vyhledavace/) 3. 3. 2026 9 min čtení --- ![cloudflare turnstile scaled](https://www.wplama.cz/wp-content/uploads/2025/12/cloudflare-turnstile-scaled.png "cloudflare turnstile scaled") WordPress návody ### [Cloudflare Turnstile – Jeden antispam, který ochrání celý váš WordPress](https://www.wplama.cz/cloudflare-turnstile-antispam/) 17. 12. 2025 4 min čtení --- ![image scaled](https://www.wplama.cz/wp-content/uploads/2025/09/image-scaled.png "image scaled") WordPress návody ### [Jak přidat měřicí kód Sklik do WordPress pomocí Complianz](https://www.wplama.cz/jak-pridat-merici-kod-sklik-do-wordpress-pomoci-complianz/) 16. 9. 2025 3 min čtení ---