How to add Custom CSS to your WordPress Website

WordPress is famous for its easy to use and manageable interface. Beginners or Users with no technical background can develop and host their website without writing a single line of code. But what if you want to customize the appearance of your WordPress website? All this can be done by done by adding custom CSS on your website. You can change the look, layout, fonts, colour, size, alignment of your website’s content using CSS.

As a developer you would always want to make your website more aesthetically pleasing. Adding custom CSS to your website can be a bit tricky task. In this article, we will show you 4 different methods by which you can add custom CSS to your WordPress website.

  • Custom CSS through WordPress Theme customizer
  • Adding Custom CSS using a Child Theme
  • Plugins for adding Custom CSS
  • Enqueue your own custom CSS

What is CSS

The two main web technologies for designing web pages are HTML(Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML is used to describe the structure of the pages. With the help of HTML, author/ developers can publish online documents, retrieve online information, add images, videos and many more in their web page.

On the other hand, CSS is responsible for the look and feel of a web page, i.e. it describes how HTML elements will appear on the screen. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. One of the best thing about CSS is that it Cascades. Each style you define adds to the overall theme, yet you can make the most recent style override earlier styles.

For example, with CSS we can start by saying we want all of our text to be blue in color. Later we can say we want it to be in bold too. Still, later, we can tell it we want one word to be 14px, or any other color.

Now let’s learn different ways by which you can add custom CSS to your WordPress website.

Custom CSS through WordPress Theme Customizer

WordPress Customizer is an easier and approachable feature of WordPress to add custom CSS code. It is a built-in function that allows you to preview changes to your site before publishing them.

For adding custom CSS through theme customizer, login to your WordPress dashboard. In the Appearance tab go to Theme >> Customize.

This will open the theme’s customizer interface. On clicking customize you will see a bunch of options on the left pane along with your site’s live preview. With the help of customizer, you can configure site identity & design, manage site menus, colors, modify background image, preview the site in desktop, tablet, mobile, and add custom CSS code through Additional CSS.

Click on Additional CSS located on the bottom of the left pane. This will open a blank text box where you will be able to add custom CSS.

After adding custom CSS , click on ‘Save & Publish’ button.  

Note: In WordPress customizer, the additional CSS code is bound to your website’s theme. If you would like to use that custom CSS with other themes, then you will have to copy and paste the custom CSS code in each theme individually.

Adding Custom CSS using Child Theme

If you make major and multiple styling changes to your WordPress theme, then we recommend you to use this method. Modifying the theme style sheet method can be used for adding multiple lines of code. But you can’t use the parent theme’s style sheet to add custom CSS as it will overwrite the code while updating the theme. Hence, it is better to work on the child theme style sheet.

A child theme is stored in a separate directory with its own style.css and functions.php file. You can modify the appearance of your website with the help of simple coding and directory management. This technique can be useful when you want to use a third-party CSS library on your site or modularize your custom CSS code.

The Child theme also consists of an assets folder. Let us consider an example, where you want to change the style of a widget by creating a widget.css file. In that case, the structure of your child theme will look as follows:

- yourthemename-child/
    - assets/
        - widget.css
    - functions.php
    - style.css

The widget.css file will be stored in the assets folder. The next step is to edit your functions.php file. This can be done either by the code editor or from the Theme Editor from your WordPress dashboard.

The next step is to create a custom function (bht_widget_styles() in our case). You need to enqueue and register ‘widget.css’ file using the wp_register_style() and the wp_enqueue_style() WordPress methods to your custom function. We have registered the stylesheet using the ‘widget.css’ name but you can choose any other name. You also need to attach the custom bht_widget_styles() function to the wp_enqueue_scripts WordPress action with the help of the add_action() method.

<?php
/* Enqueues the external CSS file */
add_action( 'wp_enqueue_scripts', 'bht_widget_styles' );
function bht_widget_styles() {
 
    wp_register_style( 'widget-css', get_stylesheet_directory_uri().'/assets/widget.css' );
    wp_enqueue_style( 'widget-css' );
 
}

After doing this the widget-css file gets successfully added to your theme. Your child theme’s functions.php file should now look as follows:

<?php
/* Enqueues the child theme - Required for the child theme */
add_action( 'wp_enqueue_scripts', 'bht_parent_styles');
function bht_parent_styles() {
      
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
          
}
/* Enqueues the external CSS file */
add_action( 'wp_enqueue_scripts', 'bht_external_styles' );
function bht_external_styles() {
 
    wp_register_style( 'widget-css', get_stylesheet_directory_uri().'/assets/widget.css' );
    wp_enqueue_style( 'widget-css' );
 
}

If you want to learn more about child theme please refer to the “How to Create and Customize a WordPress Child Theme” article.

Plugins for adding Custom CSS

WordPress offers multiple plugins to add custom CSS code. These method enables you to make changes in CSS code irrespective of the theme. You can switch themes and still your custom CSS code will be applicable to your WordPress website. It is theme- independent and UI friendly method.

You can install a plugin either from your WordPress dashboard or upload it manually. For installing a plugin from the dashboard go to Plugins >> Add New. Search for the plugin you are looking and install and activate it.

In this article, we will show you 2 plugins by which you can easily add custom CSS to your WordPress website.

Simple Custom CSS Plugin

The Simple Custom CSS Plugin is an easy-to-use WordPress Plugin by which anyone can add custom CSS styles that override Plugin and Theme default styles. This plugin is designed for developers and designers who do not wish to add custom CSS in each of their downloaded WordPress themes individually. Styles created with this plugin will render even if the theme is changed.

After installing and activating the Simple Custom CSS Plugin, go to Appearance >> Custom CSS on your WordPress dashboard. Add you CSS code in the textbox and click on Update Custom CSS. Now refresh your website to see the changes.

For live preview, you can add custom CSS from the Theme customizer screen. Go to Appearance >> Customize >> Simple Custom CSS .

WP Add Custom CSS Plugin

This Plugin allows you to add custom CSS to the entire website as well as to individual posts, pages and custom post type. It appears directly on your WordPress dashboard and provides a CSS editor under each post.

After installing and activating the plugin, {} Add Custom CSS option will appear on the dashboard. If you want make changes to your whole website, click on {} Add Custom CSS and write CSS rules you want to apply to the whole website and click on save.

To add custom CSS code for a particular post, select the post and click on edit. On the post editor screen, you can find Custom CSS editor at the bottom.

Enqueue your own Custom CSS Stylesheet

We only recommend this method to the users who want to create their whole custom style sheet.  To add your own custom stylesheet in your WordPress website, you need to use wp_enqueue_style. To add a stylesheet named ‘mystyles.css’ uploaded in your theme’s folder, add the given code to your functions.php file.

wp_enqueue_style( 'mystyles', get_stylesheet_directory_uri() . '/mystyles.css' );

Conclusion

You can customize your WordPress website by adding custom CSS using any method mentioned above. But if you are a beginner, we would recommend you to use the plugins or theme customizer method. There are various other custom CSS plugins available such as CSS Hero and Simple Custom CSS and JS.

Also, we would recommend you to use a child theme for trial and safety purposes. This will ensure that your parent theme remains unaffected in case of errors.

We hope this article helps you develop beautiful website by adding custom CSS to your webpages. In case of queries, please leave a comment and we will get back to you as soon as possible.

Also, if you want us to cover a specific topic you can leave a comment for that as well.

Recent Articles

How to Add Tabs to WordPress Posts and Pages

Tabs effectively organizes the content and engages the user. You can divide your posts into tabs in order to save space and...

How To Check Whether Someone Blocked You On Instagram

All social media platforms including Instagram do not notify people when they get blocked by a user. But when someone’s post and...

Free Apps Make Money through These Innovative Ways

Have you always wondered why are some apps available to you free of cost? If you want to know how apps make...

How To Completely Remove Google Account From Chrome Browser

Google Chrome when used with your personal Google account lets you keep the data in sync with all your devices. Your YouTube...

How To Know If Your Android Smartphone Is Hacked And How To Fix It!

One of the worst nightmares you can ever witness is realizing that your Android Smartphone Is Hacked. Yes, you're allowed to be...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here