How do I insert JavaScript code into a Wordpress site?

Question

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

wordpress.com simply doesn't allow Javascript: en.support.wordpress.com/code/#javascript — markratledge
– markratledge, Commented Mar 18, 2016 at 16:52

DpEN · Accepted Answer · 2016-03-18 15:32:53Z

2

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/

answered Mar 18, 2016 at 15:32

DpEN

4,3743 gold badges19 silver badges27 bronze badges

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

Comments

toomanyredirects · Accepted Answer · 2016-03-18 15:37:24Z

0

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).

answered Mar 18, 2016 at 15:37

toomanyredirects

2,00216 silver badges23 bronze badges

6 Comments

Randy Minder Over a year ago

I just found out the user is using Wordpress.com and not Wordpress.org. Does this make a difference?

toomanyredirects Over a year ago

Yes, they can't edit themes nor can they install plugins. I don't think you'll be able to get that code inserted on a wordpress.com site.

markratledge Over a year ago

You should make a child theme before modifying themes: codex.wordpress.org/Child_Themes

toomanyredirects Over a year ago

@markratledge it's wordpress.com, they can't do that

KRITSANA VIENG IN Oct 6 at 11:42

@TOMMYS657229; Hi,

KRITSANA VIENG IN Oct 6 at 11:47

tommy657229.wordpress.com tommy657229.wordpress.org

frollo · Accepted Answer · 2016-03-18 15:35:37Z

0

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.

answered Mar 18, 2016 at 15:35

frollo

1,3841 gold badge13 silver badges30 bronze badges

Comments

markratledge · Accepted Answer · 2016-03-18 15:49:03Z

0

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.

answered Mar 18, 2016 at 15:49

markratledge

17.6k12 gold badges65 silver badges108 bronze badges

2 Comments

Randy Minder Over a year ago

I just found out the user is using Wordpress.com and not Wordpress.org. Does this make a difference?

markratledge Over a year ago

Big difference; they simply don't allow Javascript: en.support.wordpress.com/code/#javascript

Collectives™ on Stack Overflow

How do I insert JavaScript code into a Wordpress site?

4 Answers 4

Comments

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related