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.

default teaser

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.

full width teaser box

thesis 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.

teaser box with add comment link

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 68 comments… add one }

Leave a Comment

  • Jaydip Parikh January 5, 2010, 10:55 AM

    One more time gr8 post by you, Superb !! Keep sharing mate.

    Reply
    • Pascal January 5, 2010, 12:14 PM

      Thanks for continuous reading and support.

      Reply
      • aviationMY February 15, 2010, 4:22 PM

        Hi, Pascal.

        i want a special request here? hehe…

        How to add Read more and Add Comment links in Teaser

        the above title i want it to change in post..how to do that?..im not using teaser, im using totally featured post..

        so..if any of that can change the code?

        i just want the read more, add a comment in post only..thats all..so its look rich..because the default post only no. of comments that float left.

        Thanks in advance.

        Reply
        • Suresh February 15, 2010, 9:47 PM

          Hai aviationMy,

          To add readmore.. and add comment link in your homepage. follow the bellow instructions..
          1. Go to thesis options->Display options->post. under this select ‘display post excepts’ in stead of display full post content.
          2. follow the same instructions specified in this post to add ‘read more and add comment link in teaser. only replace the hook ‘thesis_hook_after_post’ instead of ‘thesis_hook_after_teaser’ in custom_functions.php. You will get the menu links in homepage..

          Reply
          • aviationMY February 28, 2010, 8:29 PM

            Ok,
            thank you for the respond..but if let say we make a featured post style in thesis theme and i want to use tag.

            So, my question are:

            1. how to to style the tag in Thesis theme? actually i just want to put some bg color and alil bit radisu with a nice hover effect…but i dont know what is the CSS name for that tag.

            2. how to customize [click to continue…] in Thesis theme… maybe question 1 and 2 looks identical but the bottom is i want to stle the [click to continue…] or tag..

            if i knew the CSS name…my blog will be nice when visitors see my read more link..

            anyway thank you!

            Reply
            • aviationMY February 28, 2010, 8:31 PM

              sorry…i mean the ** tag in question 1.

              Reply
              • Suresh March 1, 2010, 10:40 AM

                hai aviationmy,

                where you need your tags background and hover effect in homepage or single post page?. I will will give you the code according to that..
                for your second question first add click to continue link by enabling teaser in homepage.. or go to thesis options ->display options-> posts and select display post excepts you will get click to continue link..then you can style it..

                Reply
  • bharat January 16, 2010, 1:51 PM

    hi
    i applied all the code , but still not able to see any difference on my site , nothing is coming up . i think i am missing something or some other settings are tempering with this one , can you please point out.

    Reply
  • Pascal February 8, 2010, 11:19 AM

    i saw your site. it is working correctly. i dont know which one you are mention, tell me exactly. I think your are not enabled teaser in your homepage. it shows like post format..

    Reply
    • Pascal February 8, 2010, 10:09 PM

      For that first you have to enable the teaser box in home page. To enable teaser box goto thesis option – choose home page display in that you have to set Number of featured posts to show “0″. then you will get the teaser.

      Reply
      • Suresh February 9, 2010, 10:07 AM

        Hai vivek,

        I saw your screen shot and found some reasons for your problem, you are not enabled teaser in homepage.
        check the following,
        1. enable homepage display number of posts shown is ’0′ in thesis options.
        2. check have you marked ‘post excerpt’ at teaser display options in design options if not mark it.
        3 check the post and thumbnail image settings select vertical position as ‘before post/page content’ in thesis options.
        4. go to edit post you check post image and thumbnail image url. don’t give url in thumbnail image if you given url here you should use the exact image size in thumbnail. give your url in post image and set thumbnail size.post image has been adjusted to your thumb size. if you dont want this image inside the post enable the options in post image settings.

        if you have problem contact via contact form.

        Reply
        • Suresh February 9, 2010, 12:00 PM

          your welcome… vivek

          Reply
          • Suresh February 9, 2010, 4:34 PM

            I have checked your site it is working fine.. first upload image in media library then get the url from there.
            then paste the url in post image .. it will shown in homepage..

            Reply
  • Penny April 12, 2010, 4:23 PM

    I have a request…instead of changing the teaser from 2 boxes side by side to 1 box, I would like to have 3 boxes side by side. How do I tweak the codes? Thanks! :)

    Reply
    • Suresh April 13, 2010, 5:08 PM

      hai penny,
      If you need three column teaser box just reduce the width of the teaser. Normally In two column teaser if your content has width 56em means your teaser has 27 em half of the content. Now you change it in to one third of content with ie) teaser width 14em..in custom.css file.

      Reply
  • Marcy from The Glamorous Life Association April 18, 2010, 9:17 PM

    Awesome post!
    But my struggle is PHOTOS and THMBNAILS. Any way to increase the size of the thumbnail?
    Anyway to have Thesis automatically pic up a photo from the post and make it a thumbnail (right now I have to put the http:// link of the image into the post. Which means I have to Post and then go see the address of the image and go back into post editor to add! Since I post 3 times a day…this is a HUGE drag.

    Help. YOu are the genius to fix this!

    Reply
  • Suresh May 5, 2010, 9:48 AM

    hai amit,

    go to thesis options in wp admin select homepage display here we need to set “number of feature posts to show” as zero.

    I think now it was 2.

    Reply
  • tutorial wordpress May 19, 2010, 11:20 AM

    I just wondering, how to add solid border each box? :(

    Reply
    • Suresh May 19, 2010, 1:28 PM

      hai,
      To add solid border in each teaser box.

      add the below line in custom.css file
      .custom .teaser {border: 2px solid #eee;}
      the above code you can change the border width size and color code.

      Reply
  • wilander May 23, 2010, 10:41 PM

    Suresh hi ,

    i am new to this wordpress , i hav a doubt i have did every thing for displaying comment , add comment and readmore link to display on home page , but still not displaying ,

    plz plz help me, should i wat to change the settings before pasting those codes,…if so wat settings plz guide me plz plz plz plz
    thanks you

    Reply
    • Suresh May 23, 2010, 11:53 PM

      hai wilander,
      You homepage is not having teaser box..
      First enable teaser in homepage then do customization..

      To enable teaser
      Go to thesis options in wp-admin..(site options in thesis1.7).
      expand homepage display.

      set ‘number of featured post to show in homepage’ as zero.
      now teaser will enabled.

      your customization will work..

      Reply
      • wilander May 24, 2010, 6:50 PM

        hai Suresh,

        alas! thank u so much its working, Really hearty thank full to u?
        Keep rocking…

        Reply
        • Suresh May 24, 2010, 7:12 PM

          hai wilander,

          Get more video tutorials about thesis customization on our youtube channel

          Reply
  • Joseph Condron May 25, 2010, 5:23 AM

    Hi Suresh,

    Many thanks for posting a wonderfully helpful article. I have been implementing some of fourblogger’s advice on my site.

    I have encountered two problems: I can’t get the social bookmarking icons to display properly in the header and I have inadvertently dragged down some of my posts. There are now some huge spaces on the homepage between the post excerpt and the add comment, read more tags. While other posts on the homepage are fine.

    Would you mind taking a look? I have been racking my brains over it for quite some time now with no solution in sight!

    Thanks for having such a wonderful and helpful site.

    Regards Joseph.

    Reply
    • Suresh May 25, 2010, 12:04 PM

      hai Joseph,

      To reduce space between the teaser title and add comment links

      In your custom_function.php file.
      In before teaser code you have number of &nbsp remove all nbsp;

      use the below code in custom.css file

      .custom .teaser {margin-bottom:0em;}

      Also there is no social icons code in header..

      Reply
  • Gojeg May 25, 2010, 1:29 PM

    Hmm,,nice tutorial. I’ve just migrated to Thesis. It’s a great theme!

    Reply
  • Gojeg June 3, 2010, 3:28 PM

    Nice tutorial, I’ve just migrated to Thesis. This is very useful. :D

    Reply
  • wahid June 28, 2010, 5:14 PM

    Hello, I am having a problem.After using this code i have two post in every every teaser box.What have i done wrong?

    Reply
    • Suresh June 29, 2010, 4:20 AM

      hai wahid,
      I think now it is working fine…….

      Reply
  • DAVID July 13, 2010, 12:04 PM

    I have just started using thesis. I was following your thesis customization ebook but i have a problem.My homepage shows 2 posts in full content while the others are just teasers. I want all the of them to be teasers. How do i do that?plz help.

    Reply
    • Pascal July 20, 2010, 11:02 PM

      Have you fixed the issue? IF not and need my help, contact me via contact form. THanks

      Reply
  • threza July 19, 2010, 9:26 AM

    hello…. i want to know how to add box type rectangle borders around the teaser….like in your home……..

    Reply
    • Pascal July 20, 2010, 10:54 PM

      Hi Threza,

      Thanks for enquiry. Contact via the contact form. I can fix this issue for $5. Thanks.

      Reply
  • lars August 12, 2010, 11:19 AM

    You really master Thesis and I have found very valuable tips here, thank!

    Reply
  • Rez August 16, 2010, 9:06 AM

    Hi, mysteriously teaserbox stripping out all the links from the excerpt text. i.e. I have clickable text link in the teaser box but all of them being stripped out. It looks fine with default theme. I am on WP 3.0.1+TT1.7+Blogussion 1.4
    Reagards

    Reply
  • denise August 21, 2010, 12:32 AM

    hello,
    i want to display 4 teaser on the frontpage not more. how can i do it? i have design it with css taht the sie a good but at the moment are all posts as teaser displayed but i want only four.
    Can you help me?

    Reply
  • Paul August 30, 2010, 11:44 AM

    Hi there, great info as always!
    I’m displaying teasers ’1 to a row’ on my blog home page with just post title and other byline info showing. To break the page up a little I’d like to display advertising after every 3-5 post titles.

    Do you know if this is possible with Teasers?

    thanks for your help.
    Paul

    Reply
  • Shirls September 1, 2010, 12:11 AM

    Hi there,

    Thanks for the wonderful tutorial, it is exactly what I want! :)

    Just a question, I want to replace the ‘Add comment’ to ‘Primary category’. I came out with the following codes: –

    <a href="#category” title=” on ” rel=”nofollow”><a href="cat_ID);?>”>cat_name; ?>

    It works well. The only problem is the ‘category’ link is not align with ‘read more’ and ‘comments’ link. Not sure if it is the above codes that cause the problem. I tried to play around with the css but with no success.

    Just wondering if you could give me some advices.

    Thanks in advance for your time. Really appreciate .

    Reply
    • Shirls September 1, 2010, 2:51 AM

      Hi there,

      I thought just to let u know that, I found a way to adjust the css in order to make it align. Thanks! :)

      Reply
      • Pascal September 1, 2010, 2:29 PM

        Glad you found it.

        Thanks.
        Pascal.

        Reply
  • ceo September 15, 2010, 9:58 PM

    Hello Pascan and Suresh!
    I have a question?
    I want show comment equal title on homepage and show post!
    As image:
    http://img10.imageshack.us/img10/3081/commentqi.png
    Plz heple me!
    Thanks!

    Reply
  • Jeyyt October 24, 2010, 1:02 AM

    Hi Pascal

    Just wanna say you have been a great help with all the thesis theme tutorials. I’ve looked through most of your videos. Short and sweet explanation. I’m a fan.

    I do have a question. How do you bold your titles in the teaser box? The default teaser title isn’t bold and it doesn’t stand out.

    Your help would be greatly appreciated!

    Reply
  • Armughan December 31, 2010, 12:14 PM

    I have just installed thesis theme. I have problem with teasers. My blog is only showing me feature posts. I increased it to maximum so i get only features. If i minimize it to less than 18 i dont see any teaser.

    My Teaser Display Options is giving me this error.

    Warning: Invalid argument supplied for foreach() in public_html/highblood/blog/wp-content/themes/thesis_18/lib/classes/options_design.php on line 1258

    Can anyone here help me how to resolve this issue.

    Reply
  • Mohammed Fouzan@ ScreamingTips January 15, 2011, 8:48 PM

    Thanks Pascal For this tip. But there is a problem occurs when i done that. My first 2 posts are not showing that post and others are showing that. Please clarify my doubt ASAP

    Reply
  • Gustavo January 22, 2011, 4:07 AM

    I’m trying to add space in between teasers and I was able to add space at the bottom of the teasers. But I wasn’t able to add space in between the “Byline/Headline” and the teasers “break line”.

    Also, I’m trying to delete the first break line at the top of the first teaser on the homepage and also I want to add space in between the first teaser and the second navigation menu.

    Do you have any tutorials or guides on how to do that? If you go to my site you can see what I’m talking about.

    Thanks in advance

    Reply
  • Rohit January 24, 2011, 1:35 PM

    Nice tutorial buddy. but how to add background image in Read more link??

    Reply
    • Pascal January 25, 2011, 8:08 AM

      contact us through contact form to hire us to get done any thesis customizations. thanks for commenting.

      Reply
  • Ben April 11, 2011, 4:46 AM

    Sorry, I didn’t put in the correct url of my website; You are the man, I love your tutorials. Very clear and to the point, plus the best part is that it works on Thesis 1.8 also !

    Reply
  • iphone background May 2, 2011, 5:10 AM

    hhm
    interesting ,but can you Please guide , i want to show three teasers per row..!
    Please help me..
    If you want to see current look ..
    Please check site.
    thanks

    Reply
  • Robert W May 12, 2011, 12:00 AM

    Excellent editorial. I’ve been looking for a solution like this for a while. Great job! Thesis Theme really is the best.

    Reply
  • jompot July 18, 2011, 7:52 AM

    Hello there, i’ve been working on thesis for a couple of months, im new i need help from this discussion. Anyway, may i know how to change the background color of the 3 links when we hover over it?

    thanks a lot :)

    Reply
  • dilbag koundal August 27, 2011, 3:11 PM

    you guys.. super bloggers :) thanks for help

    Reply
  • Manish Patel September 22, 2011, 5:37 PM

    Nice tutorial. It helps me lot to make my theme
    Thanks

    Reply
  • Stefan September 23, 2011, 1:37 AM

    Hi fourblogger,

    I tried your code, but the posts are double on my hp. What can i do when i will it in a row (post1,2,3 and so on).

    Second Thing i Need is: can i display the posts so –> First post One column the Rest in 2 columns.

    Reply
  • Akash October 10, 2011, 9:18 PM

    Thanks for this tip. I have used several of your tips and codes on my website. I am a non-technical person and for every change that I make, I have to search for relevant information and codes on the internet. And 3 out of 5 times your blog in thrown up by the search engine. Please continue the good work.

    Reply
  • lv bags uk October 18, 2011, 3:45 PM

    I have used several of your tips and codes on my website. I am a non-technical person and for every change that I make, I have to search for relevant information and codes on the internet. And 3 out of 5 times your blog in thrown up by the search engine. Please continue the good work.

    Reply
    • FourBlogger October 19, 2011, 10:09 AM

      Thanks for the encouragement. Yes, we continue our best work for Thesis Theme and WordPress. Just today we launched our new Thesis Skin “Thesis Smart Skin“. If you check Smart Skin’s features you will be surprised. Thesis Smart Skin makes all the Thesis customization work easy through just using our Smart Admin Options.

      Reply
      • Stefan November 4, 2011, 7:00 PM

        The skin looks very very good.
        But includes this the license for the thesis in this price, too?

        Thanks!!

        Reply
        • FourBlogger November 7, 2011, 11:45 AM

          Thesis smart skin does not include the Thesis price. You should get it separately.

          Reply
  • Rasel Rony@TechShouters November 1, 2011, 9:31 PM

    Please Please help me, i just add the teasure customization code, but its showing a space away from left side, how to fix it? I want to make teaser as like as shoutmeloud.com

    Reply
    • Suresh November 2, 2011, 10:08 AM

      hai Rasel,

      First add the code in custom functions.php file then only I can able to see the problem..

      Reply
  • Jonathan November 26, 2011, 12:15 AM

    Hi Suresh,

    For some reason this doesn’t work for me. I added the code and the teasers are run on the homepage.

    Do you have any ideas?

    Thanks

    Reply
  • Gowtham@mytechshout December 25, 2011, 6:20 AM

    Nice and very helpful thesis tutorials .Thanks

    Reply
  • Iwan Susanto March 30, 2012, 11:33 PM

    Thanks brother..

    I’m just trying to use Thesis theme and it’s the first time I install this theme..

    Reply
  • Jessica June 7, 2012, 9:17 AM

    Thesis theme is the best theme I’ve ever used. This is such a nice customization in teaser box for homepage. Thanks for this simple and direct tutorial.

    Reply