Builder Church Block: Customizations

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Customization Examples)
 
(4 intermediate revisions by one user not shown)
Line 1: Line 1:
== How to add manual excerpt support for Staff entries ==
+
=CSS Classes=
  
If you would like to have Excerpt metabox in Staff entry edit screen, add the following in City Church child theme's functions.php:
+
===Staff Single===
  
<pre class="brush:php;">
+
body.single .builder-module-content .hentry.staff
// =========================================
+
// = Add Excerpt support to Staff entries =
+
// =========================================
+
  
add_action('init', 'add_excerpt_support_to_staff');
+
body.single .staff .entry-header .post-edit-link
  
function add_excerpt_support_to_staff() {
+
body.single .staff .entry-image
add_post_type_support( 'staff', 'excerpt' );
+
}
+
</pre>
+
  
[[Image:2011-12-08 19-51-06.png|800px|thumb|none]]
+
body.single .staff .entry-image img
  
[[Image:2011-12-08 19-52-28.png|669px|thumb|none]]
+
body.single .staff .entry-header.right
  
[[Image:2011-12-08 19-58-07.png|754px|thumb|none]]
+
body.single .staff .entry-header.right .entry-title:before
  
Source: http://codex.wordpress.org/Function_Reference/add_post_type_support
+
body.single .staff .entry-title
  
== How to add Custom Fields support for Sermon entries ==
+
body.single .staff .entry-meta
  
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-meta.staff-info ul
  
<pre class="brush:php;">
+
body.single .staff .entry-meta.staff-info li
// ===============================================
+
// = Add Custom Fields support to Sermon entries =
+
// ===============================================
+
  
add_action('init', 'add_cf_support_to_sermon');
+
body.single .staff .entry-meta.staff-info li a
  
function add_cf_support_to_sermon() {
+
body.single .staff .more-bio
add_post_type_support( 'sermon', 'custom-fields' );
+
}
+
</pre>
+
  
== How to add regular Category support for Sermon entries ==
+
body.single .staff .more-bio:after
  
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>:
+
body.single .staff .entry-content.long-bio
  
<pre class="brush:php;">
+
body.single .staff .entry-content.long-bio > p
// ====================================================
+
// = Add standard Category support to Sermon entries =
+
// ====================================================
+
  
function wpse6098_init() {
+
body.single .staff .entry-footer
    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
+
bodybody.single .staff .entry-footer .alignright
  
== How to assign a layout to Staff and Sermon archive pages ==
+
body.single .staff .entry-footer .alignleft
  
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.
+
<br />
  
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.
 
  
=== To assign a layout to Staff archive page ===
+
===Staff Archive===
  
Add this code at the end of City Church's functions.php:
+
body.builder-template-archive-staff .staff-archive .loop-header
  
<pre class="brush:php;">
+
body.builder-template-archive-staff .staff-archive .loop-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
  
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 .archive-staff-inner
  
<pre>http://example.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=4f30b1482cde8</pre>
+
body.builder-template-archive-staff .staff .archive-staff-inner:hover
  
The Layout's ID for the above is 4f30b1482cde8.
+
body.builder-template-archive-staff .staff .entry-header
  
=== To assign a layout to Sermons archive page ===
+
body.builder-template-archive-staff .staff .entry-header .entry-title
  
Add this code at the end of City Church's functions.php:
+
body.builder-template-archive-staff .staff .entry-header .entry-title a
  
<pre class="brush:php;">
+
body.builder-template-archive-staff .staff .entry-header .entry-meta
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.
+
body.builder-template-archive-staff .staff .entry-header .entry-meta a
  
[http://ithemes.com/forum/topic/22220-assigning-a-layout-for-post-page-by-category/page__view__findpost__p__104482 Source].
+
body.builder-template-archive-staff .staff .entry-image a
  
== How to assign a layout to a specific category term archive page ==
+
body.builder-template-archive-staff .staff img
  
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:
+
<br />
  
<pre class="brush:php;">
 
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.
+
===Sermon Archives===
  
Ref.: http://codex.wordpress.org/Function_Reference/is_tax
+
body.builder-template-archive-sermon .sermon-archive .loop-header
  
== How to assign a layout to Sermon Tag archive page ==
+
body.builder-template-archive-sermon .sermon-archive .loop-title
  
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-archive .podcast_link
  
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-archive .podcast_link:hover
  
<pre class="brush:php;">
+
body.builder-template-archive-sermon .sermon
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 .sermon-block-wrapper.image
  
== How to display Staff entries on a custom Page ==
+
body.builder-template-archive-sermon .sermon .image img
  
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 .sermon-block-wrapper.title-excerpt
  
'''1.''' Copy ''archive-staff.php'' in BuilderChild-City-Church as ''my-staff-listing.php''. Edit this file.
+
body.builder-template-archive-sermon .sermon .entry-header
  
Add
+
body.builder-template-archive-sermon .sermon .entry-title
  
<pre class="brush:php;">
+
body.builder-template-archive-sermon .sermon .entry-content
<?php
+
/*
+
Template Name: Staff Listing
+
*/
+
?>
+
</pre>
+
  
at the top.
+
body.builder-template-archive-sermon .sermon .entry-content p
  
Remove the comments in:
+
body.builder-template-archive-sermon .sermon .date-tags
  
<pre class="brush:php;">
+
  body.builder-template-archive-sermon .sermon .entry-meta.date
/*
+
$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.
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-tags a
  
Here is a screenshot after making the above changes:
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-tags a:hover
  
[[File:2012-02-08 13-18-13.png]]
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-mp3-link a
  
'''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.
+
body.builder-template-archive-sermon .sermon .entry-meta.sermon-mp3-link h3
  
'''3.''' Add the following at the end of child theme's style.css:
 
  
<pre class="brush:css;">
+
=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]]
/* = Staff Archive = */
+
*[[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]]
body.page-template-my-staff-listing-php .staff-archive .loop-header {
+
*[[Builder_Blocks:_Church_-_Example_Customizations#To_assign_a_layout_to_Staff_archive_page|How to assign a layout to Staff and Sermon archive pages]]
height: 40px;
+
**[[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]]
body.page-template-my-staff-listing-php .staff-archive .loop-title {
+
*[[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]]
font-size: 96px;
+
*[[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]]
line-height: 65px;
+
*[[Builder_Blocks:_Church_-_Example_Customizations#How_to_display_Staff_entries_on_a_custom_Page|How to display Staff entries on a custom Page]]
color: #F6f6f6;
+
*[[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]]
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;
+
  
}
+
=See also=
body.page-template-my-staff-listing-php .staff .entry-header {
+
*[[Builder_Restaurant_Block:_Customizations|Builder Restaurant Block]]
width: 100%;
+
**[[Builder_Blocks:_Restaurant_-_Example_Customizations|Customization Examples]]
max-width: 275px;
+
*[[Builder_Church_Block:_Customizations|Builder Church Block]]
padding: 10px 0 0;
+
**[[Builder_Blocks:_Church_-_Example_Customizations|Customization Examples]]
height: 55px;
+
*[[Builder_Events_Block:_Customizations|Builder Events Block]]
margin: -65px auto 0;
+
**[[Builder_Blocks:_Events_-_Example_Customizations|Customization Examples]]
background: #363636;
+
*[[Builder_Audio_Block:_Customizations|Builder Audio Block]]
background: rgba(0,0,0,.3);
+
**[[Builder_Blocks:_Audio_-_Example_Customizations|Customization Examples]]
}
+
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