Custom theme – Bootstrap CSS not loading via wp_enqueue_style

  • Resolved ajaxStardust

    (@ajaxstardust)


    3 years, 8 months ago

    I’m designing a custom Theme using the underscores.me template. I’ve read several different “my css doesn’t load” threads here, but none seem to help w/ my issue. My own styles will load via wp_get_template_directory_uri().'/style.css', while– even with bootstrap.min.css etc stored locally (e.g. ./css/bootstrap.min.css), where wp_get_template_directory_uri().'/css/bootstrap.css' would be used in the code, and does show in view browser source– it’s still not loading as evidenced in Chrome developer tools sources.

    If i use Chrome dev’r tools to view source, and click the <link href="whatever_file" />, the file opens. So, it’s not a matter of my paths being incorrect.

    If I hard code my html as an HTML file, the styles are loaded. Hybrids of html / php also load the CSS. But, when I try to go “by the book” for theme development, it doesn’t load.

    If I use the ‘Additional CSS’ option in the customizer, and use e.g. @import url('http://site.local/wp-content/themes/theme_name/css/bootstrap.min.css'); it does in fact render the page w/ the bootstrap CSS as desired, but that doesn’t seem correct to me. What might I be doing wrong here?

    • This topic was modified 3 years, 8 months ago by ajaxStardust. Reason: @import clarification
Viewing 5 replies - 1 through 5 (of 5 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    3 years, 8 months ago

    I think are you using wrong function to get directory path please use
    get_template_directory_uri()

    Ref: https://developer.wordpress.org/reference/functions/get_template_directory_uri/

    Thread Starter ajaxStardust

    (@ajaxstardust)

    3 years, 8 months ago

    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" />
    <link rel="<?php echo get_template_directory_uri(); ?>/css/bootstrap-icons.css" />
    <link rel="<?php echo get_template_directory_uri(); ?>/css/mapbox-gl.css" />
    <link rel="<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css" />
    <link rel="<?php echo get_template_directory_uri(); ?>/style.css" />

    <?php wp_head(); ?>
</head>

    my bad on that func name. the code, as appears in header.php is above.

    aatanasov

    (@aatanasov)

    3 years, 8 months ago

    Hi @ajaxstardust,

    Would you be able to upload your web instance to a public URL so we can investigate the issue?

    Thread Starter ajaxStardust

    (@ajaxstardust)

    3 years, 8 months ago

    Hi @aatanasov

    Unfortunately, I don’t think that’s an option.

    I know it’s incorrect (aka. not recommended to use @import ), but the styles are applied the way i have it using the Addl CSS in the Customizer. I simply don’t have time to do the research and experimentation for this particular project.

    best regards.

    Thread Starter ajaxStardust

    (@ajaxstardust)

    3 years, 8 months ago

    I see what the issue is.
    <link rel="<?php... instead of <link rel="stylesheet" href="<?php...

    As was in my header.php file. I too often trust the regex when updating multiple files after copy paste etc. Clearly, it was easy to overlook. Didn’t notice it when I did view source as described in o/p, for my eyes going straight to the URL’s (missing the attribute designation). Here, i witness my own embarrassment. Alas, the shame of it all!

    • This reply was modified 3 years, 8 months ago by ajaxStardust. Reason: add header.php
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom theme – Bootstrap CSS not loading via wp_enqueue_style’ is closed to new replies.