How to Customize a WordPress Theme With CSS

Do you know that you can experiment with your WordPress site and change its appearance with CSS? You may add little aesthetic changes, pour in colors, change the layout, or even completely alter your WordPress theme.

Having control over your website’s appearance gives you a chance to create it in a way that you like.

You can add your personal touch to your brand’s website, making it much different from other people or businesses using the same WordPress theme!

In this post, let us take a closer look at how you can customise a WordPress theme with CSS.

Customise a WordPress Theme With CSS

What is CSS?

CSS or Cascading Style Sheets is a web language that is used to present web pages. With CSS, you can set the layout, colors, font, background, and other elements that can make our web pages presentable for the users. This is why we call CSS frontend client-side language as it is executed on the user-end. CSS is used in combination with HTML and Javascript to make the websites responsive. If you are thinking that you need to be a hardcore programmer to learn and implement CSS, it is not true. You can learn CSS easily and use it to alter your site’s presentation, even if you do not have knowledge of programming before.

What is WordPress?

WordPress is the most popular and the easiest way to start your website or blog. Talking technically, WordPress is an open-source content management system. It handles all the important aspects of a website such as content, layout, security, etc. You can create any kind of website using WordPress. For instance, business websites, eCommerce websites, portfolios, resumes, social networks, etc. WordPress is free to use and comes with various themes and plugins. One can change the look and feel of their WordPress site using CSS.

CSS and WordPress

To start editing your WordPress theme, you must first understand a few things – template files, template tags and CSS stylesheet. Template files control your WordPress theme. You might see different files like header.php, archive.php. These are template files that control your WordPress theme. Template tags are used to control these files and other database elements. CSS stylesheet or style.css is the file that you need to look for to change how your website looks. You will be editing the code in style.css to customize your WordPress theme.

How to Customize a WordPress Theme With CSS

First of all, you must understand that if you want to customize your WordPress theme with CSS, you have to either add certain code to it, or you have to edit the code that is already written. I would recommend you to at least learn some basics of CSS, HTML, JavaScript, and PHP before you start editing your theme.

Another thing to take note of is that if you are going to make changes in the stylesheet of your WordPress theme, these changes would be removed once your theme updates. So you must learn about child themes and use a child theme to make changes using style.css, functions.php, or other theme template files. I have talked about child themes later in this article.

There are two ways to edit or add CSS to your theme

#1 Using the Dashboard

This allows you to edit your WordPress theme directly using the CSS stylesheet in your WordPress Dashboard. But, you must note that any big changes made here might be difficult to revert. So I would recommend taking a backup of your WordPress theme’s original CSS and then making any changes. I would also recommend you create a child theme for your site. If you do not know what that is, just read the next section and come back.

Create a child theme and then, in that child theme go to Appearance and then Theme Editor. A pop-up would appear as you are using a child theme, but it is nothing to worry about. Just click on ‘I Understand’ and you will enter the stylesheet. If you want to make changes in template files like header.php, functions.php, etc. you must learn PHP first and then try your coding skills. Otherwise, just stick to editing the stylesheet.

What is a child theme in WordPress?

A child theme is a replica of an original theme (also known as parent theme). The child theme includes the functionality and styling of the parent theme. It is recommended to use a child theme when you want to keep the original code intact while making modifications to the design of your site. So, you can create new, better designs on the child theme and keep the functionality of the parent theme. A few advantages of using a child theme include:

  • You do not have to worry about messing with the original code as the parent theme is safe and unedited.
  • You can use coding to extend the functionality of a parent theme, experiment with it, and create something new.
  • You do not need to create a theme from scratch. If by chance you forget about a certain functionality or feature, the parent theme’s code is there for you.

However, you need to be very careful while using child themes. One of the reasons is that it would require coding skills and experience. If you are just beginning with CSS, HTML, JavaScript, and PHP, give yourself some time to become an expert first. Otherwise, the learning curve might be quite high.

Another thing to take care of while using a child theme is that you need to check the updates first. If your parent theme is updated with a feature that you do not want, you must not update your WordPress theme as it would reflect in your child’s theme. Sometimes, if any of the features are dropped in the main theme and you update it, your child theme might get affected. Thus, increasing your coding work.

#2 Using FTP server

There could be a chance that you cannot access the dashboard of your theme directly. Sometimes using plugins disables that facility. So you need to use FTP or File Transfer Protocol to remotely access your site’s files. Start with downloading any FTP Client application. Contact your host and ask for your FTP credentials.

As you will enter the credentials, you will be allowed access to style.css. Now make modifications to the file, save your changes and upload them back to the server. This could be quite a hectic method to add CSS to your site so use it only if you do not have access to your dashboard.

Easy ways to add CSS to your WordPress site

There are two easy methods using which you can add CSS to your WordPress site. They include using a WordPress Customiser or a Plugin. It will be a lot easier to add your CSS code using these methods. Adding CSS using a WordPress Customiser or a Plugin would also not disappear your code once the theme updates. However, I would still recommend you to keep a backup of your website’s original code in case anything happens unintentionally. Now let us check the two easy ways to add CSS to your WordPress site.

#1 Editing through WordPress Customiser

Just log in to your WordPress backend. Click on Appearance and then click on Customise. It will open a customization screen. This screen shows you a preview of your website at that moment and there will be some options on the left side of the screen to customize elements like the colors, menus, or other widgets.

On the left side of the screen, you will see an option called Additional CSS. This is where you have to sprinkle your magic. As you will click the Additional CSS, a new page will open with the code of your website on it. Now, you can make changes in the code and if you have written it correctly (no errors!) you will see the changes being reflected in the preview.

