Adding custom CSS to your WordPress site

Are you interested in transforming the look and feel of your website with the help of custom Cascading Style Sheets (CSS)? The inclusion of custom CSS to your site can completely change its appearance and layout, something you simply can’t do via default options. 

Beginners may struggle with adding custom CSS using FTP, but thankfully, there are other ways to do it. This article will cover three alternative ways to add custom CSS to your WordPress site, all without editing your site’s theme files directly. 

Reasons to add custom CSS to your WordPress site

CSS is the language you use to add styles to your WordPress site, and it’s what goes together with HTML to let you control your site’s colors, layout, and size. It’s highly recommended that you embrace the enhancements in design that CSS offers, especially considering that most of your website’s visitors have short attention spans that are subject to unending cycles of dopamine.

With custom CSS, you can play around with your site’s appearance, which you can’t achieve by using WordPress’s default options. Custom CSS grants you greater control over your site’s design and appearance, allows you to create web pages that are interactive and responsive, and lets you quickly change your WordPress theme using just a couple of lines of code. 

Let’s say, for instance, that you want to edit the background color that each of your posts uses so that you don’t use the same color throughout your site. You can use a custom CSS code to change a specific page or post’s background color without making changes elsewhere on your website. 

You can also transform the look and feel of your product pages like Freshbooks.com has done with their time tracking and productivity tool. The designers have used custom CSS to align content and images in a way that creates a visual hierarchy and directs the attention of their readers where they want it. With that in mind, let’s cover a few ways that you can include custom CSS on your WordPress site.

Method #1: Use a theme customizer 

Since the introduction of WordPress 4.7, WordPress site owners can include pieces of custom CSS code on their site using the admin area. Adding custom CSS via the WordPress admin area is straightforward, allowing you to review your changes through a live preview instantly.

To add custom CSS using WordPress’s theme customizer, you’ll need to go to your WordPress dashboard and then access Appearance –> Customize. From there, you’ll be able to access the live preview of your website and the different options available on the left-hand pane. Navigate to this pane and click the ‘Additional CSS’ tab. 

You can now start adding custom CSS to your site until you’re happy with your new appearance and layout, after which you can click ‘Publish’ to finalize your changes. 

Keep in mind that if you add custom CSS using WordPress’s theme customizer, the custom CSS you’ll have access to will only be available via that specific theme. To use the theme customizer with other themes, you’ll want to copy and paste your custom CSS to another theme by following the method we’ve covered in this section.

Method #2: Use a plugin

While adding custom CSS using a theme customizer only lets you save custom CSS for the currently active theme, using a plugin to add custom CSS lets you apply CSS to your site regardless of the theme you’re working with. 

To add custom CSS to your WordPress site with a plugin, you’ll want to install the Simple Custom CSS plugin and activate it once it’s downloaded to your database. After you have activated the plugin, navigate to Appearance –> Custom CSS and paste in your lines of custom CSS code.

Keep in mind that you’ll need to click ‘Update Custom CSS’ once you’re finished saving and publishing the changes that you’ve made. Once you’ve done that, you’ll be able to check out your new WordPress site with its new custom CSS in action.

You can also use other plugins, like:

• Visual CSS Style Editor
• Code Snippets
• Simple Custom CSS and JS
• CSS Hero

Method #3: Use a full-site editor (FSE)

The last method we’ll cover is using an FTE (full site editor) to add additional CSS to your WordPress site. FSEs allow you to change the design and layout of your website via the WordPress block editor — the same one you’d use if you were editing one of your site’s pages or blog posts. Remember that you’ll only be able to use the FSE if you’re working with certain themes. 

Although it’s a little easier to add custom CSS to your site by using a plugin, you may — for whatever reason — not want to use a plugin to make your changes. If that’s the case, you’ll need to use the Customizer when it isn’t usable via your admin menu. 

To do this, you’ll log in to your site’s administrator account. Once you’ve done that, copy and paste the following into your web browser: https://example.com/wp-admin/customize.php (remember to get rid of ‘example.com’ and replace it with your site’s domain.

You’ll be taken to a restricted theme customizer, from which you can navigate to the left-hand menu and select the ‘Additional CSS’ tab. Clicking this ‘Additional CSS’ tab lets you input your CSS code in the area called ‘Additional CSS.’ Once you provide your code, you can save your changes by selecting the ‘Publish’ button. 

Changing the CSS in WordPress isn’t that difficult

The methods we’ve outlined above are appropriate for users of all skill levels, but they’re particularly useful for beginners. If you’re confident in your abilities, you can consider adding custom CSS directly to the theme that you’re using for your site. Keep in mind that if you insert snippets of custom CSS code into your parent theme, you won’t be able to save your changes if you mistakenly update your theme before saving the changes you make. 

Generally speaking, we recommend using a child theme if you’re at an intermediate or higher skill level. If you’re a beginner, you may want to consider working with a custom CSS plugin that lets you keep your snippets of custom CSS code in a place separate from your theme. This method lets you toggle back and forth between themes quickly and without having to worry that your CSS will be gone once you return. 

For your next WordPress website, choose EasyWP managed WordPress hosting. Great prices, a quick setup, and a free trial should put EasyWP at the top of your list.