Include JS scripts in header.php only if template.php is used WordPress
- SOLVED
Hello,
I'm using this code within header.php:
<?php if (!is_page_template('template_file.php')) {?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/1.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/2.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/3.js"></script>
<?php } ?>
As you can see I'm trying to get those files to load only if a specific template is being used.
However, it doesn't work, the files are also loaded on other pages.
Looking for a solution to get this to work.
Answers (11)
Denzel Chia answers:
Hi,
Daryl's answer is almost correct.
You will need to register the scripts first, then enqueue using is_page_template() conditional function.
You will need to change the action hook to template_redirect.
This is because is_page_template() function works only after this WordPress hook, does not work in wp_enqueue_scripts hook.
This approach is totally compatible with third party plugins enqueueing scripts, we have always been using this approach for our company's premium theme, which is one of the top 10 seller on themeforest.net
Use get_stylesheet_directory_uri() only if the js files are residing in child theme, if not, use get_template_directory_uri()
This is because get_stylesheet_directory_uri() will point to child theme directory if it is activated.
What I mentioned here cannot be found on any WordPress codex pages..
So the codes should be as follows;
function my_enqueue_scripts() {
wp_register_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
wp_register_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
wp_register_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
if( is_page_template( 'template_file.php' ) ) :
wp_enqueue_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
wp_enqueue_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
wp_enqueue_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
endif;
}
add_action( 'template_redirect', 'my_enqueue_scripts' );
Thanks!
Denzel
Navjot Singh answers:
Shouldn't it be if (is_page_template('template_file.php')) ? Your code has the condition reversed. That ! is not needed.
Edwin comments:
Tried it, but now the files don't load at all.
Also, this is a child theme, and the file is a custom template in the child theme folder.
Don't know if that could play a role.
Navjot Singh comments:
Try this:
<?php if (is_page_template('template_file.php')) {?>
<script type="text/javascript" src="<?php get_stylesheet_directory(); ?>/js/1.js"></script>
<script type="text/javascript" src="<?php get_stylesheet_directory(); ?>/js/2.js"></script>
<script type="text/javascript" src="<?php get_stylesheet_directory(); ?>/js/3.js"></script>
<?php } ?>
Edwin comments:
That is the same code?
Navjot Singh comments:
Nope. I changed the way to call the location of the js file. Can you please try and see if this works?
Edwin comments:
Sorry Navjot, no success.
Navjot Singh comments:
Try is_page('page-slug') instead of is_page_template('template_file.php') and use the page_slug of the page using this template.
Edwin comments:
Sorry, page slug is not an option, this template is being for listings. So there is no constant slug.
AdamGold answers:
Code of the function is taken from Denzel, different call of action and the statement is moved to out of the function to better functionality :
function my_enqueue_scripts() {
wp_register_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
wp_register_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
wp_register_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
wp_enqueue_script('js-1');
wp_enqueue_script('js-2');
wp_enqueue_script('js-3');
}
if (is_page_template( 'template_file.php' )) {
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
}
Add this to your <strong>functions.php</strong> please.
Jatin Soni answers:
This code I have tested and working completely fine with me.
<?php
if ( !is_page_template('tpl-file-name.php') ) { ?>
<h1>Your code here</h1>
<?php }
?>
Edwin comments:
Thanks Jatin,
Unfortunately it shows up on other pages as well.
Jatin Soni comments:
Can I have access to have a look once?
Jatin Soni comments:
I just learn that is_page_template() doesn't work in <head> tag. It's really strange. Let me try few more things if it can helps
paul de wouters answers:
in functions.php
add_action('wp_enqueue_scripts', 'my_load_scripts');
function my_load_scripts(){
if( is_page_template('template_file.php')){
wp_enqueue_script('first-script', get_stylesheet_directory_uri() . '/js/1.js');
}
}
Sébastien | French WordpressDesigner answers:
$list = get_posts('meta_key=_wp_page_template&meta_value!=template_file.php');
if (in_array ($post->ID, $list) {?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/1.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/2.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/3.js"></script>
<?php } ?>
$list is an array containing all ID of pages not using the template template_file.php
Edwin comments:
Sorry, that's not a practical solution.
Sébastien | French WordpressDesigner comments:
yes it is.
Why do you say that ?
Sébastien | French WordpressDesigner comments:
ok... it seems that there is a big big problem with the function is_page-template ^^
So you can add this code in your file functions.php
function my_enqueue_scripts() {
//global $post;
if ((is_page_template()) AND (get_page_template_slug($post->ID)=="template_file.php")) {
wp_enqueue_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
wp_enqueue_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
wp_enqueue_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
}
}
add_action( 'template_redirect', 'my_enqueue_scripts' );
in this case you add the js only in the page using template_file.php
or you can add this code :
function my_enqueue_scripts() {
//global $post;
if ((is_page_template()) AND (get_page_template_slug($post->ID)!="template_file.php")) {
wp_enqueue_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
wp_enqueue_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
wp_enqueue_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
}
}
add_action( 'template_redirect', 'my_enqueue_scripts' );
in this case you add the js only in the page not using template_file.php
and if you remove the condition (is_page_template()) you can add the js in all page & post using (or not using) the template template_file.php
Sébastien | French WordpressDesigner comments:
more details :
function my_enqueue_scripts() {
//global $post;
if(is_page_template()) { //if the page use a template page
if (get_page_template_slug($post->ID)!="template_file.php") { //AND this template page is NOT template_file.php
wp_enqueue_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
}
if (get_page_template_slug($post->ID)!="template_file.php") { //AND this template page is template_file.php
wp_enqueue_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
}
}
if (get_page_template_slug($post->ID)!="template_file.php") { //if it is a page OR a post or a category... and this template template_file.php is not used
wp_enqueue_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
}
}
add_action( 'template_redirect', 'my_enqueue_scripts' );
Daryl Lozupone answers:
You should be including scripts using the wp_enqueue_scripts function, as follows:
function my_enqueue_scripts() {
if( is_page_template( 'template_file.php' ) ) :
wp_enqueue_script( 'js-1', get_stylesheet_directory_uri() . '/js/1.js' );
wp_enqueue_script( 'js-2', get_stylesheet_directory_uri() . '/js/2.js' );
wp_enqueue_script( 'js-3', get_stylesheet_directory_uri() . '/js/3.js' );
endif;
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
This function is added to your functions.php in the child theme directory. This ensures scripts are only loaded once.
Let me know if you hace any more questions.
Edwin comments:
Hi Daryl,
I'm getting a parse error:
Parse error: syntax error, unexpected ':', expecting ';' in
That is the line with: endif:
Daryl Lozupone comments:
Edwin--
Ah, yes. It should be a semi-colon. My apologies. I have edited my answer to reflect the change.
Edwin comments:
Added a ; instead of : and no parse error now, but the scripts are not loading.
Daryl Lozupone comments:
Edwin--
Is it a "File not found" error? You may need to use the code as updated in my original post.
Is there a URL at which we can see the page in question?
Edwin comments:
No, not File not found error, there is no indication of the .js files being present that should be loaded in the header tags.
Sorry, working locally.
Daryl Lozupone comments:
Edwin--
Providing the conditional statement is properly crafted and that the location of the scripts is in the 'js' subdirectory of the top level of the theme directory, the scripts will be loaded appropriately.
I am afraid there is not much more I can do without seeing the page in question. However, I am happy to continue to answer questions you may have.
--Daryl
Clifford P answers:
Daryl is correct. Any of these <script></script> codes is not WordPress proper implementation: [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]] Just because something works doesn't mean it's correct. Reply to Daryl if you have more questions.
Daniel Yoen answers:
complete guide : http://codex.wordpress.org/Function_Reference/is_page_template
Abdelhadi Touil answers:
Hi.
I think this link may help you:
http://wordpress.org/support/topic/selectively-loading-javascript-files-by-page
and this link for more information:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Good luck.
Abdelhadi Touil comments:
I'v found this link:
http://www.fldtrace.com/wordpress/load-javascript-on-specific-pages-in-wordpress
it's a way to load js files just in specific pages, so if there is noway to load only if template.php is loaded, you can use the method described in the link above to just load js files in all pages using template_file.php.
Hope this helps you.
Arnav Joy answers:
try this
<?php
wp_reset_query();
$template = get_post_meta( get_the_ID(), '_wp_page_template', true );
if ($template == 'template_file.php' ) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/1.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/2.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/3.js"></script>
<?php } ?>