The CSS code that you write here would not change or disappear once your theme updates! But, if you move to a new theme, the code written here would be erased. So it is suggested that you must back up your CSS before changing the theme.

#2 Use a plugin

In this section, I will be discussing four different plugins that you can use to edit CSS for your WordPress theme – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS and CSS Hero. If you do not know, WordPress plugins are small pieces of software that can be attached to WordPress to expand its functionality. Some plugins are available free of cost while for some you have to pay some money to add them to your WordPress site. Plugins can help you edit or add CSS to your WordPress site in just a few clicks!

Using the Advanced CSS Editor Plugin

The first plugin that I would recommend is called Advanced CSS Editor. This plugin allows you to add CSS for how your website looks on a desktop, tablet, and mobile phone. This way, you can fine-tune your website for every device. To start editing, install the plugin. Go to your WordPress dashboard, click on Appearance, and then Customiser. You will see a new option called Advanced CSS Editor. Add the custom CSS that you want to it and save the changes.

A huge benefit of using this plugin is that you can control how your website looks on different devices. Moreover, you can still use the technique I told in point #1 to edit your WordPress theme. However, for some people who are not used to coding, making changes for every type of device could be a lot of work. They would first have to learn how to write CSS for every device type.

Using the Modular Custom CSS Plugin

The second plugin that I would recommend is Modular Custom CSS. This plugin helps you make changes in your WordPress site theme-wise. For instance, if you are currently using one theme and you make changes in that theme using Modular Custom CSS. Then, you decide to choose another theme for your site. So, the changes made in the first theme would not get deleted. They will remain intact in this plugin. You can also add global CSS using this plugin. That CSS would remain the same despite theme changes.

Modular Custom CSS

To use this plugin, first, download the plugin and add it to your WordPress site. Then click on Appearance -> Customiser -> Additional CSS. The only drawback that I could find about this method is that adding global CSS might not always be the best idea. Sometimes, the global CSS might not work with a theme and it could be a mess.

Using the SiteOrigin CSS Plugin

The third plugin that I recommend is known as SiteOrigin CSS. This plugin gives you visual controls that let you edit the look and feel of your site in real-time. This plugin is suitable for both beginners and advanced-level CSS users. The real-time preview and visual controls help the beginners while the advanced users can code quickly using the code auto-completion feature of this plugin.

SiteOrigin CSS

This plugin opens up a standalone CSS editor for WordPress. To access this plugin first download the plugin and add it to your WordPress site. Then click Appearance -> Custom CSS. A great feature of this plugin is that you can edit any element on your website by just clicking on it. You can change some simple elements of the theme without using CSS. However, one drawback of such functionality could be that if you make changes in many different elements of a theme, it might be difficult to track them.

Using the CSS Hero Plugin

Now, this is something interesting. My third plugin recommendation includes a plugin that helps you edit the CSS on your WordPress site using drag and drop. It is known as CSS Hero. To edit CSS using this plugin, you just have to mouse over the element you want to change and click on it. Then, you can adjust it as you like. Here are a few amazing features of this plugin:

  • This plugin includes easy editing of font styles and topography. The plugin supports Google Fonts and TypeKit fonts.
  • You can also use a color picker and experiment with a live color and background change. You can find your latest used colors easily.
  • You can just drag a slider and see how the margins look.
  • The plugin also supports site elements like gradient, box shadows, text shadows, and other modern CSS properties.
  • You can save snapshots of your edits with this plugin. So you do not have to make everything live. Just keep on working and publish the final version.
  • This plugin does not affect your theme files. So you do not have to worry about updates ruining your changes.

Comparing the different ways of Customising WordPress Theme with CSS

So, today we learned about 4 different ways to customize a WordPress site using CSS. You can edit or add CSS to your WordPress theme using the Dashboard or you may use an FTP application. You can use WordPress Customiser to add or edit CSS or at last, you may use some plugins to customize your WordPress theme with CSS.

  • If you are quite new to WordPress and CSS, I would recommend you to use the WordPress Customiser to edit or add CSS. This way, you can check the changes in the preview and do not have to worry about changes being removed once the theme updates.
  • If you have some experience with CSS and WordPress and you have worked on plugins before, I would recommend you to choose any of the four plugins that I shared with you today. The plugins provide better options and scope to enhance your site.
  • If you are a CSS veteran. You have created websites and know-how CSS works thoroughly. Then, I would recommend you to use the Dashboard or FTP to make changes directly in the WordPress stylesheet.

It is Important How your Website Looks

The design, layout, colors, fonts or theme of your website is quite important. It helps in conveying the feeling that you want the user to have about your company. It can set up a unique brand image and define your identity.

The design and layout of your website also play a major role in enhancing the user experience. If your design is not that good, you have placed ads at the wrong positions, the colors of your website are quite distracting, all of it could affect the user experience.

A great design and layout can help you control how the message gets delivered to the users. You can grab their attention at the right time and lead them to a path that fulfills your goals. So, changing, adding, or editing the CSS of your WordPress site is a matter of responsibility. The responsibility of making your website better for the users.

Hope these tips and tricks of customizing your WordPress theme with CSS would help you in giving a personalized touch to your website. If you use any one of them or have used them in the past, share your experiences in the comment section and spread the word!

Like the article? Share it.

LinkedIn Pinterest

One Comment

  1. Log in to your WordPress backend and click Appearance > Customize to open the theme customization screen. You’ll see a live preview of your website, with options on the left to customize elements like the colors, menus, or other widgets. At the very bottom of this menu, you should find the Additional CSS box.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *