WordPress: Showing a Random Tagline on Every Page View 🏷️

Do you want to show a new tagline every time you load your blog or switch to a new page? I’m doing it here on this blog (reload and see) and I’ll show you the simplest way to alternate between taglines, with just a few lines of JavaScript (no need to use complex plugins).

Okay, I lied a little… the easiest way to insert JavaScript on your page is to use a plugin. But if you use Insert Headers and Footers (the plugin I’m using for this) you’ll be able to easily add this and any future JavaScript and CSS into the head, body, and footer of your WordPress pages. That means you can use it for more than just this feature. And if you really don’t want to add any plugins, I’ll also show you how to use this simple script for choosing random tag lines by editing your theme files directly.

Using “Insert Headers & Footers” (Recommended)

1. Go to your WordPress admin dashboard → Plugins → Add New. Search for “Insert Headers and Footers”, then click Install Now. When that’s done, click Activate.
   • Any other equivalent plugin that lets you add JavaScript to the footer of your pages (just before the </body> tag) will also work.
2. Go to Settings → Insert Headers and Footers. Select the Scripts in Footer textbox.
3. Add the script tag (shown below), then click Save.

Editing Your Theme Directly

1. Go to your WordPress admin dashboard → Appearance → Theme Editor.
2. In the Theme Files column on the right, select Theme Footer (footer.php).
   • If Theme Footer is not listed, you’re probably using a child theme. In that case you’ll either need to upload your own footer.php via FTP, or first choose your parent theme from the dropdown of themes to edit and then select Theme Footer within the parent theme.
3. In the file content, scroll down to just above the </body> tag (it should be the second to last line in the file, with the last line being </html>) and add the script tag (shown below). Click Update File to save your changes.

Either way, it’s just three steps. But if you use the plugin (described earlier) to add the script, it will continue working even if you change themes in the future or if your theme gets an update and overwrites any manual changes to theme files.

The Script

Here’s the JavaScript code to add. I’ve included a few example taglines from this blog, so change them to your own:

<script>
(function($) {
  // Use a random tagline from this list
  const taglines = [
    'Experiencing a &frac13;-life crisis',
    'Experiments in discovering the good life',
    'Tales from a nomad in training'
  ];
  const random = Math.floor(Math.random() * taglines.length);
  $('.site-description').html(taglines[random]);
})(jQuery);
</script>

Let’s break this down.

const taglines = […] is the array of strings to choose from. You can include as many options as you want. Each of the strings can include HTML, such as formatting tags or the ⅓ (⅓) HTML entity in the first example string above. Just keep two things in mind:

1. Strings start and end with quote marks ('), and all but the last line are followed by a comma.
2. Since the strings use single quote marks, if you want to include an apostrophe / single quote in your string, you’ll need to use ’ or \' to avoid ending the string early.

The next line (starting with const random) chooses a random number between zero and one less than the number of taglines in your list.

Finally, $('.site-description').html(taglines[random]) finds the HTML element on the page with the class site-description (which is where WordPress puts your tagline) and replaces its contents with a random tagline from your list.

By just changing the class this script is targeting for injection (site-description), you could use it to insert a random string anywhere else on your page.

Note that this code relies on jQuery, which WordPress automatically includes in your blog. If for whatever reason you don’t want to rely on jQuery, here’s a modified version of the script for you:

<script>
(function() {
  // Use a random tagline from this list
  const taglines = [
    'Experiencing a &frac13;-life crisis',
    'Experiments in discovering the good life',
    'Tales from a nomad in training'
  ];
  const random = Math.floor(Math.random() * taglines.length);
  document.getElementsByClassName('site-description')[0].innerHTML =
    taglines[random];
})();
</script>

That’s it! Now your visitors will enjoy a new clever tagline every time they load any page on your blog.