1

Example: I have following HTML code and where should I place that bootstrap.min.css link. If I place that link in HTML code itself, when the page is published it's not loading the CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Thumbnail</h2>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>            
  <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>
</body>
</html>
Improve this question
1
  • If this is not working for you then as an alternate download this css file and place it in your_theme - > css -> bootstrap.min.css. After placing it inside css folder of your theme directory, call it like this from your header.php <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/css/bootstrap.min.css">. See if that helps.
    – Rishabh
    Commented Dec 30, 2016 at 9:50

3 Answers 3

Reset to default
1

Use wp_enqueue_style() in your functions.php:

function custom_wp_enqueue_style() {
wp_enqueue_style( 'bootstrapcdn', "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" );
}
add_action ( 'wp_enqueue_scripts', 'custom_wp_enqueue_style' );

The second parameter can be the path to the folder in your server where you have your bootstrap.

Improve this answer
6
  • I have tried this & still css is not loading properly. I have placed my html code & custom_wp_enqueue_style code in gist, please tell me what i'm missing . (I'm placeing html code in my wordpress page) (gist.github.com/anonymous/a2055361501a954c04ac976db0044719)
    – kiran
    Commented Dec 30, 2016 at 9:23
  • It works fine for me...
    – dgarceran
    Commented Dec 30, 2016 at 9:39
  • Maybe are you using a cache plugin on your wp or your server? And you wrote "function.php" on the gist. It should be "functions.php", I assume it's a typo, but check if the name is okay, please.
    – dgarceran
    Commented Dec 30, 2016 at 9:42
  • Thank you..:) I have installed wordpress in my local system & checking. Yes its functions.php not function.php
    – kiran
    Commented Dec 30, 2016 at 9:55
  • If I add link in custom_wp_enqueue_style function then is it required to add link in my html file ?
    – kiran
    Commented Dec 30, 2016 at 9:57
0

If you want to load css then you have to simply add single php line before css link. Call this line before href and src link.

<?php echo esc_url( get_template_directory_uri() ); ?>/

using this line you can load all type of css and image also. here you are trying to link bootstrap example:-

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

now your css will work.

Improve this answer
4
  • 1
    You don't need to use this function to call file from online link (link that have started with http://). This function should be use only to call those file that are present in theme's directory. The example you have shown in second code line of your, that won't work, So change the file path after the function.
    – Rishabh
    Commented Dec 30, 2016 at 9:25
  • Thank you :). I have included php line like this (gist.github.com/anonymous/4a2ebd0caed980b031a7633edb9ea666). Still its not loading css :(.
    – kiran
    Commented Dec 30, 2016 at 9:31
  • wow 2 upvotes on a wrong answer!!
    – Rishabh
    Commented Dec 30, 2016 at 9:41
  • For me its loading page like this (postimg.org/image/ozzichkgj) & here its gist link for my code (gist.github.com/anonymous/1fbee26ef1da1cefdea8c37c1e499353). Please tell me what i'm missing.
    – kiran
    Commented Dec 30, 2016 at 11:13
0

If other methods don't work, you can always use @import inside another css file:

@import url("stylesheet_2.css");

This will work, but may not be as fast since it is waiting for the other css to load before loading the rest of the css.

Sometimes there's no other choice, in case it's a website that you have limited access to, or complicated setup, etc.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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