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

David Warren
David Warren
1,803 Points

Trouble adding a CSS link in Wordpress

Hello, Ok. So I am beginning to feel like a real idiot. No matter how I try to link my css page to my header, it will not work. I need help.

This is where my file is in my fireftp: "/public_html/mbtlive/wp-content/themes/canvas/roll.css"

And I'm trying to use this code, added in the header.php file in wordpress to link the front end of my website to the stylesheet.

<?php
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );
/**
 * Add stylesheet to the page
 */
function safely_add_stylesheet() {
wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
}
?>

Would someone walk me through this, please. :)

Thanks!

5 Answers

Hello David, You'll have to use this code in functions.php file not the header.php file. also in

function safely_add_stylesheet() {
    wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
}

You will use

function safely_add_stylesheet() {
    wp_enqueue_scripts( 'prefix-style', plugins_url('style.css', __FILE__) );
}

Hope this helps !

David Warren
David Warren
1,803 Points

Thanks, that's a start...

But you're dealing with a real dunderhead. How do I code the "FILE"?

Check in your theme wp-content/YOUR THEME folder if you already have a functions.php file. If not then you can create one in Sublime Text or any text editor you are using and add your code and save it as functions.php

I guess I misunderstood your above question, here what you will replace plugins_url('style.css', FILE) with

function safely_add_stylesheet() {
    wp_enqueue_scripts( 'prefix-style', 'style.css', get_template_directory_uri().'/roll.css');
}
David Warren
David Warren
1,803 Points

Thanks! I really appreciate your help! That is exactly what I needed.

David Warren
David Warren
1,803 Points

Hmm... so I added that below code into my functions.php, and it didn't take.

function safely_add_stylesheet() {
wp_enqueue_scripts( 'prefix-style', 'style.css', get_template_directory_uri().'/roll.css');
}

Any idea what went wrong?

did you added

add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );

after ? So in full it will be

function safely_add_stylesheet() {
   wp_enqueue_scripts( 'prefix-style', 'style.css', get_template_directory_uri().'/roll.css');
}
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );
David Warren
David Warren
1,803 Points

Oh Duh! I should've figured that out. Thanks!

David Warren
David Warren
1,803 Points

Ok. I added the code below to my functions.php, and got a 500 internal error.

function safely_add_stylesheet() {
wp_enqueue_scripts( 'prefix-style', 'style.css', get_template_directory_uri().'/roll.css');
}
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );

So I changed it to this:

function safely_add_stylesheet() {
wp_enqueue_scripts( 'prefix-style', 'style.css', get_template_directory_uri().'/roll.css');
}
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet()' );

and I got this reply: Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'safely_add_stylesheet()' was given in /home/andrew/public_html/mbtlive/wp-includes/plugin.php on line 406

My bad I didn't noticed the 'style.css' you had try the below code:

function safely_add_stylesheet() {
    wp_enqueue_scripts( 'prefix-style', get_template_directory_uri().'/roll.css');
}
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );
David Warren
David Warren
1,803 Points

I'm still getting that internal error. :(

P.S. Thanks for the help. I'm out of my depth here. I've kept trying to avoid using an extra stylesheet, but at this point its become pivotal.

Well it takes few more things to make it work.

  1. Your header.php file must have wp_head(); before the </head>
  2. You should still have a style.css included to your theme with the comments about the theme name etc.
David Warren
David Warren
1,803 Points

I've checked both of those.

When I use this script, I get an internal error 500 message over the whole front end of my site.

function safely_add_stylesheet() {
wp_enqueue_scripts( 'prefix-style', get_template_directory_uri().'/roll.css');
}
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );

Any other ideas?

David Warren
David Warren
1,803 Points

I know this is wrong, or at least untidy. It might give me problems in the future. But for now... it works.

This is what I did.

function roll_css() {
echo '<link rel="stylesheet" type="text/css" href="http://mbtlive.mybooktherapy.com/wp-content/themes/canvas/roll.css">';
}

add_action( 'wp_head', 'roll_css' );

It's a make an error day for me, There was another problem with it try the below code

function safely_add_stylesheet() {
    wp_enqueue_script( 'prefix-style', get_template_directory_uri().'/roll.css');
}
add_action( 'wp_enqueue_script', 'safely_add_stylesheet' );

the function is wp_enqueue_script not scripts .

David Warren
David Warren
1,803 Points

That took care of the internal error! (Nice catch)

However, now the page is no different, no matter the css I write in the roll.css (I.E. I'm pretty sure the stylesheet isn't making it all the way to the page.)

Do I need to put the wp_enqueue_script() hook somewhere?

What would that look like?

try view source in browser to see if the file is included properly. Also if you are overwriting any styles from another file then it should be included after that file.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Try using an underline _ instead of - in the handle

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Also, is roll.css in a sub folder or your main directory? Sorry if you already answered that!