WP - How to add a script to a specific page - CSS-Tricks - Page 2

This topic is empty.

Viewing 15 posts - 16 through 30 (of 39 total)

← 1 2 3 →

Author

Posts
September 7, 2014 at 1:49 pm #182069

chrisburton
Participant

@taxicss I know that but where in the page is it showing up.

View source and tell me if it’s in the footer or between <head>...</head>

September 7, 2014 at 1:59 pm #182070

taxicss
Participant

@chrisburton Sorry, yes it’s between the <head>…</head>

September 7, 2014 at 2:12 pm #182071
chrisburton
Participant
@taxicss

https://gist.github.com/christopherburton/6d0b02d13ce811690683

All you need to do is edit line 16 and replace $templateName with the name of the template (e.g. is_page_template('single-something.php')).

On line 17 change the path to where the file is.

Original
```
<?php if(is_page_template($templateName)): ?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/yourscript.js"></script>
<?php endif; ?>
```
Updated (example)
```
<?php if(is_page_template($templateName)): ?>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/googlemaps.js"></script>
<?php endif; ?>
```
September 7, 2014 at 2:23 pm #182072

taxicss
Participant

@chrisburton Thank you for your time and knowledge. Appreciate it so much. Surely I’ll be back asking again as I’m new and learning and I’m trying to start with the best practices. Thanks.

September 7, 2014 at 2:26 pm #182073

chrisburton
Participant

The WordPress docs site is actually one of the few that explain things quite well. Check them out.

September 7, 2014 at 5:23 pm #182076
Senff
Participant
Most of it is right, but this is the <strike>wrong</strike> easy way of adding scripts. The WordPress way is to actually do it in a plugin or in functions.php using the wp_register / wp_enqueue function.

But, since @chrisburton helped you to get things working (and “don’t fix it when it ain’t broke), I won’t go into it into too much detail. ;)

Just for future reference though, this would be the “proper” way:
```
function load_google_script() {
    wp_enqueue_script( 'someName', get_template_directory_uri() . '/js/googlemaps.js', array(), '1.0.0', true );

    if(is_page_template($templateName)) {
        wp_enqueue_script( 'someName' );
    }

}
add_action( 'wp_enqueue_scripts', 'load_google_script' );
```
September 7, 2014 at 5:27 pm #182078

chrisburton
Participant

Just for future reference though, this would be the “proper” way: – @Senff

If that is the proper way then, by all means, I would go with that. It’s been a long time since I’ve used WordPress so forgive me!

September 7, 2014 at 5:45 pm #182080

Senff
Participant

Well, it’s the “proper” way, but it’s also a lot more complex than just writing a script src=. So yeah, on one hand I would definitely suggest to use the right way, but sometimes it’s just one script, in a very custom site, and it doesn’t matter that much. It depends. :)

Also, I didn’t really look into the details of the template name and conditional statement, so it probably has to be added to the function.

OK now I feel like I may have overcomplicated things way too much already!

September 7, 2014 at 6:30 pm #182081

chrisburton
Participant

OK now I feel like I may have overcomplicated things way too much already! – @Senff

I disagree. I think you’ve hit the nail on the head.

With regards to WordPress, the way I see it is if you’re going to use this as a CMS, you’re better off doing things the right way or things can get complicated more than it already is (structurally). This generally holds true for all development and programming especially when there’s a strong possibility that you will end up educating others.

September 7, 2014 at 11:17 pm #182098

taxicss
Participant

@Senff Your code goes into the functions.php, is it correct?

Edit: Sorry I miss the line. Yes it should either be a plugin or functions.php

Thanks.

September 8, 2014 at 6:00 am #182125
taxicss
Participant
@Senff Your code doesn’t seem to work but if I remove the conditional if(is_page_template…), it works. This is my final code
```
// add google maps
  function load_google_script() {
    wp_register_script( 'googleapi', "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false");
    wp_register_script( 'googlemaps', get_template_directory_uri() . '/js/googlemaps.js', array(), '1.0.0', true );

    if(is_page_template('single-branches.php')) {
        wp_enqueue_script( 'googleapi' );
        wp_enqueue_script( 'googlemaps' );
    }
  }
  add_action( 'wp_enqueue_scripts', 'load_google_script' );
```
September 8, 2014 at 6:25 am #182127

Senff
Participant

In a default WordPress install, jQuery is already called from its own library. The code above removes that and calls it from the Google CDN.

Keep in mind that whatever you add in functions.php, will be only for that specific theme. For better portability (and even more complexity….), put it in a plugin.

EDIT: sorry, this was a reply to a post that I thought was recent, but it wasn’t. It applied to the last post of page 1. Sorry!

September 8, 2014 at 6:51 am #182128

taxicss
Participant

@Senff What exactly am I missing with my code because it’s not really working. As I said it only works if I enqueue it outside the if(‘…’). Thanks

September 8, 2014 at 7:28 am #182131

Senff
Participant

Hmmmyea I’ve been trying it and I can’t seem to be able to get the template name within functions.php. Not sure why, maybe I’m overlooking something simple. Have to look a little more into it…..

September 8, 2014 at 7:44 am #182132

chrisburton
Participant

You wouldn’t need an if statement. is_page_template(templateName) will only load the maps script if it matches.
Author

Posts

Viewing 15 posts - 16 through 30 (of 39 total)

← 1 2 3 →

The forum ‘Back End’ is closed to new topics and replies.