Unable to add custom CSS files to my Bootstrap theme in WordPress

3 Views

I am using the Twitter Bootstrap theme with WordPress for my site. My problem is that I want to make a custom navbar menu for my site and don’t want to use the bootstrap default menu. Thats why I created a custom menu, but now my problem is that I don’t know where to add my css files. I have added them into wordpress/wp-content/themes/the-bootstrap/css/ but I don’t know where or how to call them in header.php or in function.php.

There are already 2 CSS files in wordpress/wp-content/themes/the-bootstrap/css which are:

Read More

bootstrap.css and bootstrap.min.css.

Here are my 4 css files which I want to include: 

<link rel="stylesheet" href="css/base.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/mac.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/nav.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/productbrowser.css" type="text/css" charset="utf-8">
Post Views: 3

Related posts

Leave a Reply

5 comments

  1. If you want to call them in your header.php you will need to get the full url to the css file. You can use get_template_directory_uri() to do so:

    <link rel="stylesheet" href="<?php get_template_directory_uri();?>/css/base.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="<?php get_template_directory_uri();?>/css/mac.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="<?php get_template_directory_uri();?>/css/nav.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="<?php get_template_directory_uri();?>/css/productbrowser.css" type="text/css" charset="utf-8">

  4. Not exactly an answer to your question, but can you combine any of those stylesheets into one file? Calling that many separate files slows down page load times.

  5. 1- Put this in your template(yourtheme/something.php): 

    <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">

    2- Go to yourmain css file (yourtheme/style.css) and put: 

    @import url('file/css/your 1st css file.css');
@import url('file/css/your 2nd css file.css'); 

body { 
padding-top: 60px; 
padding-bottom: 40px; 
     }

    this will include any style.css you want.