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'); ?>" />
Related
Recently I purchased a WordPress Theme called "Bonno" (http://bonno.aisconverse.com/). It's a great theme, but there seems to be one major drawback: Anytime you make a stylistic change to the style.css (via the Appearance --> Editor), the update will not occur.
I've tried:
Shift + R on a browser
Installing a plugin to clear the cache (WP Super Cache)
Making a post on a completely different page via Post/Update (this
sometimes works, other times does not -- not sure how or why)
Has anyone else encountered similar issues on Bonno? Or any other WordPress themes?
To solve this problem your can add extra string right after the filename using a ? character.Edit the theme file to change the link tag.
Example-
<link rel="stylesheet" type="text/css" href="style.css?123">
However it gets static and next time if you change the CSS again you might not get the update instantly. For this, you can use PHP to add the string dynamically by using time() function.
<link rel="stylesheet" type="text/css" href="style.css?<?php echo time(); ?>">
And now you can get instant update of your changes. This will not affect your CSS file.
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 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
Hi everyone for the help in advance: Im trying to get a 2nd header added to a custom temp page and in that alternate header all an alternate css file different from style.css.
I called the custom header from the cat template page like this
<?php get_header('header_state'); ?>
It works fine and places the header on the page and I called the css file in this custom header like this:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>//localhost:8888/cnb_press/wp-content/themes/cnb-zip1/state_style.css" media="screen" />
but my page is still accessing the index.php style.css for some reason. I am on a MAMP and not live.
Any ideas why I am not getting this right?
If your page is still showing the incorrect CSS link tag, you aren't loading the new header template you created. WordPress wouldn't redirect an absolutely URLed CSS file referenced in the header.
Look at the WordPress template hierarchy to make sure your page is loading the template you think it is:
http://codex.wordpress.org/Template_Hierarchy
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