Adding CSS files to a theme

  • 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:

    <link rel='stylesheet' href='css/styles.css' type="text/css" />
	<link rel="stylesheet" href="css/font-awesome-4.4.0/css/font-awesome.min.css" type="text/css">

    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 

    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 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)

  • you could hardcode the dependent files into your header.php file with the full path to the directory.

    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:

    https://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:

    https://example.com/wp-content/themes/my-theme/hover/css

    Add the slash as CrouchingBruin suggest. It should work.

    Thread Starter MaksymV

    (@maksymv)

    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