wp_enqueue_style not loading CSS - wordpress

I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');

Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.
Have you tried echoing something out in the function to see if it's actually being called at all? I.e:
function load_scripts() {
echo "Does this output to the actual page?";
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem.
Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.

Okay, first step is to ensure you are using the correct path of the CSS file.
Add the following line in the functions.php of your theme or other appropriate place.
print( get_template_directory_uri() . '/css/bootstrap.min.css' );
This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.
Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.
Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.

Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');

You are trying to enqueue style on wp_enqueue_scripts hook.
Try wp_print_styles.
add_action('wp_print_styles', 'load_scripts');
Also try to register style, first.

in case you don't want to use wp_head(); in your template, you could also include your styles directly:
<link rel="stylesheet" href="<?php echo get_theme_file_uri( 'style.css' ); ?>">
beware though: wp_head() includes tons of stuff (scripts, styles,...), by wordpress itself as well as most plugins, so only omit it if you know what you're doing.

Register the style first:
function register_plugin_styles() {
wp_register_style('my-plugin', plugins_url('my-plugin/css/plugin.css'));
wp_enqueue_style('my-plugin');
}
http://codex.wordpress.org/Function_Reference/wp_register_style
Do that way. Dont try to enqueue directly. And put code into functions.php of course.

Fist confirm path of the css file is correct or not if is it a correct try with below code :
function load_scripts() {
wp_enqueue_style('load-custom-css-new', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
or Go with this URL.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

I had the same problem. Although I have implemented this many times before, I lost many hours to find out what went wrong with this.
Because I made my own themes, I had declared this file unit as “fuctions.php” (I lost the -n- letter).
So, besides all the things described above you should also consider, take a good look at the file name and confirm that is “functions.php” (not fuctions, not function etc).
This might be also the reason for you.

I had the same issue. I fixed it by hard refreshing the page with Ctrl + F5 to clear cache and the css loaded normally.

If you are protecting the directory with .htpasswd, the https call generated by get_stylesheet... will fail, and you might lose some time chasing that one.

Related

Wordpress - can't enqueue my custom-script after all other scripts

On wordpress, using GeneratePress free template, I'm trying to push my custom script after all others.
The big problem is that all the scripts of a plugin (Visual Portfolio) are always loaded at the very end, after my scripts.
I tried to put a very high $priority parameter in the add_action() functions but it doesn't work.
function register_scripts_and_styles() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', null, true);
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles', 99999 );
Do you have any idea how to fix this problem?
Thank you very much.
Here's idea, js and css files in WP use different technique to figure out in what order js\css files should be loaded.
here's function
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array('js-handle-of-some-dependency','js-handle-of-some-other-dependency'), true);
Each script has it's handle, it's first argument to this function, in your case it's custom-js.
Based on digging into plugin's code it's main js has handle visual-portfolio
So you can just enqueue your script with setting it's handle as dependency.
And final solution will be:
function register_scripts_and_styles() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery', 'visual-portfolio' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles' );
I've also added jquery as dependency as I guess you are using jQuery in your js code, you can remove it if not.
I've also set version to '1' - it's a query string version which will be applied to your JS code so when you do update and move code live you can force user's browsers to load a fresh one just changing version here.
And see last argument true, it denotes that your script will be injected in footer.
If your code relies not only on main.js of this plugin you might need to add more dependencies as this plugin enqueues bunch of scripts, see whole list of them in /wp-content/plugins/visual-portfolio/classes/class-assets.php from line 350, at the end of register_scripts method of class defined in this file. So you really can put exactly all script's handles on which your custom js code relies and WP will figure out right order of linking those files to page for you.
Happy codding :)

wp_dequeue_style not seems to working

I'm build a wordpress theme and I've created in my style.css a custom class for the plugin: Social Count plus
The problem's that plugin use an own css called counter.css what I need to do is prevent the inclusion of this css, so I've inserted this line in my functions.php:
wp_dequeue_style( 'counter' );
unfortunately the style is even included during the site reload. What am I doing wrong?
Thanks.
Try this:
add_action('wp_enqueue_scripts', function() {
wp_dequeue_style('social-count-plus');
wp_deregister_style('social-count-plus');
});
Just leave the counter.css file in place but either empty it out or comment everything out. It can't load what's not there. Be aware though, and update to that plugin might add the contents of that file back.

