Changing your blog posts to show excerpt

The visual builder page

As default for the Thesis Classic Skin, your posts show the complete content on the main screen and not just an excerpt. This post tip will show you how to change that so that you get just an excerpt and not the full post – making your posts screen look neater, tidier and more professional.

We will go through this step by step with images to show you the screens. To do this you will need to make a change using the skin editor.

So, let’s begin.

1) First, we select the skin editor from the Thesis menu

To start, you will need to go to the Thesis -> Skin Editor option. This will take you over to the visual builder page for your current skin, for this tip we’re using the Classic Skin.

Skin editor menu option

Skin editor menu option

 

2) The Skin Editor

The skin editor is a lot more simple than it looks. The page is build up of a number of blocks, each that do a specific thing. Just take a look and see if you can identify the place we are going to make the change (hint: look in the Post Box area).

In some instances, the top level boxes can be closed. To expand them, if you hover over a section (say Columns in the below image) –  on the right side of the block will be a plus (+) sign. Click this and the box will expand.

The visual builder page

The visual builder page

 

3) Next, expand the ‘show tray’

Scroll down a little, if you need to until you see the ‘show tray’ which is below the Post Box section. Click this to expand and show most blocks that can be used in the Post Box. As the default, only a number of items are used, but we can remove and add any from this tray.

This is how we are going to add the Excerpt.

 

Show the lower tray for Post Box

Show the lower tray for Post Box

4) Add the Excerpt box

To add the excerpt box you simply click on the box in the hidden tray. This will move the box from the lower tray to the upper tray; it will be at the end of the item.

Add the excerpt block

Add the excerpt block

 

5) Move the Excerpt to where you want it

Once the excerpt box is in the upper tray, you simply move it by hovering over, holding down the left mouse and moving it. Place it in the location in the list where you want it to go. I’ve put it under the Thumbnail (which was the place the Content was.

Once placed, you need to remove the Content box (otherwise you will have the excerpt and content showing). Simply hover over, press and hold the left mouse button then move the box down to the “drag orange box here to hide them in the tray” section – and let go of the mouse button. This moves it to the bottom tray and hides.

Move the excerpt

Move the excerpt

 

6) Save your changes

The final thing you need to do is save your change. To do this, click the green Save Template button in the top right. This saves your changes. Return to your blog page and you should see it now showing excerpt instead of the content.

Save Template

Save Template

 

Watch this video for an example

I’ve also created a video running through this tip in case you prefer it in that format. Please feel free to watch and follow along.

Doing this makes your page look cleaner

In my view, showing an expert makes your page look cleaner and more professional. The design really is down to your own taste but if you want to show just an excerpt – this will do that for you.

Note: The changes in this post are for the Thesis Classic Responsive skin. Although some of the visual builder elements may be the same for other skins – the CSS changes may not work for other skins.

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 0 comments… add one ) }

Leave a Comment