Why is my wp_enqueue_style() not working?

Question

I am new to wordpress and am trying to develop a child theme on localhost for the first time. I am trying to load style.css using this code in functions.php. This is the entire functions.php file:

<?php 

//registers styles in header
function load_stylesheets()
    {   
        
        wp_register_style('bootstrap', get_stylesheet_directory_uri().'/assets/css/bootstrap.css', array(), false, 'all');
        wp_enqueue_style( 'bootstrap');
        
        wp_register_style('style', get_stylesheet_directory_uri().'/style.css', array(), false, 'all');
        wp_enqueue_style('style');
        

    }
add_action('wp_enqueue_scripts', 'load_stylesheets');
    
?>

My style.css file is in my main directory and it has this style in it

body {background-color:black;}

My header.php file is

<!DOCTYPE html>
<head>
    <?php wp_head();?>
</head> 
<body <?php body_class();?>>

My footer.php file is

<footer>
</footer>

<?php wp_footer();?>

</body>
</html>

When I inspect my homepage source code it shows my style.css is loading but I am not seeing the style applied (the black background).

<style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
    <link rel='stylesheet' id='wp-block-library-css'  href='http://homepage:8888/wp-includes/css/dist/block-library/style.min.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='http://homepage:8888/wp-content/themes/cc/assets/css/bootstrap.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='style-css'  href='http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2' type='text/css' media='all' />
<link rel='https://api.w.org/' href='http://homepage:8888/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://homepage:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://homepage:8888/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.4.2" />
<link rel="canonical" href="http://homepage:8888/" />
<link rel='shortlink' href='http://homepage:8888/' />
<link rel="alternate" type="application/json+oembed" href="http://homepage:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%homepage%3A8888%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://homepage:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%homepage%3A8888%2F&#038;format=xml" />

When I click on the "http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2" it appears that my style of "body {background-color:black;}" is showing but I just don't see it applied to the homepage. It looks like it's being overridden by the Bootstrap's reboot.scss file, which I deleted from my css folder so I'm not sure why it's still showing. Is there also a reason why it is adding "ver=5.4.2" to the end?

EDIT:

I have tried hard refreshing and checked my debug log before I posted this. The debug log says this, but I still don't understand what it's saying and I am following my tutorial video to a T.

      thrown in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/homepage/template-parts/content-archive.php on line 27
[28-Jul-2020 04:58:53 UTC] PHP Fatal error:  Uncaught Error: Call to undefined function the_exerpt() in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/homepage/template-parts/content-archive.php:27
Stack trace:
#0 /Applications/MAMP/htdocs/homepage.com/wp-includes/template.php(725): require()
#1 /Applications/MAMP/htdocs/homepage.com/wp-includes/template.php(672): load_template('/Applications/M...', false)
#2 /Applications/MAMP/htdocs/homepage.com/wp-includes/general-template.php(168): locate_template(Array, true, false)
#3 /Applications/MAMP/htdocs/homepage.com/wp-content/themes/homepage/index.php(20): get_template_part('template-parts/...', 'archive')
#4 /Applications/MAMP/htdocs/homepage.com/wp-includes/template-loader.php(106): include('/Applications/M...')
#5 /Applications/MAMP/htdocs/homepage.com/wp-blog-header.php(19): require_once('/Applications/M...')
#6 /Applications/MAMP/htdocs/homepage.com/index.php(17): require('/Applications/M...')
#7 {main}
  thrown in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/homepage/template-parts/content-archive.php on line 27
[28-Jul-2020 06:24:51 UTC] PHP Parse error:  syntax error, unexpected '}', expecting ')' in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/cc/functions.php on line 6
[28-Jul-2020 06:24:51 UTC] PHP Notice:  Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/homepage.com/wp-includes/class-wp-recovery-mode-email-service.php on line 339
[28-Jul-2020 06:24:51 UTC] PHP Notice:  Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/homepage.com/wp-includes/class-wp-recovery-mode-email-service.php on line 340
[28-Jul-2020 06:26:51 UTC] PHP Parse error:  syntax error, unexpected '}', expecting ')' in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/cc/functions.php on line 6
[28-Jul-2020 07:03:18 UTC] PHP Notice:  Undefined variable: version in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/cc/functions.php on line 10
[28-Jul-2020 07:03:19 UTC] PHP Notice:  Undefined variable: version in /Applications/MAMP/htdocs/homepage.com/wp-content/themes/cc/functions.php on line 10

If you are happy that the right files are being enqueued into <head> but you're not seeing the changes, the next most likely problem could be caching. Where WP adds a version number to the end of css and js files, the browser uses this to cache files. So you could try either hard reloading the page, trying in a different browser (which hasn't previously cached the files) or removing the version numbers. See if you can rule this in or out via a simple method first, as you might then want a controllable solution to caching because when you go Live you will benefit from caching being in place. — t2pe, Commented Jul 28, 2020 at 9:30
Couple of things to debug: Did you browse to this file locally to double check that it's got what you expect in it? http://homepage:8888/wp-content/themes/cc/style.css?ver=5.4.2 ? You could use the browser Inspect function to see what style is being applied to body and where it came from, just to see if another CSS property might be overriding yours. — mozboz, Commented Jul 28, 2020 at 10:26
I have tried hard refreshing and checked my debug log before I posted this. I added the debug log to my original post in an edit, but don't understand what it's telling me. — Candace, Commented Jul 28, 2020 at 16:23
In your debug output it's referring to two different themes - homepage and cc. Are you developing a child theme? — t2pe, Commented Jul 28, 2020 at 18:41
The debug is complaining about lines 6 and 10 in the functions.php file of the 'cc' theme. Can you paste that into your question (or at least the whole function that spans those lines). There is another error but that's less likely to affect the CSS. — t2pe, Commented Jul 28, 2020 at 18:49

t2pe · Accepted Answer · 2020-07-30 12:59:19Z

Looking at your debugging output it seems like you might be developing a child theme? If so then the function get_stylesheet_directory_uri() is needed instead of get_template_directory_uri() because the latter will always use the Parent theme, whereas the former will use the Child if its present.

So try this instead:

function load_stylesheets(){    
        wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().'/assets/css/bootstrap.css', array(), false, 'all');
        wp_enqueue_style('style', get_stylesheet_directory_uri().'/style.css', array(), false, 'all');
    }
add_action('wp_enqueue_scripts', 'load_stylesheets');

The other errors in your debugging are unlikely to be a cause of the missing CSS but if the above doesn't work, please paste in part of your functions.php as per my comment above.

Update. I setup a new install of WP and applied your function above, dropped in the Bootstrap 4 download files into the correct folder to simulate your setup and added the style. Nothing more than that. Everything worked fine and the background turned to Black as you'd expect.

So I think the Wordpress side of things is fine, and its possible that even the CSS setup is correct.

I think there are two further things you could check:

ensure you can see your theme style.css appearing after/below the Bootstrap css in the head. It must be after/below else it will be overridden (which looks fine in your screenshot tbh).
use the Inspector to see what your CSS is looking like when used by the browser. This might differ from what you expect.

In Chrome - Right click and inspect page to open DevTools. Switch to the network tab and apply the CSS filter at the top. Reload the page, and you should see all CSS files in use listed there. Click on your Style.css and you can see a preview of it on the right. Is it populated with the correct code?

Beyond this, I'm not sure I/we can help much more as the files appear to be correctly enqueued in the head.

I think I am developing a child theme since I am doing all this in my /wp-content/themes folder. So I changed my functions.php file to reflect this, hard refreshed but don't see a change. I added the entire functions.php file in my original post if that helps. Looking at my homepage head through inspector I'm not sure why it is adding a "?ver=5.4.2" to the end of my "style.css" stylesheet? I also noticed that Bootstrap's "reboot.scss" style is overriding my <body> – how do I prevent this override? — Candace, Commented Jul 29, 2020 at 2:27
I have a feeling your setup is correct (in WP terms...) and the issue here is more specific to Bootstrap. Rather than use a generic test against the <body> element, create something more specific like a <p class="testingcss">Hi</p> and apply CSS to that in your style.css. If that works, then the issue is not WP related. I'll include a link below for further reading. Regards the ver=5.4.2, Wordpress does that by default and its your WP version number. This helps with file caching but the pros/cons of that are another matter entirely... — t2pe, Commented Jul 29, 2020 at 9:38
So I added this code to my style.css so the <p> in my body code would change color, but still don't see a change: body > p { color:#FF0000; font-size:10rem;} I think the reboot.scss from Bootstrap is overriding it. Is there another basic framework like Bootstrap that is not so problematic? — Candace, Commented Jul 30, 2020 at 1:45
So used Devtools with the CSS filter and see that my style.css is populating the correct code. It's still not working on my end for some reason, I'm not sure what it is, but I will keep trying! Thank you so much for your help, I really appreciate it. — Candace, Commented Aug 5, 2020 at 4:01

Stack Exchange Network

Why is my wp_enqueue_style() not working?

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
wp-enqueue-style
or ask your own question.

Hot Network Questions

Why is my wp_enqueue_style() not working?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged wp-enqueue-style or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
wp-enqueue-style
or ask your own question.