{"id":3821,"date":"2018-12-21T10:24:59","date_gmt":"2018-12-21T16:24:59","guid":{"rendered":"https:\/\/wpengine.com\/blog\/customize-theme-css\/"},"modified":"2018-12-21T10:24:59","modified_gmt":"2018-12-21T16:24:59","slug":"customize-theme-css","status":"publish","type":"post","link":"https:\/\/wpengine.com\/blog\/customize-theme-css\/","title":{"rendered":"Customizing WordPress Themes with CSS"},"content":{"rendered":"

Themes are one of WordPress\u2019 biggest selling points. The right theme<\/a> can make your website really stand out. However, you\u2019ll usually want to make at least a few custom changes to whatever theme you use, in order to get everything just right.<\/p>\n\n\n\n

In most cases, you\u2019ll need to use Cascading Style Sheets (CSS)<\/a> to customize the style of your theme. With WordPress, there are several ways you can do this. Even if you don\u2019t have any experience dealing with code, you can easily add your own CSS tweaks to the WordPress theme.<\/p>\n\n\n\n

In this guide, we\u2019ll take a look at three methods you can use to add and edit custom CSS in WordPress. We\u2019ll walk you through the entire process, and talk about when it makes sense to use each technique. Let\u2019s get started!<\/p>\n\n\n\n\n\n

Add Custom CSS with Theme Customizer<\/h2>\n\n\n\n

Experience Level:<\/strong> Beginner<\/p>\n\n\n\n

The WordPress Customizer<\/a> enables you to make changes to your website\u2019s design, and preview them in real time. To access it, log in to your WordPress dashboard and navigate to the Appearance > Customize<\/em> tab:<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

There are a lot of settings you can play around with here. However, right now look for the Additional CSS<\/em> tab. Once you click on it, a new section will open, with a field where you can add custom CSS:<\/p>\n\n\n\n

\"customize<\/figure>\n\n\n\n

If you\u2019re new to CSS, you can read more about how to use it with WordPress in the official Codex<\/a>. There are also a lot of other excellent resources on the basics of CSS<\/a>, and we recommend checking out a few of them.<\/p>\n\n\n\n

CSS can get a little complex, but there\u2019s plenty you can accomplish just by knowing the basics. The great thing about using the WordPress Customizer is that it enables you to instantly preview any changes you make using CSS. That means this approach is perfect for learning how CSS works.<\/p>\n\n\n\n

Note<\/strong>: The changes you make using the Customizer won\u2019t persist if you change themes. Plus, updating your current theme may wipe out your custom CSS. So we don\u2019t recommend this approach if you intend to make a lot of changes or in-between theme options.<\/p>\n\n\n\n

Add Custom CSS with a Plugin<\/h2>\n\n\n\n

Experience Level:<\/strong> Beginner to Intermediate<\/p>\n\n\n\n

The above method works well, but you can expand your options by using plugins. In the following sections, we\u2019ll explore three plugins that enable you to customize your WordPress theme.<\/p>\n\n\n\n

Note<\/strong>: The experience level for editing WordPress CSS using plugins will depend on which tool you use. We recommend testing them all out, and seeing which one feels the most comfortable.<\/p>\n\n\n\n

Advanced CSS Editor<\/h3>\n\n\n\n
\"custom<\/figure>\n\n\n\n

If you like using the WordPress Customizer, but you wish it offered more options, this plugin is worth a look. With Advanced CSS Editor<\/a>, you\u2019ll be able to add custom CSS for desktops, phones, and tablets. This way, you can fine-tune the way your website looks on each type of device.<\/p>\n\n\n\n

After installing the WordPress plugin, navigate to the Appearance > Customizer<\/em> tab in your dashboard. You should see a new Advanced CSS Editor<\/em> option, providing you with access to multiple editors for each type of device:<\/p>\n\n\n\n

\"customize<\/figure>\n\n\n\n

All you have to do is add the custom CSS you want, test to ensure that it\u2019s working correctly, and save the changes to your theme.<\/p>\n\n\n\n

Pros:<\/strong><\/p>\n\n\n\n