From iThemes Codex
Revision as of 07:46, 29 November 2011 by Sridhar (talk | contribs) (Added Method 2 in How to show excerpts with post thumbnails in Posts page and archive pages)
Jump to: navigation, search

Demo Site

How to style navigation menu in non Header module

When a Custom Menu widget is used in Header module, it gets styled automatically as can be seen in the demo site.

To get the same styling working in a non Header module, like say, a widget bar module, add this CSS code at end of your child theme's style.css.

Note: In the CSS code, "1" in ".builder-module-1" must be changed to match the position of module from the top.

How to set default text in search field


Create a file named searchform.php in the child theme directory having this code:

<?php $search_box_default = __( 'Search site', 'it-l10n-BuilderChild-Acute-Blue' ); ?>
<?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 role="search" method="get" id="searchform" action="<?php echo get_option( 'home' ); ?>/">
		<input type="text" value="<?php echo $search_box_value; ?>" name="s" id="s" onfocus="if(this.value == '<?php echo $search_box_default; ?>') this.value = '';" onblur="if(this.value == '') this.value = '<?php echo $search_box_default; ?>';" />
		<input type="submit" id="searchsubmit" value="<?php echo esc_attr__( 'Search', 'it-l10n-BuilderChild-Acute-Blue' ); ?>" />

In the above, change

  1. Search site to the text that you would like to appear by default in the search box.
  2. it-l10n-BuilderChild-Acute-Blue to indicate the particular color variation of Acute. This is only for translation purpose.

How to add a logo in the header module


1. Edit the layout(s), edit the Header module and add a left sidebar that is at least as wide as the logo.


For a logo that's 113px wide, here's a screenshot of the module being edited


2. At Appearance -> Widgets, add a text widget into the sidebar of this header module having the code needed to display logo.


<a href="http://localhost/builder3"><img src="http://localhost/builder3/wp-content/themes/BuilderChild-Acute-Blue/images/logo.png" width="113" height="113" alt="home" /></a>

Note: In the above, change the URLs, width and height appropriately.

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

.right .site-title, .right .site-tagline {
    text-align: left;

.builder-module-1 .builder-module-sidebar {
    padding-top: 0;
    padding-bottom: 0;

.builder-module-1 .widget {
    padding: 0;

How to show excerpts with post thumbnails in Posts page and archive pages

All child themes in Acute series use

<?php the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>

for the display of content.

To get more link to appear in the posts, all you have to do is edit the posts and insert more quicktag (<!–more–> when in HTML view). Wherever the more quicktag is present, the post gets cut off at that point with a "Read More..." link to read the rest of the post.

If you like to use the_excerpt() instead of the_content() so that posts automatically get cut off after a set number of words, follow one of the two methods below:

Method 1


1. Edit child theme's content.php.


<!-- post content -->
						<div class="entry-content clearfix">
							<?php the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>


<?php if (has_post_thumbnail()) { ?>
							<div class="front-page-thumbnail">
								<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('front-page-thumbnail'); ?></a>
						<?php } ?>	
						<!-- post content -->
						<div class="entry-content clearfix">
							<?php //the_content( __( 'Read More...', 'it-l10n-BuilderChild-Acute-Blue' ) ); ?>
							<?php the_excerpt(); ?>

2. Edit child theme's functions.php.

Add the following at end:

function acute_excerpt_length($length) {
	return 65;
add_filter('excerpt_length', 'acute_excerpt_length');
function acute_excerpt_more($excerpt) {
	global $post;
	return '<br /><p class="readmore"><a class="more-link" href="' . get_permalink($post->ID) . '">Read More →</a></p>';
add_filter('excerpt_more', 'acute_excerpt_more');

add_image_size('front-page-thumbnail', 150, 150, true);

In the above, excerpt length can be changed from 65 to your desired number of words that should appear in each excerpt.

3. Edit child theme's style.css.

Add the following at end:

.front-page-thumbnail {
    float: left;
    margin-right: 1em;
    margin-top: 1.6em;

.blog .entry-content, .archive .entry-content {
    clear: none;
    margin-top: 0;

Method 2


This method involves applying "Teasers Layout - Image Left" extension, as is or modified to the layouts being used for homepage and archives.

The default excerpt length (number of words) in this extension is 60. The default post thumbnail dimensions in this extension is 150x200.

If you do not wish to make any changes to the above values, the following steps need not be performed. Just apply this extension to your homepage layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).

If you wish to change excerpt length and/or post thumbnail dimensions, do these steps:

1. Copy/upload wp-content/themes/Builder/extensions/post-teasers-left to wp-content/themes/BuilderChild-Acute-Blue/extensions.

In the above "BuilderChild-Acute-Blue" should be replaced with the Acute child theme currently being used. "extensions" folder will not be present by default in any child theme. It should be created in this case.

2. Edit wp-content/themes/BuilderChild-Acute-Blue/extensions/functions.php.

To change excerpt length, change 60 in the following to your desired value.

function excerpt_length( $length ) {
			return 60;

To change post thumbnail dimensions, edit the following in lib/image-size.php:

add_image_size( 'it-teaser-thumb', 150, 200, true );

3. Apply this extension to your homepage layout and archives/category pages layout (via My Theme -> Layouts & Views -> Views).