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');?> - © <?php echo date('Y');?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
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');?> - © <?php echo date('Y');?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
4 Answers
Reset to default 2To 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:
The theme folder has the following files:
style.cssindex.phpheader.phpfunctions.phpfooter.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:
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.
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.
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 Commented Mar 12, 2019 at 13:55get_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 Commented Mar 13, 2019 at 13:57