Explore TF-IDF with a sliding chart!
January 15, 2020
Show all

Adding custom code to a specific page on your wordpress site.

When you build a wordpress site you often do so using plugins. Plugins are great, they make it easy to add complicated functions to your site without having to do any development, just a little configuration. But what do you do if you need to get some functionality onto your wordpress site which isn’t covered by a plugin? In this case you need to add some custom code to your site, be that css, javascript, or html.

We came across this problem recently whilst developing our post on the TF-IDF function. The solution was simple:

  1. Install the Scripts and Styles plugin.
  2. Code the solution and save it in a file
  3. Upload the file to the wp-content folder of your website
  4. Reference the file in the html section of the scripts and styles plugin like so:
<script src="/wp-content/my-file"></script>

Whether you put the reference in the head or bottom of the body depends on whether or not you need the script to have been loaded before or after the page has finished loading. If it is critical in some way to the way the page loads then put it in the head, otherwise put it at the bottom. Putting it in the head will slow the page load speed.

You can type the code directly into scripts and styles, which would mean that you didn’t have to work with a local file on the server, but we try to use elm for adding custom features to our site because of its simplicity and incredible reliability, which necessitates adding a file.