Builder Church Block: Customizations

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Customization Examples)
 
(5 intermediate revisions by one user not shown)
Line 1: Line 1:
[http://ithemes.com/forum/forum/134-builder-block-church/ Builder Church Block Support forum]
+
=CSS Classes=
  
== Introduction ==
+
===Staff Single===
  
Originally, Builder's Church Block was designed to work specifically with Gallery Church and City Church Builder child themes, but now each Builder child theme fully integrates with all Builder Church Block features.
+
  body.single .builder-module-content .hentry.staff
   
+
Builder Church Block makes it easy to keep your church website updated by adding custom post types for sermon and staff content. After uploading and activating the Builder Church Block to your plugins area, both "Staff" and "Sermon" menus will be added to the WordPress dashboard.
+
  
From there, simply add your content and then publish like any other WordPress post or page.
+
  body.single .staff .entry-header .post-edit-link
   
+
The active Builder child theme goes to work providing the styling of your content.
+
  
[http://ithemes.com/2012/06/11/builder-church-block-now-compatible-with-all-builder-child-themes/ Source].
+
body.single .staff .entry-image
  
== How to add manual excerpt support for Staff entries ==
+
body.single .staff .entry-image img
  
If you would like to have Excerpt metabox in Staff entry edit screen, add the following in City Church child theme's functions.php:
+
body.single .staff .entry-header.right
  
<pre class="brush:php;">
+
body.single .staff .entry-header.right .entry-title:before
// =========================================
+
// = Add Excerpt support to Staff entries =
+
// =========================================
+
  
add_action('init', 'add_excerpt_support_to_staff');
+
body.single .staff .entry-title
  
function add_excerpt_support_to_staff() {
+
body.single .staff .entry-meta
add_post_type_support( 'staff', 'excerpt' );
+
}
+
</pre>
+
  
[[Image:2011-12-08 19-51-06.png|800px|thumb|none]]
+
body.single .staff .entry-meta.staff-info ul
  
[[Image:2011-12-08 19-52-28.png|669px|thumb|none]]
+
body.single .staff .entry-meta.staff-info li
  
[[Image:2011-12-08 19-58-07.png|754px|thumb|none]]
+
body.single .staff .entry-meta.staff-info li a
  
Source: http://codex.wordpress.org/Function_Reference/add_post_type_support
+
body.single .staff .more-bio
  
== How to add Custom Fields support for Sermon entries ==
+
body.single .staff .more-bio:after
  
If you would like to have Custom Fields meta box in Sermon entry add/edit screen, add the following in City Church child theme's <code>functions.php</code>:
+
body.single .staff .entry-content.long-bio
  
<pre class="brush:php;">
+
body.single .staff .entry-content.long-bio > p
// ===============================================
+
// = Add Custom Fields support to Sermon entries =
+
// ===============================================
+
  
add_action('init', 'add_cf_support_to_sermon');
+
body.single .staff .entry-footer
  
function add_cf_support_to_sermon() {
+
bodybody.single .staff .entry-footer .alignright
add_post_type_support( 'sermon', 'custom-fields' );
+
}
+
</pre>
+
  
== How to add regular Category support for Sermon entries ==
+
body.single .staff .entry-footer .alignleft
  
If you would like to have Categories meta box in Sermon entry edit screen, add the following in City Church child theme's <code>functions.php</code>:
+
<br />
  
<pre class="brush:php;">
 
// ====================================================
 
// = Add standard Category support to Sermon entries =
 
// ====================================================
 
  
function wpse6098_init() {
+
===Staff Archive===
    register_taxonomy_for_object_type( 'category', 'sermon' );
+
}
+
add_action( 'init', 'wpse6098_init', 100 ); // 100 so the post type has been registered
+
</pre>
+
  
Source: http://wordpress.stackexchange.com/questions/6098/is-there-a-way-to-use-regular-categories-with-custom-post-types
+
body.builder-template-archive-staff .staff-archive .loop-header
  
== How to assign a layout to Staff and Sermon archive pages ==
+
body.builder-template-archive-staff .staff-archive .loop-title
  
At My Theme -> Layouts & Views, currently it is not possible to assign a layout to Staff and Sermon archive pages using the Views feature of Builder. "Archives" view can be used, but this view will apply to all date and category archives, tag archives and author archives unless overridden with more specific views.
+
body.builder-template-archive-staff .staff
  
It is possible to assign a particular layout (ensure that it has a content module) to both Staff and Sermons archive pages separately by adding code in City Church's functions.php.  
+
body.builder-template-archive-staff .staff .archive-staff-inner
  
=== To assign a layout to Staff archive page ===
+
body.builder-template-archive-staff .staff .archive-staff-inner:hover
  
Add this code at the end of City Church's functions.php:
+
body.builder-template-archive-staff .staff .entry-header
  
<pre class="brush:php;">
+
body.builder-template-archive-staff .staff .entry-header .entry-title
function custom_filter_staff_layout( $layout_id ) {
+
    if ( is_post_type_archive('staff') )
+
            return '4f30b1482cde8';
+
   
+
    return $layout_id;
+
}
+
add_filter( 'builder_filter_current_layout', 'custom_filter_staff_layout' );
+
</pre>
+
  
In the above, change "4f30b1482cde8" to the ID of layout that you wish to assign to Staff archive page.
+
body.builder-template-archive-staff .staff .entry-header .entry-title a
  
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:
+
body.builder-template-archive-staff .staff .entry-header .entry-meta
  
<pre>http://example.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4f30b1482cde8</pre>
+
body.builder-template-archive-staff .staff .entry-header .entry-meta a
  
The Layout's ID for the above is 4f30b1482cde8.
+
body.builder-template-archive-staff .staff .entry-image a
  
=== To assign a layout to Sermons archive page ===
+
body.builder-template-archive-staff .staff img
  
Add this code at the end of City Church's functions.php:
+
<br />
  
<pre class="brush:php;">
 
function custom_filter_sermons_layout( $layout_id ) {
 
    if ( is_post_type_archive('sermon') )
 
            return '4f30b1482cde8';
 
   
 
    return $layout_id;
 
}
 
add_filter( 'builder_filter_current_layout', 'custom_filter_sermons_layout' );
 
</pre>
 
  
In the above, change "4f30b1482cde8" to the ID of layout that you wish to assign to Staff archive page.
+
===Sermon Archives===
  
[http://ithemes.com/forum/topic/22220-assigning-a-layout-for-post-page-by-category/page__view__findpost__p__104482 Source].
+
body.builder-template-archive-sermon .sermon-archive .loop-header
  
== How to assign a layout to a specific category term archive page ==
+
body.builder-template-archive-sermon .sermon-archive .loop-title
  
As an example, let's say there is a Sermon Category titled "Life", all sermon entries that are categorized under "Life" will appear at http://site.com/sermon/category/life/. This category term archive page uses "Full Width" layout by default (assuming, the Archive view that ships with Builder which sets all archive pages to Full Width layout is not deleted). If you would like apply another layout to this page, add the following code at end of child theme's functions.php:
+
body.builder-template-archive-sermon .sermon-archive .podcast_link
  
<pre class="brush:php;">
+
body.builder-template-archive-sermon .sermon-archive .podcast_link:hover
function custom_filter_life_layout( $layout_id ) {
+
    if ( is_tax( 'sermon_category', 'life' ) )
+
            return '4f7a81f021fbc';
+
   
+
    return $layout_id;
+
}
+
add_filter( 'builder_filter_current_layout', 'custom_filter_life_layout' );
+
</pre>
+
  
In the above, change "life" to the slug of the particular Sermon category of interest. Also change "4f7a81f021fbc" to the ID of layout that you wish to assign to "Life" sermon category archive page. "custom_filter_life_layout" is just the name of function and it can be changed per your liking.
+
body.builder-template-archive-sermon .sermon
  
Ref.: http://codex.wordpress.org/Function_Reference/is_tax
+
body.builder-template-archive-sermon .sermon .sermon-block-wrapper.image
  
== How to assign a layout to Sermon Tag archive page ==
+
body.builder-template-archive-sermon .sermon .image img
  
Example URL of a Sermon Tag archive page is http://localhost/builder3/sermon-tag/church/ where "Church" is a Sermon tag term. By default such archive pages uses <code>Archives</code> view (associated with "Full Width" layout by default at My Theme -> Layouts & Views -> Views).
+
body.builder-template-archive-sermon .sermon .sermon-block-wrapper.title-excerpt
  
If you would like to set a layout to Sermon Tag archive pages, add the following code at end of child theme's functions.php:
+
body.builder-template-archive-sermon .sermon .entry-header
  
<pre class="brush:php;">
+
body.builder-template-archive-sermon .sermon .entry-title
function custom_filter_sermontagarchive_layout( $layout_id ) {
+
    if ( is_tax('sermon_tag') )
+
            return '4e15829c9f4c5';
+
   
+
    return $layout_id;
+
}
+
add_filter( 'builder_filter_current_layout', 'custom_filter_sermontagarchive_layout' );
+
</pre>
+
  
In the above, change "4e15829c9f4c5" to the ID of layout that you wish to assign to Sermon Tag archive pages. "custom_filter_sermontagarchive_layout" is just the name of function and it can be changed per your liking.
+
body.builder-template-archive-sermon .sermon .entry-content
  
== How to display Staff entries on a custom Page ==
+
body.builder-template-archive-sermon .sermon .entry-content p
  
When BuilderChild-City-Church is the active theme and Builder Church Block plugin is active, a list of Staff entries will automatically be available at yourdomain.com/staff. If you would like the same also to be output on any Page of your choice, follow the instructions below:
+
body.builder-template-archive-sermon .sermon .date-tags
  
'''1.''' Copy ''archive-staff.php'' in BuilderChild-City-Church as ''my-staff-listing.php''. Edit this file.
+
body.builder-template-archive-sermon .sermon .entry-meta.date
  
Add
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-tags a
  
<pre class="brush:php;">
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-tags a:hover
<?php
+
/*
+
Template Name: Staff Listing
+
*/
+
?>
+
</pre>
+
  
at the top.
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-mp3-link a
  
Remove the comments in:
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-mp3-link h3
  
<pre class="brush:php;">
 
/*
 
$args = array(
 
'ignore_sticky_posts' => true,
 
'post_type' => 'staff',
 
'posts_per_page' => 3,
 
'paged' =>  get_query_var( 'paged' ),
 
);
 
 
query_posts( $args );
 
*/
 
</pre>
 
  
You may want to change the value of posts_per_page to a higher number like 10.
+
=Customization Examples=
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_add_Custom_Fields_support_for_Sermon_entries|How to add manual excerpt support for Staff entries]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_add_regular_Category_support_for_Sermon_entries|How to add Custom Fields support for Sermon entries]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_assign_a_layout_to_Staff_and_Sermon_archive_pages|How to add regular Category support for Sermon entries]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#To_assign_a_layout_to_Staff_archive_page|How to assign a layout to Staff and Sermon archive pages]]
 +
