1

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>
Improve this question
2
  • Your index.php appears to be missing get_header(). Your theme needs to have a header.php with the <head> element in it, and the <?php wp_head(); ?> function inside it.
    – Jacob Peattie
    Mar 12, 2019 at 13:55
  • Jacob - they had the get_header() call in there, it just didn't show up because the code wasn't formatted properly. I edited for code formatting (that doesn't answer whether there's a header.php or not, though).
    – butlerblog
    Mar 13, 2019 at 13:57

4 Answers 4

Reset to default
2

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.

Improve this answer
17
  • I have written same as you said but not working. Can you help me out
    – Mehraj Khan
    Mar 14, 2019 at 5:44
  • Sure. But first, can you update your original question to include the full contents of your header.php and footer.php so I can get a better look at what you have and what might be missing?
    – jsmod
    Mar 14, 2019 at 6:23
  • I updated my question check now.
    – Mehraj Khan
    Mar 14, 2019 at 6:31
  • Ok, your header.php is missing the opening <body> tag. Be sure to add it right after the closing </head> tag. Then, in your index.php file, please check that the last php tag is closed so that it looks like this: <?php wp_footer(); ?> , because right now it is showing the semicolon as the last part.
    – jsmod
    Mar 14, 2019 at 6:39
  • i made the changes.
    – Mehraj Khan
    Mar 14, 2019 at 6:42
2

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');
Improve this answer
3
  • As above I wrote the same as you mention.
    – Mehraj Khan
    Mar 12, 2019 at 12:50
  • 1
    Is it working now? If you are using child theme get_template_directory_uri will not work for you because it returns root url of main theme.
    – Shihab
    Mar 12, 2019 at 12:54
  • 1
    Please also make sure that you are including header.php to every single template files including index.php, page.php, single.php, etc. Otherwise the stylesheets will not be included because we are including those stylesheets in header using above function. Here is what I mean: <?php get_header(); ?>
    – Shihab
    Mar 12, 2019 at 19:39
0

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');
Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.