I am at my wit's end. Of the following two script tags, the first one does not show up in my source code; the second one does. I've tried a number of different ways of presenting it including relative links, the wordpress template URI call, etc, but when the link is VALID it disappears. The same thing happens to my stylesheet. What could possibly cause this? Could it be some sort of security thing?
<script src="https://mywebsite.com/wp-content/themes/aiir-theme/jquery.matchHeight.js" ></script>
<script src="https://mywebsite.com/wp-content/smurf/aiir-theme/jquery.matchHeight.js" ></script>
You shouldn't be "baking in" scripts and styles. Once you get the hang of properly enqueuing your assets, they'll be much easier to load/unload, maintain, manipulate, and otherwise handle - and your future self (and other developers) thank you in advance!
You'll need to make use of the wp_enqueue_scripts Action Hook which uses the wp_enqueue_style() and wp_enqueue_script() functions (which rely on your theme properly utilizing the wp_head() and wp_footer() functions.
add_action( 'wp_enqueue_scripts', 'so_53109688_enqueue_assets' );
function so_53109688_enqueue_assets(){
wp_enqueue_script( 'jquery' ); // Make sure jQuery is loaded
wp_enqueue_script( 'jquery-matchheight', get_stylesheet_directory_uri() . '/jquery.matchHeight.js', array( 'jquery' ), null, true );
wp_enqueue_style( 'jquery-matchheight-styles', get_stylesheet_directory_uri() . '/jquery.matchHeight.css' );
}
I can't attest to why they're disappearing, but if you properly enqueue your assets, they leave a much easier diagnostic trail for bug fixing.
SOLVED!! Someone at the company (not me) installed a plugin that "optimizes" js and css. This was causing it to delete the links from source code; now I can continue with problem solving.
Thanks for the inspiration,
Ric
Related
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 :)
to speed up my website, i tired to remove the "wp-includes/js/jquery/jquery-migrate.min.js" and "js/jquery/jquery.js" by below code：
function my_jquery_enqueue() {
wp_deregister_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery_enqueue' );
after this, "wp-includes/js/jquery/jquery-migrate.min.js" and "js/jquery/jquery.js" all removed, but
the Contact form 7 is not working well.
is there a method to remove only "wp-includes/js/jquery/jquery-migrate.min.js" and "js/jquery/jquery.js" but keep other js files? Thank u
Unfortunately practically all wordpress plugins use jquery which is the basis of js in wordpress. If you remove jquery you will be disabling all plugins practically. So it is not advisable to do this. To keep plugins running without jquery you will have to re-program each plugin manually which will be a lot of work unnecessarily.
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.
I'm having issues loading jQuery via wp_enqueue_script - I just discovered this is the correct way to pull in jQuery to avoid posible JS conflicts but I can't get it work. I'm using this example:
function my_init() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
I'm getting nothing when I check my source files. From what I can see the syntax is correct, I'm attempting to do this on a local WP install using XAMPP if that matters. Has anyone run into a similar issue? I've seen several questions about this but the fix usually comes down to a syntax error. I'm not seeing one. Any help would be much appreciated. Thanks!
Add the code below to your theme's functions.php in place of what you have.
The version of jQuery you were trying to load was outdated by the way.
Is this a custom theme you're building? If so are you using the wp_head and wp_footer tags?
By de-registering the built in version of jQuery and loading jQuery from the Google CDN you're reducing the time it takes to download the file but it isn't necessary. You could just load jQuery with wp_enqueue_script( 'jquery' );
function my_enqueue_jquery() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', false, '2.0.3' );
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_jquery' );
Wordpress 3.8 has jQuery.1.10.3.
wp_deregister_script('jquery') is not good for site.
So, you'd rather upgrade wordpress and use higher version of jQuery included in wordpress.
Please review this Wordpress Theme.
It's much easier to customize and has lots of features. Also easy to learn code tips.
Regards. HanaTheme.
This is my first time posting so any advice for how I post is much appreciated.
LINK TO SITE: http://rightbraingroup.com/services-new-css-style/
I am running into a problem trying to get this amazing css function to work - modernizr and the css to load in Wordpress. I tried many things like adding scripts to the header, registering and enqueing the modernizr.custom.js file. I also added . And none of these options worked. I am just learning about modernizr and am truly stuck. Any help is appreciated.
Below are the ways to include js and css into Wordpress without using Enqueing (which is the proper way).
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/component.css" media="screen" />
This is how I registered and Enqued the js file
// script manager template to register and enqueue files
function childtheme_script_manager() {
// wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
// registers modernizr script, stylesheet local path, no dependency, no version, loads in header
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
// enqueue the scripts for use in theme
wp_enqueue_script ('new_service');
}
add_action('wp_enqueue_scripts', 'childtheme_script_manager');
I keep getting a 404 error or "Resource interpreted as Script but transferred with MIME type text/plain" (used plugin to fix but did not help). If anyone can give a little guidance or direction it would be much appreciated. This is also my first time posting so if you need any more info from me please let me know. Thank you for your time.
Your wp_enqueue_scripts code is correct and Modernizr appears to be loading fine on your site. You need to do a similar invocation for adding stylesheets.
function childtheme_script_manager() {
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
wp_enqueue_script('new_service');
wp_register_style('my_style', get_template_directory_uri() . '/css/component.css', array(), false, 'screen');
wp_enqueue_style('my_style');
}
Note, I've left the $deps array empty, if the css has dependencies, you may need to specify those names in the array.