{"id":47236,"date":"2014-02-10T14:24:56","date_gmt":"2014-02-10T13:24:56","guid":{"rendered":"http:\/\/www.elmastudio.de\/?p=47236"},"modified":"2016-05-16T22:43:28","modified_gmt":"2016-05-16T20:43:28","slug":"custom-css-wordpress","status":"publish","type":"post","link":"https:\/\/www.elmastudio.de\/en\/custom-css-wordpress\/","title":{"rendered":"How to Use Custom CSS in WordPress"},"content":{"rendered":"

Sometimes you want to customize your WordPress theme a little bit, like changing a font color or a font style. If these theme changes are not possible in the theme by default, you can use custom CSS to overwrite or add new CSS properties to the theme styles. And how does it work? First you should already know some basic CSS. But then customizing your theme and adding your own CSS styles is really not too difficult and you have three different options to include your custom CSS. You can use a simple WordPress plugin like Simple Custom CSS<\/a> or My Custom CSS<\/a>.<\/p>\n

In case you already use the Jetpack plugin you will not need to add an additional plugin, since Jetpack comes with its own Custom CSS feature. Just activate the Custom CSS feature in Jetpack and start adding your CSS under Appearance \u2192 Edit CSS<\/em>. A lot of WordPress Premium themes also offer their own Custom CSS option on the theme options page or in the Customizer, so you won\u2019t need to install an extra plugin for your Custom CSS at all. One disadvantage here is, that the CSS is dependent on the theme and will be lost, if you change the theme.<\/p>\n

Finally you can also create a child theme and add your CSS to the child themes style.css file. Using a child theme is especially useful, if you plan to add more changes to the theme, like customizing theme template files or overwriting or adding additional functions in your own functions.php file. <\/p>\n

WordPress Plugins for Your Custom CSS<\/h3>\n

Simple Custom CSS<\/h4>\n

At the moment my favorite plugin for CSS customizations is Simple Custom CSS<\/a>. The plugin is really easy to use. You will find the new menu button “Custom CSS”<\/strong> under Appearance. Here you can start to add your custom CSS styles.<\/p>\n

\"Simple
Simple Custom CSS in the WordPress admin panel.<\/figcaption><\/figure>\n

After saving your new CSS you can check your changes in the browser.<\/p>\n

\"Testing
Testing your changes in the browser.<\/figcaption><\/figure>\n

Finding the Right CSS Properties in Your Theme<\/h4>\n

If you\u2019re not sure which CSS property to customize in your theme in order to achieve your desired changes, you can use browser developer tools such as the ” Inspect Element” (e.g. in Firefox or Chrome) or browser Add-ons like Firebug (for Safari, Chrome and Firefox).<\/p>\n

\"Die
Die Element untersuchen-Funktion im Chrome-Browser.<\/figcaption><\/figure>\n

Here you can find more detailed information on how to use the browser dev tools for Chrome<\/a> or Firebug for Firefox<\/a>.<\/p>\n

Use !important<\/h4>\n

Since your new CSS rules will overwrite the themes CSS properties by default, in most cases you won\u2019t need to add the !important<\/strong> rule. If a CSS property can not be changed, you can use !important<\/strong>. like in the following example:<\/p>\n

[code]
\n.entry-details {
\ntext-transform: none !important;
\n}
\n[\/code]<\/p>\n

Jetpacks Custom CSS Feature<\/h4>\n

In case you have already installed the Jetpack plugin, you should use the Jetpack Custom CSS feature<\/a> to add your CSS. After activating Custom CSS in Jetpacks plugin settings, you can start writing your CSS under Appearance \u2192 Edit CSS<\/em>. <\/p>\n

This way you will not have to install any additional plugins. Jetpacks Custom CSS also offers “CSS Revisions” as a nice additional feature. With CSS revisions you can easily compare the changes you made and also go back to previous versions of your Custom CSS in case anything went wrong (it works the same way as post revisions).<\/p>\n

\"Use
Use CSS Revisions with Jetpack Custom CSS.<\/figcaption><\/figure>\n

Use Custom CSS in the Theme Options<\/h3>\n

Many Premium themes will offer you the possibility to add Custom CSS right on the theme options page with the advantage of not having to install an extra plugin for your CSS changes. But you should be aware that your custom CSS then depends on the theme and will not be available any more, after you decide to change the theme. So you should use this option for CSS changes of your current theme only.<\/p>\n

Add custom CSS to a Child Theme<\/h3>\n

If you already have some experiences in customizing or developing a WordPress theme and you plan to add more advances changes, creating your own child theme is a good solution. With a child theme all your changes will be saved, even if you update your parent theme. You can find more information on creating a child theme in the post “WordPress Child Theme Basics”<\/a> on the ThemeShaper blog.<\/p>\n

Now all changes in your CSS can be added directly to the child themes style.css<\/strong> file. This way you will always have all your customization in one place and you don\u2019t need to install any additional plugins.<\/p>\n

Your Feedback<\/h4>\n

What plugins and tools do you find useful to integrate custom CSS in a WordPress theme? What experiences and tips can you share adding custom CSS in WordPress? I\u2019m looking forward to hear your opinion and insights on the topic!<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes you want to customize your WordPress theme a little bit, like changing a font color or a font style. If these theme changes are not possible in the theme by default, you can use custom CSS to overwrite or add new CSS properties to the theme styles. And how does it work? First you […]<\/p>\n","protected":false},"author":1,"featured_media":107942,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[910,1247],"tags":[1044,1257,1077,1182],"class_list":["post-47236","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-wordpress-en","category-wordpress-newbies","tag-custom-css","tag-featured","tag-jetpack-en-2","tag-plugins","post_format-post-format-image"],"_links":{"self":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/47236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=47236"}],"version-history":[{"count":0,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/47236\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media\/107942"}],"wp:attachment":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=47236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=47236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=47236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}