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

0
votes

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?

4
csswordpresswordpress-theming
I have tried with above code and its working fine. I am getting style.css file – Jogi Mehul
Is there a way to see or debug what is wrong? – Alê Moraes
make sure your style.css reside on theme root folder and request you to provide your page view source so will get better idea. – Jogi Mehul
I put the source code – Alê Moraes
What if you try to set WP_DEBUG at wp-config.php to true? So it should be: define('WP_DEBUG', true);. Do you see any error messages? – Bayu

4 Answers

0
votes

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');
0
votes

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.

0
votes

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.

0
votes

please replace this function with your wp_enqueue_style function.

wp_enqueue_style( 'style', get_stylesheet_uri() );