How to customize your WordPress site with CSS: 3 easy methods

0


WordPress has evolved over the years, and today it’s a fairly flexible platform that is easy to customize thanks to its block editor, Gutenberg. Still, there will be times when you need a little more reach than the Gutenberg editor provides.

This is where custom CSS comes in handy. CSS styling allows you to change the colors, spacing, fonts, layouts, and basically every other visual element of your WordPress website, allowing you to make it look exactly the way you want it to be.

In this article, we’ll walk you through the essentials of customizing your WordPress website with CSS.


Why customize your website with CSS?

Adding custom CSS is just one method you can use to fine-tune the look of your site. Other methods include using a well presented premium WordPress theme or installing a page builder.

While both of these methods are a bit easier for beginners to use and don’t require any coding knowledge, there are two main ways that using custom CSS is more beneficial:

Zero cost

Premium themes and WordPress page builders can be handy, but they come at a cost, in dollars and cents. Armed with the knowledge of how to write custom CSS, on the other hand, you can achieve the same effects without incurring additional expense.

Minimal bloating

The well-presented page builders and themes are designed to give users more flexibility and a wide range of options for customizing their websites. Because of this, they tend to bloat websites, potentially slowing them down.

VIDEO OF THE DAY MAKEUSE

In contrast, when writing custom CSS, you will only add the functionality you need, which will generally result in lighter websites and faster load speeds.

3 easy methods to customize your WordPress site with CSS

Hope you already know how to write CSS. Once you are familiar with the basics, you can use any of the following methods to add custom CSS to your WordPress website:

Method 1: use the WordPress customizer

With WordPress 4.7 or later, you can add custom CSS right from the admin area. This is the easiest method, and because a live preview is available, you can see any changes you make in real time.

This is also the most recommended, as any changes you make are saved in WordPress itself. This means that even if you change or update your theme, you won’t lose your custom CSS.

Here are the steps to follow:

Step 1: Move towards Appearance> Customize.



Screenshot of the WordPress backend showing the ability to use the customizer

This will open up the WordPress theme customizer, which will show you a live preview of your site on the right, along with a few customization options on the left. Scroll down to the bottom of the left panel and you will find a Additional CSS tongue.

2nd step: Click on the Additional CSS Tongue.



Screenshot showing how to add custom CSS in WordPress customizer

This will open a small box in the left pane where you can add your custom CSS. You can enter as many lines of CSS code as you want. The advantage of this editor is that it validates your code, alerting you in the event of an error.

Step 3: Publish your changes.

Any valid CSS rule you add will show in the live preview area on the right. To apply the changes to your site, click on the button Publish at the top of the left pane once you’re satisfied. If you don’t want the changes to take effect immediately, you can also schedule the publication at a later date or save your work as a draft.

It’s important to note that any changes you make using the customizer are related to your current theme. If you ever switch to a different theme, the changes will be lost unless you copy your custom CSS and add it to the new theme. It is recommended that you save any custom CSS you add to a theme on a notepad. That way, you can just copy the code and paste it into the “Additional CSS” section for a different theme.

If that sounds like too much work to you and you prefer a solution that lets you apply your custom CSS to whatever WordPress theme you use, the next method is for you.

Method 2. Use a plugin

Custom CSS plugins store your custom CSS separately from your theme, allowing your changes to be applied regardless of which theme you are using. These plugins also come with additional features like autocompletion which can make adding CSS easier.

The only downside is that this is third-party software, which means it can potentially slow down your site. However, most of these plugins are lightweight, so they usually have little impact on your site’s performance. Here are some of the best custom CSS plugins you can use:

Simple Custom CSS is one of the most popular custom CSS plugins. It is lightweight, easy to use, and offers great features. The setup is easy. All you have to do is install and activate the plugin. Then navigate to Appearance in the left pane of your dashboard.

You will see a new option called Custom CSS. Clicking on it will open an editor where you can add your custom CSS. Click it Update custom CSS button to save your changes. To view the changes, simply refresh your website.

If you want even more features, the Simple Custom CSS and JS plugin is a great option. Besides adding CSS, it allows you to add JavaScript inputs.

If you don’t want to write a single line of code, the CSS Hero plugin is perfect for you. This plugin offers a visual CSS editor with drop-down menus and input fields that allow you to modify almost any CSS style on your site without having to write any code.

Method 3. Edit the raw code

The two methods we described above allow you to add custom CSS to your site without needing to touch any of your theme files. But, in some cases, you might want to modify your theme’s CSS or add custom CSS directly to your theme’s code.


To do this, you will need to access your website’s stylesheet. An easy way to access this stylesheet is to Theme editor on your WordPress dashboard.



Screenshot of WordPress theme editor

Before going any further, however, there are a few protective measures you need to put in place. First of all, back up your website. When editing your theme files, it’s easy to make mistakes that can potentially crash your site.

A backup ensures that you have a functioning website to return to. Next, create a child theme. If you make direct changes to your parent theme, the changes will be lost every time the theme is updated.

Once these protections are in place, log into your WordPress backend. Go to Appearance> Theme editor. When you click on the theme editor option, you will see a dialog box warning you not to make direct edits to your theme files. If you follow the steps above, you are good to go.


Click on I understand proceed.



Screenshot of the WordPress theme editor warning

After clicking, you should see your default site stylesheet. Otherwise, just look in the right pane and click style.css under the Style sheet option.



Screenshot of WordPress theme editor

From there, you can make direct edits to your theme files. Don’t forget to click Save and update once you are done.

Take control of your site’s appearance with custom CSS

Learning to write custom CSS in WordPress may take some time for beginners, but it will give you real control over how your website looks. And this at zero cost and with minimal impact on your site’s performance.

If you’d rather not do manual design, however, there are other ways to get the job done, such as using one of the best page builders for WordPress.


Image of person using computer with images on screen.

5 WordPress page builders that can help you build amazing websites

Want to make your WordPress site look amazing but can’t afford a developer? Try these WordPress page builders instead.

Read more


About the Author


Share.

Comments are closed.