So I went through the forum to find a solution before I post a question, however I have yet to find it. I'm new to wordpress and I'm having a lot of fun learning on how to build my own website. However I am unable to add my css to my website this the code I have below.
functions.php
<?php
function fearnothing_script_enqueue(){
wp_enqueue_style("style", get_stylesheet_uri()."css/
fearnothing.css",false, 'all');
}
add_action('wp_enqueue_scripts', 'fearnothing_script_enqueue');
header.php
<!DOCTYPE html>
<html>
<head>
<title>lonely spaceship</title>
<?php wp_head(); ?>
</head>
<body>
footer.php
<footer>
<p></p>
</footer>
<?php wp_footer(); ?>
</body>
fearnothing.css
html, body {
margin: 0;
color: #91f213;
background-color:black;
font: sans-serif;
}
body{
padding: 20px;
}
h1{
color: yellow;
}
So I went through the forum to find a solution before I post a question, however I have yet to find it. I'm new to wordpress and I'm having a lot of fun learning on how to build my own website. However I am unable to add my css to my website this the code I have below.
functions.php
<?php
function fearnothing_script_enqueue(){
wp_enqueue_style("style", get_stylesheet_uri()."css/
fearnothing.css",false, 'all');
}
add_action('wp_enqueue_scripts', 'fearnothing_script_enqueue');
header.php
<!DOCTYPE html>
<html>
<head>
<title>lonely spaceship</title>
<?php wp_head(); ?>
</head>
<body>
footer.php
<footer>
<p></p>
</footer>
<?php wp_footer(); ?>
</body>
fearnothing.css
html, body {
margin: 0;
color: #91f213;
background-color:black;
font: sans-serif;
}
body{
padding: 20px;
}
h1{
color: yellow;
}
Share
Improve this question
edited Nov 21, 2018 at 9:02
asked Nov 21, 2018 at 8:33
user154455user154455
4
- do you mean your CSS file is not added? – André Kelling Commented Nov 21, 2018 at 8:35
- Yeah, the css file is not adding to the website. I tried countless different ways to extract the dir of the css file. – user154455 Commented Nov 21, 2018 at 8:36
- to be clear: you mention functions.php in your question headline, but inside your question you write function.php (hence the missing S). i recently ran into the same issue, so make sure, its called properly, to be loaded at all.. – honk31 Commented Nov 21, 2018 at 9:00
- ahh yes! it is called functions.php . will edit that now in the post! – user154455 Commented Nov 21, 2018 at 9:01
3 Answers
Reset to default 3I don't know if you try to add a css file in your theme or plugin. I will provide both examples. Use wp_enqueue_style in combination with get_theme_file_uri to enqueu a stylesheet in your theme directory.
For a theme, see example
function add_styles() {
wp_enqueue_style( 'fontawesome-style', get_theme_file_uri( '/assets/css/all.css' ), array(), null );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );
For a plugin, see example
function add_styles() {
wp_enqueue_style( 'example-styles-plugin', plugins_url('/assets/css/admin.css', __FILE__), array(), null );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );
For both, add an external URL:
function add_styles() {
// Add Google Fonts
wp_enqueue_style('google_fonts', 'https://fonts.googleapis/css?family=Poppins:300,500,700', array(), null );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );
I'm glad to know that you are having fun learning and building your own websites.
Here is the deal:
get_stylesheet_uri()
function returns the current theme stylesheet. It adds the style.css file from your current theme directory.
The solution: If you want to enqueue any kind of assets file like CSS or JS on your theme, you have to use get_template_directory_uri() functions instead of get_stylesheet_uri().
Your code should be like this:
function fearnothing_script_enqueue(){
wp_enqueue_style("style", get_template_directory_uri()."/assets-file/css/fearnothing.css",false, 'all');
}
add_action('wp_enqueue_scripts', 'fearnothing_script_enqueue');
get_template_directory_uri()
function Retrieve theme directory URI.
For more information, you might take a look on codex documentation here
function add_styles() {
wp_enqueue_style( 'fontawesome-style', get_theme_file_uri( '/assets/css/all.css' ), array(), null );
}
add_action( 'wp_enqueue_scripts', 'add_styles' );
This is how i do it.