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.
If you liked this article, you may also like:
Why I run my blog on Thesis Wordpress Theme
Thesis theme gives my blog a professional, clean, easy-to-read layout and SEO friendly design. Thesis makes it simple to make your own blog unique. See more details and get your own Thesis today.
{ 78 comments }
Next Comments →
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.
Next Comments →