CODEWITHSUNDEEP
javascriptwordpress
Patrick Lanfranco
Patrick Lanfranco

Reputation: 309

wordpress custom js in header

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?

Upvotes: 0

Views: 675

Answers (3)

Ravi Lautan
Ravi Lautan

Reputation: 79

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.

Upvotes: 1

Lixus
Lixus

Reputation: 296

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449435

You mean in the front end?

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

Upvotes: 1

Related Questions