How to load style.css after fonts.php in wordpress?

Question

I am developing a website locally in WordPress and then uploading it to the temporary dev server to show my progress to the management periodically.

Problem: When I upload everything to the server, I noticed that the styles in my style.css are overridden by the ones in fonts.php. This is my first time using the Wordpress platform. I don't know why, but this is not the case when I am hosting it locally. As you see in the picture, the fonts.php is declared after the style.css. Image:

What I tried: I was digging into the wordpress files to find a way to declare fonts.php first and then the style.css later so that style.css will override fonts.php. I found this file in wp-includes/theme.php where I found the style.css being declared but couldnot find for fonts.php. This was a dead-end.

Does anybody know how to do it?

Answer 1

Thanks Susheel for your post. It is helpful if I have to add a css file externally but didn't solve my problem which was making sure fonts.php is loaded before that.

I FOUND A SIMPLE SOLUTION. I moved all css that I wanted to override on fonts.php in adaptive.css file which is always loaded after the fonts.php file.

Answer 2

// Load the theme stylesheets
function theme_styles()  
{ 

    // Example of loading a jQuery slideshow plugin just on the homepage
    wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );

    // Load all of the styles that need to appear on all pages
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'custom', get_template_directory_uri() . '/css/custom.css' );

    // Conditionally load the FlexSlider CSS on the homepage
    if(is_page('home')) {
        wp_enqueue_style('flexslider');
    }

}
add_action('wp_enqueue_scripts', 'theme_styles');

Answer 3

Let's take an example to Import Bootstrap CSS Stylesheets in wordpress using wp_enqueue_style()

First thing first you need to insert

`<?php wp_head(); ?>` 

so your theme can use filters and hooks that use the wp_head() hook. So that any theme additions can be easily called.

Make sure you have wp_head(); between the head section of your theme, in the header.php file.

Then create a new file functions.php in the theme directory where index.php also exists. In functions.php we are going to create a new function and then register styles using the wp_register_script function and then we call our styles using the wp_enqueue_style function.

This is the code we are going to use to call in Bootstrap stylesheets.

`<?php
function add_stylesheet() {
wp_register_style('bootstrap.min',get_template_directory_uri() . 
'/css/bootstrap.min.css');
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
?>`

So what does the above code do?

The add_stylesheet() is the name of our created function, you can name it anything you may wish.

Then, we registered our stylesheet through the WordPress function wp_register_style. It accepts 5 different parameters

`$handle, $src, $deps, $ver, and $in_footer`

After registering our style is done, we can call it using the WordPress function wp_enqueue_style. That is it, this method might seem complicated at first but this is the preferred method of calling in stylesheets in WordPress.