I'm working in custom wordpress theme but wondering how wordpress decides to which link or script should be added in footer or which script should be added in header because we add all the links in the functions.php without mentioning that where it needs to be added.
Would be great if anyone could explain!
We usually use the wp_enqueue_script function for including any script or style's file. In this function you can see there are few parameters are allowed.
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
You can see the last parameter us $in_footer, you can set it true if you need to load the script/style in the footer. By default it is false and load in the <head> area.
For more details you can read the official information here.
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 :)
Under theme customisation, I'm unable to set a video as the Header Media. This theme is being created from scratch so I've currently only got the following files: header.php, footer.php, functions.php, sidebar.php, index.php
I've tried setting video to true in the theme support section for wordpress. I've tried copying the implementation in the twentyseventeen theme.
I've tried different combination of parameters in the custom-header theme support function.
functions.php:
add_theme_support( 'custom-header', array(
'video' => true,
) );
header.php:
<?php the_custom_header_markup(); ?>
Wordpress is currently giving me the following error:
"This theme doesn’t support video headers on this page. Navigate to
the front page or another page that supports video headers."
In my functions.php I was loading jQuery like the following:
wp_enqueue_script('wptheme-jquery-js-cdn', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
This caused jQuery to load first. To solve this, I forced it to be loaded in the footer.
wp_enqueue_script('wptheme-jquery-js-cdn', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', array(), '', true);
This is also better practice to stop it blocking rendering.
In Wordpres, I have created a plugin. I'm trying to use Bootstrap/bootstrap-select in order to create a multi-select (with checkboxes) on a custom page template, but I'm having problems. I'm not creating a new theme, but I am using a child theme. Here is what I've done:
Copied page.php from the parent theme to the child and renamed it to manage-matches.php
Edited the template and added
Template Name: manage matches
Created a new page and selected this new template
In the template loop content div, I call another PHP file using:
This function is in managematches.php and I've
I copied my header.php to the child and added the references to the bootstrap.css and the bootstrap-select.css
I've done
include_once 'includes/managematches.php';
in my plugin.
This function managematches() generates the html for my page and it works fine. In fact, I can create bootstrap elements so I know the bootstrap/bootstrap-select.css files are working. I've also created a .js file (managematches.js) and enqueued it and that is working. By working, I mean that standard jQuery functions and selectors work fine.
The problem is that I can't get any of the functions in bootstrap-select.js to work. I've tried putting the reference to it in a whole bunch of places, to no avail. I keep getting:
TypeError: $(...).selectpicker is not a function
The problem is described here: Bootstrap-select not working
and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.
What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.
ANSWER
I enqueued the css and js in my plugin, but the functions.php would work too.
wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
wp_enqueue_style( 'bootstrap-select', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css');
wp_enqueue_script( 'bootstrapjs', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'bootstrap-selectjs', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js', array('jquery'), '', true );
The problem is described here: Bootstrap-select not working and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.
What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.
I guess your javascript files are loaded either in the header.php or the footer.php on the main theme. Of course they can also be included in functions.php. You can inspect the source code of the generated page and check in which point is your bootstrap-select included and then search the name of the file on your theme's source code.
How did you enqueue your managematches.js?
By using wp_enqueue_script you can also declare dependecies of the enqueued script.
I am currently developing a theme and i am having issues when it comes to wp_enqueue. This is what i got but it isn't working.
function theme_name_styles() {
wp_enqueue_script( 'style-name',get_template_directory_uri() . '/css/dropdown.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_styles' );
secondly i am trying to tell if the toolbar is active on the frontend of wordpress or not and using conditions to display something if it is not active.
wp_enqueue_script is used to enqueue script , use wp_enqueue_style instead
other thing is its better to register script or style first before using
wp_register_script // to register script
wp_register_style // To register style
then enqueue using wp_enqueue_script wp_enqueue_style // learn more about it on codex
Try this :
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'style-name', get_template_directory_uri() . '/css/dropdown.css' );
wp_enqueue_style( 'style-name' );
}
More info : http://codex.wordpress.org/Function_Reference/wp_register_style
For the toolbar, maybe you can find something here: http://digwp.com/2011/04/admin-bar-tricks/
There are specific functions to enqueue scripts and styles in wordpress. wp_enqueue_script is used to enqueue scripts only and wp_enque_style is used to enqueue stylesheets. These enqueued files will be attached at the point where you called the wordpress function wp_head. Note that these functions check for MIME type so that if you trying to enqueue a script using the wp_enqueue_style then it'll assume your stylesheet as a script and vice versa. You can see the type and explanation of the error if you use a debugger tool. The developers tool in google chrome is quite awsome. You can use this.
There is a function is_admin_bar_showing which can tell explicitly whether the admin bar is showing in the front end or not. http://codex.wordpress.org/Function_Reference/is_admin_bar_showing
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.