A Plugin i use in Wordpress has a css stylesheet which I only need in the frontend but not in the wordpress backend. (There it causes a small bug)
How can I prevent the stylesheet from loading in the backend?
Or the other way around, how can I make a stylsheet load only in the frontend?
Thanks for your help!
With Simple Custom CSS and JS plugin by SilkyPress.com the CSS can be set to appear In Frontend, In Admin or On Login Page separately.
Check slug of imported style and use this solution
// this will remove the stylesheet when init fires
add_action('admin_init','your_remove_default_stylesheets');
// this is your function to deregister the default admin stylesheet
function your_remove_default_stylesheets() {
wp_deregister_style('wp-admin');
}
Change wp-admin to your slug
https://developer.wordpress.org/reference/functions/wp_deregister_style/
Related
I am a basic WordPress website developer. Due to this I have to do custom css on many client websites.
My question is that, *is it possible to place any code into WordPress CSS, Which load my custom css from any code host like GitHub instead of writing CSS on WordPress custom css. *
*Reason: after giving our code to show my work some clients just run away. *
Question clarification: i want to add custom CSS for WordPress website, but don't want to use WordPress custom CSS. I want it load like bootstraps. Mean i want to host it anywhere else and load remotely.
you can use below function by adding it in functions.php file use that remote url by replacing bootstrap url <br>
function theme_add_custom_css() {
wp_enqueue_style( 'custom-css','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'theme_add_custom_css' );
I am new to wordpress and want to know best way to add css from installed and activated plugin.
I have one activated plugin called "social-media" and in that plugin i have created one css file called "social-login-style.css"
I want to include this css file and apply style to my content. How should I add css file in any page so that I can see the effects.
In Short, I want to add social-login-style.css on wp-login.php file.
Whether it is theme or plugin, css or js, any custom addition, wp_enqueue_scripts is the only acton you need for all.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
function additional_custom_styles() {
/* Enqueue The Styles */
wp_enqueue_style( 'custom-login-style', plugins_url( 'social-login-style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
If you it to be added only on login screen then use the following condition,
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {
// We're on the login page!
}
Hope this one help :)
UPDATE
Please check login_enqueue_scripts. it is designed to add custom scripts into login page only. Works well without any login condition.
https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
Without saying what you want to achieve is impossible, it certainly is against how WordPress is designed to work. Plugins are supposed to be modules that add to or modify how WordPress works. The folder of a plugin should only hold files pertaining to what the plugin does and, if it's a public plugin, its contents are controlled by a versioning (SVN) system.
In short, adding a file to an existing plugin will not have any effect, regardless of whether the plugin is active or not. And you should not add files to plugins you haven't developed yourself.
To load a CSS file on the login page, one should add an action hook to login_enqueue_scripts, as instructed in Customizing Login Form page of the codex. The stylesheet itself should be placed in either a custom plugin (you could create for your use-case) or inside the current theme folder.
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 have created a custom page template for my wordpress theme that uses a custom header-file:
get_header('custom');
Everything works as expected, but when I set a page to be the Posts-Page somehow the standard header-file gets loaded instead (my custom page template is activated).
I have also tried to override the blog.php from the parent and added the explicit call to my custom header-file, but it didn't have any effect.
What am I doing wrong? How does this work?
You should override home.php
A bit more information home.php is the template used for the blog homepage (the page with all blogposts). You can learn more about which templates are being used where in the template hierarchy documentation: http://codex.wordpress.org/Template_Hierarchy
The solution was to override home.php.
I created a child theme of the TwentyTwelve theme in Wordpress for my photography website.
In the photo gallery pages, clicking on a thumbnail image either triggers Fancybox or Photoswipe, depending on the screen size (if <500px Photoswipe is used as it's probably a mobile device).
For better performance I would like to load only the required javascript, Fancybox or Photoswipe, but not both of them.
I'm not using plugins for Fancybox/Photoswipe but load them in the child theme functions.php using wp_enqueue_style and wp_enqueue_script
the choice between Fancybox/Photoswipe is made in another javascript file, also enqueued in functions.php: according to the result of jQuery(window).width(); it triggers either Fancybox or Photoswipe on certain elements:
jQuery(document).ready(function() {
windows_size = jQuery(window).width();
if( windows_size > 500) { // Load Fancybox
jQuery(".brick a").fancybox({
[...]
else { // Load Photoswipe
jQuery(".brick a").photoSwipe({
[...]
I cannot use any of the WP functions like is_page(...), as both scripts are fired on the same page
I don't know if it would be possible, using Wordpress, to load all required files for Photoswipe (js and css) in the javascript above
I'd rather not use the user-agent to detect a mobile device
I searched on Google and on StackOverflow but couldn't find any answer specifically related to Wordpress and this situation.
Thanks for your help.
I saw this the other day, and it looks like he's trying to do the same thing as you -- "How to load JavaScript conditionally with media queries in WordPress":
http://blog.logo24.com/2013/07/23/javascript-media-queries-wordpress/
His solution is JavaScript, rather than PHP, and comes with some caveats.