I am trying to find where my Wordpress theme calls the CSS file but should it be in header? I have checked there and cant see any reference to it.
Any properly coded theme should register/enqueue scripts and stylesheets via the wp_enqueue_scripts hook. This should all be in your functions.php file or any other file that is called into the functions.php file
You can just do a search inside your functions.php or functions related files. You should never add scripts or styles directly inside your footer or header
In WordPress You Don't Want To Give css file path .It has pre define css file path in function.php file.
If you change css file structure then you want to change style file path in function.php file.
and also add your new style.css file with.
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/css/yourcssfilename.css">
www.sitename\theme\wp-content\themes\themename\css\yourcssfilename.css
Related
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 bought a template with the following structure:
css/..
img/..
js/..
*.html files
style.css is located in css/ folder.
In order to create a functional Wordpress theme, do I absolutely have to move style.css to the root folder and adjust all of the paths in style.css to match the new location of images? (cause they're not in ../img, but in img now).
Can't I just specify the style.css file path somewhere? Or does it have to be in root folder in order to be a valid template?
Thanks.
Wherever you choose to include your CSS files (most likely in the head.php or the footer.php), you can call
<?php get_template_directory_uri();?>
You can move your CSS and IMG directories into your theme like this
wp-content/themes/your-theme/css/ and wp-content/themes/your-theme/img/
Then, when you want to include them in your theme you can do so like this:
<link rel="stylesheet" href="<?php echo <?php get_template_directory_uri();?>/css/your-stylesheet.css"/>
<img src="<?php get_template_directory_uri();?>/img/your-image.jpg"/>
In your stylesheet, just make sure your image calls are relative to the image directory and everything should work fine.
Yes, you need to put style.css in the root folder. This is actually the minimum requirement of a valid WordPress theme.
However, the style.css in your theme folder only needs to contain information about your theme like this:
/*************************************************
Theme Name: YOUR THEME NAME HERE
Theme URI: http://yoururlhere.com/
Description: This theme was custom made
Author: Your Name Here
Author URI: http://yoururlhere.com
Version: 1.0
Tags: flexble-width
***************************************************/
As long as you have that, you can add as many other additional stylesheets in your CSS folder, and link to them in the theme header.
If you are looking to convert a basic HTML template into a WordPress theme, it's worth looking at Theme Matcher.
also you can use your custom static variables for your theme.
put this line in your functions.php file.
define("ASSETS",get_bloginfo('template_url'));
This usage is better way i think, about sql queries.
Usage ;
<link rel="stylesheet" href="<?php echo ASSETS; ?>/CSS/file.css"/>
I have just followed a tutorial about creating custom WordPress theme, each and everything went just fine from static to dynamic conversion but when I activate that theme and I come up with a plain HTML document with blue hyperlinks which mean the site is not picking up the css file of style.css
Am I doing something wrong? Please help me.
Check your source HTML and see that the path to your CSS is correct.
You can use bloginfo() to find the correct path by using:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css">
If your style.css resides in the root folder of your template.
Where did you add the link to the file? - View the source of the page to see if the link is there and try navigating to it to see if it returns a 404 (Not Found) or other error.
My preferred way to include theme stylesheets is adding something like this to my functions.php.
add_action('wp_enqueue_scripts','enqueue_my_styles_scripts');
function enqueue_my_styles_scripts() {
wp_enqueue_style('my-styles',get_stylesheet_directory_uri().'/style.css');
}
Check out wp_enqueue_style and make sure you have a wp_head() call in your header file
According the Wordpress' doc, when we create theme, we need to create style.css file in the same place with other files like header.php, footer.php, however, to make a better organization of files, I put all css files in a sub folder.
Then there comes the problem, when I go to the admin area, Appearance -> Editor, I can not see the sub folder so can not edit those css file in the sub folder.
Please help, thanks.
create style.css on your theme folder and have it's content:
/*
Theme Name: Your theme name
Theme URI: http://example.com/
Description: Your theme description
Author URI: http://example.com/
*/
#import('themesubfolder/yourfile.css');
There seems to be a problem in WordPress (still existing at version 3.3.1 as far as I can tell) where CSS files in a sub directory of a child theme are not recognized. For me, the problem isn't only with not seeing such files in the "editor." CSS files that are in subdirectories simply do not work.
Yes, you can use #import in your main CSS file to include another CSS file that's in the child theme's directory, but it must be at the same level as the main CSS file. After several hours of frustrating experimentation, my conclusion is: CSS files that are in a sub folder of a child theme are ignored.
Do one thing, delete old CSS file and replace it with new CSS file, if you have two-three CSS then d'nt worry about that, place other CSS file with Header.php, footer.php, index.php...
Call that CSS file with "/FILE NAME"
I found this article:
http://www.deluxeblogtips.com/2010/05/editor-style-wordpress-30.html
I created a child theme using the Twentyten theme as a parent. I am trying to have the WYSIWYG editor use a custom stylesheet.
I added this to my functions.php file:
add_editor_style();
Then I created an editor-style.css file in my child theme's folder and added this:
html .mceContentBody {
max-width:591px;
}
When I go to the WYSIWYG editor and use firebug to check the css that is affecting the .mceContentBody element, I can see that is using my stylesheet, but it is being overrriden by the default editor-style.css sheet from the twentyten theme.
How can I force it to use my editor-style.css file and not the default one?
add_theme_support('editor_style');
before
add_editor_style('tinymce-styles.css');
assuming that your custom css is in your template's root folder.
Try redeclaring twentyten_setup in your theme's functions.php file. Just copy and paste the whole function from twentyten to your theme.
Check your CSS for errors. I spent hours pulling my hair out wondering why wordpress wasn't using my stylesheet. It wasn't even getting included. Turns out i had an extra { in my css.