- Use the wp_footer or wp_head hooks to add the script inline
- Use a plugin to add header or footer scripts
- Modify your theme to include the script (bad idea)
- Use the WordPress post editor (really bad idea not worth discussing)
The first two options involve using WordPress hooks. I wrote a basic introduction to WordPress hooks previously for our blog. I also covered how to use WordPress hooks in my WordCamp Tampa talk, here are the slides which go over actions and filters:
Obviously these options involve a little bit of custom coding. Depending on what you need that might be worth it. I’ll start with the no code solutions and go from there.
Adding Header And Footer Scripts With A Plugin
These are very simple cut and paste operations. For something simple like this a plugin is a good choice.
Facebook, Google, Twitter or whomever gives you the code and tells you to paste it into your site’s header or footer. For a traditional static HTML site, you would literally paste that code into the HTML header or footer on each page. With WordPress you need to have that code injected into each page’s header and footer programmatically.
There are a lot of plugins out there for header and footer scripts. I recommend the Insert Headers And Footer plugin. It’s simple, easy to use and works.
Don’t Edit Your Theme’s Header or Footer Files
A modification to a theme file will be lost when you update your theme. That’s bad. In addition, if you ever change your theme, you will lose that tracking script, which is also bad. Separating everything that doesn’t have to do with how your site looks from the theme means that when you change how your theme, only the visuals change and you don’t lose important functionality.
This is the equivalent of modifying header.php or footer.php with none of the downsides I discussed in the last section. WordPress actions are type of hooks that allow you to do something when that action is encountered by WordPress. When your theme runs header.php, it should cause the action wp_head to run — probably via the wp_head() function.
All that does is open an alert that says “Hi Roy”, but you could put your own script there to do whatever you wanted.
That’s not hard is it?
A footer script plugin would be almost identical, except you would use the “wp_footer” action.
This is basically what any add header and footer scripts plugin does, just more efficient. Those plugins have to have a user interface, database queries and more. A custom plugin for header and footer scripts is a few minutes more work, but it will save load time and be less hassle over time.
You could just write a normal HTML script include tag into header.php or footer.php but this is bad practice. The wp_enqueue_script system manages the order scripts are loaded, scripts they are dependent on and dynamically generates the URL.
Here is an example of loading a script called “custom-scripts.js” that is in your child theme’s main directory using wp_enqueue_scripts:
Before accepting “works for now” consider the headaches you’re inviting yourself for later by ignoring best practices.
Speaking of which, notice the third argument is an array with one value “jquery.” This tells WordPress that before this script is loaded, to load jQuery. WordPress includes a copy of jQuery. Loading your own version of jQuery can be a risky move and must be done right. Loading an additional copy of jQuery is a bad idea.
Dog and cat images are from WikiCommons. CC) licensed and super adorable.