Below, you’ll find a detailed guide on how to add the Audio Album Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Audio Album Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Audio Album Plugin and the shortcodes it provides:
"Audio Album is a WordPress plugin designed to make the management and display of your audio files simple. With this plugin, you can create, organize, and customize your audio content with ease."
- [audioheading]
- [audioalbum]
- [audiotrack]
Audio Album [audioheading] Shortcode
The Audio Album shortcode is a versatile tool for customizing your audio content. It allows you to add a title, label, and catalog number to your audio files, and even change the background color. The ‘audioheading’ shortcode uses the ‘cc_audioheading_shortcode’ function which enqueues the ‘audioalbum’ style and accepts parameters like ‘title’, ‘label’, ‘catalog’, and ‘bgcolor’. The parameters are sanitized for security purposes. The ‘bgcolor’ parameter, if specified, adds an inline style for the background color. The output is an HTML string that includes the title, label, and catalog number, all styled according to the passed parameters.
Shortcode: [audioheading]
Parameters
Here is a list of all possible audioheading shortcode parameters and attributes:
title– Defines the heading of the audio album.label– Provides additional information about the audio album.catalog– Specifies the catalog number of the audio album.bgcolor– Sets the background color for the heading and label.
Examples and Usage
Basic example – A simple usage of the shortcode to display an audio heading with a title.
[audioheading title="My First Album" /]Advanced examples
Using the shortcode to display an audio heading with a title, label, and catalog information. This gives more detailed information about the audio file.
[audioheading title="My First Album" label="Rock" catalog="CAT001" /]Utilizing the shortcode to display an audio heading with a title, label, catalog information, and a custom background color. This allows for more visual customization of the audio heading.
[audioheading title="My First Album" label="Rock" catalog="CAT001" bgcolor="#ff0000" /]PHP Function Code
In case you have difficulties debugging what causing issues with [audioheading] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'audioheading', 'cc_audioheading_shortcode' );Shortcode PHP function:
function cc_audioheading_shortcode( $atts, $content = null ) {
wp_enqueue_style( 'audioalbum' );
$args = shortcode_atts( array(
'title' => '',
'label' => '',
'catalog' => '',
'bgcolor' => '',
), $atts, 'audioheading' );
// sanitize the args
$args['title'] = sanitize_text_field( $args['title'] );
$args['label'] = sanitize_text_field( $args['label'] );
$args['catalog'] = sanitize_text_field( $args['catalog'] );
//* initialize vars for bgcol
$inlinestyle = ''; //* string to add inline style (or not)
$bgcolset = ''; //* class to enable js to find out that a colour has been set in the shortcode
//* If a bgcolor is specified it will be added as an inline style and add bgcolset class so it can be ignored by the customizer preview
if ( $args['bgcolor'] ) {
$inlinestyle = ' style="background: ' . cc_sanitize_hex_color( $args['bgcolor'], '#434a54' ) . '"';
$bgcolset = ' bgcolset';
}
$output = '<h1 class="audioheading' . $bgcolset . '"' . $inlinestyle . '>' . $args['title'] . '</h1><p class="audioheading' . $bgcolset . '"' . $inlinestyle . '>' . $args['label'] . ' <span>' . $args['catalog'] . '</span></p>';
return $output;
}
Code file location:
audio-album/audio-album/audio-album.phpAudio Album [audioalbum] Shortcode
The ‘audioalbum’ shortcode is used to display an audio album with customizable features. It takes parameters like ‘title’, ‘detail’, ‘date’, and ‘bgcolor’ to personalize the album. This PHP function generates an HTML output with the album title, details, and date, along with a customizable background color. If ‘bgcolor’ is specified, it’s applied as inline style.
Shortcode: [audioalbum]
Parameters
Here is a list of all possible audioalbum shortcode parameters and attributes:
title– sets the title of the audio albumdetail– provides additional information about the albumdate– indicates the release date of the albumbgcolor– changes the background color of the album section
Examples and Usage
Basic example – A simple use of the audioalbum shortcode to display an album with a title.
[audioalbum title="My Favorite Album" /]Advanced examples
Using the audioalbum shortcode to display an album with a title, details, and a specific date.
[audioalbum title="My Favorite Album" detail="This album includes my favorite tracks" date="2022-02-25" /]Using the audioalbum shortcode to display an album with a title, details, a specific date, and a background color.
[audioalbum title="My Favorite Album" detail="This album includes my favorite tracks" date="2022-02-25" bgcolor="#434a54" /]PHP Function Code
In case you have difficulties debugging what causing issues with [audioalbum] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'audioalbum', 'cc_audioalbum_shortcode' );Shortcode PHP function:
function cc_audioalbum_shortcode( $atts, $content = null ) {
$args = shortcode_atts( array(
'title' => '',
'detail' => '',
'date' => '',
'bgcolor' => '',
), $atts, 'audioalbum' );
// sanitize the args
$args['title'] = sanitize_text_field( $args['title'] );
$args['detail'] = sanitize_text_field( $args['detail'] );
$args['date'] = sanitize_text_field( $args['date'] );
//* initialize vars for bgcol
$inlinestyle = ''; //* string to add inline style (or not)
$bgcolset = ''; //* class to enable js to find out that a colour has been set in the shortcode
//* If a bgcolor is specified it will be added as an inline style and add bgcolset class so it can be ignored by the customizer preview
if ( $args['bgcolor'] ) {
$inlinestyle = ' style="background: ' . cc_sanitize_hex_color( $args['bgcolor'], '#434a54' ) . '"';
$bgcolset = ' bgcolset';
}
$output = '<h2 class="audioalbum' . $bgcolset . '"' . $inlinestyle . '>' . $args['title'] . '</h2>'
. '<p class="audioalbum' . $bgcolset . '"' . $inlinestyle . '>' . $args['detail'] . '<span>' . $args['date'] .'</span>' . do_shortcode($content) . '</p>';
return $output;
}
Code file location:
audio-album/audio-album/audio-album.phpAudio Album [audiotrack] Shortcode
The ‘audiotrack’ shortcode from the Audio Album plugin enables the user to embed an audio track within a WordPress post or page. The shortcode accepts multiple attributes such as ‘title’, ‘songwriter’, ‘src’, and ‘mp3’ among others. These attributes allow users to customize the audio track’s display, including the title, songwriter, and audio source. The shortcode also handles the enqueueing of necessary scripts and styles, ensuring the audio player functions correctly. The output is a neatly formatted audio track embedded in the user’s content.
Shortcode: [audiotrack]
Parameters
Here is a list of all possible audiotrack shortcode parameters and attributes:
title– Determines the title of the audio track.width– Sets the width of the popup window.height– Sets the height of the popup window.songwriter– Describes the songwriter of the audio track.buttontext– Defines the text of the button link.buttonlink– Sets the URL for the button link.preload– Controls how the audio file is preloaded.src– Specifies the source URL for the audio track.mp3– Specifies the MP3 source URL for the audio track.ogg– Specifies the OGG source URL for the audio track.wma– Specifies the WMA source URL for the audio track.m4a– Specifies the M4A source URL for the audio track.wav– Specifies the WAV source URL for the audio track.loop– Determines if the audio track should loop.autoplay– Determines if the audio track should autoplay.
Examples and Usage
Basic example – Here, the shortcode is used to display an audio track with a predefined title and source file.
[audiotrack title="My Song" src="http://example.com/my-song.mp3" /]Advanced examples
1. In this example, the shortcode is used to display an audio track with multiple audio file formats for better browser compatibility. The ‘preload’ attribute is also set to ‘auto’ to start loading the audio file as soon as the page loads.
[audiotrack title="My Song" mp3="http://example.com/my-song.mp3" ogg="http://example.com/my-song.ogg" wav="http://example.com/my-song.wav" preload="auto" /]2. This example shows how to use the shortcode to display an audio track with a songwriter attribute. The ‘buttonlink’ and ‘buttontext’ attributes are used to display a button that links to the lyrics of the song.
[audiotrack title="My Song" src="http://example.com/my-song.mp3" songwriter="John Doe" buttonlink="http://example.com/my-song-lyrics" buttontext="Lyrics" /]3. This example demonstrates how to use the ‘loop’ and ‘autoplay’ attributes to automatically start playing the audio track as soon as it’s loaded and loop it indefinitely.
[audiotrack title="My Song" src="http://example.com/my-song.mp3" loop="true" autoplay="true" /]PHP Function Code
In case you have difficulties debugging what causing issues with [audiotrack] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'audiotrack', 'cc_audiotrack_shortcode' );Shortcode PHP function:
function cc_audiotrack_shortcode( $atts, $content = null ) {
wp_enqueue_script( 'audioalbum' );
wp_enqueue_style( 'audioalbum' );
wp_enqueue_style( 'dashicons' );
$lyricslink= '';
$popupbutton = '';
$cc_siteurl = get_bloginfo('url');
$args = shortcode_atts( array(
'title' => '',
'width' => '520',
'height' => '400',
'songwriter' => '',
'buttontext' => 'lyrics',
'buttonlink' => '#',
'preload' => 'metadata',
'src' => '',
'mp3' => '',
'ogg' => '',
'wma' => '',
'm4a' => '',
'wav' => '',
'loop' => '',
'autoplay' => '',
), $atts, 'audiotrack' );
$wpaudioshortcode = 'audio';
$args['title'] = esc_attr( $args['title'] );
$args['buttontext'] = esc_attr( $args['buttontext'] );
if ( $args['songwriter'] !== '') {
$args['songwriter'] = '<span class="songwriter">(' . $args['songwriter'] . ')</span>';
}
if ( $args['src'] !== ''){
$wpaudioshortcode .= ' src="' . esc_url( $args['src'] ) . '"';
}
if ( $args['mp3'] !== ''){
$wpaudioshortcode .= ' mp3="' . esc_url( $args['mp3'] ) . '"';
}
if ( $args['ogg'] !== ''){
$wpaudioshortcode .= ' ogg="' . esc_url( $args['ogg'] ) . '"';
}
if ( $args['wma'] !== ''){
$wpaudioshortcode .= ' wma="' . esc_url( $args['wma'] ) . '"';
}
if ( $args['m4a'] !== ''){
$wpaudioshortcode .= ' m4a="' . esc_url( $args['m4a'] ) . '"';
}
if ( $args['wav'] !== ''){
$wpaudioshortcode .= ' wav="' . esc_url( $args['wav'] ) . '"';
}
if ( $args['loop'] !== ''){
$wpaudioshortcode .= ' loop="' . esc_attr( $args['loop']) . '"';
}
if ( $args['autoplay'] !== ''){
$wpaudioshortcode .= ' autoplay="' . esc_attr( $args['autoplay'] ) . '"';
}
if ( $args['preload'] !== 'none'){
$wpaudioshortcode .= ' preload="' . esc_attr( $args['preload'] ) . '"';
}
if ( $args['buttonlink'] !== '#') {
$popupbutton = '<a href="'. $cc_siteurl .'/?p=' . esc_attr( $args['buttonlink'] ) . '&pop=yes" class="info-popup" data-width="' . esc_attr( $args['width'] ) . '" data-height="' . esc_attr( $args['height']) . '">' . esc_attr( $args['buttontext']) . '</a>';
}
$audiotrack = '<span class="songtitle">' . $args['title'] . '</span>' . $args['songwriter'] . '<span class="audiobutton">' . $popupbutton . '</span>';
//* Shortcode Inception! - call the native WP audio shortcode and pass the attributes
$output = '<div class="track">' . $audiotrack . '<div class="albumtrack" style="visibility:hidden;">' . do_shortcode('[' . $wpaudioshortcode . ']') . '</div></div>';
return $output;
}
Code file location:
audio-album/audio-album/audio-album.phpConclusion
Now that you’ve learned how to embed the Audio Album Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply