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.
Related
I'm working on a plugin where I need some of the colors to be settable in the admin.
Right now, I have these color settings saved with the WP update_option() function. Then, when I need to display a page, I use the get_option() function then embed the color codes like this:
<style>
.some_class{ background-color: <?php echo $settings->color_code;?>; }
</style>
Of course, this works. But it seems a bit clumsy because the plugin can load one of several PHP based pages. So, for each one, I have to do the above.
Is there some way to get this tag into all my plugins pages without doing it page by page?
for frontend:
add_action( 'wp_enqueue_scripts', 'custom_css', 100 );
function custom_css(){
echo '<style>css here!</style>';
}
it should print after your current css stylesheets so it will override prev. css
I've a output template ( from some product research), using the_content() of a page.
I'd like to exclude one class from the_content() (which is from a page using Default template).
I've seen it was possible using a function, but how to realize it? I've only found to exclude shortcode which I'm not looking to do . . .
thank you in advance :)
Open up your header.php file. Right before the closing </head> tag you'll want to include the following code.
<script type="text/javascript">
jQuery(document).ready(function() {
// change .yourClassName to the actual class you want to remove.
jQuery('.yourClassName').remove();
});
</script>
Alternatively you could use a conditional PHP statement wrapped around some CSS inside the <head></head> tags to hide it. Again, you would do this in the header.php file. Using the conditional statement you could tell the CSS to only work on a specific page and not affect any other pages. See below.
<?php if (is_page(1)) { ?>
<style type="text/css">
/* change .yourClassName to the actual class you want to hide. */
.yourClassName {display:none;}
</style>
<?php } ?>
If you go the CSS route, you would set the page ID of the page you want the CSS to affect by changing the number 1 inside of is_page(1) to the appropriate page ID. You could also use the page slug, so in place of the number 1 you could use 'your-page-slug'. You can read up on the is_page() function here.
Hopefully this helps.
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.
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'); ?>" />