April 22

How to Edit CSS Styles in WordPress Themes?

Do you have difficulties with site’s loading speed or some unexplained drop-downs? Or do you simply want to change the look of your WordPress theme. In all these situations you may need to edit CSS code. 8Theme offers premium WordPress themes with optimally edited CSS styles. But if you still need to make changes here is few tips how to do this. To make changes to the look of WordPress themes, a user often has to edit the code CSS. In this article we will look at several ways to change CSS code.

Edit the file style.css in your WordPress theme

The most common way of editing CSS code of your WordPress site is its change in the style.css file of your active theme. All themes in WordPress are in the directory wp-content / themes and the name of your active theme, you can easily determine what directory it is located.

To edit the file style.css your theme, you must have access to the site via FTP, or support change theme files directly from the administration panel WordPress. If you change the file from the admin panel is supported by your hosting provider, you will find this option in the Appearance → Editor.

Use a Theme editor in WordPress template

Make sure you have selected the file list on the right style.css (stylesheet) in your WordPress themes. Edit .php files so it is not recommended, because the slightest mistake can result in damage to your website. More reliable method is to edit via FTP. The downside of this approach is that when you update the theme all your changes will be lost. To avoid this, we recommend that you use a subsidiary theme, or third-party plug-in for editing CSS code.

Child WordPress Themes

Child themes in WordPress allow you to make changes to other topics without changing the source code of the original theme. In addition to the stylesheet child themes can change and other template files in WordPress themes, but this is beyond the scope of this article. To create a new child theme, give it a new folder in the directory wp-content / themes and place it in an empty file called style.css. The path to your CSS file will look as follows: wp-content / themes / my-child-theme / style.css, where my-child-theme - the name of our new child WordPress theme.

Open the style.css file of your child theme in your favorite text editor and enter the following code: / ** * Theme Name: My Child Theme * Template: twentytwelve* / import url ("../ twentytwelve / style.css"); body {background: red; } Theme Name directive, we specify the name of our child theme, and on the next line directive Template refers to the parent topic, we want to use. In our case, this is a topic Twenty Twelve, which is located in the directory twentytwelve. After the title theme include teamimport styles threads Twenty Twelve, and all that follows - our own CSS code. In our case, we change the background color to red. Save the changes in style.css file of your child theme and upload the entire directory my-child-theme to the server through FTP. You will see that your new child WordPress theme is available when it is the under Appearance → Themes.

CSS editing using the plugins

Another method of editing the CSS code is to use WordPress plugin. There are a considerable number of plug-ins allow you to change the stylesheet. We recommend the free plugin Jetpack, which contains a module Custom CSS.

CSS editor in Jetpack plugin

The particular module allows you to edit Custom CSS styles in your WordPress themes directly from the admin panel and does not require FTP access or special settings hosting site. Custom CSS is backlit and syntax checking, audit support, as well as multiple CSS preprocessors (LESS and Sass).