I need to insert jquery code into wordpress theme header

Question

I'm trying to convert links from linkshare to itunes links and the only way to do it massively is by inserting this lines of jQuery code in my wordpress theme header

$(document).ready(function() {
    // READ THIS!!
    // START OF REQUIRED CHANGES
    // you MUST change this value to one for your georiot account TSIDs
    var tsid = 2062;
    // END OF REQUIRED CHANGES
    // DO NOT MODIFY BELOW THIS LINE
    convertToGeoRiotLinks(tsid);

});

function convertToGeoRiotLinks(tsid) {
    var numberOfLinks = document.links.length;
    var currentLinkIndex = 0;

    for (currentLinkIndex = 0; currentLinkIndex < numberOfLinks; currentLinkIndex++) {
        var currentLink = document.links[currentLinkIndex];
        var linkType = getLinkType(currentLink.href);

        if (linkType == "apple" || linkType == "amazon") {
            currentLink.href = "http://target.georiot.com/Proxy.ashx?TSID=" + tsid + "&GR_URL=" + encodeURIComponent(currentLink.href);
        } else if (linkType == "linkshare" || linkType == "tradedoubler" || linkType == "dgmperf") {
            var itunesUrl = extractItunesLinkFromAffiliateUrl(currentLink, linkType);

            if (itunesUrl != "") {
                currentLink.href = "http://target.georiot.com/Proxy.ashx?TSID=" + tsid + "&GR_URL=" + itunesUrl;
            }
        } else
            continue;
    }
}

function extractItunesLinkFromAffiliateUrl(currentLink, linkType)
{
    if (currentLink.href.indexOf("?") > 0)
    {
        var arrParams = currentLink.href.split("?");
        var arrURLParams = arrParams[1].split("&");     
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);    
        var i = 0;
        for (i=0;i < arrURLParams.length;i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "") {
                arrParamValues[i] = sParam[1];

                if (linkType == "tradedoubler" && arrParamNames[i] == "url") {
                    return arrParamValues[i];
                } else if (linkType == "linkshare" && arrParamNames[i] == "RD_PARM1") {
                    return arrParamValues[i];
                } else if (linkType == "dgmperf" && arrParamNames[i] == "u") {
                    return arrParamValues[i];
                }
            } else
                arrParamValues[i] = "";
        }
    }
    return "";
}

/* Returns link type: unknown, amazon, apple, linkshare, dgm, tradedoubler
    */
function getLinkType(currentLinkHref) {
    var appleRegex = /itunes.apple.com\/\S+id[0-9]+/i;
    var tradeDoublerRegex = /clk[uk]*\.tradedoubler\.com\S*\?\S*url=[https%3A%2F%2F|http%3A%2F%2F]*\itunes\.apple\.com/i;
    var linkshareRegex = /click\.linksynergy\.com\S*?\S*RD_PARM1=[https%3A%2F%2F|https%253A%252F%252F|http%253A%252F%252F|http%3A%2F%2F]*\itunes\.apple\.com/i;
    var dgmPerfRegex = /t.dgm-au.c\S+\?+\S*u=[https%3A%2F%2F|http%3A%2F%2F|https%253A%252F%252F|http%253A%252F%252F]*\itunes\.apple\.com/i;
    var amazonRegex = /\.amazon\./;

    if (appleRegex.test(currentLinkHref))
        return "apple";
    else if (tradeDoublerRegex.test(currentLinkHref))
        return "tradedoubler";
    else if (linkshareRegex.test(currentLinkHref))
        return "linkshare";
    else if (dgmPerfRegex.test(currentLinkHref))
        return "dgmperf";
    else if (amazonRegex.test(currentLinkHref))
        return "amazon";
    else
        return "unknown";
}

The result is offline code in the page header when it's loads How to do it correctly without any conflicts , Thanks

Answer 1

The correct way to do this in WordPress is to use wp_register_script() and wp_enqueue_script() to make sure you meet all your dependencies and don't cause any conflicts.

You should make a file in your theme directory and save your .js code there, let's call it custom.js for the sake of an example. You would then need to open the functions.php file in your theme and add this code:

function my_custom_javascript() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . 'custom.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'my_custom_javascript' );

This will tell WordPress that you would like it to look up a javascript file located in the theme directory and called 'custom.js'. Then it adds a hook to wp_enqueue_scripts, which is when WordPress looks up all the scripts you will need and includes them in your page, and includes your custom script along with the rest of them.

It looks like you might have a jQuery dependency -- you can let WordPress know that your custom script relies on jQuery by adding 'jquery' as an item in the array in wp_enqueue_script(), so it looks like this:

wp_enqueue_script( 'script-name', get_template_directory_uri() . 'custom.js', array( 'jquery' ), '1.0.0', true );