Builder Blocks: Audio

(Difference between revisions)
Jump to: navigation, search
Line 1: Line 1:
Builder Audio Block is designed to work with Noise, a responsive-ready Builder child theme.
+
'''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, a list of upcoming shows (with [Builder_Blocks:_Events|Builder Events Block] and support for music downloads/purchases with Easy Digital Downloads.
  
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]
+
=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/ Blog post]
  
 
== Videos ==
 
== Videos ==
Line 11: Line 14:
 
{{#ev:youtube|n7xCgrb0Qik|640|none|Noise Demo Site and Audio Block Walkthrough}}
 
{{#ev:youtube|n7xCgrb0Qik|640|none|Noise Demo Site and Audio Block Walkthrough}}
  
[http://ithemes.com/2013/03/12/video-noise-demo-site-and-audio-block-walkthrough-ithemestv/ Blog post]
 
  
== FAQ ==
 
 
== How to Assign a Layout to Audio Archive page ==
 
 
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.
 
 
However if you wish to apply a layout just to the Audio archive page, follow this.
 
 
Add this code at the end of child theme's <code>functions.php</code>:
 
 
<pre class="brush: php; gutter: false;">
 
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.
 
 
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:
 
 
<pre>http://yoursite.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4f30b1482cde8</pre>
 
 
The Layout's ID for the above is 4f30b1482cde8.
 
 
== How to Assign a Layout to Every Single Entry page of Audio CPT  ==
 
 
=== Method 1 ===
 
 
Use <code>Post Type - Audio</code> View at My Theme -> Layouts & Views -> Views to assign a layout to every single Audio entry page.
 
 
=== Method 2 ===
 
 
Add the following in child theme's <code>functions.php</code>:
 
 
<pre class="brush: php; gutter: false;">
 
function custom_filter_audio_single_layout( $layout_id ) {
 
    if ( is_singular('it_bb_audio') )
 
            return '513f60026cf01';
 
 
    return $layout_id;
 
}
 
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.
 
 
== How to Add Start and End times to Events archive page ==
 
 
[[File:Screen Shot 2013-03-23 at 1.46.09 PM.png|800px|thumb|none]]
 
 
'''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.
 
 
'''2.''' Go to Custom Fields -> Custom Fields and add Start Time and End Time custom fields per screenshot below (click for bigger view).
 
 
[[File:Edit Field Group ‹ iThemes Builder Test Site — WordPress 2013-03-23 13-52-48.png|271px|thumb|none]]
 
 
'''3.''' Edit wp-content/themes BuilderChild-Noise/archive-it_bb_event.php
 
 
Below
 
 
<pre class="brush: php; gutter: false;">
 
<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
 
</pre>
 
 
add [http://pastebin.com/w9JpSqwF this] code.
 
 
'''4.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 
 
<pre class="brush: css; gutter: false;">
 
.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 {
 
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.
 
 
[[File:Edit Event ‹ iThemes Builder Test Site — WordPress 2013-03-23 13-59-38.png|800px|thumb|none]]
 
 
== How to Show Links to Navigate to Next and Previous months in Events Calendar View in Firefox ==
 
 
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.
 
 
To fix this, add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 
 
<pre class="brush: css; gutter: false;">
 
.loop-calendar {
 
clear: both;
 
}
 
</pre>
 
 
== How to make entry box below post titles look simpler ==
 
 
Before:
 
 
[[File:Screen Shot 2013-05-23 at 8.35.18 AM.png|653px|thumb|none]]
 
 
After:
 
 
[[File:Screen Shot 2013-05-23 at 8.34.30 AM.png|628px|thumb|none]]
 
 
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.
 
 
'''1)''' Create a file named <code>content-index.php</code> in child theme directory having [http://pastebin.com/YJkXePnm this] code.
 
 
'''2)''' Edit child theme's <code>index.php</code>.
 
 
Change
 
 
<pre class="brush: php; gutter: false;">
 
<?php get_template_part('content', get_post_format()); ?>
 
</pre>
 
 
to
 
 
<pre class="brush: php; gutter: false;">
 
<?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):
 
 
<pre class="brush: css; gutter: false;">
 
.blog .entry-meta.author-gravatar-wrapper {
 
display: none;
 
}
 
 
.blog .left-entry-meta {
 
margin-left: 0;
 
}
 
 
.blog .meta-wrapper {
 
background: none;
 
}
 
 
.blog .meta-wrapper {
 
padding-left: 0;
 
padding-right: 0;
 
}
 
 
.blog .hentry .entry-meta.categories {
 
display: inline;
 
}
 
 
.blog .hentry .entry-meta.categories a {
 
background: none;
 
border: none;
 
padding-left: 0;
 
padding-right: 0;
 
}
 
 
.blog .hentry .entry-meta.categories a:hover {
 
color: #EFEFEF;
 
}
 
</pre>
 
  
 
= Demo Site =
 
= Demo Site =
 
[http://demos.ithemes.com/noise/ Noise Live Demo]
 

Revision as of 10:46, July 29, 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, a list of upcoming shows (with [Builder_Blocks:_Events|Builder Events Block] and support for music downloads/purchases with Easy Digital Downloads.

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

Additional Links

Videos


Noise Demo Site and Audio Block Walkthrough


Demo Site

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox