wp enqueue style - Why is my wp_enqueue

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='/' 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/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/wp-content/themes/homepage/template-parts/content-archive.php:27
Stack trace:
#0 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(725): require()
#1 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(672): load_template('/Applications/M...', false)
#2 /Applications/MAMP/htdocs/homepage/wp-includes/general-template.php(168): locate_template(Array, true, false)
#3 /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/index.php(20): get_template_part('template-parts/...', 'archive')
#4 /Applications/MAMP/htdocs/homepage/wp-includes/template-loader.php(106): include('/Applications/M...')
#5 /Applications/MAMP/htdocs/homepage/wp-blog-header.php(19): require_once('/Applications/M...')
#6 /Applications/MAMP/htdocs/homepage/index.php(17): require('/Applications/M...')
#7 {main}
  thrown in /Applications/MAMP/htdocs/homepage/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/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/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/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/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/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/wp-content/themes/cc/functions.php on line 10

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/' 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" />

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/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/wp-content/themes/homepage/template-parts/content-archive.php:27
Stack trace:
#0 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(725): require()
#1 /Applications/MAMP/htdocs/homepage/wp-includes/template.php(672): load_template('/Applications/M...', false)
#2 /Applications/MAMP/htdocs/homepage/wp-includes/general-template.php(168): locate_template(Array, true, false)
#3 /Applications/MAMP/htdocs/homepage/wp-content/themes/homepage/index.php(20): get_template_part('template-parts/...', 'archive')
#4 /Applications/MAMP/htdocs/homepage/wp-includes/template-loader.php(106): include('/Applications/M...')
#5 /Applications/MAMP/htdocs/homepage/wp-blog-header.php(19): require_once('/Applications/M...')
#6 /Applications/MAMP/htdocs/homepage/index.php(17): require('/Applications/M...')
#7 {main}
  thrown in /Applications/MAMP/htdocs/homepage/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/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/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/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/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/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/wp-content/themes/cc/functions.php on line 10

Share Improve this question edited Jul 29, 2020 at 2:42 asked Jul 28, 2020 at 7:49 Candace 11 silver badge2 bronze badges

1 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
1 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

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

wp enqueue style - Why is my wp_enqueue_style() not working?

1 Answer 1

与本文相关的文章

评论列表(0)