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.
Related
When I tried to add code on on Twenty Twenty-Two theme I could not find header.php as it not uses like this pattern. Please tell me where to find the file and if the file is absent where to find the tag to add something inside the tag.
Twenty_Twenty_Two Theme
In the WordPress documentation for block themes like Twenty Twenty-Two, <head> is added automatically. Adding code, for example, Google Analytics, is recommended through a plugin.
or wp_head hook, added to function.php preferably child theme:
function hook_javascript() {
?>
<script>
alert('Page is loading...');
</script>
<?php
}
add_action('wp_head', 'hook_javascript');
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...
I am trying have my own stylesheet linked to a custom page inside a theme on wordpress.
Im using this code on my header.php
/my-own-styles.css" />
There are 2 changes in this code that I made: 'my-template.php' and 'my-own-styles.css' nothing other then that. (Do I need to change the 'template_directory' too?)
inside the theme directory I have 'my-own-styles.css' but it doesn't seem to get it.
also I need it to get a .js file that I have put in the same directory but wouldn't work..
In WordPress, you need to hook your javascript and css includes onto the wp_enqueue_scripts action, and tell WordPress to load them using the wp_enqueue_style and wp_enqueue_script functions.
In your functions.php file, or any other file that will be loaded prior to the template file (say a plugin for example), add this:
add_action('wp_enqueue_scripts' , 'enqueue_my_scripts_and_styles');
function enqueue_my_scripts_and_styles() {
wp_register_style('my-own-styles.css',home_url('/').'wp-content/themes/**yourthemename**/my-own-style.css');
wp_enqueue_style('my-own-styles.css');
wp_register_script('my-own-js.js',home_url('/').'wp-content/themes/**yourthemename**/my-own-js.js');
wp_enqueue_script('my-own-js.js');
}
There are better ways to create the path to the file, but I wanted to provide an example that would be more obvious. For best practices, use get_template_directory_uri() http://codex.wordpress.org/Function_Reference/get_template_directory_uri
To link any page in wordpress whith a css file , just add this code in header.php
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/yourfile.css" type="text/css" media="screen" />
Where css is a a folder in your theme directory. You also can use the code with path directly to your file.
I am developing Wordpress theme that I want to be flexible and I want the admins to be able to change the colors of the theme. That's why I decided to use style sheet "style.php" that is generated during run time with the following code:
<?php
header("Content-type: text/css");
$options = get_option( "option_group" );
?>
body {
background-color: <?php echo $options["body-color"]; ?>
}
/* The rest of the css goes here......... */
and I included this file in the header section like normal style sheet. The problem is that I get "Call to undefined function get_option()" error in this file. I am wondering how can I make it work. In every other file where I call get_option() it works completely normal. I would be glad if you can give me any suggestion or work around.
Have a nice day :)
If the stylesheet is included as a <link> tag in header.php, like this...
<link href="http://YOURSERVER/wp-content/themes/YOURTHEME/style.php" media="all" type="text/css" rel="stylesheet">
then the style.php script doesn't have access to WordPress unless you load WordPress at the top of the script. Doing that would be tricky & resource intensive (you'd be loading WP twice for every page load.)
Probably a better, more efficient, way of doing this is to inject the custom styles directly in the <head> of the document like this:
<head>
...
<style>
body {
background-color: #CCC;
}
</style>
</head>
To do this your theme can use the wp_head action hook...
add_action("wp_head", "my_print_custom_style");
function my_print_custom_style(){
//look up the option
//echo out the <style> tag and css
}
EDIT----
I made this more complicated than it needed to be. Since you're coding a theme rather than a plugin you can output the <style> tag directly in header.php rather than messing around with the wp_head action hook.
I've semi-successfully created a wordpress child-theme. By successfully I mean:
I managed to create a child-theme directory in my themes folder, next
to my main theme
I created a style.css file in the child-theme dir
I saw the style show up on my Wordpress back-end and managed to activate it
I added templates (header.php, sidebar.php,...) to the directory
I made changes to the above templates and saw the changes on my site
However, there is one huge problem:
Whatever CSS I try to add to the style.css file, it's not affecting the site
I know the "information header" must be ok since I was able to see/activate the child-theme. But I really can't figure out what is wrong. I tried removing the #import rule, which according to the Wordpress codex should remove all styles from my site - nothing happened.
I'm using the Panorama theme and created "panorama-technology" as a child. Below you can see the code I have in the style.css file inside the child-theme: "panorama-technology":
/*
Theme Name: panorama-technology
Template: panorama
*/
#import url("../panorama/style.css");
#search{
margin: 15px 15px 0 0;
}
WouterB, I had the same problem with my child theme loading in the backend, and child php pages overriding the parent theme php pages, but NO child CSS changes loading to override the parent styles.
So,although with different coding, it turns out my parent theme was written in such a way that the header was also looking for the stylesheet in the template directory, so your solution was spot on in concept.
Thus, by changing the call in the header from :
<link rel="stylesheet" type="text/css"
href="<?php echo get_template_directory_uri();?>/style.css" />
to:
<link rel="stylesheet" type="text/css"
href="<?php echo get_stylesheet_directory_uri();?>/style.css" />
--did the trick like magic. At least as far as I can tell so far.
You get major credit in my book!
First I'd try an absolute path to be sure that the path isn't the problem. If that does not solve the issue. Place the #import at the very top of the css file or directly after thelast "*/". I think white space is probably the culprit here.
Do not use import.
Add time after css uri for refreshing everytime.
In your function.php
function child_style() {
wp_enqueue_style( 'parent-child', get_stylesheet_uri().'?'.time());
}
add_action( 'wp_enqueue_scripts', 'child_style', 20 );
Watch out from caching :
wp cache plug-ins
server side cache (APC etc.)
local browser cache