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.
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… read them below or add one }
One more time gr8 post by you, Superb !! Keep sharing mate.
Thanks for continuous reading and support.
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.
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..
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!
sorry…i mean the ** tag in question 1.
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..
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.
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..
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.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.
your welcome… vivek
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..
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!
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.
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!
hai,
This tutorials contain the answer for you question watch the video..
http://fourblogger.com/how-to-add-thumbnail-image-inside-the-teaser-box-of-thesis-theme/
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.
I just wondering, how to add solid border each box?
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.
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
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..
hai Suresh,
alas! thank u so much its working, Really hearty thank full to u?
Keep rocking…
hai wilander,
Get more video tutorials about thesis customization on our youtube channel
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.
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   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..
Hmm,,nice tutorial. I’ve just migrated to Thesis. It’s a great theme!
Nice tutorial, I’ve just migrated to Thesis. This is very useful.
Hello, I am having a problem.After using this code i have two post in every every teaser box.What have i done wrong?
hai wahid,
I think now it is working fine…….
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.
Have you fixed the issue? IF not and need my help, contact me via contact form. THanks
hello…. i want to know how to add box type rectangle borders around the teaser….like in your home……..
Hi Threza,
Thanks for enquiry. Contact via the contact form. I can fix this issue for $5. Thanks.
You really master Thesis and I have found very valuable tips here, thank!
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
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?
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
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 .
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!
Glad you found it.
Thanks.
Pascal.
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!
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!
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.
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
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
Nice tutorial buddy. but how to add background image in Read more link??
contact us through contact form to hire us to get done any thesis customizations. thanks for commenting.
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 !
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
Excellent editorial. I’ve been looking for a solution like this for a while. Great job! Thesis Theme really is the best.
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
you guys.. super bloggers
thanks for help
Thanks. You are welcome!
Nice tutorial. It helps me lot to make my theme
Thanks
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.
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.
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.
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.
The skin looks very very good.
But includes this the license for the thesis in this price, too?
Thanks!!
Thesis smart skin does not include the Thesis price. You should get it separately.
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
hai Rasel,
First add the code in custom functions.php file then only I can able to see the problem..
Thanks a lot I’ve successfully fixed up the problem
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
Nice and very helpful thesis tutorials .Thanks
Thanks brother..
I’m just trying to use Thesis theme and it’s the first time I install this theme..
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.