scripts not showing in custom wordpress theme

So, I've built my own theme for wordpress. Now, I'm trying to put my own plug-in on that theme which requires 3 javascript files. Upon reading the WP-Codex, it tells me the wp_register_script, wp_enqueue_script and add_action methods are the best way to go.
Now, in my plug-in file, I've done things such as:
function register_my_scripts() {
wp_register_script('script-1', plugins_url('path/to/script-1.js'), array('jquery'));
wp_register_script('script-2', plugins_url('path/to/script-2.js'));
wp_enqueue_script('script-1');
wp_enqueue_script('script-2');
}
add_action('wp_enqueue_scripts', 'register_my_scripts');
Nothing seems to show up on any of my template pages. I've even put this code on the main index page and still nothing. I've written something simple, straight from the codex like: wp_enqueue_script('jquery') on the page and still nothing shows up. Is there something I'm missing here? Why won't html for loading the scripts show up on my page?
Also, I'm running Wordpress 3.5.2
I enqueue my scripts like this on the functions.php file:
PHP
wp_enqueue_script ('customjs', '/wp-content/themes/blackboard/js/custom.js','','',true);
Please remember that the usage is:
<?php wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); ?>
Try putting the wp_enqueue_script() on your functions.php just as a test. Please check that your path is correct too and check the source code to see if it's printing but just with a wrong path.
Note that the first line of code on this answer is the only thing I need to enqueue the script, nothing else as far as I know.
Let us know if this works for you, cheers.

Wordpress - wp_enqueue_style is adding the style to the footer, not the header

I'm trying to add styles and scripts to my plugin so I use:
function add_my_scripts() {
wp_register_script( 'test_scripts', plugins_url('test_scripts.js', __FILE__) );
wp_enqueue_script( 'test_scripts' );
}
add_my_scripts();
in my plugin page but it adds the script to the footer rather than inside the tags. The same thing happens with wp_enqueue_style. I read that it's supposed to add the script or style to the head by default. I don't know what the problem is.
Possible cause: wp_head() is missing from the header or is in the wrong place or somehow isn't getting called. Are other scripts loading in head correctly?
Also, did you try passing 'false' as the last parameter to enqueue_script() to force it to go in the header? This really shouldn't fix the problem, but it would be something I'd try if I couldn't figure something else out.

Loading javascript into wordpress wp_enqueue_script() problem

I am trying to get my custom javascript (jQuery) to load correctly in Wordpress.
I know you have to use wp_enqueue_script() to do this correctly. However the problem I have is that the result is not my script, but in the place I should have javascript I have the code for a 404 page !
I've tried two ways of enqueueing the script :
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),1);
just above wp_head()
and :function my_script_load() {
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),null);
}
add_action('init', 'my_script_load');
in functions.php
both methods have the same effect. When I inspect the HTML in firebug I find the script is corredtly referenced :
<script src="http://localhost/wordpress/wp-content/themes/doric2011/javascript/sitescript.js" type="text/javascript">
however when I inspect the script itself I find the following (an extract) :`
Page not found | Nick Kai Nielsen
and so on... It is a HTML output for a 404 page, but occupying a space where javascript should be...
Needless to say the script does not work.
I have only had this problem since updating to 3.1 and it does the same thing if I try loading highslide.js and highslide.config.js (professionally written scripts). The script I wish to load is already working on my site and I want to go on using it in the new theme I am developing.
has anyone any idea of what is happening ? And, of course, what should I do about it ?
This is a local installation - I'm not risking breaking my site until this is sorted out.
Try:
add_action('init', 'my_script_load');
function my_script_load() {
wp_register_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'), true);
wp_enqueue_script('sitescript');
}
Assuming your javascript file is in the proper location (and the URL isn't pointing to a spot where the JS file isn't...) try this:
function add_my_scripts() {
$templatedir = get_bloginfo('template_directory');
if(!is_admin()) {
wp_register_script( 'sitescript', $templatedir . '/javascript/sitescript.js');
wp_enqueue_script( 'sitescript' );
}
}
add_action( 'init', 'add_my_scripts');

Resources