Several readers commented on the new magazine style look of how to make a blog front page. Good thing about WordPress Thesis Theme is that it lets you customize WordPress blog with features like magazine style without much knowledge of design or coding.
In this article I will show how easy it is to get a customized magazine style look with help of Thesis Theme.
- Need Thesis Theme version 1.4 or higher. If you bought Thesis Theme at any point in time, you can just login and download the latest version for free.
- Decide on number of posts you want to be shown on the blog front page (Settings – Reading). I have 18 blog posts currently.
Thesis Theme Teasers – Step-By-Step Install
Go in Appearance – Design Options in your WordPress blog menu and look under “Home Page Layout and Content”. These are the steps to take when installing Thesis teasers:
In Thesis 1.5 the Teasers menu is in “Thesis Options” listed as “Home Page Display” under “Home Page”
- Set Home Page Layout to “Features & Teasers”.
- Choose the number of featured posts to show. I show zero featured posts, so all the posts on front page are teasers only.
- Select your teaser display options. I display Post Title, Post Excerpt, Number of Comments and Link to Full Article, but you can mix and match it so it fits your needs.
- Choose the link display text. I have it set as “Read the full article →”.
- Select the teaser font sizes. I have font size 20 for post title, size 14 for post excerpt, 10 for number of comments and 14 for link to the full article.
- Choose the position of thumbnails. I have it set as “Left with text wrap” for horizontal position and “Before post/page content” for vertical position.
- Thumbnail width and height I have set as 66×66.
Align teaser text with one line of code
Align the text of your teasers with a simple line of code in your custom.css file:
.custom .teaser { text-align: justify; }
When this is setup your blog front page will have a very cool and modern look. Not many Thesis powered blogs have used this option yet as it is a brand new feature in Thesis so your blog will surely send a positive impression to your visitors.
Excerpts and thumbnails done automatically
The process with teasers and thumbnails on your front page is all done automatically. You just write your posts as usual.
Thesis will automatically place an excerpt of your post and also automatically resize the picture your have in your post into a thumbnail size. Just use the Thesis option “Post image and Thumbnail” when adding pictures to your blog posts.
If you want to write the text that is displayed in the teaser manually, use the “Excerpt” option in your blog post. In ”Post image and Thumbnail” you can also manually insert the thumbnail.
Want additional blog customization?
If you have installed WordPress blog then I have even more Thesis Theme blog design customization tips for you to check out and improve your blog.
Image by Tony The Misfit
Join thousands of bloggers and get all my blogging tips for FREE! Subscribe to HowToMakeMyBlog via RSS or via e-mail.
{ 77 comments… read them below or add one }
Pretty simple tutorial. But much needed in my opinion. I mean, I see a ton of blogs that run Thesis and simply do not use this feature. I think it is a great feature to use, and I think the reason why people don’t use it on their blogs much is they may not know of it (okay, that’s probably not true).
I am considering upgrading to Thesis Developers option to run it on the blog in my Name. It’s working out great for another one I’m working on, and I would love to have it on all of my blogs now.
@Alex – I upgraded couple of months ago as well, and now I use it on all my blogs.
@Jeff Rose – The image you want to use you have to insert via Thesis “Post Image and Thumbnail” option (it’s just underneath the field where you write your article). Put your image URL and your ALT text in “Post Image” part and Thesis will automatically insert the image in your post and automatically resize it to be featured as a thumbnail. If you use the “Thumbnail Image” feature just underneath it, it will not resize it, so you will need to put the exact size thumbnail in there.
@ Marko
I’m still not sure what I’m doing wrong because I can never get my teaser images to work. They don’t show automatically and when I copy and paste the URL for the picture into the thumbnail image url line, the picture will show it is full size and not a thumbnail. I’ve been on the forums and can’t find anybody that has a real solution. Any suggestions?
For what it’s worth, I am not crazy about the justified text… It causes wierd spacing and line breaks. I prefer ragged right (or left justified). You might want to try it.
@Gillian – Yeah, I know what you mean. Justified text can have some weird spacing, but I decided to use it for the sake of consistency as I also use it on my articles. Doesn’t look too bad.
Like Jeff Rose, I’m having a hard time figuring out the whole Thumbnails thing. I’m a pretty decent coder & designer and am totally lost here. I’ve tried uploading images, placing just the link in the “article image” field (& not in the thumbnail field) and they still won’t show. Ugh. Time for a caffeine break I suppose.
Just found your blog by the way. I love the design work you’ve done and your Thesis tutorials and design ideas are really giving me some fresh ideas. I appreciate all your hard work!
Jami
@Bionic Beauty – Thanks for the nice words! Very strange with the teaser problem, I would recommend asking in Thesis forum.
@ Marko
Well, that got me closer. I was confused uploading pictures into the editor. I see now that I have to post the URL of the uploaded image into the proper spot and then delete the picture from the editor section. The only problem now is that a box appears but it’s just text and it reads “Thumbnail image for….name of the post”.
I guess I’ll head to the forums and find out what is out there.
@ Marko
I’m sure you know this too, but I just found out that if do use this way of displaying pictures in your posts that the pictures don’t show in your RSS Feed. That’s kind of turn off for me, since I try to use pics to enhance my topic. I may wait till a further upgrade before I worry about getting this going now. What’s your thoughts?
@Jeff Rose – Yeah, pictures do not show in RSS, there is a thread about it in Thesis forum with some solutions.
I followed the step-by-step install and saved, but my site didn’t change. Any ideas?
@Bonnie – Not sure what could have happened. I did the same process several times on several different blogs without any problems. Did you do everything correctly? Maybe there is help thread on this in Thesis forum?
Hey Marko,
I have been considering switching to a magazine theme. Great to hear that this is possible with the Thesis theme. I was wondering, is it a pain to find images for every blog post? I assume having an image for every post is kind of mandatory to make your magazine theme look good. What sources do you use for the images and where do you host them?
@kunal – I already have a post on how I use images to style my blog posts. Flickr basically has thousands of images that you can use as long as you give a link back, so I do not see it as a problem to find one for each post I write. And as explained in the post, I use WordPress to upload images to my hosting server.
I can not get images to show. I have removed them from the body of the post & copied the URL from my Flickr photostream into the phot line below the post text editing box. I’ve searched the Wordpress forums for help.
If I have the images on my computer what is the URL?
Thanks for any help.
@Bonnie – Upload the image on your server and use it from there. You shouldn’t use image from Flick’s server and you cannot use an image directly from your computer. More details here: Use images to style your blog posts.
Marco, your post was really helpful! The Teaser concept was mentioned in the Thesis documentation, but the ‘how-to’ was somewhat missing. This fills a gap, thanks!
Regards,
Jeroen de Miranda
Hey I really appreciate the help you’ve provided here. I do however have a question I have been asking everywhere and I can’t seem to get anyone to tell me how this works.
I’m wondering how to just display like 5 posts on the index.php page with excerpts and a simple link to the full post under the excerpts without the checkered/magazine look (side by side)?
@Michael – I’m not sure if this is what you want but just select 5 posts in Settings – Reading and then put the “more” tag in the articles, at the place where you want them to be cut on the front page.
This may be off topic, but a layout question anyway, how do you get the background color of the left sidebar panel to go all way to the bottom (instead of to the bottom of your last post)
@Roland – Background in the sidebar is one of the latest changes I’ve made. As usual I plan to write a post with all the different tips included. Feel free to subscribe to get all the updates.
Magazine style is the wave of the future for blogs. There’s so much that can be done to have a custom look that is all your own. I actually am working on anew biz to create custom designs for blogs & headers.
Love your blog!
I didn’t want to justify the teaser titles… only the blog text. So I added this to my custom.css file:
.custom .teaser p { text-align: justify; }Hi Jon,
I’m trying to get my blog text to justify. I tried adding the text you suggest to my custom .css file but nothing is happening. Where exactly should I add it. This is where it is right now:
/* These lines removes the padding from the header so that the background image sits close to the nav menu, the bottom border of the header, and the sides of the content and set container and header backgrounds*/
.custom #header { padding: 0; }
.custom #container { margin-top: 0em;
margin-bottom: oem; padding: 0em;}
/*eliminate header white space */
.custom #header_area .page {padding-top: 0em;}
/*To remove lines between content and sidebars*/
.custom #header, .custom .post, .custom .teasers_box, .custom #footer, .custom #footer a, .custom #footer a:active, .custom #archive_info, .custom .prev_next, .custom #comment_list, .custom #comment_list dd, .custom #commentform, .custom #sidebar_1, .custom #sidebar_2, .custom #comment_list dt.comment, .custom #comment_list dd.comment, .custom #comment_list dl .bypostauthor .format_text, .custom #trackback_list {
border-bottom: 0px;
border-top: 0px;
border-right: 0px;
border-left: 0px;
}
.custom #content_box, .custom #column_wrap {
background: none;
}
.custom .teaser p { text-align: justify; }
/*
File: custom.css
Description: Custom styles for Thesis
BASIC USAGE:
If you have enabled the custom stylesheet in the Thesis options panel, the tag
will be appended with the “custom” class, like so: . You can use
the “custom” class to override *any* CSS declarations contained in the style.css file.
For example, if you wish to change the default link color to green, you would add the
following declarations to this file:
.custom a, .custom a:visited { color: #090; } <— This makes links green
.custom a:hover { color: #00f; } <— This makes links blue when you mouse over them
WHY THIS WORKS:
By using the "custom" class, you are creating more specific CSS declarations for HTML
elements. CSS styling is applied through rules of specificity, and because declarations
prepended with .custom are more specific, they get applied when the page is rendered!
*/
@Marko Saric
Hey thanks for the help, I do however have a question…what is the more tag? Do I have to set that up in the template?
I understand the concept of it cutting the post off where the more tag would go, but I don’t know if the more tag even exists.
@Jon – Great tip! I just did it on my blog as well. Thanks!
@Michael – In your HTML editor, just insert this where you want your article to be cut.
Thanks Marko! I made that change to my blog and now it works great, you’re the man!
*Subscribes*
Hey Marko,
Great pointers here. A friend is working with Thesis and is trying to use theme teasers but when ‘link to full article’ is selected, this error comes up:
Warning: cannot yet handle MBCS in html_entity_decode()! in /homepages/18/d281395833/htdocs/wp-content/themes/thesis/lib/functions/teaser_functions.php on line 110Any thoughts or help would be appreciated!
@Sonny Gill – it’s some PHP problem. Upgrade to PHP 5.0 if you’re on 4.0. Also in “design options” look in the “Link to full article” field, erase the text and replace with something different, click “Big Ass Save Button”, then it should work.
@Marko – Thanks for the speedy response. I’ll be sure to let my friend know how to fix the problem. Much appreciated!
Helpful post, thank you!
@Marko – Loved this post. Had been taking a break from learning how to tweak my Thesis theme—Getting a little addicting *smile* Thanks for sharing tip on the justification and especially the font sizes you used. Unless you click the ” [+]” next to “Teaser Font Sizes” you forget it’s there!
You blog has really morphed over the past few months and I plan to emulate some of the code you used but with my own color scheme (once I sort that through as well!).
@Jon – Appreciate your code for the justification w/out the title. Mine did some strange things so using the code you provided gives me the effect I was seeking.
@Marian Sparks – Thanks for the nice words. All the best with your blog!
I still can’t get this feature to work on my site. I’m looking into it. Thanks for sharing.
-Mig
Spoke to soon! It works!
haha, yes… Sweet batman.
Just wanted to let you know that i was also having these thumbnail problems, but I found the solution on the forum. Change the permissions on the custom/cache folder to 777. Do that through your FTP application on your server. Then put your image’s URL in the “post image and thumbnail” box below where you write your post. Put it in “post image” not “thumbnail image.” I also changed my default image dimensions for that to 100×75 to make it a little bigger. thanks.
@Allison – Thanks for the comment. IF someone has similar problem, changing permission to 777 should help. It is something that is part of Thesis installation, so that is why I didn’t include it in this post.
Thank you , but I sure spoke to soon. I just added an image to each of my posts in that area below where you write the post and now that I go back to look, I have 2 images at the beginning of each post. The one I inserted into the post itself and then the one I put in the ‘Post image and thumbnail” area. So now Im back to square one and need to go remove all of those url’s. ugh. Thoughts?
@Allison – Hmm I guess nothing else to do, other than manually removing one of the images. I just use the Post Image field and then Thesis/WordPress automatically resizes the image into thumbnail size.
Yes, that works beautifully, but on my posts I always have a picture first and then the post. And I have a caption under the picture. Well, if, instead, I were to put that first picture in the “post image field” I cannot add a caption to it. Only an alt tag. So if I want the caption( which I always do), I have to put it in the actual post. And then if I also put that image url in the “post image field” I get ANOTHER picture plus the nice thumbnail in the teaser. Any other thoughts? thx!!
@Allison – For the picture with caption, do not use Thesis Post Image. Use the standard WordPress image insertion tool. Then resize the picture manually and insert it as a Teaser only via Thumbnail option in Thesis. That should work, I helped one of my clients do it that way.
Ok. So do I have to go into my iphoto on my computer and resize the photo again, and then upload the new ‘thumbnail’ size into my image gallery for that post? Or can I resize the photo I already have in my gallery that I had used for my initial photo in my post with caption? I was hoping I didnt have to do a separate resizing and uploading of the same photo for the thumbnail. But maybe I do…. Thanks again.
@Allison – What I did was manually resize and upload the image onto server. But if you’re gonna do that for each post, it can become boring, so you might be able to find a more effective option on Thesis forum etc.
Ok. Thank you for your time. Really appreciate it!!
I love your tips and clear instructions. I really like your sidebar heading style. Are the directions for that somewhere in your blog already?
@Jean Tower – Not yet, as it is one of the recent fixes. This is what you need to put in your custom.css to get the style:
.custom .sidebar h3 {background:#2361A1 none repeat scroll 0 0;
color:#FFFFFF;
padding:0.3em 0;
text-align:center;
text-shadow:1px 1px 1px #333333;
}
Awesome – I’ll try it today!
thank you
Great post Marko… and 5 affiliate links! You really know how this stuff works
And I just tried the sidebar headings you show above… works great. I just bought my new domain and I’m itching to get the new Thesis installed and running. Thinking of trying the Magazine style and see how it works.
Keep up the good work.
In my copy of Thesis 1.5 (running WP 2.7.1) – I don’t have an option “Home Page Layout” at Appearance | Design Options.
So it looks like – at the moment – don’t even have a choice whether or not to have teasers at all. (Or it’s in some other menu).
Any sugggestions/thoughts appreciated.
Jonathan S.
@Jonathan Soroko – The menu has been changed in the Thesis 1.5. Now it is in “Thesis Options”, under “Home page” and it is called “Home Page Display”.
hi marko,
nice tips
I just wonder , how u make a background for post title.
@kek – Something like this in custom.css should do it:
.custom h1.entry-title {background:#2361A1 none repeat scroll 0 0;
}
Very useful information. I have been trying to find further info on teasers. Do you know how to remove the teaser excerpts from the previous posts? I would like my previous posts to be shown in full.
@Ana – I don’t think that is possible. Thesis can show featured, full posts first and then teasers but I don’t think it can show it the other way around.
Hello Marko,
Thanks for getting back to me.
My query was on removing the teasers completetly from the previous pages. Sorry, If I did not make that clear.
I figured out last night how to take the teasers out of my previous pages. All I did was go to home page options in thesis, and go to the number of maximum posts to be shown on home page, and that seemed to work. All my past posts are in full length.
Hi Marko,
Thanks for another great help. I have changed my blog to this format but i want to change the header colours. I have changed the colours for in my custom form:
/*Post Header Colour*/
.custom h1 {color: #990000; }
.custom h2 {color: #990000; }
.custom h3 {color: #009900; }
.custom h4 {color: #5C96C7; }
.custom h5 {color: #ff7e00; }
These changes however do not change the teaser header colour. Is there a way I can do it?
Thanks again for these great tutorials.
@Michael – I haven’t done that before so I don’t know. Something like this probably:
.teaser a{color:#COLOR CODE;}Take a look at the Thesis forum, there must be some info there.
@ Marko,
Thanks – that worked like a charm. Fortunately – as I did look at the forum and found nothing so thanks a lot for the help.
Cheers
I finally got this to work for me. I’m very pleased with the look of my site now. Thanks for all the useful tips.
Wait.
I was about to start using your suggestions to build web traffic through StumbleUpon, but now I see I can change the background of my teasers. Oh well, I’ll do that later. Thanks again!
@Shawanda – hahahahah I think I have an article saying something like “stop messing around doing small design changes, start writing blog posts and connecting with your target audience”. Thanks!
@Marko – LOL! You’re absolutely right. It’s easy to lose sight of the big picture. I’ll have to make up for all the time I wasted fooling around.
I am lost trying to add captions to my rotator images in the multimedia box. Any ideas?
i get this error after insert the image to the post.. any idea?
Warning: getimagesize(http://portal.vyvanse-online.com/wp-content/uploads/2009/04/vyan107a.jpg) [function.getimagesize]: failed to open stream: No such file or directory in /home/takafulb/public_html/portal/wp-content/themes/thesis-15/lib/functions/post_images.php on line 70
Try to upgrade your Thesis to the latest version which is 1.5.1. If that doesn't help search for that error in Thesis forum, I remember seeing few threads about it, and most of them were solved after upgrading to latest version I believe.
ok thanks…
i'll try and update the result here..
already update with the latest 1.5.1 and everything was OK until yesterday.
but suddenly today,i got the error back..
I have a Thesis blog set up, and I have it so that the front page features one full article and four additional “teasers” below. The only problem I have is this: the thumbnails show up for the teasers, which is great, but they ALSO show up on the full posts, but I don't want thumbnails on those, because I already have images in the body of the post, so basically it shows two images (one large, one thumbnail) right next to each other. Does anyone know how to use thumbnails for teasers and disable them for full-length posts on the index page of the blog? Thanks in advance.
Hi,
This was i am searching for. Now i can start with the layout!.
Thx allot!!!!
Mike
just a thought:
Have been experimenting with teasers and excerpts and images, but found out that having images in the full text and showing full text only in blog and archives and in feed readers gives the best results when people land on your site via google image search. In my case approx 50% of the hits…
Interesting, if you want please do send me your research and I will take a look at it. Thanks.
Twas just a bit hap snap, I use woopra and sometimes clicked on referring images that found my blog via Google images. All my images are copied and pasted in my posts. When I had teasers or excerpts only – for a certain period-, I noticed that the (in)famous Google frame showing the blog post didn’t load the post: When an image was clicked one couldn’t see the context where the image was placed in. In my mind a sure way of not clicking after finding a certain image…
I’m sure you know this too, but I just found out that if do use this way of displaying pictures in your posts that the pictures don’t show in your RSS Feed. That’s kind of turn off for me, since I try to use pics to enhance my topic. I may wait till a further upgrade before I worry about getting this going now
Hi. Thanks for this informative post about Thesis and teasers. Is there a way to customize the image caption text when using the built-in feature of Wordpress? The default style center aligns the text and no other option to align the text inside the caption box.
Hello I just tried doing this and I cant find any options titles under “Teaser Display Options”.
I tried doing this and still my blog looks the same.I want my home page to look like a website giving small info of all my pages I posted recently.And if some one click on Read more,they will reach my blog post.Can someone tell me how to make my blog look like that?