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.
Related
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
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
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
I have created a theme where I already have a custom options page where I let the user set text for footer, twitter user and some other things and that works well.
Now i'd like to add the functionality of letting the user that installed the theme select which font that should be used for content on the site. How can i accomplish this? I can probably create a php file that outputs something like:
<style type="text/css">
body{
font-family: <?php echo get_option('my-font');?>;
}
</style>
and include that file in header.php, but that means that I have to hit php for every request for this css and I want to avoid that if posssible.
Actually, I'd recommend placing that code directly in your header.php file. You'll already be parsing PHP code, so there's no reason you can't parse that get_option() request at the same time. I've used a similar system to generate a random header image on each page load based on WordPress options before as well.
For one theme I built, there were CSS options aplenty, so I decided to generate static CSS files when the user made changes. To get around caching, I would store the timestamp of the last update, and echo it out as a parameter in the CSS URL;
<link rel="stylesheet" type="text/css" href="/path/to/generated/css.css?ver=<?php form_option('theme_name_css_timestamp'); ?>" />