I have what seems a very basic problem - my Wordpress site doesn't seem to be recognising the stylesheet. I've developed my own - first - WP theme, and it works fine on my local system. I've uploaded it to a free host to test it live, but it doesn't look like the stylesheet is being recognised.
The website is http://k1demo.byethost6.com , and in style.css I have imported the style sheet from my css folder which has been compiled from a LESS file.
Here is the code in my style.css file:
#import url("/css/styles.css");
And in my header.php the stylesheet is called as such from the head section:
<link rel="stylesheet" type="text/css" href="style.css" />
What am I missing?
What a mess. Currently in your code you are loading:
http://k1demo.byethost6.com/style.css
And it doesn't exist. You need to load:
http://k1demo.byethost6.com/wp-content/themes/K1/style.css
From then #import url("/css/styles.css"); looks at the [root]/css/ which leads to:
http://k1demo.byethost6.com/css/styles.css
It also doesn't exist.
Looks like your syntax is a little messed up...
<link rel="stylesheet" href="type="text/css" href="style.css" />
should be
<link rel="stylesheet" type="text/css" href="/css/style.css" />
The problem is, that you are trying to access the root of your theme folder, while in reality you are hitting the root of your website.
If you want to enqueue the stylesheet directly in the header.php do the following in your href="" to target any file in your theme folder:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" />
But I strongly recommend you to let WordPress handle the enqueueing of your scripts and stylesheets in your functions.php.
function enqueue_styles() {
wp_enqueue_style( 'THEMENAME_style_css', get_template_directory_uri() . '/style.css', array(), '0.0.1' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
See the documentation of wp_enqueue_style:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Note:
If you want your theme to support child themes, you can use get_stylesheet_directory_uri(); instead. This function will look in the child theme folder first, if it doesn't find the file, it will look in the parent theme folder.
The file path needed to be case sensitive, after changing that the css is now working. Very basic mistake...
Related
I'm trying to add CSS to my Theme. I write in less and use grunt to compile it into a style.css file. Grunt works fine and the css file looks correct. In my online account I can see the css file and wordpress identifies the style.css as the stylesheet, but the css isnt working on the website. Can you spot my fault?
header.php
<!DOCTYPE html>
<head>
<title>
</title>
<?php wp_head(); ?>
</head>
functions.php
<?php function adding_css() {
wp_enqueue_style('css-style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'adding_css' );
style.css
#footer{display:flex;flex-flow:wrap}.footer .try{color:red;height:2px}body{height:20px}html{width:5px}
Oh damn I found my fault.
I included the functions.php in a js subfolder, where Wordpress didnt find it. Now it works.
I have a link to a style.css with version, which is updating each time after changing the file in my theme on server:
<link rel="stylesheet" type="text/css" media="all" href="http://example.com/wp-content/themes/twentythirteen/style.css?v=1477025590" />
Also, I can see another link to the same style.css in the source of code but with an old version which doesn't change automatically (it's a standart link of a theme):
<link rel='stylesheet' id='twentythirteen-style-css' href='example.com/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />
Is it normal? User should load a file twice or I can delete the second link somehow via functions.php?
Yes you need to check in your functions.php is there this css load
twice ? you can find wp_enque_style function over there.
Remove the css from there which loads twice it will solve your error
In the last couple of days I have been creating a theme for my WordPress site, but suddenly I have experienced problems with it. The php files have stopped linking with the css files.
I have tried creating many different themes and have been getting the same result - a site that only looks like basic html.
Here is the coding I have been using to link them <link rel="stylesheet" href="styles.css" type="text/css" />
Does anyone have any ideas? Is anybody else having problems with their site?
P.s. Any help will be very much appreciated!! :D
You may want to try /styles.css, or ./styles.css. The "." means "up one directory level".
However, a better way to do it, would be to link to it like this:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/styles.css" type="text/css" />
This creates a dynamic absolute path to the stylesheet.
As #rambu said below, wp_enqueue_style is the proper way to do this.
function add_my_style() {
wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'add_my_style' );
I'm trying to modify a theme in wordpress and one thing I've stumbled upon is the way this theme is including a stylesheet file.
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
As I discovered stylesheet_url refers to the file named style.css in the root folder. How can I change the value of the stylesheet_url so that my stylesheet file in the css/ directory will be loaded instead of the default one?
you can put new css file path like this:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/newstyle.css" />
and you can remove default css path if you don't need.
hope this helps you. All the best ;)
In function blog_info().
Here is the link to do this and also check this link and this.
You can also see an example here: Where is the value for Wordpress bloginfo('stylesheet_url') saved.
I have a problem where I've been able to include a custom css in the section of my wordpress theme with the following code:
function load_my_style_wp_enqueue_scripts()
{
wp_register_style('my_styles_css', includes_url("/css/my_styles.css"));
wp_enqueue_style('my_styles_css');
}
add_action('wp_enqueue_scripts','load_my_style_wp_enqueue_scripts');
But the order in the source code is as follows:
<link rel='stylesheet' id='my_styles_css-css' href='http://...folderA.../my_styles.css?ver=3.1' type='text/css' media='all' />
<link rel="stylesheet" id="default-css" href="http://...folderB.../default.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" id="user-css" href="http://...folderC.../user.css" type="text/css" media="screen,projection" />
I want my_styles_css to be the last file to load, overriding default and user files. I've tried to achieve this by modifying wp_enqueue_style in different ways, but without any success. I've tried:
wp_enqueue_style('my_styles_css', array('default','user'));
or
wp_enqueue_style('my_styles_css', false, array('default','user'), '1.0', 'all');
I've seen some related questions without answer or with these last 2 methods that are still failing for me.
The function above is part of a plugin that I've got enabled in my wordpress installation.
The add_action function has a priority parameter that might help:
$priority
(int) (optional) How important your function is. Alter this to make your function be called before or after other functions. The default is 10, so (for example) setting it to 5 would make it run earlier and setting it to 12 would make it run later.
Default: 10
http://codex.wordpress.org/Function_Reference/add_action
Or you could directly link to your css in your header.php file rather than using wp_enqueue_style, and therefore place it exactly where you want.
Otherwise there seems to be an answer here: How to force wp_enqueue_style to display CSS at the very bottom of the head tag to override all CSS rules?
The correct way to add a stylesheet to your theme is by way of the wp_enqueue_style() function:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
With $deps you specify which stylesheets should be loaded before your custom stylesheet.
What about add_action('wp_head','load_my_style_wp_enqueue_scripts');?
Use wp_head instead of wp_enqueue_scripts.
Why not edit the theme?
You can do this from the Dashboard
Appearance -> Editor -> header.php
Just add your css last.