Builder Blocks: Audio

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
 
(36 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
'''Builder Audio Block''' adds an '''Audio''' [http://codex.wordpress.org/Post_Types custom post type] for easily adding albums and music to display on your site with a "built-in" audio player, a way to display albums or discographies, support for music downloads/purchases with Easy Digital Downloads, plus a list of upcoming shows (with [[Builder_Blocks:_Events|Builder Events Block]]).
  
= Intro =
+
<br />
  
Builder Audio Block is designed to work with Noise, a responsive-ready Builder child theme.
+
==Related Child Theme==
  
Designed with musicians and bands in mind, Builder now makes it easy to create a WordPress band website with a "built-in" audio player, a way to display albums or discographies, a list of upcoming shows and support for music downloads/purchases with Easy Digital Downloads.
+
Builder Audio Block works with any Builder child theme, but '''[http://ithemes.com/purchase/city-church/ Builder Child Child - Noise]''' is designed to work specifically with the Builder Audio Block.
  
[http://ithemes.com/2013/03/11/just-released-noise-a-new-builder-child-theme-new-builder-audio-block/ Announcement Blog Post]
+
=Installation=
  
= Videos =
+
# Download the Builder Audio Block plugin from [http://ithemes.com/member/login.php iThemes Member Panel].
 +
# From the WordPress dashboard, navigate to '''Plugins > Add New'''.
 +
# Install and Activate the '''builder-block-audio''' zip file.
  
{{#ev:vimeo|61387316|640}}
+
<br />
  
{{#ev:youtube|n7xCgrb0Qik|640|none|Noise Demo Site and Audio Block Walkthrough}}
+
Once Builder Audio Block has been installed, you'll notice a new menu has been added to the left-hand navigation of your WordPress dashboard:
  
[http://ithemes.com/2013/03/12/video-noise-demo-site-and-audio-block-walkthrough-ithemestv/ Blog post]
+
* '''Audio''' - Adds audio with a title (name), multiple MP3 or OGG file uploads, iTunes Link, shortcode, featured image and an option to "Show All."
  
= FAQ =
+
<br />
  
== How to Assign a Layout to Audio Archive page ==
+
[[File:Audio-dashboard.png|800px|link=]]
  
By default, Audio archive page, http://yoursite.com/audio/ will use <code>Full Width</code> layout (unless the default View Builder ships with is deleted). This comes from the <code>Archives</code> view at My Theme -> Layouts & Views -> Views. This View can be edited and another layout selected which will work for all archive pages including the Audio archive page.
+
<br />
  
However if you wish to apply a layout just to the Audio archive page, follow this.
+
=Audio=
  
Add this code at the end of child theme's <code>functions.php</code>:
+
Builder Audio Block creates a custom post type for '''Audio''' displayed in an audio or album "archive" visible on the [http://demos.ithemes.com/noise/albums/ Noise demo site].
  
<pre class="brush: php; gutter: false;">
+
<br />
function custom_filter_audio_layout( $layout_id ) {
+
    if ( is_post_type_archive('it_bb_audio') )
+
            return '4f30b1482cde8';
+
   
+
    return $layout_id;
+
}
+
add_filter( 'builder_filter_current_layout', 'custom_filter_audio_layout' );
+
</pre>
+
  
In the above, change "4f30b1482cde8" to the ID of layout that you wish to assign to Audio archive page.
+
[[File:Album-archive.png|800px|link=]]
  
To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:
+
<br />
  
<pre>http://yoursite.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4f30b1482cde8</pre>
+
==The Audio Menu==
  
The Layout's ID for the above is 4f30b1482cde8.
+
<br />
  
== How to Assign a Layout to Every Single Entry page of Audio CPT  ==
+
[[File:Audio-menu.png|800px|link=]]
  
=== Method 1 ===
+
<br />
  
Use <code>Post Type - Audio</code> View at My Theme -> Layouts & Views -> Views to assign a layout to every single Audio entry page.
+
From the WordPress dashboard, the ''Audio''' menu expands to reveal several pages:
  
=== Method 2 ===
+
*'''All Audio''' - A listing of all audio "posts"
 +
*'''Add New''' - The "Add New Audio" page
 +
*'''Settings''' - Find Shortcode, Widget and set to show/hide Audio File instructions
  
Add the following in child theme's <code>functions.php</code>:
+
==Adding New Audio ==
  
<pre class="brush: php; gutter: false;">
+
To add a new audio item, click '''Add New'''.
function custom_filter_audio_single_layout( $layout_id ) {
+
    if ( is_singular('it_bb_audio') )
+
            return '513f60026cf01';
+
  
    return $layout_id;
+
Add the Audio title (name), upload multiple MP3 or OGG files, add an iTunes Link, shortcode, featured image and an option to "Show All."
}
+
add_filter( 'builder_filter_current_layout', 'custom_filter_audio_single_layout' );
+
</pre>
+
  
In the above, change "513f60026cf01" to the ID of layout that you wish to assign to single Audio pages.
+
<br />
  
== How to Add Start and End times to Events archive page ==
+
[[File:add-new-audio.png|800px|link=]]
  
[[File:Screen Shot 2013-03-23 at 1.46.09 PM.png|800px|thumb|none]]
+
<br />
  
'''1.''' Install and activate [http://www.advancedcustomfields.com/ Advanced Custom Fields] plugin. Note: At the time of writing this, this plugin that's available in wordpress.org/extend/plugins is not functional and must be downloaded only from the plugin author's site.
+
===Adding a New Audio Item===
  
'''2.''' Go to Custom Fields -> Custom Fields and add Start Time and End Time custom fields per screenshot below (click for bigger view).
+
In order to ensure that the audio player works across all browsers, Builder Audio Block requires that you upload either MP3 and OGG formats of your audio. If you do not have an audio converter, we recommend using this free online tool: http://media.io/
  
[[File:Edit Field Group ‹ iThemes Builder Test Site — WordPress 2013-03-23 13-52-48.png|271px|thumb|none]]
+
<br />
  
'''3.''' Edit wp-content/themes BuilderChild-Noise/archive-it_bb_event.php
+
[[File:Add-audio-item.png|800px|link=]]
  
Below
+
<br />
  
<pre class="brush: php; gutter: false;">
+
Audio files will be uploaded to the WordPress media library. Once you've uploaded your tracks, they'll be visible there. Check the file to be added and click '''Select'''.
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
+
</pre>
+
  
add [http://pastebin.com/w9JpSqwF this] code.
+
<br />
  
'''4.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
+
[[File:Audio-media-library.png|800px|link=]]
  
<pre class="brush: css; gutter: false;">
+
<br />
.entry-meta.start-time,
+
.entry-meta.end-time {
+
    display: inline-block;
+
    float: left;
+
    /*margin-right: 2em;*/
+
    padding-top: 0.25em;
+
    /*width: 15%;*/
+
}
+
  
.builder-template-archive-it-bb-event .builder-module .entry-title {
+
You'll now see the track has been added to the Audio playlist.
float: left;
+
width: 25%;
+
clear: none;
+
}
+
</pre>
+
  
'''5.''' When creating/editing events, enter the event's start and end times. These (both fields or a single one) can be left empty.
+
<br />
  
[[File:Edit Event ‹ iThemes Builder Test Site — WordPress 2013-03-23 13-59-38.png|800px|thumb|none]]
+
[[File:audio-track.png|800px|link=]]
  
== How to Show Links to Navigate to Next and Previous months in Events Calendar View in Firefox ==
+
<br />
 +
Continue adding tracks, add a featured image (such as album artwork), and press '''Publish'''. Your new audio item will now be visible on the site from the URL located beneath the Audio Title.
  
When viewing the Events archive page in Calendar view, the buttons to switch to Previous and Next months won't be visible in Firefox. It's fine in other browsers.
+
<br />
  
To fix this, add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
+
===iTunes link===
  
<pre class="brush: css; gutter: false;">
+
The iTunes link section adds an easy way to link your audio items to their purchase link on iTunes. Once a link has been added to this section, the "Purchase on iTunes" button will be visible from the audio playlist.
.loop-calendar {
+
clear: both;
+
}
+
</pre>
+
  
== How to make entry box below post titles look simpler ==
+
<br />
  
Before:
+
[[File:Ituneslink.png|800px|link=]]
  
[[File:Screen Shot 2013-05-23 at 8.35.18 AM.png|653px|thumb|none]]
+
<br />
  
After:
+
===Show All Audio Items===
  
[[File:Screen Shot 2013-05-23 at 8.34.30 AM.png|628px|thumb|none]]
+
The '''Show All''' section allows you to show all songs when this audio loads. The songs on the audio item are collapsed by default.
  
Note: The below steps are for making the changes per above sample screenshots in Posts page. For making similar changes in other listing views like archives or category pages or search results pages, appropriate template files need to be edited and CSS adjusted.
+
<br />
  
'''1)''' Create a file named <code>content-index.php</code> in child theme directory having [http://pastebin.com/YJkXePnm this] code.
+
===Shortcode===
  
'''2)''' Edit child theme's <code>index.php</code>.
+
The '''Shortcode''' section generates the specific shortcode to the Audio. Copy this shortcode and place it anywhere shortcodes are enabled on your site.
  
Change
+
<br />
  
<pre class="brush: php; gutter: false;">
+
==Audio Settings==
<?php get_template_part('content', get_post_format()); ?>
+
</pre>
+
  
to
+
The '''Settings''' Page in the Audio menu provides info for using the Audio Block '''Shortcode''' and '''Widget'''. It also allows you to show/hide '''Audio File Instructions.'''
 +
Hide Instructions
  
<pre class="brush: php; gutter: false;">
+
<br />
<?php get_template_part('content-index', get_post_format()); ?>
+
</pre>
+
  
'''3)''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
+
[[File:Audio-settings.png|800px|link=]]
  
<pre class="brush: css; gutter: false;">
+
<br />
.blog .entry-meta.author-gravatar-wrapper {
+
display: none;
+
}
+
  
.blog .left-entry-meta {
 
margin-left: 0;
 
}
 
  
.blog .meta-wrapper {
+
===Shortcode===
background: none;
+
}
+
  
.blog .meta-wrapper {
+
Individual '''Shortcodes''' can be located by navigating to the '''Shortcode''' section on the '''Add New Audio''' page.
padding-left: 0;
+
padding-right: 0;
+
}
+
  
.blog .hentry .entry-meta.categories {
+
<br />
display: inline;
+
}
+
  
.blog .hentry .entry-meta.categories a {
+
===Widget===
background: none;
+
border: none;
+
padding-left: 0;
+
padding-right: 0;
+
}
+
  
.blog .hentry .entry-meta.categories a:hover {
+
Builder Audio Block creates a widget to display audio items. To add a Builder Audio Block Widget, visit '''Appearance > Widgets'''. From this page, you'll see the '''Audio Player''' widget that can be added to any widget area.
color: #EFEFEF;
+
}
+
</pre>
+
  
= Demo Site =
+
<br />
  
[http://demos.ithemes.com/noise/ Noise Live Demo]
+
[[File:Audio-widget.png|800px|link=]]
 +
 
 +
<br />
 +
 
 +
===Audio File Instructions===
 +
 
 +
The '''Audio File Instructions''' section of the Settings page allows you to hide the file upload and title instructions.
 +
 
 +
<br />
 +
 
 +
=Additional Links=
 +
*[http://demos.ithemes.com/noise/ Builder Child - Noise Demo]
 +
*[http://ithemes.com/2013/03/11/just-released-noise-a-new-builder-child-theme-new-builder-audio-block/ Announcement Blog Post]
 +
*[http://ithemes.com/2013/03/12/video-noise-demo-site-and-audio-block-walkthrough-ithemestv/ iThemesTV Audio Block Walkthrough]
 +
 
 +
== Videos ==
 +
 
 +
{{#ev:vimeo|61387316|800}}
 +
 
 +
{{#ev:youtube|n7xCgrb0Qik|800|none|Noise Demo Site and Audio Block Walkthrough}}
 +
 
 +
= See also  =
 +
* [[Builder_Blocks:_Introduction| Builder Blocks: Introduction]]
 +
* [[Builder_BLocks:_Video_Overview| Video Overview]]
 +
*[[Builder_Blocks:_Restaurant|Builder Restaurant Block]]
 +
*[[Builder_Blocks:_Church|Builder Church Block]]
 +
*[[Builder_Blocks:_Events|Builder Events Block]]
 +
*[[Builder_Blocks:_Audio|Builder Audio Block]]
 +
 
 +
<br />
 +
[[:Builder|← Back to Builder Codex Home]]

Latest revision as of 10:03, July 30, 2013

Builder Audio Block adds an Audio custom post type for easily adding albums and music to display on your site with a "built-in" audio player, a way to display albums or discographies, support for music downloads/purchases with Easy Digital Downloads, plus a list of upcoming shows (with Builder Events Block).


Contents

Related Child Theme

Builder Audio Block works with any Builder child theme, but Builder Child Child - Noise is designed to work specifically with the Builder Audio Block.

Installation

  1. Download the Builder Audio Block plugin from iThemes Member Panel.
  2. From the WordPress dashboard, navigate to Plugins > Add New.
  3. Install and Activate the builder-block-audio zip file.


Once Builder Audio Block has been installed, you'll notice a new menu has been added to the left-hand navigation of your WordPress dashboard:

  • Audio - Adds audio with a title (name), multiple MP3 or OGG file uploads, iTunes Link, shortcode, featured image and an option to "Show All."


Audio-dashboard.png


Audio

Builder Audio Block creates a custom post type for Audio displayed in an audio or album "archive" visible on the Noise demo site.


Album-archive.png


The Audio Menu


Audio-menu.png


From the WordPress dashboard, the Audio' menu expands to reveal several pages:

  • All Audio - A listing of all audio "posts"
  • Add New - The "Add New Audio" page
  • Settings - Find Shortcode, Widget and set to show/hide Audio File instructions

Adding New Audio

To add a new audio item, click Add New.

Add the Audio title (name), upload multiple MP3 or OGG files, add an iTunes Link, shortcode, featured image and an option to "Show All."


Add-new-audio.png


Adding a New Audio Item

In order to ensure that the audio player works across all browsers, Builder Audio Block requires that you upload either MP3 and OGG formats of your audio. If you do not have an audio converter, we recommend using this free online tool: http://media.io/


Add-audio-item.png


Audio files will be uploaded to the WordPress media library. Once you've uploaded your tracks, they'll be visible there. Check the file to be added and click Select.


Audio-media-library.png


You'll now see the track has been added to the Audio playlist.


Audio-track.png


Continue adding tracks, add a featured image (such as album artwork), and press Publish. Your new audio item will now be visible on the site from the URL located beneath the Audio Title.


iTunes link

The iTunes link section adds an easy way to link your audio items to their purchase link on iTunes. Once a link has been added to this section, the "Purchase on iTunes" button will be visible from the audio playlist.


Ituneslink.png


Show All Audio Items

The Show All section allows you to show all songs when this audio loads. The songs on the audio item are collapsed by default.


Shortcode

The Shortcode section generates the specific shortcode to the Audio. Copy this shortcode and place it anywhere shortcodes are enabled on your site.


Audio Settings

The Settings Page in the Audio menu provides info for using the Audio Block Shortcode and Widget. It also allows you to show/hide Audio File Instructions. Hide Instructions


Audio-settings.png



Shortcode

Individual Shortcodes can be located by navigating to the Shortcode section on the Add New Audio page.


Widget

Builder Audio Block creates a widget to display audio items. To add a Builder Audio Block Widget, visit Appearance > Widgets. From this page, you'll see the Audio Player widget that can be added to any widget area.


Audio-widget.png


Audio File Instructions

The Audio File Instructions section of the Settings page allows you to hide the file upload and title instructions.


Additional Links

Videos


Noise Demo Site and Audio Block Walkthrough

See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox