Thesis 2.0 Guide – Post Formatting Guide – Customizing The Excerpt

In this guide I am going to demonstrate how to format your posts on your homepage using the excerpt. Thesis 2.0 makes it very easy to alter the way in which posts display on the Home page.

Just to clarify, in WordPress the home page, is the blog page. Some people like to use a static front page and a seperate page for the blog. In either case wordpress recognizes Home as the blog.

If you are a familiar with functions and filters, you will know that if you wish to target the blog page you would need to use is_home and is_front_page, for the front page, if one is set.

The Excerpt

Before we begin, it is important to know that Excerpts are not teasers, excerpts are built in to the core of wordpress and you will know it is an excerpt because WordPress automatically appends [...]  to it.

The excerpt was not intended to display content, but WordPress has responded to users by providing filters that allow us to modify it.

A  feauture that I bet you didn’t know existed is the manual excerpt.

Almost all WordPress options come with a tab in the top right called screen options. When you open it you will see some options that you can hide or display.

Take a closer look and you will see a box called Excerpt.

The filter we will look at below are setting a universal default length, but if you check the Excerpt option in screen options a new section in your post editor will display.

Here you can enter a manual excerpt, this will override the default universal excerpt length, even when you set a filter.

Let me know if you knew that this existed below in the comments.

Ultimately what I want you to take away from this, is that the excerpts was never intended to display content, more to display results for internal search and displaying a preview of the content much like google’s rich snippets.

So how can we Modify the Excerpt?

WordPress displays content primarily in two ways with these php functions.

the_content()

The content provides you with limited control and can make use of the <!--more--> tag. It will also display images that are embedded in the post. You can control the length of the content displayed on the home page by placing the more tag after the sentence or paragraph in which you wish to display.

Put simply, it displays the content as it is on the post, up until the more tag.

the_excerpt()

The excerpt on the other hand is extremely versatile and requires manual modification if you wish to control the length of the content and add the read more link.

The default WordPress Excerpt displays the first 55 words of the post and ends with [...] which is not a more tag. The excerpt is also un-formatted so no line breaks will occur.

Some facts about the excerpt

  • The excerpt is a pre-defined function built in to wordpress and is not controlled by Thesis 2.0.
  • It equates to a summary similar to that of Google’s Rich Snippets that you see in search engines. Excerpts work in exactly the same way and were never intended initially for being used to display content in the way that people do today.
  • Excerpts can also be used as the post description.
  • As of version 2.8 a new filter called (excerpt_length) was introduced to control the length of the excerpt.
  • As of version 2.9 a filter called (excerpt_more) was introduced to change the default [...] to something more useful to the user.

Since the addition of some filters that give us control over the excerpts output we have been able to create out own unique and importantly universal way of displaying our content.

Remember that with the_content () we have to include a <!--more--> tag manually on each post or it will just display the whole post.

The excerpt is there to be customized by the user, but the key phrase I would use is that they are there to be “hand-crafted” by the user.

Customizing the Excerpt

Now I will show you how you can control the excerpt and modify it to your own requirements.

In order to customize your excerpts first open up your custom.php file located in.

wp-content/thesis/skins/skin_name/custom.php

Now that we have our Custom.php file open we can begin to customize our excerpt.

Filtering the Excerpts Length

Copy and paste this filter in to your custom.php file.

function custom_excerpt_length( $length ) {
	return 55;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

The number 55 is the default number of words that will be displayed, so by changing this value, we can decrease or lengthen the excerpt.

Filtering the Excerpts More tag

Now I know I said that [...] isn’t a more tag, and it’s not. But the filter is called excerpts_more because we can add essentially a more tag to the end of the excerpt.

Copy and paste this filter in to your custom.php file.

function new_excerpt_more($more) {
       global $post;
	return ' <a href="'. get_permalink($post->ID) . '">Continue Reading...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Here you can change the information where it says “Continue Reading…”

This will change the [...] to something more useful and link it to the full post.

Removing the Excerpt More

Some people may wish to remove the excerpt more filter altogether and to do that you will need to trim the excerpt.

Copy and paste this filter to your custom.php file.

function trim_excerpt($text) {

	return rtrim($text,'[...]');

	}	 
add_filter('get_the_excerpt', 'trim_excerpt');

This is useful for the next part where you can add your own more tag with its own div ID.

Add a Custom Read More to your Excerpts

Hooks are by no means dead in thesis 2.0.

Remember that Thesis 2.0 has taken away the need to edit wordpress in terms of the back-end, but that doesn’t mean that you can’t. For those looking to customize directly then why not make use of hooks.

Thesis 2.0 gives you the control over hooks, you can create a hook for everything, and in this case I’m going to show you how to create the hook required for adding a more link that is outside of the excerpt.

Follow these simple steps and you will be on your way to having the the excerpt you wish to see.

Step 1

On your home template locate the Home post box or what ever you have called it. You will know you have the right box, because it should be a POST BOX.

type in the name of the hook. In my case I called it excerpt for simplicity.

If you click on the [+] you will see how to use these hooks, it says.

“If you want to access this box programmatically, you should supply a unique hook name here. Your hook references will then become:

thesis_hook_before_post_box_{name}
thesis_hook_post_box_top_{name}
thesis_hook_post_box_bottom_{name}
thesis_hook_after_post_box_{name}

…where {name} is equal to the value you enter here.”

Here you can see that we can add to four pre-defined locations. In our case we want to keep the more link inside the excerpts container, so we will add it to the bottom.

Step 2

Open you your custom.php file and add this Hook.

function custom_excerpt_read_more_link() { ?>

<div class="custom-read-more"><a href="<?php the_permalink(); ?>"> Read More...</a></div>

 <?php }

add_action ('thesis_hook_post_bottom_box_excerpt' , 'custom_excerpt_read_more_link');

This will add the Read More… with a link to the full post below the excerpt.

Step 3

You can then add some CSS to the additional CSS tab for the post box.

In the case of the above function. The class would be .custom-read-more

This should get you started.

.custom-read-more {
text-align: right;
}

This will align the read more link to the right.

You could also if you have the number of comments displaying add the hook to that also and edit the CSS to display them inline with each other, assuming the comments are being displayed below the excerpt.

To sum this part up, all we have done is slap on a read more link which is independent of the excerpt.

Including Featured Images

To add a featured image, you can layout your Home post box like so.

You can see here that I have added a container and called it featured images and inside there is the WP Featured Image.

I then assigned the container for my featured images a class.

Then in additional CSS for the post box I added the following CSS.

.featured_image {margin: 8px 10px 10px 0;float: left;height: 150px;width:150px;}
.attachment-post-thumbnail.wp-post-image {height: 150px;width: 150px;}

This will apply dimensions, a margin to push the content away from the image and float the image left.

If you intend to use smaller or larger featured images, then specify those dimensions within the CSS above.

This will automatically push the content in-line with the image and the result is the same layout you see on my home page.

Once you have laid out your post container with your excerpt and featured images you can simply upload a featured image, in my case 150×150 using the featured image uploader found in the sidebar of your post editor.

From an optimization point of view, you should always upload an image at the correct size. So if it is 150×150, then don’t upload an image at 150×200 because then the browser will have to re-size it and that will impact on your performance.

You can see that when we begin to customize the excerpt, all we are doing is simply adding extra information above or below it.
Don’t have Thesis check it out here

Thesis 2 Tutorials

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

39 comments… add one

  • Aernout October 21, 2012, 10:22 am

    Wow Matt – Marvelous work!

    For the first time in two years, I actually understand this whole issue :-)

    Thanks!

    • Matthew Horne October 21, 2012, 10:33 am

      Thank you, lol, you don’t know how hard this was to try and explain. WordPress made it a little confusing with the more tag and more link, as they are two different things but do the same thing. As well as trying to explain what excerpts really are, in contrast to how they are used.

    • Aernout October 21, 2012, 10:57 am

      A quick question. You write: “The default WordPress Excerpt displays the first 55 words of the post and ends with [...] which is not a more tag…”

      I have used excerpts for quite some time, and it works as you describe here in my existing installations. With either the [...] or a modified version of that. In my present install to test Thesis 2.0 this doesn’t appear. Standard there is no [...] at the end of an excerpt.

      I’m asking, because I’ve tried adding filters as you have given here above (and as provided on the DIY forums) to no effect… It seems as if I’ve missed a setting somewhere in WP. Could that be? Any suggestion where to look?

      • Matthew Horne October 21, 2012, 11:00 am

        You may need to look at wp-admin settings > reading and see if summary is selected.

        • Aernout October 21, 2012, 11:03 am

          Yes it is – that’s why I’m confused…

          • Matthew Horne October 21, 2012, 11:06 am

            Hmm, im not sure what could be causing that at this time.

  • Mark October 22, 2012, 10:47 am

    This is a little beyond me, but reading it over again is making more sense… thanks

    What theme are you using here and how did you create the drop shadow. Its a nice look

    • Matthew Horne October 22, 2012, 12:04 pm

      I am using thesis 2.0 as my theme and added box-shadow to the drop down menu-items.

      • Mark October 22, 2012, 7:58 pm

        Nice…
        Can you create a tutorial on how you did this please?

      • Mark October 23, 2012, 12:36 am

        Ha… you changed the layout.
        Drop shadow page is gone

  • Robert October 23, 2012, 5:17 am

    It’s a little complicated for me, but thank god, I can finally apply your tutorial on one of my blog running on Thesis 2.0 :) Thank you so so much

  • paul October 23, 2012, 1:17 pm

    awesome tuts man.. for so long i can finally understand now how the excerpt works with your explanation. I have been having difficulties with it editing my homepage. Hope I can apply this properly :)

    • Matthew Horne October 23, 2012, 1:20 pm

      Cool, i was wondering whether it made sense or not because its quite a confusing area of wordpress.

  • Storyman October 23, 2012, 11:03 pm

    Outstanding article. A nice way to gain a better understanding on how hooks are used.

    Would you consider a Part II and show how to make the comment display conditional. I’d like the number of comments to show only when a comment has been made–otherwise nothing appears.

    • Matthew Horne October 23, 2012, 11:07 pm

      Thank you, I am currently writing about the comments CSS package, but I will look in to this also, it wont be in the CSS package as its a wordpress thing rather than a thesis or CSS thing.

  • Holly October 24, 2012, 3:15 am

    This is related. I purchased thesis 2.0 believing that I can do all kinds of amazing stuff with no coding. What I am seeing, is that really in order to know what the heck is going on, I am going to have to understand some level of css and php. Can you tell me a good place to start and possibly to what degree I need to study this. Thanks, there are a few people getting a reality check with this 2.0, I just want it to turn out to be a good thing in the end. Kind Regards, Holly

    • Matthew Horne October 24, 2012, 3:48 pm

      Technically you dont need any coding skills to use thesis 2.0, when the update comes out alot of bugs will be fixed and you will have no reason to code directly, on the other hand thesis gives you the opportunity to expand on its capabilities by still calling on the power of hooks, filers, functions, custom css and html.

      In that case, if you are looking to learn some skills then http://w3schools.com/ is a great place to start, you can search almost anything and there will be a page by them with a live example where you can edit and run the changes made, so you can experiment.

  • Julia Mueller October 28, 2012, 11:14 pm

    Hi there,

    I’m super new to both WordPress and thesis and I would love to use your instructions for creating excerpts of my blog posts. I have a couple of questions, though. When I go to my host (bluehost) to access the custom.php file, I have a couple of options after I click on “Skins.” I can either click on “classic” or “thesis-blank” Both folders have a custom.php file in them. Which folder do I select and am I even in the right spot?

    2nd question: I would like for my blog excerpts to appear like the way they do on this site: http://www.climbinggriermountain.com/ or like they do on this site: http://www.perrysplate.com/. Are your instructions above going to lead me to this type of formatting or do I need to be a super-star web designer to get there? Thanks for your very informative post and instructions and I look forward to your response!!

    Best,

    Julia

    • Matthew Horne October 28, 2012, 11:23 pm

      For the first question, the classic theme is the one that is used by default, so if you have a basic site, then it would be classic.

      The second question, To make the images larger, just use a larger featured image and set the CSS dimension to the size you intend to use. Then you can move the wp-featured image box above the headline area so that the image is at the top and floated left, I will have to do it on my test site to give you the exact layout. Its late here now so it wont be until tomorrow at least.

      Regards

  • Paul November 12, 2012, 4:49 am

    Ok, how do you get the two green boxes you show above titled: “Home Post Box -> WP Featured Image” and “Home Post Box -> Excerpt”. When I create the featured images container it does not create a great box and when I create a post box it is blue. So, I am stuck.

    • Matthew Horne November 12, 2012, 9:22 pm

      When you look at some boxes like post boxes and query boxes, you can see a tab called show tray, in there are various green boxes related to the main box.

  • Vishal Rai November 13, 2012, 2:02 pm

    Hey Matthew , great tutorial you just rock man.
    This article helped me a lot and I find your article more helpful than the excerpt tutorial of diythemes thesis 2.0 tutorial about excerpt with query box which is quite hard for me.
    And I implemented your method on my site and it looks neat and clean now.
    Thanks again and keep posting great article.

    • Matthew Horne November 13, 2012, 2:30 pm

      No problem, once ive cleared my backlog of work I will be writing specific tutorials to achieve specific results.

  • Alkaline Healing January 19, 2013, 4:38 am

    Hey Matthew, How do you keep html tags like and others intact in the excerpt? So it’s not just a big chunk of text…

    • Matthew Horne January 19, 2013, 4:43 am

      The excerpt doesnt actually use the tag, is that what you are refering to?

  • Hans Braumueller March 22, 2013, 4:30 pm

    Hi,

    thanks i add your hook solution for

    http://www.suchmaschinen-experte.de/optimierung/seo-lexikon/ .

    You have a little error at your guide, the hook is called by thesis_hook_post_box_{name}_bottom, not as you put here as thesis_hook_post_box_bottom_{name}

    Greetings from Hamburg,

    • Matthew Horne March 23, 2013, 9:38 am

      Hi thanks I will update this soon, there was some confusion with which was correct and which wasn’t.

  • Alex April 4, 2013, 8:25 pm

    Hi Matthew, thanks so much for this post. Really helpful. You da man.

  • Manulis April 9, 2013, 3:07 am

    Hey Matthew, when you say “Then in additional CSS for the post box I added the following CSS,” where exactly did you put that?

    • Matthew Horne June 8, 2013, 11:24 am

      Hi there is a tab for each package that allows you to add additional CSS, but I would advice that you add it to the Custom CSS tab instead.

  • Margie June 8, 2013, 10:55 am

    Hey Matthew – you are a life saver! You tuts are amazing and I’ve been able to find and edit the php!

    I followed the instructions to add the custom read more, but the link won’t show up below the post. I’ve been racking my brain for about an hour and can’t figure it out.

    I’d sure appreciate your help!

    • Matthew Horne June 8, 2013, 11:23 am

      Thanks Margie, wait until 2.1 drops, I have lots of tuts to make but I need to wait for 2.1 to go public.

      What is your Website so i can take a peak at the problem.

    • margie June 8, 2013, 11:40 am

      Wow, man you are fast! Still in progress with the switchover for my home page, as you’ll see :) Thanks so much!

  • margie June 8, 2013, 11:48 am

    Hey Matthew, wondering, is there a way to edit the excerpt to be able to put spacing in it, so it doesn’t just look like a big blob of text? :) Thanks. Site is margieanalise.com

  • Rob June 19, 2013, 5:35 am

    Great post! I’ve been a long-time Thesis user but for some reason have not upgraded to 2.0. This just convinced me. Headed over to DIYThemes now!

    • Matthew Horne June 19, 2013, 7:34 am

      Cool, although 2.1 beta is what you wanna download if you have the professional package, 2.1 is a major update to 2.0 and it looks much better, much cleaner and it generally more user friendly as Chris has addressed many of the issues people raised.

  • Chetan August 15, 2013, 11:13 pm

    I’m still new in using the thesis theme, and your tutorial really helped me to make modifications in my thesis theme

  • Oliver December 1, 2013, 5:44 pm

    Thank you!!
    It has taken me so long to find the correct way to do this!

    Thank you for saving me from wasting more hours on this!

Leave a Comment

Current ye@r *