I am doing this in a plugin. I have the following in an attempt to only enqueue a script when my template file archive-my_custom_post_type.php is used.
add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue($hook) {
if(is_page_template('archive-my_custom_post_type')){
wp_enqueue_script( 'ajax-scripts', plugins_url( '/js/myjquery.js', __FILE__ ), array('jquery') );
}
}
It is not working. It does not load the jquery file on ANY front-end pages, let alone when archive-my_custom_post_type.php is rendered. However, when I remove that if conditional, it loads on ALL my front-end pages.
Question: How can I do a conditional enqueue of a script whenever my custom post type archive template is being used?
You need to use the complete file name, including .php. So in your case you will need to use:
is_page_template('archive-my_custom_post_type.php')
Also, if your template is under a subdirectory you will need to specify that as well.
Ref: https://developer.wordpress.org/reference/functions/is_page_template/#more-information
If you're using is_page_template function, you should also use as parameter the full path (including subdirectories) for the template. For example, if your template is located in your-theme-directory/templates/template-file.php then you should use it like this:
if(is_page_template('templates/template-file.php')){
wp_enqueue_script( 'ajax-scripts', plugins_url( '/js/myjquery.js', __FILE__ ), array('jquery') );
}
Related
I have added this line on my plugin
wp_enqueue_style( 'dazzling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
and it seems that the whole admin backend was affected of that bootstrap. Any ideas on how to be only on that plugin?
That's because you're not specifying anywhere that the file should be included only for your plugin page, and not for the whole admin backend. Try to add a conditional check and then enqueue the stylesheet.
global $post;
if ( 'enter_plugin_page_slug_here' == $post->name ) {
// enqueue stylesheet here
}
I have been looking for an answer for this in SOF but didn't find a clear answer
I have a plugin that forces pages to be shown when certain conditions are met. but when i try to include css files for styling i get no response .
I tried to include the file using normal html and this was a failure
then tried the wp_register_style and wp_enqueue_style as such:
function rw_add_style(){
$rw_path = plugins_url('kawaleb/style.css');
wp_register_style('testili',plugins_url('kawaleb/style.css'));
wp_enqueue_style( 'testili' );
}
add_action ('wp_enqueue_scripts','rw_add_style');
wp_enqueue_style( 'testili' );
}
I placed this code on the page that should be shown when the conditions are met
What I don't know here is how to procede after enqueing !
do I need to use html to include the stylesheet file ( and then what is the use of enqueing ?) or does it do that by itself (and then what I am missing here ? )
In the doc of codex they dont go further than telling you to register the style then enqueue it !!!
Thank you all :)
You don't need to register the style, you can just enqueue it. Also, you mentioned that you've put the code in the file where you'd like it to display, you should put it in the index file of your plugin, so in /your-plugin/index.php or whatever the main file is called, add this code:
function rw_add_style() {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
If you need it only on a certain page then you should add your conditional within the function, so you could do this for example:
function rw_add_style() {
global $post;
if ( $post->post_name == 'post_name' ) {
wp_enqueue_style( 'testili', plugins_url( 'kawaleb/style.css' ) );
}
}
add_action( 'wp_enqueue_scripts', 'rw_add_style' );
And you can work out what the post name is for the page you need to enqueue it for by temporarily adding the following code to the page template:
global $post;
echo $post->post_name;
To be clear, you don't need to add any html <link> to include the CSS as you're right, there would be no point in enqueuing it then. Just add the enqueue as I described above in the main index file of your plugin and it will be automatically included in the wp_head() in your header and output just before the </head>.
I hope this helps. Good luck. =)
i wrote a plugin for wordpress which works well. I use for example something like this:
add_action('wp_enqueue_scripts', 'head_css');
function head_css() {
$myStyleFile = plugins_url( 'css/a2m_lp.css', __FILE__ ) ;
wp_enqueue_style( 'a2m_lp_stylesheet',$myStyleFile,false,'1.0');
}
And i use HTML code and JQuery selectors to create some good features as well.
If i create a second plugin that can be installed in the same wordpress environment, i have to rename all HTML/JQuery classes/selectors and have to update all function names in order to have unique names - is that correct? How do i know if anybody else used some of the selectors.
Is there a possibility to use them twice?
I would make your functions anonymous something like this
$head_css = function() {
$myStyleFile = plugins_url( 'css/a2m_lp.css', __FILE__ ) ;
wp_enqueue_style( 'a2m_lp_stylesheet',$myStyleFile,false,'1.0');
}
or in order to work with wordpress add_action
add_action('wp_enqueue_scripts', function(){
$myStyleFile = plugins_url( 'css/a2m_lp.css', __FILE__ ) ;
return wp_enqueue_style( 'a2m_lp_stylesheet',$myStyleFile,false,'1.0');
});
that way you dont waste namespace and conflicts with other plugins
You can do it like this:
if (!function_exists('my_function')) {
function my_function() {
...
}
}
I recommend declaring the function like that for every plugin that uses it - because the plugins may be called in a different/unexpected order in future.
Additionally, if you can set up your development environment efficiently - for example, creating a single file/library that contains the my_function code, then importing that into each of your plugin projects - it means you will only have once source file to update with any changes in the future, which could make maintenance a lot easier.
I need to access plugins directory in my customer javascript file. I know we have do have functions to retrieve plugins directory path using php function plugins_url().
However, I need this to retrieve in my js file where I have to put some images.
Any ideas??
PS: My js file is saved as a javascript file and therefore, I can't use php tags in it
Use <?php echo plugins_url(); ?> where you want to get the url in the js file.
For example:
var pluginUrl = '<?php echo plugins_url(); ?>' ;
It's actually quite easy...
In functions.php
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array('jquery'), '20151215', true );
$translation_array = array( 'templateUrl' =>get_stylesheet_directory_uri() ); //after wp_enqueue_script
wp_localize_script( 'main', 'jsVars', $translation_array );
then in the js-file:
var sitepath=jsVars.templateUrl+"/";
Edit: Just in case it's not understood completely:
The translation array is created and contains a key value pair
The array is then injected as jsVars (javascript variable) into the js scripts
So basically we (mis)use the translation array to inject variables to JS
with the wp_localize_script command.
off course instead of the templateUrl you can define all the params you want with PHP to inject their values into any js file you want.
In this example we inject the template Url into the main js script via jsVars, but it can be any variable into any js script
I've got the result just by assigning the real plugin url:
let pluginUrl = "../wp-content/plugins/YOUR_PLUGIN_FOLDER_NAME/";
Having problems enqueuing a script in the footer.
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), false, true);
Here's the wp_enqueue_script definition:
wp_enqueue_script(
$handle
,$src
,$deps
,$ver
,$in_footer
);
As you can see I am setting $in_footer to true. This does not work for me. Without that argument it works fine and puts it in header.php. Why doesn't it work with $in_footer?
By default WordPress default JavaScripts won’t move to the footer, a workaround is to add its path :
wp_enqueue_script('jquery','/wp-includes/js/jquery/jquery.js','','',true);
See detailled post about this
Make sure you have the wp_footer() right before the </body> tag. See the $in_footer parameter for more info. You also need to call this before wp_head has run. Try also using this action.
add_action('wp_enqueue_scripts', 'add_scripts_to_pages');
Another thing to try is using NULL as 3rd and 4th parameters.
As an addition to #Nick's answer;
if you have a PHP problem before wp_footer() you wont be able to see your script in footer. Source is https://wordpress.org/support/topic/enqueuing-scripts-in-footer-does-not-working-with-wordpress-36.
To follow on from Nick's reply just wanted to add an example. Add all 5 parameters for the wp_enqueue_script function then the script is loaded in the footer. Adding NULL instead of leaving the parameters blank works here for $deps and $ver.
Reference Format:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
General Example:
wp_enqueue_script('custom-handle-name', get_template_directory_uri() . '/custom-src.js', NULL, NULL, true );
Your Example:
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', NULL, NULL, true);
Source:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/