BuilderChild-Thinner

(Difference between revisions)
Jump to: navigation, search
(Added = How to replace standard search widget's look and behavior with the one in footer =)
m (How to replace standard search widget's look and behavior with the one in footer)
(One intermediate revision by one user not shown)
Line 130: Line 130:
 
[[File:2012-08-16 13-45-50.png|800px|thumb|none]]
 
[[File:2012-08-16 13-45-50.png|800px|thumb|none]]
  
'''1.''' Create a file named searchform.php in Thinner's directory having this code:
+
'''1.''' Create a file named <code>searchform.php</code> in Thinner's directory having this code:
  
 
<pre class="brush:php;">
 
<pre class="brush:php;">
Line 179: Line 179:
 
}
 
}
 
</pre>
 
</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!
 
That's it!

Revision as of 03: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