WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Audio Stories to Images in WordPress

How to Add Audio Stories to Images in WordPress

Last updated on December 20th, 2016 by Editorial Staff
132 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Audio Stories to Images in WordPress

Do you want to add audio stories to your images in WordPress? You can use it to add narration to your photographs, or simply create web based audio visual story books. In this article, we will show you how to easily add audio stories to images in WordPress.

How to add audio stories to images in WordPress

First thing you need to do is install and activate the Audio Story Images plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Media » Add New and upload your image and audio file you want to add to the image.

Upload your audio and image files in WordPress

After uploading both files, you need to visit the Media » Library page. Next, click on the list view icon to display your media files in a list.

You will now notice a new column labeled ‘Audio Story’. You need to click on the ‘attach’ link next to the image you just uploaded.

Link image to the audio file

This will bring up a popup where you need to select the audio file you want to attach to the image.

Select your audio file

Go ahead and click on the select button to continue.

The plugin will now link your image and audio file to each other.

Audio and image files linked together

Now that your image is linked to the audio file, you can add it to any WordPress post or page.

Simply edit a post or page where you want to add the image and click on the ‘Add Media’ button.

Add image in a WordPress post or page

This will bring up the media uploader popup.

You need to select the image file you just uploaded and insert it into your post.

Select your image from media library

Once you are satisfied, you can either save or publish your changes.

After that click on the preview button to see your audio story image in action.

Audio story image in WordPress

The plugin will add a tiny volume icon on the top left corner of your image. Clicking on the icon will play the audio file linked to the image.

We hope this article helped you learn how to add audio stories to images in WordPress. You may also want to see our guide on how to find royalty free images for your WordPress blog posts

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

132 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

12 Comments

Leave a Reply
  1. Daniel says:
    Nov 13, 2020 at 4:42 pm

    Are there any ways to customize the play button?

    Reply
    • WPBeginner Support says:
      Nov 16, 2020 at 2:27 pm

      You would want to reach out to the plugin’s support for what customization options are available.

      Reply
  2. Penelope says:
    Dec 11, 2018 at 6:36 pm

    Hey there, I have installed everything as you say but when I click on the image it does not play the audio. I did create the page with Elementor – would that affect it?

    Reply
    • WPBeginner Support says:
      Dec 11, 2018 at 11:56 pm

      Hi Penelope,

      Try creating an audio story in a regular WordPress page.

      Reply
  3. Umeh Chidera says:
    Oct 17, 2018 at 3:16 am

    Please how do I make my site’s logo to be appearing anytime one downloads my music and and plays it. So The image will be appearing in boomplay, how do I do that please?

    Reply
  4. indra says:
    Feb 13, 2018 at 6:11 am

    When the image background is white or any other light color..that volume icon is not visible..
    also if its possible to get different sound for the same image at different places ,then it would be great..!

    Reply
  5. Trelandon says:
    Dec 23, 2016 at 2:54 am

    I always enjoy your reads on WP.

    Reply
  6. George says:
    Dec 21, 2016 at 1:16 pm

    It would have been nice to see an example of this being done in the article so we could gauge the UX.

    Thanks for the explanation but a live example would have helped.

    Reply
    • WPBeginner Support says:
      Dec 22, 2016 at 3:00 pm

      Hi George,

      If you visit the plugin’s page on WordPress.org directory you will find a link to more information with a live demo.

      Reply
  7. Awontis says:
    Dec 21, 2016 at 4:29 am

    As always, wpbeginner has all the answers about WordPress.

    Reply
  8. Marius Haga Skaar says:
    Dec 20, 2016 at 5:01 pm

    Hello. I was wondering if I could get some help. Recently I’ve moved my website from blogger to WordPress. But my problem is Google. I’ve deleted my blogger blogs, but Google seach console still shows my old website or blog. Like Google hasn’t indexed my site, but it has taken many days or even weeks. I was then wondering if there’s a fix to this, so Google would show my newest site in example in the data structure (text marketing or what the name was). Ether way, thanks :) from Marius HS (15 years old from Norway).

    Reply
    • WPBeginner Support says:
      Dec 26, 2016 at 1:15 am

      Hi Marius,

      Did you add your new website to Google Search Console? Also, did you properly redirect your Blogger blog to WordPress? Please take a look at our guide on how to switch from Blogger to WordPress without losing Google rankings.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
IPVanish Coupon
Get 20% OFF on IPVanish, one of the best VPN service providers for bloggers and WordPress users.
Theme Trust
ThemeTrust Coupon
Get 20% off on all ThemeTrust themes brought to you by Henry Jones.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.