wordpress custom js in header

Question

I would need to add this specific piece of JS code into the area of a Wordpress powered Website.

    <script type="text/javascript">
    var myDate = new Date();
    var myStamp = ""+myDate.getDate()+myDate.getMonth()+myDate.getFullYear()+myDate.getHours()+myDate.getMinutes();
    document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/abeSVNInfo.js?' + myStamp + '"><\/script>');
    </script>
    <script type="text/javascript">
    document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/ct_abe.js?'+CARTRAWLER.SVNInfo.revision+'"><\/script>');
    </script>
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form'];
    if (!theForm) {
        theForm = document.form;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>

What would be the best way to achieve this?

Are you allowed to change the template, or able to build own plugins or maybe able to create your own theme? There are multiple choices. — Krycke
– Krycke, Commented Aug 2, 2012 at 7:52

Ravi Lautan · Accepted Answer · 2012-08-02 12:09:25Z

In this situation I would say using the WordPress wp_enqueue_script function works best.

Start by putting the JavaScript into a seperate document (ie. cartrawler.js). Put this JavaScript document in your theme (preferably in a /js folder). After that you will tell your theme to use the JavaScript from that folder. The benefit of this method is that it is easier to control when and where the JavaScript should be loaded (like only in the header of the home paga) and it allows for better compatibility for caching with plugins like (Better) WP Minify.

This is how it works:

Make a seperate JavaScript document and store it within your theme folder (ie. theme/js/cartrawler.js):

var myDate = new Date();
var myStamp = ""+myDate.getDate()+myDate.getMonth()+myDate.getFullYear()+myDate.getHours()+myDate.getMinutes();
document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/abeSVNInfo.js?' + myStamp + '"><\/script>');
document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/ct_abe.js?'+CARTRAWLER.SVNInfo.revision+'"><\/script>');

var theForm = document.forms['form'];
if (!theForm) {
    theForm = document.form;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

After you have made the JavaScript document you can add this to your function.php document:

// Enqueue JavaScripts
function theme_scripts() {
    wp_enqueue_script('cartrawler', get_template_directory_uri() . '/js/cartrawler.js', array(), '20120802', '1');
}
add_action('wp_enqueue_scripts', 'theme_scripts');

What we do when calling the JavaScript is the following: We give the JavaScript a name (cartrawler) and tell the function where the source can be found. Afterwards we define any dependencies, luckily we don't have any. After that we add a version number (20120802) and tell the function to load the JavaScript in the footer. It doesn't need to be in the header afterall (thumbsup @Lixus).

Read more about using the wp_enqueue_script function here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Note: Make sure your header.php uses the wp_header() function and that your footer.php uses the wp_footer() function.

Thank you very much rlautan for the detailed explanation! 5 Stars deluxe

Pekka · Accepted Answer · 2012-08-02 07:25:32Z

1

You mean in the front end?

header.php in the template used is usually the right place.

answered Aug 2, 2012 at 7:25

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Comments

Lixus · Accepted Answer · 2012-08-02 07:48:43Z

0

In the Wordpress backend, go to Appearance -> Editor and select the Footer template in the right menu (footer.php).

Then add your code right before the </body> tag.

EDIT: I think it's better to add this code to the footer since it does not wait for the document to load.

edited Aug 2, 2012 at 7:48

answered Aug 2, 2012 at 7:27

Lixus

2964 silver badges12 bronze badges

Collectives™ on Stack Overflow

wordpress custom js in header

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related