BuilderChild-Thinner

(Difference between revisions)
Jump to: navigation, search
(Added = How to get sliding images on Posts listing page =)
 
m (How to replace standard search widget's look and behavior with the one in footer)
(9 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
Thinner child theme includes Featured Image Slider extension which is what is being applied for the layout used by the homepage at [http://demos.ithemes.com/thinner/ Thinner's demo site].
 
Thinner child theme includes Featured Image Slider extension which is what is being applied for the layout used by the homepage at [http://demos.ithemes.com/thinner/ Thinner's demo site].
  
Screenshot: http://ithemes.com/codex/images/8/83/Thinner-slider-extn-after.png
+
[[File:Thinner 2012-07-23 16-17-23.png|800px|thumb|none]]
  
 
Featured Image Extension displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts. Therefore you should edit the posts whose featured images you would like to be displayed in the slider and add featured images in all of them.
 
Featured Image Extension displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts. Therefore you should edit the posts whose featured images you would like to be displayed in the slider and add featured images in all of them.
Line 18: Line 18:
  
 
This extension can be any applied to a layout or view for listing pages like the Homepage (where posts appear by default) or Posts page or archive page or category page.
 
This extension can be any applied to a layout or view for listing pages like the Homepage (where posts appear by default) or Posts page or archive page or category page.
 +
 +
= How to move wide featured image above the content in single posts to right side with content wrapping around =
 +
 +
[[File:My Test Site 2012-07-23 16-23-33.png|800px|thumb|none|Before]]
 +
 +
[[File:My Test Site 2012-07-23 16-25-04.png|800px|thumb|none|After]]
 +
 +
'''1.''' Edit lib/image-sizes.php in child theme.
 +
 +
Change
 +
 +
<pre class="brush:php;">
 +
add_image_size( 'singular-alternate-image', 650, 200, true );
 +
</pre>
 +
 +
to say,
 +
 +
<pre class="brush:php;">
 +
add_image_size( 'singular-alternate-image', 300, 200, true );
 +
</pre>
 +
 +
where 300 and 200 are your desired max width and height values for the featured image.
 +
 +
'''2.''' Add the following at the end of child theme's style.css:
 +
 +
<pre class="brush:css;">
 +
.single .entry-image img {
 +
    width: auto;
 +
}
 +
 +
.single .entry-image {
 +
float: right;
 +
margin-left: 1em;
 +
}
 +
</pre>
 +
 +
= How to get "Read More→" below each post when using "Teasers Layout - Image Left" extension =
 +
 +
When "Thinner Teasers Layout - Image Left" extension is used on a listing page (like Posts page or a category page), "Read More→" will only appear under those posts which have more than 60 words. i.e., If a post has more than 60 words, the first 60 words are shown and the rest will be cut off with "Read More→" automatically appearing. If a post has less than 60 words, "Read More→" will not appear by default.
 +
 +
'''If you would like to have "Read More→" appearing always below each post irrespective of length of the post follow this:'''
 +
 +
[[File:Thinner-readmore-below-each-post.png|363px|thumb|none|Click to enlarge]]
 +
 +
Edit wp-content/themes/BuilderChild-Thinner/extensions/post-teasers-left/functions.php.
 +
 +
Below <code><?php the_excerpt(); ?></code>, add
 +
 +
<pre class="brush:php;">
 +
<p><a href="<?php the_permalink(); ?>" class="more-link">Read More&rarr;</a></p>
 +
</pre>
 +
 +
Change
 +
 +
<pre class="brush:php;">
 +
function builder_teasers_left_excerpt_more( $more ) {
 +
global $post;
 +
return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More&rarr;</a></p>';
 +
}
 +
</pre>
 +
 +
to
 +
 +
<pre class="brush:php;">
 +
function builder_teasers_left_excerpt_more( $more ) {
 +
global $post;
 +
return '';
 +
}
 +
</pre>
 +
 +
= How to modify Slider extension to show posts from a specific category =
 +
 +
'''1.''' Copy wp-content/themes/Builder/extensions/slider to wp-content/themes/BuilderChild-Thinner/extensions/slider.
 +
 +
'''2.''' Edit wp-content/themes/BuilderChild-Thinner/extensions/slider/functions.php.
 +
 +
Change
 +
 +
<pre class="brush:php;">
 +
$args = array(
 +
'posts_per_page' => 6,
 +
'order'          => 'date',
 +
'meta_key'      => '_thumbnail_id'
 +
);
 +
</pre>
 +
 +
to
 +
 +
<pre class="brush:php;">
 +
$cat_id = get_cat_id('services');
 +
$args = array(
 +
'posts_per_page' => 6,
 +
'order'          => 'date',
 +
'meta_key'      => '_thumbnail_id',
 +
'cat'          => $cat_id
 +
);
 +
</pre>
 +
 +
In the above, change "services" to the slug of category from which posts should be shown in slider.
 +
 +
[http://ithemes.com/forum/index.php?/topic/20302-how-can-i-filter-posts-shown-thinner-child-theme-featured-image-slider/#p97162 Related forum post].
 +
 +
= How to replace standard search widget's look and behavior with the one in footer =
 +
 +
To replace the default/standard appearance/behavior of search widget, i.e.,
 +
 +
[[File:2012-08-16 13-44-09.png|799px|thumb|none]]
 +
 +
with
 +
 +
[[File:2012-08-16 13-45-50.png|800px|thumb|none]]
 +
 +
'''1.''' Create a file named <code>searchform.php</code> in Thinner's directory having this code:
 +
 +
<pre class="brush:php;">
 +
<?php $search_box_default = __( 'Search', 'it-l10n-BuilderChild-Thinner' ); ?>
 +
<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>
 +
<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>
 +
<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
 +
<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
 +
</form>
 +
</pre>
 +
 +
'''2.''' Add the following at the end of Thinner's style.css (WP dashboard -> Appearance -> Editor):
 +
 +
<pre class="brush:css;">
 +
.search-form input[type="text"] {
 +
width: 40px;
 +
margin: 0;
 +
margin-top: 2px;
 +
padding: 10px 12px;
 +
background-color: #EEEEEE;
 +
border-color: #636B72;
 +
color: #636B72;
 +
text-shadow: #FFFFFF 0px 1px 1px;
 +
-webkit-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
-webkit-transition:  width .2s ease-in-out;
 +
-moz-transition:  width .2s ease-in-out;
 +
-o-transition:  width .2s ease-in-out;
 +
transition:  width .2s ease-in-out;
 +
font-size: 0.75em;
 +
}
 +
.search-form input[type="text"]:hover {
 +
background: #DDDDDD;
 +
cursor: pointer;
 +
}
 +
.search-form input[type="text"]:focus {
 +
width: 200px;
 +
background: #FBFBFB url('images/search-glass.png') center right no-repeat;
 +
color: #555555;
 +
text-shadow: none;
 +
-webkit-border-radius: 20px;
 +
-moz-border-radius: 20px;
 +
border-radius: 20px;
 +
-webkit-box-shadow: inset #888888 1px 1px 2px;
 +
-moz-box-shadow: inset #888888 1px 1px 2px;
 +
box-shadow: inset #888888 1px 1px 2px;
 +
}
 +
</pre>
 +
 +
<u>Note:</u> If you want to use the search widget in the right sidebar of say, Header module, ensure that the sidebar width is at least 250px in module's settings.
 +
 +
That's it!
 +
 +
If you would like to display this search in a HTML module, enable PHP in it and use this code:
 +
 +
<pre class="brush:php;">
 +
<?php get_search_form(); ?>
 +
</pre>

Revision as of 02:26, August 16, 2012

Contents

How to get sliding images on Posts listing page

Thinner child theme includes Featured Image Slider extension which is what is being applied for the layout used by the homepage at Thinner's demo site.

Thinner 2012-07-23 16-17-23.png

Featured Image Extension displays Featured Image & Post Title of first 6 posts in a custom slider and the Featured Image, Post Title & Excerpt for the remaining posts. Therefore you should edit the posts whose featured images you would like to be displayed in the slider and add featured images in all of them.

Follow these steps to get a working slider on your site's homepage:

1. Ensure that there is a separate layout to be used for homepage. Edit this layout and apply "Featured Image Slider" extension.

Slider-extn-home-layout.png

2. Add a view associating Home view with the layout set aside for homepage.

Set-view-to-layout.png

This extension can be any applied to a layout or view for listing pages like the Homepage (where posts appear by default) or Posts page or archive page or category page.

How to move wide featured image above the content in single posts to right side with content wrapping around

Before
After

1. Edit lib/image-sizes.php in child theme.

Change

	add_image_size( 'singular-alternate-image', 650, 200, true );

to say,

	add_image_size( 'singular-alternate-image', 300, 200, true );

where 300 and 200 are your desired max width and height values for the featured image.

2. Add the following at the end of child theme's style.css:

.single .entry-image img {
    width: auto;
}

.single .entry-image {
	float: right;
	margin-left: 1em;
}

How to get "Read More→" below each post when using "Teasers Layout - Image Left" extension

When "Thinner Teasers Layout - Image Left" extension is used on a listing page (like Posts page or a category page), "Read More→" will only appear under those posts which have more than 60 words. i.e., If a post has more than 60 words, the first 60 words are shown and the rest will be cut off with "Read More→" automatically appearing. If a post has less than 60 words, "Read More→" will not appear by default.

If you would like to have "Read More→" appearing always below each post irrespective of length of the post follow this:

Click to enlarge

Edit wp-content/themes/BuilderChild-Thinner/extensions/post-teasers-left/functions.php.

Below <?php the_excerpt(); ?>, add

<p><a href="<?php the_permalink(); ?>" class="more-link">Read More→</a></p>

Change

function builder_teasers_left_excerpt_more( $more ) {
	global $post;
	return '...<p><a href="'. get_permalink( $post->ID ) . '" class="more-link">Read More→</a></p>';
}

to

function builder_teasers_left_excerpt_more( $more ) {
	global $post;
	return '';
}

How to modify Slider extension to show posts from a specific category

1. Copy wp-content/themes/Builder/extensions/slider to wp-content/themes/BuilderChild-Thinner/extensions/slider.

2. Edit wp-content/themes/BuilderChild-Thinner/extensions/slider/functions.php.

Change

					$args = array(
						'posts_per_page' => 6,
						'order'          => 'date',
						'meta_key'       => '_thumbnail_id'
					);

to

					$cat_id = get_cat_id('services');
					$args = array(
						'posts_per_page' => 6,
						'order'          => 'date',
						'meta_key'       => '_thumbnail_id',
						'cat'  	         => $cat_id
					);

In the above, change "services" to the slug of category from which posts should be shown in slider.

Related forum post.

How to replace standard search widget's look and behavior with the one in footer

To replace the default/standard appearance/behavior of search widget, i.e.,

2012-08-16 13-44-09.png

with

2012-08-16 13-45-50.png

1. Create a file named searchform.php in Thinner's directory having this code:

<?php $search_box_default = __( 'Search', 'it-l10n-BuilderChild-Thinner' ); ?>
<?php $search_box_value = esc_attr( apply_filters( 'the_search_query', get_search_query() ) ); ?>
<?php $search_box_value = ( empty( $search_box_value ) ) ? $search_box_default : $search_box_value; ?>
<form method="get" class="search-form" action="<?php echo get_option( 'home' ); ?>">
	<input type="text" value="<?php echo $search_box_value; ?>" name="s" class="search-text-box" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
</form>

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

.search-form input[type="text"] {
	width: 40px;
	margin: 0;
	margin-top: 2px;
	padding: 10px 12px;
	background-color: #EEEEEE;
	border-color: #636B72;
	color: #636B72;
	text-shadow: #FFFFFF 0px 1px 1px;	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-transition:  width .2s ease-in-out;
	-moz-transition:  width .2s ease-in-out;
	-o-transition:  width .2s ease-in-out;
	transition:  width .2s ease-in-out;
	font-size: 0.75em;
}
.search-form input[type="text"]:hover {
	background: #DDDDDD;
	cursor: pointer;
}
.search-form input[type="text"]:focus {
	width: 200px;
	background: #FBFBFB url('images/search-glass.png') center right no-repeat;
	color: #555555;
	text-shadow: none;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset #888888 1px 1px 2px;
	-moz-box-shadow: inset #888888 1px 1px 2px;
	box-shadow: inset #888888 1px 1px 2px;
}

Note: If you want to use the search widget in the right sidebar of say, Header module, ensure that the sidebar width is at least 250px in module's settings.

That's it!

If you would like to display this search in a HTML module, enable PHP in it and use this code:

<?php get_search_form(); ?>
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox