Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Add Bootstrap CSS via the functions.php File

Posted by Ranish Malhan
Ranish Malhan
Courses Plus Student 377 Points

multiple css links are not working with wordpress.

multiple css links are not working with wordpress. The css files are included in template whenever i check source code of page but only first file is working and other files are giving 404 error. Here is the functions.php file

<?php

function theme_styles() {

    wp_enqueue_style('bootstrap_prim_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style('bootstrap_base_css', get_template_directory_uri() . '/css/docs.min.css' );
    wp_enqueue_style('font_awesome_css', get_template_directory_uri() . '/css/font-awesome.min.css' );
    wp_enqueue_style('owl_carousel_css', get_template_directory_uri() . '/css/owl.carousel.css' );
    wp_enqueue_style('owl_theme_css', get_template_directory_uri() . '/css/owl.theme.css' );
    wp_enqueue_style('custom_css', get_template_directory_uri() . '/css/custom.css' );

}
add_action('wp_enqueue_scripts', 'theme_styles');


?>

header.php is here

<!DOCTYPE html>
<html lang="en">
  <!-- head starts here -->
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CouponHawker - coupons & deals</title>
    <?php wp_head(); ?>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

We will need to see your code in order to help resolve the problem you are having. Please see the link on the right titled "Tips for asking questions" for instructions on how to post your code to the forum. Thanks!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Thanks for adding your code. Are all of those CSS files that are not working contained in the same css directory as the CSS file that does work?

2 Answers

Ranish Malhan
PLUS
Ranish Malhan
Courses Plus Student 377 Points
Ranish Malhan
Ranish Malhan
Courses Plus Student 377 Points

Thanks Colin Marshall for your kind responses and yes all the css files are contained in same css folder.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Could you post the source of the html you get when you load the page?

Ranish Malhan
Ranish Malhan
Courses Plus Student 377 Points

Yes sure, here is the source code

<!DOCTYPE html>
<html lang="en">
  <!-- head starts here -->
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CouponHawker - coupons & deals</title>
    <meta name='robots' content='noindex,follow' />
<link rel='stylesheet' id='bootstrap_prim_css-css'  href='http://localhost:51962/wp-content/themes/CouponHawker/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap_base_css-css'  href='http://localhost:51962/wp-content/themes/CouponHawker/css/docs.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='font_awesome_css-css'  href='http://localhost:51962/wp-content/themes/CouponHawker/css/font-awesome.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='owl_carousel_css-css'  href='http://localhost:51962/wp-content/themes/CouponHawker/css/owl.carousel.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='owl_theme_css-css'  href='http://localhost:51962/wp-content/themes/CouponHawker/css/owl.theme.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='custom_css-css'  href='http://localhost:51962/wp-content/themes/CouponHawker/css/custom.css?ver=4.1.1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost:51962/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost:51962/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:51962/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:51962/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.1.1" />

   </head>
  <!-- body starts here -->
  <body>

  </body>
</html>
Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

I'm thinking it might be a permissions issue. What operating system are you using and what software do you use for your local web server?

Ranish Malhan
Ranish Malhan
Courses Plus Student 377 Points

I am using windows 8.1 pro 64bit operating system with webmatrix local web server