Title: Adding CSS files to a theme Last modified: August 30, 2016 --- # Adding CSS files to a theme * [MaksymV](https://wordpress.org/support/users/maksymv/) * (@maksymv) * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-css-files-to-a-theme-4/) * Hello guys, * I have a wordpress installation with a working theme. I have just purchased a CSS3 photo hover effect package and wanted to implement it into my main page. The documentation only explains how it works with HTML, which is reallly simple. I have done it and it works fine. * the HTML version of linking to the CSS file looks like this: * ``` ``` * But I want it on my wordpress site so I am trying to link the CSS files. I have put them next to the functions.php in the folder /hover/css/styles.css and one file a little bit further, but basically same directory. * I have found several solutions, which did not lead far. So my procedure is: modifying the functions.php file in wp-content/themes/my-theme/functions.php * I am just adding my code at the very far end, so: * 1. I used the tutorial described [here](http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321) * ``` function wptuts_styles_with_the_lot() { // Register the style like this for a plugin: wp_register_style( 'hover', plugins_url( '/hover/css/styles.css', __FILE__ ), array()); // or // Register the style like this for a theme: wp_register_style( 'fontawesome', get_template_directory_uri() . '/hover/css/font-awesome-4.4.0/css/font-awesome.min.css', array()); // For either a plugin or a theme, you can then enqueue the style: wp_enqueue_style( 'hover' ); wp_enqueue_style( 'fontawesome' ); } add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' ); ``` * This leads to a Servererror 500 * 2. I have found [this ](http://wp.zacgordon.com/2013/03/13/adding-css-to-wordpress-theme-via-functions-php-file/) article, * and tried this code: `function theme_styles() { // Example of loading a jQuery slideshow plugin just on the homepage wp_register_style( ‘flexslider’, get_template_directory_uri().‘/ css/flexslider.css’ ); * // Load all of the styles that need to appear on all pages wp_enqueue_style(‘ main’, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘custom’, get_template_directory_uri() . ‘/css/custom.css’ ); * // Conditionally load the FlexSlider CSS on the homepage if(is_page(‘home’)){ wp_enqueue_style(‘flexslider’); } * } add_action(‘wp_enqueue_scripts’, ‘theme_styles’);` * In my version it looked like this: * ``` function theme_styles() { // Example of loading a jQuery slideshow plugin just on the homepage wp_register_style( 'hover', get_template_directory_uri() . 'hover/css/styles.css' ); wp_register_style( 'fontawesome', get_template_directory_uri() . 'hover/css/font-awesome-4.4.0/css/font-awesome.min.css' ); // Load all of the styles that need to appear on all pages wp_enqueue_style( 'main', get_template_directory_uri() . 'style.css' ); wp_enqueue_style( 'hover', get_template_directory_uri() . 'hover/css/styles.css' ); wp_enqueue_style( 'fontawesome', get_template_directory_uri() . 'hover/css/font-awesome-4.4.0/css/font-awesome.min.css' ); } add_action('wp_enqueue_scripts', 'theme_styles'); ``` * I got to work this version for a short period of time, but it messed up my theme a lot. So I deleted the functions php file and started over. And I currently not able to reproduce my tiny success anymore. * I have tried several more methods but all of them failed or lead to server errors. * I am looking forward to your help as I have spent my whole day working on this problem. * Thank you in advance Viewing 4 replies - 1 through 4 (of 4 total) * [Mr Case](https://wordpress.org/support/users/mr-case/) * (@mr-case) * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-css-files-to-a-theme-4/#post-6746354) * you could hardcode the dependent files into your header.php file with the full path to the directory. * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-css-files-to-a-theme-4/#post-6746369) * One thing that I can see off the bat is that in your latest version, you should have put backslashes at the front of each string. For example this: * ``` wp_enqueue_style( 'main', get_template_directory_uri() . 'style.css' ); ``` * should be this: * ``` wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' ); ``` * Otherwise your links are going to look like this: * ``` http://example.com/wp-content/themes/my-themestyle.css ``` * And I assume you moved the hover and font-awesome CSS file(s) into a folder like this: * ``` http://example.com/wp-content/themes/my-theme/hover/css ``` * [ashiquzzaman](https://wordpress.org/support/users/ashiquzzaman/) * (@ashiquzzaman) * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-css-files-to-a-theme-4/#post-6746410) * Add the slash as CrouchingBruin suggest. It should work. * Thread Starter [MaksymV](https://wordpress.org/support/users/maksymv/) * (@maksymv) * [10 years, 4 months ago](https://wordpress.org/support/topic/adding-css-files-to-a-theme-4/#post-6746651) * Great, thanks. Im glad it was just my tiny but very important mistake. Since this works, it messes up my style. All my design settings are broken. Like black background and different fonts. I can set it up from scratch again, but I guess there is an easier solution. Am I missing something here? Viewing 4 replies - 1 through 4 (of 4 total) The topic ‘Adding CSS files to a theme’ is closed to new replies. ## Tags * [add](https://wordpress.org/support/topic-tag/add/) * [css](https://wordpress.org/support/topic-tag/css/) * 4 replies * 4 participants * Last reply from: [MaksymV](https://wordpress.org/support/users/maksymv/) * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/adding-css-files-to-a-theme-4/#post-6746651) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics