CODEWITHSUNDEEP
wordpress
Randy Minder
Randy Minder

Reputation: 48522

How do I insert JavaScript code into a Wordpress site?

I help some of my clients track their site usage by having them insert a little bit of JavaScript code into their header or footer page. I recently had a client tell me he's using Wordpress and "they don't allow scripts". I know nothing about Wordpress as I've never used it. Below is the code I'd like for him to install (modified a bit for brevity and security):

<div>
    <script>
        var wandTopSitesUserId = 28;
        document.cookie = 'SiteMetrics=' + wandTopSitesUserId + '; expires=Tue, 1 Jan 2030 00:00:00 UTC; path=/';

        document.write('<div><a href="http://www.xyxyxyx.com/"><img src="http://www.xyxyxyx.com/Log/LogVisit/?siteId=28&userId=' + wandTopSitesUserId + '&pageName=' + location.pathname + '&userAgent=' + navigator.userAgent + '" alt="Site Metrics" /></a></div>');
    </script>
</div>

The actual code above isn't that important. I just need to know if there is there anything special Wordpress users need to do to install this code?

Also, the user is using Wordpress.com and not Wordpress.org

Upvotes: 0

Views: 450

Answers (4)

markratledge
markratledge

Reputation: 17561

Easiest thing to do is use a simple plugin that allows you and the client to easily add scripts to any WordPress install. This means you can cut and paste a script into a text box, save, and that script will be active.

As per the other answers given: You don't need to enqueue the script in functions.php, as that's overkill. And you don't need to (and should not) modify the theme by adding the script to header.php or footer.php; if you do either of those or add to functions.php, you need to make a child theme - see Child Themes « WordPress Codex - as to not overwrite those changes (and delete the script and any code you added to the theme) when the theme is updated.

Try https://wordpress.org/plugins/header-and-footer-scripts/ to easily add scripts to the site header and footer. You may need to keep the <script> tags around the Javascript; read the docs for the plugin. A simple plugin like this will not slow down the site.

The <div> tags are meaningless, unless you want to style the display, which means you need to give them a class, i.e. <div class="myclass"> and add that style to your style.css in the theme. Once again, if you add anything to theme files, make a child theme.

Upvotes: 0

toomanyredirects
toomanyredirects

Reputation: 2002

For such a small script I wouldn't recommend theme hooks.

You're making an extra HTTP request for a tiny bit of code, and if their server is not very good that could leave the browser waiting for the server hosting the files to send the file back to the browser, thus causing a delay to the script firing.

For this I'd put it directly in the footer.php file inside the active theme (wp_content/themes/<theme_name>). Place the code just above the </body> tag to ensure there's no delay to the main site loading (not that the script you've sent over would delay page load as far as I can tell).

Upvotes: 0

frollo
frollo

Reputation: 1374

I'm pretty junior as a Wordpress developer, but to my knowledge and experience as far as you put that code inside the header.php file of the current theme there should be no problem on the short term.

Of course, if the theme is developed by a third party which is going to update it you will lose the code, the quick (but not the most elegant) way to avoid this problem is to create a child theme from the current theme and add that code. If you are willing to spend some more time on that client (or you suspect you will have more client using Wordpress), the best solution is to develop a plugin, which can be installed apart from the theme and will survive any theme update.

Upvotes: 0

DpEN
DpEN

Reputation: 4364

Using hooks you can insert your scripts into your header or footer. Its rather easy. Don't think of it in complex way.

For the Script to be in the header simply use following hook 

add_action('wp_head', 'some_function_name');

The function name is the function that is defined in your functions.php for example.

function.php file

function some_function_name() {
?>
<script>//Your Normal JS Code</script>
<?php
}

And similarly, to add your script in footer you just have to do following.

add_action('wp_footer', 'some_function_name');

Where your function is defined in your functions.php file

See codex for more info: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head https://codex.wordpress.org/Function_Reference/wp_footer

For more info on Hooks: http://wpcandy.com/teaches/how-to-use-wordpress-hooks/

Upvotes: 2

Related Questions