CODEWITHSUNDEEP
csswordpresswordpress-theming
Alê Moraes
Alê Moraes

Reputation: 175

Wordpress file functions.php is not loading the style.css

I can't seem to get the functions.php file of my WordPress theme load my stylesheet.

The files I've created in the theme directory of my WordPress theme are as follow with their respective contents;

style.css

/*
Theme Name: Theme Study
Author: A
Version: 1.0.0
*/

body {
    color: #4d5a6c !important;
}

header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <?php wp_head(); ?>
</head>
<body>
    <h2>This is the header</h2>

index.php

<?php get_header();

while ( have_posts() ) {
    the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content();
}
get_footer(); ?>

footer.php

    <h4>This is the footer</h4>
<?php wp_footer(); ?>
</body>
</html>

functions.php

<?php 
function style_files() {
    wp_enqueue_style( 'style_main', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'style_files' );

On the other hand, I've realised that when I reference directly the stylesheet inside the header.phpfile as below, it works as expected, but my aim is to achieve that in thefunctions.php` file of my WordPress theme.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
    <?php wp_head(); ?>
</head>
<body>

<h2>This is the header</h2>

Why my style.ccs not getting loaded from the functions.php file?

Upvotes: 0

Views: 2789

Answers (4)

rAnA bilAl
rAnA bilAl

Reputation: 36

please replace this function with your wp_enqueue_style function.

wp_enqueue_style( 'style', get_stylesheet_uri() );

Upvotes: 0

nyedidikeke
nyedidikeke

Reputation: 7628

Use get_template_directory_uri() instead of get_stylesheet_uri() as in your functions.php file.

Below, a snippet illustrating how it should read;

function style_files() {
    wp_enqueue_style(
        'style_main',
        get_template_directory_uri() . '/style.css',
        array(),
        false,
        'all'
    );
}
add_action( 'wp_enqueue_scripts', 'style_files' );

It is a safe way to add/enqueue a stylesheet file to your WordPress theme.

The above follows this format:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

where

$handle
(string) (Required) Name of the stylesheet. Should be unique.

$src
(string) (Optional) Full URL of the stylesheet,
or path of the stylesheet relative to the WordPress root directory.

Default value: ''

$deps
(array) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver
(string|bool|null) (Optional) String specifying stylesheet version number, if it has one,
which is added to the URL as a query string for cache busting purposes. If version is set to
false, a version number is automatically added equal to current installed WordPress version.
If set to null, no version is added.

Default value: false

$media
(string) (Optional) The media for which this stylesheet has been defined. 
Accepts media types like 'all', 'print' and 'screen', or media queries like
'(orientation: portrait)' and '(max-width: 640px)'.

Default value: 'all'

More information available here.

Upvotes: 0

Bayu
Bayu

Reputation: 2644

What if you try to put this at your function.php file:

<?php 
function style_files(){
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}

add_action('wp_enqueue_scripts', 'style_files');

The one with style id named: parent-style usually is for parent theme ( if you are developing child theme or just single theme ), 2nd one is if you are developing child theme and should load style.css at your child theme.

Upvotes: 0

Harsh Khare
Harsh Khare

Reputation: 515

Use this code I think its work fine for you.

function theme_styles(){ 
// 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' ); 
}
 add_action('wp_enqueue_scripts', 'theme_styles');

Upvotes: 0

Related Questions