BuilderChild-City-Church

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Staff Listing (Archive) page)
(Added = How to remove "Position: " before the Staff Position term in Staff archive and single pages =)
 
(6 intermediate revisions by one user not shown)
Line 1: Line 1:
 
[http://demos.ithemes.com/city-church/ Demo Site]
 
[http://demos.ithemes.com/city-church/ Demo Site]
 +
 +
[[Builder Church Block]]
  
 
= Introduction =
 
= Introduction =
Line 32: Line 34:
 
* Recommendation: Go to Settings -> Permalinks and have the permalink structure as either Day and name i.e, <code>/%year%/%monthnum%/%day%/%postname%/</code> or <code>/%postname%/</code>
 
* Recommendation: Go to Settings -> Permalinks and have the permalink structure as either Day and name i.e, <code>/%year%/%monthnum%/%day%/%postname%/</code> or <code>/%postname%/</code>
 
* More info: http://codex.wordpress.org/Using_Permalinks
 
* More info: http://codex.wordpress.org/Using_Permalinks
 +
  
 
Click [http://ithemes.com/codex/images/e/ee/Edit-sermon-screen.png here] to view a screenshot of Sermons Listing Page.
 
Click [http://ithemes.com/codex/images/e/ee/Edit-sermon-screen.png here] to view a screenshot of Sermons Listing Page.
Line 126: Line 129:
 
[[File:Sermon-mp3-link-onsite.png|800px|thumb|none]]
 
[[File:Sermon-mp3-link-onsite.png|800px|thumb|none]]
  
= Entry 3 =  
+
= How to set up City Church like the demo site =
 +
 
 +
'''1.''' Activate City Church at Appearance -> Themes. Ensure that parent Builder is also present.
 +
 
 +
'''2.''' At Settings -> Permalinks, ensure that a pretty permalinks structure is being used. "Post name" is recommended.
 +
 
 +
'''3.''' At Settings -> General, you may want to ensure that Site Title and Tagline are correct. These appear on the site in the first module.
 +
 
 +
'''4.''' Create a Page for your site's homepage titled say "Home". Create another Page for your site's Posts page titled say "Blog". Create other Pages that you wish to have in your site like "About", "Contact" etc.
 +
 
 +
'''5.''' At Appearance -> Menus, create a menu named "Main Menu" having your desired menu items.
 +
 
 +
'''6.''' Go to My Theme -> Settings -> Import / Export (tab). Import layouts and views of the demo site. This can be found in BuilderChild-City-Church/layout-and-views/builder-export-city-church-layouts-and-views.zip. During the import process, if you are setting up your site newly i.e., you haven't made any changes to the default layouts and views, you might want to use the Replace option.
 +
 
 +
'''7.''' Edit all layouts and set Navigation Type of navigation module to "Main Menu".
 +
 
 +
'''8.''' Edit "Home Layout". Modify "Top Block" HTML module's settings and change Style from "Default" to "Html Blank".
 +
 
 +
'''9.''' Edit "Home" Page and set "Home Layout" layout for this Page. Go to Settings -> Reading, set "Home" as front page and "Blog" as Posts page.
 +
 
 +
'''10.''' In WordPress toolbar at the top, go to Builder -> Manage Widgets for this Layout. In "Top Block - Right" sidebar, drag a Text widget and give it this title: "Welcome to City Church" and [http://pastebin.com/gXYXAs9U this] for the content of widget.
 +
 
 +
'''11.''' Edit "Home Layout". Modify "Three Images" HTML module's settings. Change the code in text area to [http://pastebin.com/hieJf1bM this] and change Style from "Default" to "Html Blank".
 +
 
 +
'''12.''' Plugins -> Add New. Upload and activate Builder Block - Church plugin. To learn more about using this plugin's features like Sermons and Staff, scroll to the top of this wiki page and follow the Introduction section and below.
 +
 
 +
= How to change navigation bar's background so it appears full width =
 +
 
 +
[[File:Calvary Chapel The Brook 2012-07-10 09-29-02.png|500px|thumb|none|Before]]
 +
 
 +
[[File:Calvary Chapel The Brook 2012-07-10 10-17-19.png|500px|thumb|none|After]]
 +
 
 +
Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush:css;">
 +
.builder-module-navigation {
 +
    background: none;
 +
    border: none;
 +
    margin-bottom: 0;
 +
}
 +
 
 +
.builder-module-navigation-outer-wrapper {
 +
    background: #212121;
 +
background: -webkit-gradient(linear, left top, left bottom, from( #4F4F4F ), color-stop( 1%, #d0d0d0 ),  color-stop( 1%, #393939 ), color-stop( 50%, #393939 ), color-stop( 50%, #393939 ), to( #212121 )); /* Safari */
 +
background: -webkit-linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121); /* Chrome */
 +
background: -moz-linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121);
 +
background: -o-linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121);
 +
background: linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121);
 +
    border-color: #787878 #000000 #000000 #787878;
 +
border-style: solid;
 +
border-width: 1px;
 +
}
 +
</pre>
 +
 
 +
= How to show Play links to audio files in single sermon entries =
 +
 
 +
<gallery widths=200px>
 +
File:Screen Shot 2013-02-06 at 3.06.25 PM.png|Before
 +
File:Screen Shot 2013-02-06 at 3.01.45 PM.png|After
 +
</gallery>
 +
 
 +
'''1.''' Edit <code>single-sermon.php</code>.
 +
 
 +
Add
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php $audio = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'audio' ) ); ?>
 +
<?php if ( empty($audio) ) : ?>
 +
<?php edit_post_link( __( 'Edit Sermon', 'it-l10n-BuilderChild-City-Church' ) ); ?>
 +
<?php else : ?>
 +
<div class="sermon-block-wrapper sermon_mp3 left">
 +
<h3>Listen</h3>
 +
<!-- post meta - sermon mp3 link -->
 +
<div class="entry-meta sermon-mp3-link">
 +
<?php foreach ( $audio as $attachment_id => $attachment ) : ?>
 +
<a href="<?php echo wp_get_attachment_url( $attachment_id, 'full' ); ?>" title="<?php echo wp_get_attachment_link( $attachment_id, '' , false, false, ' '); ?>" rel="audio-file">MP3</a>
 +
<?php endforeach; ?>
 +
</div>
 +
</div>
 +
<?php endif; ?>
 +
</pre>
 +
 
 +
wherever you wish to show the Play links.
 +
 
 +
Ex.: Below
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<!-- post content -->
 +
<div class="entry-content clearfix">
 +
<?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-City-Church' ) ); ?>
 +
</div>
 +
</pre>
 +
 
 +
'''2.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
.single-sermon .sermon .entry-meta.sermon-mp3-link a {
 +
display: block;
 +
width: 52px;
 +
height: 52px;
 +
margin: 0 auto;
 +
background: transparent url('images/mp3-play-link.png') no-repeat scroll center center;
 +
text-indent: -9999px;
 +
}
 +
</pre>
 +
 
 +
= How to show featured image in single sermon entries =
 +
 
 +
<gallery widths=200px>
 +
File:Screen Shot 2013-02-06 at 3.19.13 PM.png|Before
 +
File:Screen Shot 2013-02-06 at 3.18.48 PM.png|After
 +
</gallery>
 +
 
 +
'''1.''' Edit <code>single-sermon.php</code>.
 +
 
 +
Add
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<div class="sermon-block-wrapper image left">
 +
<?php if ( has_post_thumbnail() ) : ?>
 +
<?php the_post_thumbnail( 'sermon-archive' ); ?>
 +
<?php else : ?>
 +
<?php edit_post_link( '<img src="' . get_bloginfo('stylesheet_directory') . '/images/staff-profile-default.jpg" />', '<div class="entry-image left">', '</div>' ); ?>
 +
<?php endif; ?>
 +
</div>
 +
</pre>
 +
 
 +
above
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<!-- post content -->
 +
<div class="entry-content clearfix">
 +
<?php the_content( __( 'Read More&rarr;', 'it-l10n-BuilderChild-City-Church' ) ); ?>
 +
</div>
 +
</pre>
 +
 
 +
'''2.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
 +
 
 +
<pre class="brush: css; gutter: false;">
 +
.single-sermon .sermon .sermon-block-wrapper.image {
 +
position: relative;
 +
z-index: 1;
 +
width: 30%;
 +
max-width: 200px;
 +
margin-top: 1.5em;
 +
margin-right: 1.5em;
 +
padding: 5px 5px 2px;
 +
background-color: #F9F9F9;
 +
border: 1px solid #EEEEEE;
 +
box-shadow: #AAAAAA 1px 1px 2px;
 +
}
 +
.single-sermon .sermon .image img {
 +
margin: 0;
 +
width: 100%;
 +
max-width: 200px;
 +
height: auto;
 +
padding: 0;
 +
border: 0;
 +
}
 +
.single-sermon .sermon .entry-content {
 +
clear: none;
 +
}
 +
</pre>
 +
 
 +
= How to remove "Position: " before the Staff Position term in Staff archive and single pages =
 +
 
 +
Edit child theme's <code>archive-staff.php</code>.
 +
 
 +
Change
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php echo get_the_term_list( $post->ID, 'staff_positions', 'Position: ', ' ', '' ); ?>
 +
</pre>
 +
 
 +
to
 +
 
 +
<pre class="brush: php; gutter: false;">
 +
<?php echo get_the_term_list( $post->ID, 'staff_positions', '', ' ', '' ); ?>
 +
</pre>
  
= Entry 4 =
+
Make the same change in <code>single-staff.php</code> as well.

Latest revision as of 02:31, February 14, 2013

Demo Site

Builder Church Block

Contents

Introduction

Install and activate BuilderChild-City-Church theme.

Builder Church Block is a WordPress plugin which adds sermons and staff post types for easily adding content to your church web site. While this plugin can be used with any theme, BuilderChild-City-Church theme uses functionality provided by this plugin via in-built template files for listing of Sermons and Staff entries etc.

Builder Church Block can be downloaded from here. After installing it like any other WordPress plugin and activating it, two new sections titled Sermons and Staff will be added to WP dashboard.

Sermons-staff-sections-dashboard.png

Sermons

Adding a Sermon

To add a new Sermon, click on Add New link next to Sermons and fill in the data like you would in any Post or Page.

Sample screenshot showing Add/Edit screen for Sermons Custom Post Type

It is recommended to add a Featured Image and a audio file (in mp3 format) to your Sermon entries where applicable/possible. These, if present, will appear on the Sermons listing page.

Note: In Sermon Audio File meta box, even though you might have uploaded mp3 file(s), the message "You currently have 0 audio file in your gallery for this sermon." will continue to show unless the entry is published.

Sermons Listing (Archive) page

There is no need to create a Page titled Sermons to display all Sermon entries. When you go to www.yoursite.com/sermons, it will automatically list the existing Sermons.

Note:

  • The above is assuming that Pretty Permalinks are enabled in your WordPress site.
  • Recommendation: Go to Settings -> Permalinks and have the permalink structure as either Day and name i.e, /%year%/%monthnum%/%day%/%postname%/ or /%postname%/
  • More info: http://codex.wordpress.org/Using_Permalinks


Click here to view a screenshot of Sermons Listing Page.

When the Play button under Listen is clicked, the audio plays in a lightbox.

Listening to a Sermon

Child Theme Settings

It is possible to display custom HTML above the Sermons listing w/o editing php files. Go to My Theme -> Settings -> Child Theme Settings. Any HTML that's entered in "Extra Text" field will automatically appear above the Sermons listing.

Screenshot showing custom HTML which appears above Sermons listing - Click to enlarge

If you would like to display a "Subscribe to the Podcast" button, go to My Theme -> Settings -> Child Theme Settings and enter the URL of your iTunes podcast in Podcast Link field.

Screenshot showing a Podcast Subscription button which automatically appears when a URL is entered in backend

We can enter a custom title which will appear in place of the default "Sermons" text on the Sermons listing page.

Screenshot showing a custom title for Sermons archive

Staff

Adding a Sermon

To add a new Staff person, click on Add New under Staff section and fill in the data like you would in any Post or Page.

Screenshot showing Add New Staff screen - Click to enlarge

Single page of Staff entry page looks like this:

Single-staff-entry-page.png

Clicking on Click for Long Bio will reveal the full content.

Staff Listing (Archive) page

There is no need to create a Page titled Staff to display all Staff entries. When you go to www.yoursite.com/staff, it will automatically list the existing Staff members.

Note:

  • The above is assuming that Pretty Permalinks are enabled in your WordPress site.
  • Recommendation: Go to Settings -> Permalinks and have the permalink structure as either Day and name i.e, /%year%/%monthnum%/%day%/%postname%/ or /%postname%/
  • More info: http://codex.wordpress.org/Using_Permalinks


Ex.:

Staff-listing-page.jpg

Blog

This theme uses the_content() (vs the_excerpt()) in index.php. Therefore you might want to break up your content if it is long using WordPress in-built more quicktag functionality.

In blog listing page, featured image (if present) for each post will automatically be displayed at the left side with content wrapping around it to the right.

Blog-posts-page.png

How to make Play button under Listen link to a specific URL

If the audio file that you want the Play button to link to is large, then because of host file size restrictions it might not get uploaded via the "Upload an audio file" button. In such cases you might want to upload the mp3 file to another server or place it on your server using a FTP client and have the Play button link to it. The steps below will explain how this can be done:

1. Install and activate Advanced Custom Fields plugin. Go to Settings -> Adv Custom Fields. Add a new custom field which should appear in Sermon entry edit screen.

Sermon-mp3-link.png

2. Edit Sermon entries and add the URL of your choice in the new metabox.

Mp3-link-metabox.png

3. Edit wp-content/themes/BuilderChild-City-Church/archive-sermon.php.

Below line 109, paste

						<?php if (get_field('sermon_mp3_link')) { ?>
							<div class="sermon-block-wrapper sermon_mp3 left">
								<h3>Listen</h3>
								<!-- post meta - sermon mp3 link -->
								<div class="entry-meta sermon-mp3-link">								
									<a href="<?php echo get_field('sermon_mp3_link'); ?>" rel="audio-file">MP3</a>
								</div>
							</div>
						<?php } ?>
Sermon-mp3-link-code.png

That's it.

This will make the Play button link to the URL of your choice that has been entered when editing the Sermon entry.

Sermon-mp3-link-onsite.png

How to set up City Church like the demo site

1. Activate City Church at Appearance -> Themes. Ensure that parent Builder is also present.

2. At Settings -> Permalinks, ensure that a pretty permalinks structure is being used. "Post name" is recommended.

3. At Settings -> General, you may want to ensure that Site Title and Tagline are correct. These appear on the site in the first module.

4. Create a Page for your site's homepage titled say "Home". Create another Page for your site's Posts page titled say "Blog". Create other Pages that you wish to have in your site like "About", "Contact" etc.

5. At Appearance -> Menus, create a menu named "Main Menu" having your desired menu items.

6. Go to My Theme -> Settings -> Import / Export (tab). Import layouts and views of the demo site. This can be found in BuilderChild-City-Church/layout-and-views/builder-export-city-church-layouts-and-views.zip. During the import process, if you are setting up your site newly i.e., you haven't made any changes to the default layouts and views, you might want to use the Replace option.

7. Edit all layouts and set Navigation Type of navigation module to "Main Menu".

8. Edit "Home Layout". Modify "Top Block" HTML module's settings and change Style from "Default" to "Html Blank".

9. Edit "Home" Page and set "Home Layout" layout for this Page. Go to Settings -> Reading, set "Home" as front page and "Blog" as Posts page.

10. In WordPress toolbar at the top, go to Builder -> Manage Widgets for this Layout. In "Top Block - Right" sidebar, drag a Text widget and give it this title: "Welcome to City Church" and this for the content of widget.

11. Edit "Home Layout". Modify "Three Images" HTML module's settings. Change the code in text area to this and change Style from "Default" to "Html Blank".

12. Plugins -> Add New. Upload and activate Builder Block - Church plugin. To learn more about using this plugin's features like Sermons and Staff, scroll to the top of this wiki page and follow the Introduction section and below.

How to change navigation bar's background so it appears full width

Before
After

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.builder-module-navigation {
    background: none;
    border: none;
    margin-bottom: 0;
}

.builder-module-navigation-outer-wrapper {
    background: #212121;
	background: -webkit-gradient(linear, left top, left bottom, from( #4F4F4F ), color-stop( 1%, #d0d0d0 ),  color-stop( 1%, #393939 ), color-stop( 50%, #393939 ), color-stop( 50%, #393939 ), to( #212121 )); /* Safari */
	background: -webkit-linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121); /* Chrome */
	background: -moz-linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121);
	background: -o-linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121);
	background: linear-gradient(#4F4F4F, #d0d0d0 1px, #393939 1px, #393939 50%, #323232 50%, #212121);
    border-color: #787878 #000000 #000000 #787878;
	border-style: solid;
	border-width: 1px;
}

How to show Play links to audio files in single sermon entries

1. Edit single-sermon.php.

Add

<?php $audio = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'audio' ) ); ?>
<?php if ( empty($audio) ) : ?>
	<?php edit_post_link( __( 'Edit Sermon', 'it-l10n-BuilderChild-City-Church' ) ); ?>
<?php else : ?>
	<div class="sermon-block-wrapper sermon_mp3 left">
		<h3>Listen</h3>
		<!-- post meta - sermon mp3 link -->
		<div class="entry-meta sermon-mp3-link">
		<?php foreach ( $audio as $attachment_id => $attachment ) : ?>
			<a href="<?php echo wp_get_attachment_url( $attachment_id, 'full' ); ?>" title="<?php echo wp_get_attachment_link( $attachment_id, '' , false, false, ' '); ?>" rel="audio-file">MP3</a>
		<?php endforeach; ?>
		</div>
	</div>
<?php endif; ?>

wherever you wish to show the Play links.

Ex.: Below

<!-- post content -->
<div class="entry-content clearfix">
	<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-City-Church' ) ); ?>
</div>

2. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.single-sermon .sermon .entry-meta.sermon-mp3-link a {
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto;
	background: transparent url('images/mp3-play-link.png') no-repeat scroll center center;
	text-indent: -9999px;
}

How to show featured image in single sermon entries

1. Edit single-sermon.php.

Add

<div class="sermon-block-wrapper image left">
<?php if ( has_post_thumbnail() ) : ?>
	<?php the_post_thumbnail( 'sermon-archive' ); ?>
<?php else : ?>
	<?php edit_post_link( '<img src="' . get_bloginfo('stylesheet_directory') . '/images/staff-profile-default.jpg" />', '<div class="entry-image left">', '</div>' ); ?>
<?php endif; ?>
</div>

above

<!-- post content -->
<div class="entry-content clearfix">
	<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-City-Church' ) ); ?>
</div>

2. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

.single-sermon .sermon .sermon-block-wrapper.image {
	position: relative;
	z-index: 1;
	width: 30%;
	max-width: 200px;
	margin-top: 1.5em;
	margin-right: 1.5em;
	padding: 5px 5px 2px;
	background-color: #F9F9F9;
	border: 1px solid #EEEEEE;
	box-shadow: #AAAAAA 1px 1px 2px;
}
.single-sermon .sermon .image img {
	margin: 0;
	width: 100%;
	max-width: 200px;
	height: auto;
	padding: 0;
	border: 0;
}
.single-sermon .sermon .entry-content {
	clear: none;
}

How to remove "Position: " before the Staff Position term in Staff archive and single pages

Edit child theme's archive-staff.php.

Change

<?php echo get_the_term_list( $post->ID, 'staff_positions', 'Position: ', ' ', '' ); ?>

to

<?php echo get_the_term_list( $post->ID, 'staff_positions', '', ' ', '' ); ?>

Make the same change in single-staff.php as well.

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox