Exclude script on certain wordpress template

Posted: 29 June 2014, Category: WordPress

Exclude scripts in WordPress

Are you developing websites using very popular WordPress content management system?

If so you might be having a page with certain template which has specific style pulled from specific stylesheet or script.

In this post I will show you a bit of code which will include Google map scripts on certain templates such as contact-page-template.php

Let's say we have file called contact-page-template.php which contains Google map and we want all script related to google map to be loaded only with this template and no other.

In order to get google map working we need to implement following:

  1. Create div tag with id="map-canvas" in contact-page-template.php file
  2. Include Google map API script preferably before closing body tag.
  3. Include custom script which needs to go after Google map API script which will target id="map-canvas" and trigger Google map API with preset parameters.

I will strip all code from templates as much as possible to keep this post easy to understand and avoid confusion.

Code for contact-page-template.php

Template Name: Contact page template

<?php get_header(); ?>

    <h1><?php the_title(); ?></h1>
    <div id="map-canvas">
        <!-- google map here -->
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	    <?php the_content(); ?>			

    <?php endwhile; ?>

<?php get_footer(); ?>

Code above starts by identifying template name in my case Contact page template. It also contains div tag with id="map-canvas" and get_footer(); function which will include footer.php file with all its code and other WordPress code which I'm not going to explain here as I would like to stay focused on post topic.

Code for footer.php

    <p>Some text in footer area.</p>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scripts.js"></script>
    if ( is_page_template('contact-page-template.php') ) {
        echo '<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>';
        echo "\r\n";
        $string =  get_bloginfo('template_url');
        echo "<script src='".$string."/js/google-map.js></script>";

File called footer.php contains footer element, link to script.js file which is located inside js folder and custom function which tells WordPress to load Google map script only if file called contact-page-template.php is loaded.

TIP: I always keeps all style links between head tags and script links before closing body tag as this is proven to improve overall site speed.

Please feel free to contact me if you have any questions, comments or suggestions.

Back to Blog page

Blog categories

Twitter feed

(1 day ago)
RT @SavingDylan_com: Dylan enjoying the weather on a after his surgery in June. Dylan will have a VIP visitor next week from the USA pleaseā€¦

(6 days ago)
CSS Radio Button Styles From CodePen https://t.co/FNBvXAblo6

(22 days ago)
Github Stars !== Usage: React is still blowing Vue and Angular Away https://t.co/KybO16U0Vs

(about 1 month ago)
Speak out against the cruel Yulin dog meat festival via @HSIGlobal. https://t.co/j6NEh9oJWl

Top of page