I'm making a Wordpress template and I want to have options in the built in Wordpress Customizer for things like accent color, custom font, etc. that will then be used throughout the template. However, this means that I can't just code static CSS and would have to pass a variable in somehow. How would I go about doing this?
Found an answer at https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/.
Here's the most relevant code:
function theme_enqueue_styles() {
wp_enqueue_style( 'theme-styles', get_stylesheet_uri() ); // This is where you enqueue your theme's main stylesheet
$custom_css = theme_get_customizer_css();
wp_add_inline_style( 'theme-styles', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
theme_get_customizer_css() here is a custom function that returns a string of CSS that directly overwrites any code in the main stylesheet pertaining to colors, for example. Because it is generated in PHP, get_theme_mod() can be used to check for/insert any customizer settings. Once this CSS is generated, wp_add_inline_style() adds it to the main stylesheet; if everything is coded properly, CSS's cascading nature will have the newly added code override the earlier code without any need for !important or anything like that.
I'm left wondering if, instead of overriding, the inline inserts can (or should) be the only declaration of CSS that could be possibly changed by the customizer, i.e. in theme_get_customizer_css() if there are no customizer options set return the default code rather than the default code being in the spreadsheet to start with. This would prevent there being tons of duplicate CSS, relying on cascade hierarchies to work, but the stylesheet would also be incomplete on its own, so maybe there's reason not to do this? Would love input if anyone has thoughts.
Related
I am trying to build a Wordpress blog, which after a couple complete revamps i was starting to get quitte happy with the shaping site, unfortunately i have at some point made one paragraph block the global style and hours of trying to solve it now made everything worse.
When i try to remove it i was shocked to see that it doesn't seem like it's possible. At least on the surface. Worse, this cant be edited manually, nor i can change through CSS myself because the global style overrules everything, even when i add important.
Is there any way i can remove this global styles, without ruining my site?
I have tried to globally style different P blocks, even created new ones and done the same but this has made everything worse like i said.
To dequeue only the default WordPress stylesheet, you can use the wp_enqueue_scripts action hook to remove the `wp_enqueue_style() call for the default stylesheet. Here's an example of how to do it:
function remove_default_stylesheet() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 100 );
This code removes the default wp-block-library stylesheet that is included in WordPress. You can modify this code to remove other default stylesheets that you want to dequeue. Note that removing the default WordPress stylesheet may affect the styling of your site, so it's a good idea to have a plan for replacing it with your own styles if you choose to do so.
Good morning. I've two document CCS, one contain Material Design Lite CSS and other is been created by me for customize WP-login.
I'd ask if it's possible write some classes written in Material Design Lite CSS in one class created in my customize WP-login CSS?
Cause for customize WP-login I can't modify his HTML, so I can modify this file by creating another CSS and overwriting class of original WP-login CSS.
Add the following code to functions.php to have WordPress load your new stylesheet.
function custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-styles.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );
Now any CSS you add to this stylesheet will be loaded for the login page. This enables you to change any part of the design to your liking.
You can refer this alos: https://torquemag.io/2016/08/customize-wordpress-login-page/
Hope this works for you.
I am having a problem with a site I am developing with wordpress.
It happened after upgrading to the latest version (4.7)
Anyway. Go to the site www.scientized.com (just dummy content for now), and go the source. At around line 124 you see the tag <style type="text/css" id="wp-custom-css"> and then after some css is loaded.
The thing is, is that this some of my old css code from way early. To make life easier and to isolate the problem I have delete all css in my child themes style.css as well as the custom css in the customizer, and delete jetpack just to be sure. Yet this css is being loaded from somewhere. I have file explored the crap out of my site trying to find where this is located, but couldn't find anything.
I have found that in the wp-includes/theme.php there is this function:
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
</style>
<?php endif;
}
so this wp_get_customer_css() function is calling the old css from somewhere -- I tried to follow the functions back to see where - but my php is not that good and got lost. Does anyone know where this is being loaded from?
I think I need to know where the JetPack custom css location is. I have read it is generated dynamically -- so I am not sure how to go about the problem.
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
Edit: I dont get the text box in the custom css area in customizer. Where is this text located?
The Additional CSS content is stored in wp_posts database table as a separate record. It's post_type is set to custom_css. To find which post is assigned to the field, you need to look in the option theme_mods_{your theme's slug}.
For example, here is the one from my test Sandbox site which is running the Genesis Sample theme. The post ID is 31, per the key custom_css_post_id.
How do I check my site?
You can go directly into your database via phpMyAdmin and look in the wp_options table. Or...you can do this:
add_action( 'init', 'check_custom_css_post_id_theme_mod' );
function check_custom_css_post_id_theme_mod() {
var_dump( get_theme_mods() );
}
The above code will display the theme mods for your current theme. Note the one that is keyed as 'custom_css_post_id'. That one holds the ID to the post for the CSS.
How to Remove It
To remove a theme mod, you use remove_theme_mod( 'custom_css_post_id' );. See codex for the documentation on this construct. It will remove the binding between the Additional CSS. How? It deletes the sub-option.
Note, it does not delete the post record, meaning you'll have an orphaned record in wp_posts.
The wp-custom-css is loaded from custom css & js
I have been searching the web left right and center for a solution to get the wp_enqueue_style() function to work but I just can't get it.
Code Snippet
//Add some styles to the script
function sreub_enqueue_styles() {
//Use it!
wp_enqueue_style ( 'sreubmainstyle', plugin_dir_url(__FILE__) . 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
I have echoed the path I am using in the wp_enqueue_style function and it is correct but have no idea why the styles are not being applied when I put them in the CSS file?
Switch theme and try. or deactivate the plugin and active again. it should works. This code work for me.
function sreub_enqueue_styles() {
wp_enqueue_style( 'sreubmainstyle', plugin_dir_url( __FILE__ ). 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
Let's do a couple of checks first to determine where the root cause lies:
Check the path
Let's check the path specified to the enqueue instruction. The path you have says the CSS file is located in the same folder (and not a subfolder) as the PHP file that has the enqueue callback.
Is this the case?
Check to see where the CSS file is located in relationship to the PHP file. If it's in a subfolder or elsewhere, you will need to modify your pathing.
For example, let's say the CSS file is located in wp-content/your-plugin/assets/css/sreubmainstyle.css but the PHP file which enqueues it is located in say wp-content/your-plugin/load-assets.php, the URL path to the CSS file would need to absolute by including the full path.
Just double check. If the path is correct, then let's go to the next check.
Loading Before the theme's CSS
The theme's loads after the plugin. WordPress loads plugins first and then the theme. Your code is pre-registering the callback with a priority of 10. More than likely the theme is also using the default of 10. That means the plugin's CSS will load first into the <head>.
Check the <head> and see if where the stylesheet is loaded in relationship to the theme. Use Firefox or Chrome Dev Tools to inspect the HTML markup.
If you find it's not loaded into the DOM (meaning in the HTML markup, then we are back to an enqueue problem. If yes, then go to the next check.
Else, I suspect it's there but before the theme's ’style.css` file. If yes, continue reading this section.
You want your styles to come after the theme to ensure yours override the theme and take a higher precedence. In this case, you want to change the priority to something greater than the default of 10. To do this:
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles', 50);
The 50 sets the priority higher, meaning it fires later.
Whoops, CSS is not in DOM
Looking in the HTML markup using Firefox or Chrome, you discovered that it did not even load. It's not there. Okay, you know that the path is right. Next did you load the file that is doing the enqueuing? And did you load it before WordPress fires the event to enqueue?
Check when you are loading the file.
try to run add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); from the main file or make sure add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); is run on the activation hook callback
I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?
If yes than how ?
Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).
A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {\*new styles\*}
This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.
I hope this will do, if want more assistance provide example with your work.
thank you
open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don't need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.
add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() { wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;
You have to do two things:
give your snippet a parent div id, say "#mySnippet"
At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must
A custom CSS files won't always work with wordpress because the platform requires a certain file structure, and if I'm not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).
Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:
#mySnippet p {
property:value;
}
This should take care of it..