Wordpress not working after adding style.css

Question

I have been trying to find a solution for this for a while now with no luck... I am busy making a custom theme for WordPress as per this article. The html and php hooks like get_header() are working perfectly but as soon as I try to add style.css it doesn't work and the "demo theme" is stuck on loading.however when I remove this it works perfectly but the css in the style.css file is not loaded. these are the css files I would like to load into the page.

<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/style.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/dark.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/animate.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="http://www.website.com/wp-content/themes/canvas/css/responsive.css" type="text/css" />

How would I correctly load all of these css files into a WordPress page. Thanks! I am currently using the following code

    define("THEME_DIR", get_template_directory_uri());
/*--- REMOVE GENERATOR META TAG ---*/
remove_action('wp_head', 'wp_generator');

// ENQUEUE STYLES

function enqueue_styles() {

    /** REGISTER css**/
    wp_register_style( 'bootstrap', THEME_DIR . '/css/bootstrap.css', array(), '1', 'all' );
    wp_register_style( 'dark', THEME_DIR . '/css/dark.css', array(), '1', 'all' );
    wp_register_style( 'font-icons', THEME_DIR . '/css/font-icons.css', array(), '1', 'all' );
    wp_register_style( 'animate', THEME_DIR . '/css/animate.css', array(), '1', 'all' );
    wp_register_style( 'magnific-popup', THEME_DIR . '/css/magnific-popup.css', array(), '1', 'all' );
    wp_register_style( 'responsive', THEME_DIR . '/css/responsive.css', array(), '1', 'all' );
    //wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all' );

    /** ENQUEUE css**/
    wp_enqueue_style( 'bootstrap' );
    wp_enqueue_style( 'dark' );
    wp_enqueue_style( 'font-icons' );
    wp_enqueue_style( 'animate' );
    wp_enqueue_style( 'magnific-popup' );   
    wp_enqueue_style( 'responsive' );
    //wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

// ENQUEUE SCRIPTS

function enqueue_scripts() {

    wp_register_script( 'html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
    wp_enqueue_script( 'html5-shim' );


    wp_register_script( 'custom-script', THEME_DIR . '/js_path/customscript.js', array( 'jquery' ), '1', false );
    wp_enqueue_script( 'custom-script' );

}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

But this isn't working... I have also checked that wp_head() is present in my header file and that all that php is working ??? AS soon as I add style.css It gets stuck on loading

Answer 1

Generally, it is a good idea to use unique names for the stylesheet handles (see reference). I wasn't able to recreate the error, but you could try changing

wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all' );

to

wp_register_style( 'unique-name-style', THEME_DIR . '/style.css', array(), '1', 'all' );

and

wp_enqueue_style( 'style' );

to

wp_enqueue_style( 'unique-name-style' );

Answer 2

You shouldn't be including CSS and JS files directly in your WordPress templates. Rather, you should be enqueueing them properly (in functions.php) via wp_enqueue_style():

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/css/bootstrap.css' );
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Answer 3

Look functions.php in the default theme twenty fifteen. It may come to mind:

<?php /**
 * Enqueue scripts and styles.
 *
 * @since Twenty Fifteen 1.0
 */
function twentyfifteen_scripts() {
  // Add custom fonts, used in the main stylesheet.
  wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

  // Add Genericons, used in the main stylesheet.
  wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

  // Load our main stylesheet.
  wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

  // Load the Internet Explorer specific stylesheet.
  wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
  wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

  // Load the Internet Explorer 7 specific stylesheet.
  wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
  wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

  wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }

  if ( is_singular() && wp_attachment_is_image() ) {
    wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
  }

  wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
  wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
    'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
    'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
  ) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
?>

In particular, if you have one file with the style, connect it as the default:

// Load our main stylesheet.
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );

Thus it will be connected in the root directory of style.css your theme

Answer 4

Please use this code in your theme's functions.php file

function theme_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('respond', get_template_directory_uri()."/js/custom.js", '', null, true );

    wp_enqueue_style ( "theme", get_bloginfo('stylesheet_url'), '', null );
    wp_enqueue_style ( "bootstrap", get_template_directory_uri()."/css/custom.css", '', null );

}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Answer 5

style.css is not being included or stuck on backgroung-ground color. Use 1.0.0 or else it will consider it a bool statement.

Change

wp_register_style( 'dark', THEME_DIR . '/css/dark.css', array(), '1', 'all' );

To

wp_register_style( 'dark', THEME_DIR . '/css/dark.css', array(), '1.0.0', 'all' );