Various Ways to Add Additional CSS in WordPress

If you’d like to find out the best method for adding CSS in WordPress, you’ve come to the right place. Keep reading and you will discover various techniques, along with their pros and cons, and I’ll also tell you which one is best, and why.

Can you add custom CSS in WordPress?

Of course. In fact, it’s the best option for optimizing loading times. You should also bear in mind that every website is its own little world, so it is impossible for the default CSS on your WordPress, or for the template you’re using, to be 100% compatible with every website. Customizing your CSS will prevent this issue and many other issues.

Why should you use customized CSS in WordPress?

I already mentioned that using custom coding will help you optimize loading times, but that’s not all: one of the main problems you’ll encounter if you don’t edit your own CSS coding is that your website won’t be fully responsive (adaptable to all devices).

How to add CSS on WordPressCómo añadir CSS en WordPress

Here are 5 different ways to add customized CSS, along with their pros and cons.

The most common way to edit CSS in WordPress

WordPress offers in-built tools that allow you to edit your CSS quickly and simply. To do this all you need to do is go to your control panel and click on Appearance/Personalize. Once you are in the editor you will see a menu to the left, and underneath you will find the “Additional CSS” tab. Then you just need to write the coding that you want and click “Publish”.

• Pros: Quick and easy editing. Live editing. You don’t need to touch any PHP or native WordPress coding.
• Cons: You will be overwriting coding, so this will slow down your website’s loading time.

The best way to add custom CSS in WordPress

In our opinion, there is no doubt that this is the best way for adding CSS in WordPress. We will remove all default coding and name the coding “above the fold” with the hook “wp_head”, and the remaining code we’ll name “wp_footer”.

• Pros: Unbeatable loading time.
• Cons: Some mid-level/advanced knowledge of WordPress development is required.

If you’re interested in knowing how to use the best method for adding customized CSS, and thus work on WPO, keep reading to the final section of this article and I will explain everything in detail.

Editing the style.css file

Whether you have the default theme or a child theme active, you will have a style.css file for adding style coding. To access this file you can click on Appearance/Editor for theme files. Once you are in the editor, you should make sure that the style.css tab is selected on the right-hand side. Now all you need to do is add your coding and click on Update your file.

• Pros: Easy to do, more organized coding.
• Cons: It requires mid-level expertise as there is no live editing. Although loading speeds are better than in the previous point, you will still be overwriting the default CSS coding.

Plugins for adding additional CSS in WordPress (not recommended)

Although to me it seems odd, you can find plugins for adding CSS. But to be honest, since there are already tools like the WordPress editor and the style.css file, I don’t really understand the point of these plugins. But they are worth mentioning anyway.

• Pros: You will have direct access via your control panel tab.
• Cons: There are many, many cons. You will be mangling the coding, massively slowing down load times (as there will be a lot more elements to load), etc.

Below are some examples of plugins for adding CSS in WordPress:

• WP Coder
• Simple Custom CSS and JS
• WP Add Custom CSS
• Simple CSS

The traditional method for linking a CSS file in WordPress

The WordPress structure is designed to add new CSS files in this way. Although it’s true that in some ways it is not the best method, it doesn’t hurt to know about it. According to the WordPress documentation, in these cases it is better to use the wp_enqueue_style. This function is generally used in the wp_enqueue_scripts hook as follows:

function webheroe_estilo_externo() {
 
    wp_register_style( 'my_styles', get_stylesheet_directory_uri().'/mis_estilos.css' );
    wp_enqueue_style( 'my_styles' );
 
}
add_action( 'wp_enqueue_scripts', 'webheroe_estilo_externo' );

• Pros: An organized and natural way to develop the “WordPress style”. Should any developer need to work on your website, it would be very easy to find your file.
• Cons: Mid-level expertise in WordPress development is essential.
• Extra tip for this method: If you’d like to optimize the loading time, you could avoid using hooks and link the file directly using HTML coding on your header.php file. All you need to do is enter the following code between the labels <head></head>:
  <link rel=”stylesheet” href=”camino/hasta/nuestro/archivo/estilos.css”>

Fully customizing your CSS coding in WordPress (Recommended)

To work with this method, the first thing you need to do is delete the default CSS coding in WordPress. If you click on the aforementioned link, I explain how to do this step by step. Next, you will need to choose from one of 2 options:

1. Embed one single CSS file that will affect all the pages on the website.
2. Create separate files that will affect individual pages or groups of page templates.

For now I’m going to concentrate on the second option, as it avoids the need to load unnecessary coding on several pages.

Adding CSS in WordPress depending on which page is being loaded

You will need to follow the steps below:

1. Make an outline of pages and groups of pages that will be affected by each file.
2. Obtain the IDs for each page or the name of the page-template.php to add a group of pages.
3. Divide your CSS coding into 2 groups
   1. Above the Fold
   1. Rest of the page
4. Create a pillar file to link each page with its respective CSS, using one single hook.

Perhaps the most organized way to implement all this is through a customized plugin. So let’s get to work:

Create a customized plugin to load CSS, depending on which page is being viewed

1. Create the plugin file structure

Before anything else, you’ll need to take into account which page groups are using the same CSS, or almost the same CSS. When I say “almost the same CSS”, I mean that if there are only minimal differences, it may make more sense to add the extra bit of coding to the same file.

In this example we are going to add 4 different pages, where 2 of them are added by means of a page-template. As such, you’ll need to create the plugin with the following file structure:

wh_css_personalizado.php
    /styles
      st_inicio_head.php
      st_inicio_footer.php
      st_contacto_head.php
      st_contacto_footer.php
      st_plantilla1_head.php
      st_plantilla1_footer.php

It is the wh_customized_css.php file that will recognize the plugin, and, since it is a plugin with pretty simple mechanics, you’ll be able to put all the coding here.

2. Obtain the IDs for each page or the page template file name

The ID or the page template file name is what will allow you to specify which pages are affected by each style file. For example, we could say the identifiers are as follows:

• home = ID 3
• contact = ID 7
• page1 = custom_template.php
• page2 = custom_template.php

3. Divide your CSS coding

Now it’s time to work on the styles. As you have already deleted all the default CSS coding, your website will now look disorganized and unattractive. You can use the same browser to work on the styles.

The important thing here is to make sure the block of content that will be seen after the page loads is well defined, both on mobile devices and computers. One simple solution in Gutenberg would be to group together the upper section of each page and recognize it with a ID-type CSS selector.

Once you have all the CSS coding in the upper section (above the fold), place it in the corresponding “head” style file. Then we will add the rest of the CSS coding to the “footer” style file.

In this example, you should add the “page1” and “page2” CSS coding as if it were one single page. This is because we’re going to load the files from the page-template, and this will group together these 2 files. Below is an example of a file for the upper section:

<style>
    #parte_superior{
        background-color: aqua;
    }
</style>

And here is an example of a file for the rest of the CSS coding:

<style>
    #main{
        font-size: 15px;
    }

    footer{
        background-color: orange;
    }
</style>

4. Set up the pillar file

To load the CSS files in a consistent way, and depending on which page is being rendered, you can create a pillar file as follows:

1. 1 function hooked to the wp_head hook to load “above the fold” styles
2. 1 function hooked to the wp_footer to load the other styles
3. Each of these functions will contain several conditionals checking which page the visitor is on. If the conditional returns a “true” value, it will add a require from the corresponding file.

This will also be the file that will recognize the plugin, so you will need to add the comments for WordPress to identify it. In the end, the file will look something like this:

<?php
/*
Plugin Name: WebHeroe CSS
Plugin Uri: https://webheroe.com/plugin_page
Description: A plugin for optimizing the load time of CSS coding
Author: Álvaro Torres
Author URI: https://webheroe.com/
Version: 1.0
License: GPLv2 or later
Text Domain: whc
*/

function webheroe_above_estilos(){
    //Above the fold styles for homepages
    if(is_page(3)){
		require_once(dirname(__FILE__) . '/styles/st_inicio_head.php');
	}

    //Above the fold styles for contact pages
    if(is_page(7)){
		require_once(dirname(__FILE__) . '/styles/st_contacto_head.php');
	}

    //Above the fold styles for groups of pages with page-template
    if(is_page_template('custom_template.php')){
		require_once(dirname(__FILE__) . '/styles/st_plantilla1_head.php');
	}
}
add_action("wp_head", "webheroe_above_estilos");

function webheroe_resto_estilos(){
    //Other styles for homepages
    if(is_page(3)){
		require_once(dirname(__FILE__) . '/styles/st_inicio_footer.php');
	}

    //Other styles for contact pages
    if(is_page(7)){
		require_once(dirname(__FILE__) . '/styles/st_contacto_footer.php');
	}

    //Other styles for groups of pages with page-template
    if(is_page_template('custom_template.php')){
		require_once(dirname(__FILE__) . '/styles/st_plantilla1_footer.php');
	}
}
add_action("wp_footer", "webheroe_resto_estilos");

As you can see, it is really straightforward. And believe me, with WPO it makes all the difference.