Adding javascript file to a wordpress page

Question

I want to add a JavaScript file containing my codes for displaying a Google map application in a WordPress page. In the page I just have a "div" tag which will accommodate the Google Map. How can I link the .js file in the page? Also what will be the best location to place the folder in my server containing the .js file?

Thanks in advance for your answer!

What have you tried already? What happened? Did you try searching the web for answers? — occulus
– occulus, Commented Jul 16, 2014 at 11:26
I tried searching the web, but could not find the solution. I've written the js file for producing the Google Map. Now I want to show that map in a page of my Wordpress site. Can't figure out how to include that js file in the specific page. — Hasan
– Hasan, Commented Jul 16, 2014 at 11:40

Domain · Accepted Answer · 2014-07-12 07:17:25Z

1

on your sever you will must be having a folder with all the wordpress files. In those files you will find folders wp-content > themes > (current theme you are using on the WordPress). Open this folder containing the theme files. Here create a folder to place all your js files. If a folder for js already exists use that one. Now add your js file in that folder. In the folder containing all your theme files you will find a file 'functions.php'. Open this file and add the following code.

add_action( 'wp_enqueue_scripts', 'maps_load_scripts');
function maps_load_scripts(){
  wp_enqueue_script( 'google-maps-js', get_stylesheet_directory_uri().'/(name-of-folder-  containing-all-js-files)/(name-of-your-js-file).js', array('jquery'), '1.0', false);
}

This will load your js file on all the pages. If you want to load the js file on a particular page then all the above code in the condition:

add_action('template_redirect', 'load_js_certain_page');
function load_js_certain_page(){
$page_id = ;// Use the id of the page in WordPress here. You can find the page id from the database or the WordPress backend.
if(is_page($page_id)){
//add the code from the block above here. 
}
}

answered Jul 12, 2014 at 7:17

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hasan Over a year ago

Thanks a lot buddy! I think this is what I was looking for if this works. Should I not use a child theme, and copy the functions.php file and add my js files there?

Domain Over a year ago

Yes, using a child theme will be better. Creating a child theme will prevent your changes from being overwritten at the time of updating the theme. For creating a child theme refer codex.wordpress.org/Child_Themes . If you find my answer useful please accept the answer

Thaveedu · Accepted Answer · 2014-07-11 07:21:20Z

0

First of all , i like to clarify your question a little bit . Do you want the code to be part of a single page or part of the whole template/layout ?

If you want that to be part of a single page/post please refer the below tutorial: http://www.tipsandtricks-hq.com/how-to-add-javascript-in-a-wordpress-post-or-page-1845

Or else if you need it to be part of the whole layout , you should consider making a widget and make changes to the template to accommodate that in place.For making a widget refer this document. http://codex.wordpress.org/Widgets_API

answered Jul 11, 2014 at 7:21

Thaveedu

1311 silver badge9 bronze badges

1 Comment

Hasan Over a year ago

I want the code to be part of a single page. Checking the tutorial. Thanks!

Collectives™ on Stack Overflow

Adding javascript file to a wordpress page

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related