I'm including a .css file in my plugin and the files show up on my page and I can see the path and click through the path to see the raw .css content. However, It is not applying to my HTML elements.
I removed the wp_enqueue_style() that included my CSS file in my plugin and placed the code in my theme's custom CSS template I'm using (just the raw css) and refresh and that works; the CSS is applied to my HTML elements as expected.
One thing to note is that in the same plugin I'm returning HTML that I want this CSS to be applying to through a shortcode on a page.
Is it something with the CSS not being registered/applied in time to pick up or find the elements if it's adding from a plugin? I need the CSS to be added from the plugin and not from the theme's template. Is there something I'm missing?
Thanks!
I figured out my own problem.
My plugin code was:
wp_enqueue_style('nbfx-fs-css', plugins_url('/assets/css/nbfx-fs.css', __FILE__), array(), null, true);
I took a look at my HTML source and found this:
<link rel='stylesheet' id='nbfx-fs-css-css' href='MY-CORRECT-CSS-FILE-PATH' type='text/css' media='1' />
And I noticed the media='1'. So apparently I need to leave the 4th parameter blank or provide 'all'.
I hope this helps someone else who copy and paste the wp_enqueue_style() function with set parameters from someone else.
Related
I'm starting from a blank Storefront child theme template I found on GitHub. The child theme's style.css contains some author information but everything is commented out. A GTmetrix scan shows that this stylesheet file is being loaded and recommends that I load it inline, but I'm thinking since it's essentially empty, why load it at all?
I add my style customizations in the Additional CSS box of the Wordpress Customizer, so I wish to dequeue the enpty child theme's style.css and hopefully optimize page load speed a little bit.
So I added the following to my functions.php:
/* Dequeue Storefront Child Theme style.css */
add_action( 'wp_enqueue_scripts', 'dequeue_storefront_child_theme_style ');
function dequeue_storefront_child_theme_style() {
wp_dequeue_style(' storefront-child-style ');
}
But I can see it is still being loaded in the page source (and on GTmetrix re-scan).
<link rel='stylesheet' id='storefront-child-style-css' href='https://www.mywebsite.com/wp-content/themes/storefront-child-theme/style.css?ver=1.0.0' type='text/css' media='all' />
So my questions are, am I correct in my assumption that this blank stylesheet ise unnecessary because it slows down page load? And how do I go about dequeueing it properly?
using the code above was not working because it has a space in this 'dequeue_storefront_child_theme_style ' and ' storefront-child-style '
After fixing this, this code worked for me with a higher priority:
You should probably not set it that high but pick a value suited to you.
add_action( 'wp_enqueue_scripts', 'dequeue_storefront_child_theme_style',9999);
function dequeue_storefront_child_theme_style() {
wp_dequeue_style('storefront-child-style');
}
The style.css file is a necessary file as per the WordPress docs as it tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.
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 have just followed a tutorial about creating custom WordPress theme, each and everything went just fine from static to dynamic conversion but when I activate that theme and I come up with a plain HTML document with blue hyperlinks which mean the site is not picking up the css file of style.css
Am I doing something wrong? Please help me.
Check your source HTML and see that the path to your CSS is correct.
You can use bloginfo() to find the correct path by using:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css">
If your style.css resides in the root folder of your template.
Where did you add the link to the file? - View the source of the page to see if the link is there and try navigating to it to see if it returns a 404 (Not Found) or other error.
My preferred way to include theme stylesheets is adding something like this to my functions.php.
add_action('wp_enqueue_scripts','enqueue_my_styles_scripts');
function enqueue_my_styles_scripts() {
wp_enqueue_style('my-styles',get_stylesheet_directory_uri().'/style.css');
}
Check out wp_enqueue_style and make sure you have a wp_head() call in your header file
Using wordpress 2.9.2. I am loading my css files for plugins as they are being called, which ofcourse is after my header has been loaded. I want to insert the calls those css files in the HEAD tag of the page, which can be done if i get a hook which includes lines in the head after wp_head() has been called. Help !
Look at http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head - the action is called wp_head.
You will want to use wp_register_style() to register your CSS file followed by wp_enqueue_style() to actually add it to the list of stylesheets that are output.
There is an example on that page, but replace 'wp_print_styles' in the example with 'wp_head'.
Have you tried echoing the styles or .css include the in a function passed into wp_print_styles API action hook?
If you are using your own theme, you can just put <style> tags in your header.php file pointing to the stylesheets you are using.
If you need a hook, it is called wp_head (check the Codex documentation on it).
The solution that worked for me was inserting the css files in head using output buffer.