How to Customize Teaser box in Thesis Theme Homepage

In this tutorial I will show you two things one how to style you teaser box in home page  and second one is to add read more, add your comment link in home page teaser box. Normally thesis theme homepage is very simple. Which has content box, multimedia box feature box and sidebars. Inside content box we are having teaser box. By default thesis teaser having two posts adjacently like the below image.

In order to look better we need to align posts one by one in homepage. And also set only six to eight posts in homepage like fourblogger homepage. Align one post in teaser full width ( ie your content box width) with read full article link in teaser menu. To achieve the above statement copy and paste the following code in custom.css file.

/* customize teaser box paste it in custom.css file  */

.custom .teaser_box{
width: 63.5em;  padding: 0; border-width: 0;
}
.custom .teaser{
width: 63.5em;  height:100%; margin-top:1em; margin-bottom:2em;

}
.custom .teaser .format_teaser {
font-size:1.4em;
}
.custom .teaser h2{
font-size: 2em;
text-align:left;
}

The above code I have changed my teaser-box and teaser width as same. You should replace with your content width. And if you want you can change your font size inside the teaser.

To place the above code in custom.css follow the below steps.

Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard. Select custom.css file and click on edit selected file.

Paste the above code and save it. Check you site which having new look to your teaser box.

How to add Read more and Add Comment links in Teaser

Here I am going to tell you how to add post and comment links in teaser menu(home page). In other words I will show you how to add number of comment links, add your comment link or add your opinion link and read full article link in home page teaser.

First we need to remove default full article and comments link. For this go to wordpress dash board.

Choose ‘design options’ under thesis options in left sidebar of the wordpress dashboard. Select ‘teasers’ section and inside this remove the mark from number of comments and read full article. Then click on big ass to save button.

Now copy and paste the following code in custom_function.php file. Use ftp to paste the below code or you can also use direct method.

/*This adds the menu links under the teaser posts, play around with the styling.*/

/* SAVE THIS IN CUSTOM_FUNCTIONS.PHP FILE */

function teaser_box_links() {
if (!is_single() && !is_page()){ ?>

<div id="teaserempty"></div>
<div id="teaserlinkscontainer">
<ul id="teasermenu">
<li><a href="<?php the_permalink(); ?>#comments" title="<?php comments_number(__('0 Comments','thesis'), __('1 Comment','thesis'), __('% Comments','thesis')); ?> on <?php the_title(); ?>" rel="nofollow"><?php comments_number(__('0 Comments','thesis'), __('1 Comment','thesis'), __('% Comments','thesis')); ?></a></li>
<li><a href="<?php the_permalink(); ?>#respond" title="Add your opinion on <?php the_title(); ?>" rel="nofollow">Add your Comment</a></li>
<li><a href="<?php the_permalink(); ?>" title="Continue Reading: <?php the_title(); ?>" rel="bookmark">Read More...</a></li>
<li><p></p></li>
</ul>
</div>
<?php } }

//teaser hook menu-links

add_action('thesis_hook_after_teaser','teaser_box_links');

For ftp The remote path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/custom_functons.php. Open this file and paste the above code. And save it.

The above code you can change your own name for the links instead of comments, add your comment and read more.

Now you have added the function for post link in teaser menu. We should style the teaser menu with font size and color. For this add the following code in custom .css file.

/* SAVE THIS IN CUSTOM.CSS FILE */
.custom .teaser {width: 100%; margin-top: 0.25em; padding-top: 0.25em; text-align: justify;}
.custom .teasers_box {padding-top: 0; padding-bottom:0; border-top: 0;}
.custom #teaserlinkscontainer {margin-top:0px;}
.custom #teasermenu {height: 30px;}
.custom #teasermenu , .teasermenu ul {padding: 0; margin: 0; list-style: none; line-height: 1; border-width: 0.5em 0.5em 0.5em 0.5em;}
.custom #teasermenu ul {float: left; list-style: none; margin: 0px 0px 0px 0px; padding: 0px;}
.custom #teasermenu li {float: left; list-style: none; margin: 0px; padding: 0px;}
.custom #teasermenu ul li {list-style: none; margin: 0px; padding: 0px;}
.custom #teasermenu a, .custom #teasermenu li ul {border-color: #111;}
.custom #teasermenu li a, .custom #teasermenu  li a:link {color: #1B32C4; background:none; display: block; font-weight: bold; margin: 16px; margin-top:9px; padding: 5px 5px 5px 5px; text-decoration: none;  font-size: 13px; font-family: Arial, Helvetica, sans-serif; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}
.custom #teasermenu li a:hover, {color: #1B32C4; background: #7BAAD9; display: block; margin: 14px 8px 14px 14px; padding: 5px 5px 5px 5px; text-decoration: none; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}
.custom #teaserempty {width: 100%; margin-top: 0.5em; margin-bottom: 0.5em;}
.custom #teasermenu li p,{color: #000000; background: #D0D0D0; display: block; width: 100%}

The above code you can change the link background color and other things. Then save it.

Now visit your site which having new looks in your home page.

Share your experience in comment section.

Related Tutorials:

1. How to add Background Image in Teaser box at Homepage of Thesis Theme
2. How to Change sidebar widget background and Border in Thesis Theme
3. 11 Css Tricks for Thesis Theme Customization
4. How to Customize Side Bar Heading Background colors and Fonts in Thesis Theme?
5. How to add Tweet meme Button inside the Teaser and postbox of Thesis Theme

Tagged as: background, color, homepage, teaser, teaser box