1

I'm a WordPress n00b. I can't seem to get simple CSS imported into my page.

This is my that I've tried:

index.php

<link href="style.css" rel="stylesheet" type="text/css">

style.css

/* External */
@import: url('http://fonts.googleapis.com/css?family=Varela');
@import: url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

/* Internal */
@import: url('css/bootstrap.css');
@import: url('css/custom-styles.css');

I've also tried:

index.php:

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

and this just to be double sure:

<link href="<?php bloginfo('style.css'); ?>" rel="stylesheet" type="text/css">

I've done researching but I can't find anything other than what I've tried above. So I appologize if this is a repeat.

EDIT:

This doesn't work within WordPress within the index.php:

<link href="style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href="css/custom-styles.css" rel="stylesheet" type="text/css">
henrywright
  • 10,070
  • 23
  • 89
  • 150
  • I rolled back your revision because you removed the problem code from your question. In order for the answer below to make sense, the colons are necessary in your question. – Liftoff May 02 '14 at 20:49
  • Are you sure those file-paths are correct? – Liftoff May 02 '14 at 20:49
  • @David I'm pretty sure. The only things I changed from the working static html site was adding the link to style.css and changing the file extension from .html to .php –  May 02 '14 at 20:55

2 Answers2

5

You're doing this the wrong way for wordpress. You should be enqueing your stylesheet. THe following should go in your functions.php file. 

function enqueue_styles() {
    wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');
}

If you are using hard coded links as in your example, these should be added to header.php, however this is bad practice as Wordpress has it's own way to handle dependencies and conflicts.

Check out the Codex

Also, as already mentioned, it's generally bad practice to use @import to load multiple style sheets. You can use enqueue to load in all these scripts, just make sure the scripts you need to have precendence are loaded last: 

    function enqueue_styles() {
 wp_enqueue_style( 'stylesheet', 'netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
 wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Varela');
 wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', array() );
 wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/style.css');
 wp_enqueue_style( 'stylesheet', get_template_directory_uri() . '/css/custom-styles.css');
    }

And hook it like so:

add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
Talk nerdy to me
  • 1,085
  • 9
  • 11
  • Okay. So I would duplicate the last line in your function to add multiple styles? What about styles not located on the server, those too? –  May 02 '14 at 21:00
  • @dustindowell22 edited to show how to load everything. – Talk nerdy to me May 02 '14 at 21:02
  • Thanks. Now I just need to figure out how to include the functions.php. –  May 02 '14 at 21:05
  • You don't need to include it. It's a default wordpress file, and should be located in the top directory of your theme. If it's not there, just create a file called functions.php and wordpress will automatically load it. – Talk nerdy to me May 02 '14 at 21:06
  • Okay. That's what I did, but it's just spitting out all of the code at the top of the page. EDIT: Sorry, forgot –  May 02 '14 at 21:08
  • Beat me to it. Was about to give you the tags :) – Talk nerdy to me May 02 '14 at 21:11
  • Still not working for some reason though. All that gets rendered to the HTML is an empty tag. And no error in the console mentioning not being able to find the CSS. –  May 02 '14 at 21:14
  • That's very strange. Can you link to your site? Have you viewed the source to see if wordpress is loading? – Talk nerdy to me May 02 '14 at 21:15
  • Oops! just realised I forgot to include the hook in the above tag, so your function is not being called. JUst copy and paste add_action( 'wp_enqueue_scripts', 'enqueue_scripts_and_styles' ); – Talk nerdy to me May 02 '14 at 21:18
  • Sorry, I can't link you right now. I'm working locally on MAMP and I'm currently working out issues with my hosting company about installing WordPress on a server. –  May 02 '14 at 21:18
  • Thanks for working with me on this. But I'm getting the same result. –  May 02 '14 at 21:20
  • Try this instead add_action( 'wp_enqueue_scripts', 'enqueue_styles' ); – Talk nerdy to me May 02 '14 at 21:22
  • Yup. I've been experimenting with those names too. No progress :C. –  May 02 '14 at 21:23
  • It should be throwing an error if your'e calling a function that doesn't exist. Try adding test(); to see if you get an error. – Talk nerdy to me May 02 '14 at 21:25
  • Well your functions.php file is not loading, so there is something wrong with your setup. If you move to chat, I'll try to help you with this. – Talk nerdy to me May 02 '14 at 21:31
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51912/discussion-between-dustindowell22-and-talk-nerdy-to-me) –  May 02 '14 at 21:33
  • Not sure you need `global $wp_styles;` in your `enqueue_styles()` function? – henrywright May 02 '14 at 22:50
  • @Talknerdytome you have a syntax error in your code. Check here `wp_enqueue_style( 'stylesheet', get_template_directory_uri() . 'css/custom-styles.css');`. Forgot `/` before `css/custom-styles.css` – Pieter Goosen May 03 '14 at 05:14
  • @Talknerdytome great answer, +1. Also +1 for the update. – Pieter Goosen May 03 '14 at 05:26
2

You should not have a colon after your import statement:

@import url("css/bootstrap.css");

That being said, what you are doing is typically rendered as bad practice. CSS files should never import other CSS if they can help it as it requires you to download the files synchronously:

I download styles.css

---->Then download bootstrap.css because it is imported.

It is much better to import both directly in the HTML document:

<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="bootstrap.css"/>

See this question for more info.

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Thanks. I haven't used imports in a long time. Though, I'm still having issues. I'd much rather just import them into the HTML, though, I read that this is more common with WordPress? –  May 02 '14 at 20:45
  • As I said above, it is common to import all of your stylesheets directly into the HTML as it allows you to download them asynchronously. It is not only common amongst wordpress, but among all websites. – Liftoff May 02 '14 at 20:45
  • 1
    @dustindowell22 If it still doesn't work, then it must be the file paths. It's worth noting that paths are relative to the source of the style sheet, not relative to the document. – Josh Crozier May 02 '14 at 20:47
  • @JoshCrozier I've edited my main post when I tried importing the CSS directly into the index.php page. This is the first time I tried, and I just assumed it was the wrong way for WordPress themes. I'm 100% sure path names are correct. –  May 02 '14 at 20:50
  • @dustindowell22 Can you provide a link to the website where you are trying to import the CSS? – Liftoff May 02 '14 at 22:08