Bootstrap in Wordpress theme doesn't render in browser
Question
I am working on a WordPress theme using the bootstrap framework to style my page. I created a mock up in standard HTML first to make sure everything looked how I wanted:
Prototype Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Mac's Breakfast Anytime</title> <link rel="stylesheet" type="text/css" href="http://localhost/prototype/wwwroot/lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="http://localhost/prototype/wwwroot/css/site.css"> </head> <body> <div class="container body-content"> !!HEADER!! !!FOOTER!! </div> <script src="http://localhost/prototype/wwwroot/lib/jquery/dist/jquery.js"></script> <script src="http://localhost/prototype/wwwroot/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="http://localhost/prototype/wwwroot/js/site.js"></script> </body> </html>
However, when I move the code into my theme, Bootstrap is ignored.
Theme Code: (index.php)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><?php bloginfo('name')?> <?php wp_title()?></title> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/wwwroot/lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"> <!-- Facebook Open Graph --> <meta property="og:site_name" content="<?php bloginfo('name');?>"/> <meta property="og:title" content="<?php wp_title()?>"/> <meta property="og:url" content="<?php esc_url(the_permalink()); ?>"/> <!-- WordPress Scripts & Styles --> <?php wp_head()?> </head> <body> <div class="container body-content"> <?php get_header(); ?> <?php get_footer(); ?> </div> <script src="<?php bloginfo('template_url'); ?>/wwwroot/lib/jquery/dist/jquery.js"></script> <script src=" <?php bloginfo('template_url'); ?>/wwwroot/lib/bootstrap/dist/js/bootstrap.js"></script> <script src=" <?php bloginfo('template_url'); ?>/wwwroot/js/site.js"></script> </body> </html>
The directory wwwroot containing the Bootstrap asset files is in the root of both the Theme and Prototype.
Both Theme and Prototype directories are kept in the www directory of WAMP and accessed via Localhost .
SOLVED
Checked for 404 errors in Firefox Developer Tools, and amended pathes accordingly.
3 answers
solution1
0 ACCPTED 2018-06-03 23:45:40
Use the developer tools in Firefox or Chrome or Safari or IE to check the URLs for the stylesheet and see if they are correct or if they are 404-ing. That will tell you where they are being called from, if you need to use template_url or stylesheet_url , etc.
Also, you can use a free CDN for bootstrap CSS: see https://www.bootstrapcdn.com/
solution2
0 2018-06-04 05:07:39
In Theme Code: (index.php) you have direct link CSS in header and JS in footer this is not a WordPress stand way. if you want to add CSS and js in your WordPress then please use below code for your reference.
/**
* Enqueue scripts and styles.
*/
function enqueue_scripts_and_styles() {
// Theme Grid.
wp_enqueue_style( 'custom-grid', get_template_directory_uri() . '/css/grid-min.css');
// Google fonts montserrat
wp_enqueue_style('google-montserrat', '//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900','', '20171222');
// Fontastic fonts
wp_enqueue_style('icon-fontastic', '//file.myfontastic.com/TjMbeqXLGBrdGfUQhddhPb/icons.css','', '20171222');
// Fancybox js
wp_enqueue_script( 'custom-fancybox-js', get_theme_file_uri( '/js/jquery.fancybox.js' ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_and_styles' );
Note: 1) This code is for reference only, so you need to add your CSS and JS path.
2) if you have created a child theme then please us get_stylesheet_directory_uri() instead of get_template_directory_uri().
3) Also, you have added a bootstrap library in your WordPress root directory so, please add a bootstrap library in your theme's folder.
solution3
0 2018-06-04 05:21:59
VIMP: You should always enqueue your scripts and stylesheets. Do not use them directly in your code.
You can enqueue bootstrap by using below given code in functions.php file of your parent theme or child theme. Creation of Child theme is recommended though.
function my_bootstrap_resources() {
$style = 'bootstrap';
$path_to_bootstrap = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
if( ( ! wp_style_is( $style, 'queue' ) ) && ( ! wp_style_is( $style, 'done' ) ) ) {
//queue up your bootstrap
wp_enqueue_style( $style, $path_to_bootstrap );
}
}
add_action('wp_enqueue_scripts', 'my_bootstrap_resources');
Enqueuing should be preferred over hard coding because, if you see in above example we are first checking if bootstrap is already enqueued so that it won't be included multiple times.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.