Any CSS the customizer generates will be written directly into the head section.
The customizer API uses the wp_head hook for that.
I would like to take hold of this CSS somehow and connect it to style.css.
What I want to do is the following:
The Customizer spits out a class .red {color:red;}
I'd like to grab this information and transfer it into my style.css somehow.
Ideally the Customizer CSS would be inserted at the beginning of my style.css
EDIT Just to clarify: By "Customizer CSS" I am referring to CSS information generated by a color picker control for example. Not the CSS from that "Custom CSS" input field – this one I can just copy and paste into my style.css
One idea is to save the customizer CSS output not in the head section via wp_head but somewhere else, into a file for example.
How can I do that?
Is there a hook for that, is it even possible and does it make sense?
This is just one idea of mine – I am open to completely different approaches as well.
I think writing into a file directly is not a good idea at all. Because next time the value is changed, the previous written CSS would be unnecessary. Dynamic values should be changeable. As you write the output value into the file as suggested, the previous generated value will always be there which is redundant.
The best approach would be using wp_add_inline_style Refer here.
Use the following method to add the CSS to the refereed file:
function my_styles_method() {
$color = get_theme_mod( 'color-picker-control' ); //E.g. #FF0000
$custom_css = "
.mycolor{
background: sachet;
}";
wp_add_inline_style( 'main-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
Related
Not sure if this is only problem for Elementor full width template, but it seems to override theme header.php. I tried achieving my goal by using elementor custom code feature, but it adds my code somewhere in middle of the tag.
What is the propper way of adding my own custom code as the first thing that is after the element?
You are right Elementor overrides the theme's header.php file so importing your code to this file is not effective. You need to add custom function to earn your goal. With the wp-head action you could add the code right into your header and Elementor will not override it.
Add this code to the functions.php file od your active theme.
add_action('wp_head', 'custom_head_function');
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
UPDATE - If you want to set your code at the top
As sephsekla mentioned in comment, there is a way to set the priority into your action to get it to the top. Try to set value to -999. So, choose a very low number and if there is no other lower number in your plugin or theme you will go straight to the top.
add_action('wp_head', 'custom_head_function', -999);
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
Elementor now supports custom code (javascript, html, etc) and supports the specific use of elements in the head of the page.
What you are looking for you can find at the Wordpress Dashboard> Elementor > Custom Code . Then you will be able to add a custom code to the head: https://elementor.com/help/custom-code-pro/
As the title says, I want to add some sort of signature with comments on my wordpress index file, thing is - there are 30 different index files and none of them seems to work
If I understand correctly, it'll just be a case of adding some HTML comments (not PHP comments as they won't show in the source code) in your theme files. Bear in mind that editing a theme won't work if someone else made it and releases updates to it as it'll overwrite your changes if you update it.
The best place to add in the comments is to either open the header.php file and place your HTML comments after the opening <body> tag. If your theme doesn't include a header file, you could always add your comments to the top of your themes index.php file instead.
Your theme should be located within /wp-content/themes/YOUR-THEME/.
Alternatively, you could also place HTML comments between the <head> tags of your theme so they show up a bit higher in the source code. To do this, it's probably best to use an action hook instead. Place this in your themes functions.php file:
add_action( 'wp_head', 'add_signature_to_theme', 1, 0 );
function add_signature_to_theme() {
?><!-- Welcome to my website. --><?php
}
The wp_head action hook documentation is useful to have as reference as well if you'd like a bit more information on what it is and what it does.
I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.
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 use this plugin to dynamically change the CSS in a user friendly way within the WordPress backend:
http://wordpress.org/extend/plugins/option-tree/
I set it up, and appended it to the theme (not a plugin anymore) - this works.
What I don't get is that those inputs get actually changed. So I set up a input field where the user can add a hexadecimalcode(colorpicker) to change the background, or even the font color.
How do I get this information to change in my CSS? I tried:
body {
{{custom_background_css}}
background-color: {{custom_background_css|background-color}};
}
where custom_background_css the id of this input field is. but nothing changes. I also read the documentation but I don't get it...
To adjust theme options for CSS, you'll have to include the CSS in your header, or write a .php file that generates the CSS you want, and link to that. But maybe the easiest way is to hook wp_head from functions.php, and write the code directly there. See below for a schematic example to add to your functions.php
// this is the hooked function
function add_css() {
echo "dynamically generated CSS here";
}
// Add your wp_head hooks
add_action('wp_head', 'add_css', 5);