**[[Builder_Blocks:_Church_-_Example_Customizations#To_assign_a_layout_to_Staff_archive_page|To assign a layout to Staff archive page]]
 +
**[[Builder_Blocks:_Church_-_Example_Customizations#To_assign_a_layout_to_Sermons_archive_page|To assign a layout to Sermons archive page]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_assign_a_layout_to_a_specific_category_term_archive_page|How to assign a layout to a specific category term archive page]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_assign_a_layout_to_Sermon_Tag_archive_page|How to assign a layout to Sermon Tag archive page]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_display_Staff_entries_on_a_custom_Page|How to display Staff entries on a custom Page]]
 +
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_replace_social_media_text_links_in_single_Staff_entry_pages_with_images|How to replace social media text links in single Staff entry pages with images]]
  
Here is a screenshot after making the above changes:
+
=See also=
 
+
*[[Builder_Restaurant_Block:_Customizations|Builder Restaurant Block]]
[[File:2012-02-08 13-18-13.png]]
+
**[[Builder_Blocks:_Restaurant_-_Example_Customizations|Customization Examples]]
 
+
*[[Builder_Church_Block:_Customizations|Builder Church Block]]
'''2.''' Create a Page (if one doesn't already exist) where you would like to display the list of Staff entries. Leave the content empty. Select "Staff Listing" Template in ''Page Attributes'' meta box.
+
**[[Builder_Blocks:_Church_-_Example_Customizations|Customization Examples]]
 
+
*[[Builder_Events_Block:_Customizations|Builder Events Block]]
'''3.''' Add the following at the end of child theme's style.css:
+
**[[Builder_Blocks:_Events_-_Example_Customizations|Customization Examples]]
 
+
*[[Builder_Audio_Block:_Customizations|Builder Audio Block]]
<pre class="brush:css;">
+
**[[Builder_Blocks:_Audio_-_Example_Customizations|Customization Examples]]
/* ================= */
+
/* = Staff Archive = */
+
/* ================= */
+
body.page-template-my-staff-listing-php .staff-archive .loop-header {
+
height: 40px;
+
}
+
body.page-template-my-staff-listing-php .staff-archive .loop-title {
+
font-size: 96px;
+
line-height: 65px;
+
color: #F6f6f6;
+
text-shadow: 1px 1px #FFF, 2px 2px #FFF, 3px 3px #FFF, 4px 4px #FAFAFA;
+
}
+
body.page-template-my-staff-listing-php .staff {
+
display: inline-block;
+
width: 33%;
+
vertical-align: top;
+
position: relative;
+
margin-bottom: 0;
+
}
+
body.page-template-my-staff-listing-php .staff .archive-staff-inner {
+
background: #EEEEEE;
+
border: 1px solid #DDDDDD;
+
padding: 1em;
+
margin: 1em;
+
-webkit-border-radius: 4px;
+
-moz-border-radius: 4px;
+
border-radius: 4px;
+
}
+
body.page-template-my-staff-listing-php .staff .archive-staff-inner:hover {
+
background: #F6F6F6;
+
border: 1px solid #EEEEEE;
+
 
+
}
+
body.page-template-my-staff-listing-php .staff .entry-header {
+
width: 100%;
+
max-width: 275px;
+
padding: 10px 0 0;
+
height: 55px;
+
margin: -65px auto 0;
+
background: #363636;
+
background: rgba(0,0,0,.3);
+
}
+
body.page-template-my-staff-listing-php .staff .entry-header .entry-title {
+
padding: 0 5px;
+
margin: 0;
+
}
+
body.page-template-my-staff-listing-php .staff .entry-header .entry-title a {
+
color: #EEEEEE;
+
}
+
body.page-template-my-staff-listing-php .staff .entry-header .entry-meta {
+
border: 0;
+
margin: 0 5px;
+
color: #BBBBBB;
+
}
+
body.page-template-my-staff-listing-php .staff .entry-header .entry-meta a {
+
color: #DDDDDD;
+
}
+
body.page-template-my-staff-listing-php .staff .entry-image a {
+
display: block;
+
}
+
body.page-template-my-staff-listing-php .staff img {
+
padding: 0;
+
margin: 0 auto;
+
border: 0;
+
width: 100%;
+
max-width: 275px;
+
display: block;
+
height:auto;
+
-webkit-border-radius: 2px;
+
-moz-border-radius: 2px;
+
border-radius: 2px;
+
}
+
 
+
</pre>
+
 
+
== How to replace social media text links in single Staff entry pages with images ==
+
 
+
[[File:2012-02-26 19-06-14.jpg|644px|thumb|none|Before]]
+
 
+
[[File:2012-02-26 19-05-46.jpg|643px|thumb|none|After]]
+
 
+
Add the following at the end of child theme's style.css:
+
 
+
<pre class="brush:css;">
+
body.single .staff .entry-meta.staff-info li {
+
    width: 15%;
+
}
+
 
+
body.single .staff .entry-meta.staff-info li a {
+
    text-indent: -9999em;
+
    display: block;
+
    height: 32px;
+
}
+
 
+
body.single .staff .entry-meta.staff-info li.email a {
+
    background: url('http://ithemes.com/builder/misc/social-media-icons/32/email.png') no-repeat;
+
}
+
 
+
body.single .staff .entry-meta.staff-info li.twitter a {
+
    background: url('http://ithemes.com/builder/misc/social-media-icons/32/twitter.png') no-repeat;
+
}
+
 
+
 
+
body.single .staff .entry-meta.staff-info li.facebook a {
+
    background: url('http://ithemes.com/builder/misc/social-media-icons/32/facebook.png') no-repeat;
+
}
+
</pre>
+
 
+
Please save the social media icon images, upload them to your server and use them in the above CSS code.
+
  
  
 
<br />
 
<br />
 
[[:Builder|← Back to Builder Codex Home]]
 
[[:Builder|← Back to Builder Codex Home]]

Latest revision as of 09:36, July 30, 2013

Contents

CSS Classes

Staff Single

body.single .builder-module-content .hentry.staff 
body.single .staff .entry-header .post-edit-link
body.single .staff .entry-image
body.single .staff .entry-image img 
body.single .staff .entry-header.right
body.single .staff .entry-header.right .entry-title:before 
body.single .staff .entry-title 
body.single .staff .entry-meta
body.single .staff .entry-meta.staff-info ul
body.single .staff .entry-meta.staff-info li
body.single .staff .entry-meta.staff-info li a
body.single .staff .more-bio
body.single .staff .more-bio:after
body.single .staff .entry-content.long-bio
body.single .staff .entry-content.long-bio > p
body.single .staff .entry-footer 
bodybody.single .staff .entry-footer .alignright 
body.single .staff .entry-footer .alignleft



Staff Archive

body.builder-template-archive-staff .staff-archive .loop-header
body.builder-template-archive-staff .staff-archive .loop-title
body.builder-template-archive-staff .staff
body.builder-template-archive-staff .staff .archive-staff-inner
body.builder-template-archive-staff .staff .archive-staff-inner:hover
body.builder-template-archive-staff .staff .entry-header
body.builder-template-archive-staff .staff .entry-header .entry-title
body.builder-template-archive-staff .staff .entry-header .entry-title a
body.builder-template-archive-staff .staff .entry-header .entry-meta
body.builder-template-archive-staff .staff .entry-header .entry-meta a
body.builder-template-archive-staff .staff .entry-image a 
body.builder-template-archive-staff .staff img



Sermon Archives

body.builder-template-archive-sermon .sermon-archive .loop-header
body.builder-template-archive-sermon .sermon-archive .loop-title 
body.builder-template-archive-sermon .sermon-archive .podcast_link 
body.builder-template-archive-sermon .sermon-archive .podcast_link:hover
body.builder-template-archive-sermon .sermon
body.builder-template-archive-sermon .sermon .sermon-block-wrapper.image
body.builder-template-archive-sermon .sermon .image img
body.builder-template-archive-sermon .sermon .sermon-block-wrapper.title-excerpt
body.builder-template-archive-sermon .sermon .entry-header
body.builder-template-archive-sermon .sermon .entry-title 
body.builder-template-archive-sermon .sermon .entry-content
body.builder-template-archive-sermon .sermon .entry-content p
body.builder-template-archive-sermon .sermon .date-tags
body.builder-template-archive-sermon .sermon .entry-meta.date
body.builder-template-archive-sermon .sermon .entry-meta.sermon-tags a
body.builder-template-archive-sermon .sermon .entry-meta.sermon-tags a:hover
body.builder-template-archive-sermon .sermon .entry-meta.sermon-mp3-link a
body.builder-template-archive-sermon .sermon .entry-meta.sermon-mp3-link h3


Customization Examples

See also



← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox