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.
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 trying to add custom html between <head></head> Doing a hook or something rather than install a module.
But i cant figure how to doit.
I am using bartik and i make this function
function bartik_add_text_to_header(&$vars, $hook) {//}
but i cant figure how or which function to used.
I try with
drupal_set_html_head('style type="text/css">#import url(' . $GLOBALS[base_url] . '/modules/codefilter/codefilter.css);</style>');
But the drupal_set_html_head looks that is not existing in drupal 8 or 9
You should be using a custom theme with bartik as it's base theme rather than the bartik theme itself.
Just make the minimum file for a theme and set the bartik theme as it's base theme.
You can put whatever you want in the head section by overriding the template file that is currently being used to output that part of the html. For Bartik it is a file named html.html.twig in the core/themes/bartik/templates/classy/layout folder.
You would make a copy this file and put it into your custom themes templates folder so your file is used instead of the original.
To easily find what file is currently being used, you can enable twig debugging so comments are output in your html that show exactly what template files are being used.
Having said all that, and seeing as you are only looking to add css, you probably want to check out this page on Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme which will show you the different options you have to add js and css.
If you are just after a quick answer.... the function you want may be:
function fluffiness_preprocess_page(&$variables) {
$variables['#attached']['library'][] = 'fluffiness/global-styling';
}
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 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.
I can't get any enqueue_script to work, here is my code (which is in my plugin file)
function load_custom_wp_admin_style() {
wp_enqueue_script( 'jquery-ui-datepicker', '', array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Where am i going wrong? I can't seem to load my own scripts either
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
I am now getting jquery-ui script loaded, but the datepicker script is not being loaded
jquery-ui-datepicker is bundled with WordPress (recent versions) so you don't need to tell it anything more than the script handle.
wp_enqueue_script('jquery-ui-datepicker');
But: "can't get it to work" means what exactly? Have you looked in the page source and not found the script being loaded? Or it loads, but has no CSS styling it? I suspect your problem is the latter, because you aren't enqueuing any CSS for the datepicker (above, at least).
Now, the problem is that WordPress doesn't actually bundle in any supporting CSS for the datepicker, since WordPress itself doesn't use it. So, you need to either:
add some supporting CSS to your admin stylesheets
enqueue a compatible standard jquery-ui theme, e.g. from a CDN
For the latter, I blogged about that a while ago; here's some code that should handle that for you; add it to your function, above.
global $wp_scripts;
// get registered script object for jquery-ui
$ui = $wp_scripts->query('jquery-ui-core');
// tell WordPress to load the Smoothness theme from Google CDN
$url = "https://ajax.googleapis.com/ajax/libs/jqueryui/{$ui>ver}/themes/smoothness/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
That loads the whole enchilada, but you might want to pare it back to just the CSS that the datepicker needs.
Edit: to get the datepicker script on an older version of WordPress which doesn't bundle the datepicker script with the other jquery-ui scripts, the easiest solution is to install Use Google Libraries. This plugin will replace the local jquery scripts with Google's CDN hosted versions, and all jquery-ui scripts will be downloaded as a single (well-cached!) script.