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

(8 days ago)
RT @Netlify: ⚡️Announcing that we have raised an additional $30m led by @kpcb’s Mamoon Hamid, with @a16z and the founders of @SlackHQ @Yelp…

(16 days ago)
CSS Filter Playground https://t.co/ZOl7SOGI5S

(16 days ago)
“5 steps to speed up your image heavy website” by @BrandonMorelli https://t.co/UE1G7EQjlQ

(21 days ago)
“How browser rendering works — behind the scenes” by @OhansEmmanuel https://t.co/NJY1YzEgU4

Top of page