CODEWITHSUNDEEP
wordpress
John Moore
John Moore

Reputation: 7129

WordPress: custom styles being overridden by Bootstrap styles

I am a WordPress beginner who has taken over management of an existing WordPress site. I've established that a little problem I am seeing is to do with the order of loading of CSS files. When I view page source, I can see this towards the bottom of the head (site name changed for security):

<link rel='stylesheet' id='addtoany-css'  href='https://www.mysite.co.uk/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' />
<link rel='stylesheet' id='mysite-style-css'  href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/mysite.css?ver=1674048874' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-style-css'  href='https://www.mysite.co.uk/wp-content/themes/mysite-acf/assets/css/bootstrap.css?ver=1643275784' type='text/css' media='all' />

So the custom CSS for the theme (mysite.css) is being overridden by the next line which sets everything back to Bootstrap defaults.

Where in WordPress are such things determined, and how can I set it so that the Bootstrap CSS loads first and is then potentially overridden by theme CSS?

Upvotes: 0

Views: 214

Answers (1)

Peter
Peter

Reputation: 69

Try to use this in your functions.php:

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style('main-style','http://website.com/styles/main.css');
}, 99);

https://developer.wordpress.org/reference/functions/add_action/

Be sure you got wp_head() in your header file.

Upvotes: 1

Related Questions