How to add sound to text in WordPress

September 13, 2016 in ADVICE

How to add sound to text in WordPress

How to add sound to text in WordPress

How to add sound to text in WordPress

Recently a client requested the ability to add a sound effect to a couple of words inside a WordPress post when the mouse simply ran over it. Thinking this was an interesting idea I quickly searched on Google for an easy solution. It took less than 15 minutes to locate and implement the effect. In this post I will share with you exactly how to add sound to content with mouseover play-ability on your WordPress.

Before I begin, please note that because of the nature of WordPress (primarily TinyMCE), the code required to make this work will be removed automatically if you view your post in Visual mode versus Text mode. For this reason, I have utilized a shortcode plugin which somewhat takes away the chance of forgetting and accidentally erasing the code should you ever edit or view the post in Visual mode.

Step 1

Decide which set of words you want to apply the sound effect to. In my example, you should have been able to hear a guitar sound effect when your mouse ran over the words “the mouse simply ran over it” above.

Step 2

In order to have the sound effect playable on nearly all types of computers and mobile devices we need two versions of the audio file (.mp3 and .ogg). There are various free online audio converters you can use. Once you have your files, upload them to your WordPress media section and copy the links somewhere handy to use in the following steps.

Step 3

So far so good. We will now need to add the script that will handle playing the sound effect in our post. To do this, we utilize the Head & Footer Code plugin. Install the plugin but rather than use the global settings to add the code, you’ll want to use the settings inside the post you’re working on. You should be able to see the Head & Footer Code section somewhere on the bottom section of the post you’re working on once you’ve installed it.

Step 4

In the example below, you can see the Head & Footer Code plugin section (at the bottom of your post) already filled out with the script.

head footer code

Here is the script you’ll need to add to the Header section as you see in the image above.

Step 5

Okay, we’re almost there. In the script we added in Step 4, replace the file names sound.pm3 and sound.ogg with your own file names (from Step 2). You will notice there are two sections depending on if you will have mouseover or clickable. Fill in both of them. So the end part of the script will look similar to this:

Step 6

Now, if you trust yourself and don’t use the Visual mode to edit your posts then skip over to Step 7. If however you wish to somewhat avoid the possibility of accidentally loosing the coding you are about to add in the next step then I recommend installing Shortcoder plugin. Once you’ve installed it you will want to create a shortcode that will look similar to this:


Wrap the words you selected in Step 1 with the < a > tag as shown below. To make things easier name the short code the same words you used in Step 1. Jot down the shortcode as this is what you’ll use to insert into your post.

CAUTION: I mentioned that we are using shortcode to “somewhat” avoid the possibility of accidentally loosing the code we will add in the actual post. Since we are only creating this shortcode once and likely never coming back to it or saving it again, make sure you are in Text mode and all looks as you wish before you save it. Unfortunately as soon as you try to view it in Visual mode the coding is stripped off again so if this happens as long as you don’t save it again you are okay to move to the next step.

Step 7

If you used the shortcode variant, you’ll simply want to add your shortcode in place of the wording you wanted to activate with the sound effect. See example below:

If you are not utilizing the shortcode, then you’ll want to wrap your words directly in your post as seen bellow.

In both cases, you will want to make sure you are in Text mode when editing your post. The good thing about using the shortcode is if you forget and switch back to Visual mode while editing your post, your shortcode will still be there unchanged.

If you made it to this point, you should already have sound in your post. I hope this will bring you and your readers a little excitement… even if it’s only for a short moment. Should you need a hand in implementing this script in your WordPress, contact a professional who will be happy to assist. 🙂


  1. February 9, 2024 at 6:09 pm



    Following the steps was a breeze, and now my content has an extra layer of engagement with sound effects. Super!!

  2. February 6, 2024 at 2:20 am

    Shane Bacon


    Hats off to Bogdan for his invaluable insights on WordPress sound integration, particularly with the Head & Footer Code plugin – it’s truly revolutionized my content!

  3. January 26, 2024 at 10:14 pm



    This article on adding sound to WordPress? It’s a game-changer, man! 🌟 Got my content poppin’ with interactive sound effects in no time! Step-by-step instructions? Straight-up genius. And Shortcoder to protect the code? Brilliant move. Props to the author for sharing these gems! 👏

  4. November 22, 2023 at 4:19 am

    Preston Wehring


    it’s elevated the quality of my website content effortlessly

  5. November 20, 2023 at 1:09 pm

    Barrie Labarr


    I’m truly impressed by this post on WordPress sound integration. It’s incredibly comprehensive and well-explained.

  6. November 14, 2023 at 6:19 pm

    jim olson


    It’s simplified the entire process for me. The step-by-step instructions were easy to follow, and now my posts have an exciting new dimension with sound effects.

  7. November 11, 2023 at 10:34 am



    Remarkable. It’s transformed the way I engage with my audience.

  8. January 20, 2020 at 12:23 pm

    Ander García


    Yes sorry, it is working actually. But the mouse cursor, does not change and sometimes i just tryed to click, but it is when you pass!! Thanks.

  9. January 20, 2020 at 12:22 pm

    Ander García


    Not working

Leave a Reply

Your email address will not be published. Required fields are marked *