How to link style.css in functions.php

wordpress.stackexchange https://wordpress.stackexchange.com/questions/377031

  •  21-04-2021
  •  | 
  •  

Question

I'm a newbie to WordPress; I just started learning WordPress. I'm trying to link style.css in functions.php but I am unable to achieve what might be the issue here. Can anyone point me the right direction?

index.php

<?php
get_header();
?>


<?php
    if ( have_posts() ) {

        while ( have_posts() ) {
            the_post();
            echo 'Posts are foound';
       }
    } else {
    echo 'No Posts are found';
    }
?>
<div class="inner">
    <?php bloginfo('title'); ?><br>
    <?php bloginfo('description'); ?>
    <?php echo "<h1>Hello world</h1>"; ?>
</div>

<?php
    get_footer();

functions.php

   function mortal_theme() {
  wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
  }
   add_action( 'wp_enqueue_scripts', 'mortal_theme' );

style.css

 h1 {
   background-color: red;
   color: yellow;
   font-size: 28px;
   font-weight: 700;
 }
.inner {
   width: 1100px;
   margin: 0 auto;

}

header.php

<html>
<head>
   <?php wp_head(); ?>
</head>
   <header class="site-header">
      <?php bloginfo('title'); ?>
   </header>

footer.php

     <footer>
        <p><?php bloginfo('title');?> - &copy; <?php echo date('Y');?></p>
     </footer>
  <?php wp_footer(); ?>
  </body>
  </html>
Was it helpful?

Solution

To get this working:

(1) Your index.php file should begin with:

<?php get_header(); ?>

and end with:

<?php get_footer(); ?>

(2) Your header.php file should have the following right before the closing </head> tag:

<?php wp_head(); ?>

Note: header.php also has other things, but I am assuming you have them set up already.

(3) Your footer.php file should have the following right before the closing </body> tag:

<?php wp_footer(); ?>

(4) In your functions.php, modify your the second line of your wp_enqueue_style so that it looks like this:

wp_enqueue_style( 'style', get_stylesheet_uri() );

The whole function in the end should look like this:

function mortal_theme() {
    wp_enqueue_style( 'style', get_template_directory_uri() );
  }
add_action( 'wp_enqueue_scripts', 'mortal_theme' );

This is because the style.css in your theme folder is the main stylesheet for the theme - so you don't need to tell WordPress to look for style.css, it will know what to look for.

Update:

I have recreated your theme using your code on a local WordPress installation to test it, and here is a screenshot of what I see when I visit the page:

enter image description here

The theme folder has the following files:

  1. style.css
  2. index.php
  3. header.php
  4. functions.php
  5. footer.php

And I copied and pasted the exact code for each file from your original question, with one exception: for functions.php I added the starting <?php tag so my final code looks like this:

<?php
   function mortal_theme() {
      wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css);
   }
   add_action( 'wp_enqueue_scripts', 'mortal_theme' );

Based on the screenshot above, everything seems to be working correctly.

However, if I remove the <?php that I added (to make my code match the one in your question 100%), this is what I see when I view the page:

enter image description here

What do you see when you view your page? If you're getting results like that in the second screenshot, then it is because you do not have the starting <?php in the beginning of your functions.php file. Add that and you're good to go, insha'Allah.

OTHER TIPS

Please check wp_enqueue_style and wp_enqueue_scripts. First of all create a function with any name you like ei: my_function and include your css file and then hook this function with wp_enqueue_scripts. Here is what I mean:

function my_function() {
    // This will load your default style.css
    wp_enqueue_style('main_style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_function');

But if you want to load another CSS file which isn't your WP style.css then you have to mention proper path. EI:

function my_function() {
    // This will load your default style.css
    wp_enqueue_style('main_style', get_stylesheet_uri());

    // This will load custom.css located in the css folder
    wp_enqueue_style('main_style', get_theme_file_uri('css/custom.css'));
}
add_action('wp_enqueue_scripts', 'my_function');

If it is child theme load stylesheet from child theme's directory as follows:

wp_enqueue_style('child-theme-styling', get_stylesheet_directory_uri() .'/style.css');

I guess you are copy and pasting the exact function over there.

function mortal_theme() {
   wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css);
}    
   add_action( 'wp_enqueue_scripts', 'mortal_theme');

This code will work only if you add the end tag at the end of the code. It should look like this exactly.

Try putting an end tag at you end of the code '?>' Hopefully this will work for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top