Twitter
Tutorial: WordPress
24. June 2010 · Author: Dale Crum
8 Comments

WordPress Tutorial: 5 Ways to Shorten Your Post Titles

I am under the personal belief that post titles should be short, sweet and precise enough to get the point across without sounding like an awkward newspaper headline. Sadly not all titles follow the same belief and as a result, the layout of the website suffers. As noted on bavotasan.com “you can throw in as many keywords as you want in hopes that you might get more from Google, but I doubt that will really do anything for your site’s SEO.” Long titles may not be explicitly linked to the focus of SEO, but they are still out there.

What are we going to do about it? We are going to present five different tested methods of truncating your post titles. Some methods may be better suited to your specific needs. We will determine which method is right for your project. So let’s get right to it.

Below are five effective means to truncate or shorten post titles, complete with fully written code and instructions. You will need a functions.php file for all but the first method, so here is how to create one if you don’t have one already:

1) Open up a text editor and create a new page.

2) On the first line, type ”.

 3) Try to keep all code copied into this file between those two lines.

4) Save the file as ‘functions.php’ and upload it to your theme folder.

Method 1 – Character Length:

A quick recourse for those not wanting to get their hands dirty with the functions.php file. The entire code block below is used within the WordPress loop, all together as one unit. By changing the number ’30′ (in both locations) we are able to control the character length of the title and output it using ‘$title_short’. This method provides an ellipsis option which is used only if the length is longer than the designated ’30′ characters, the ellipsis can be changed to any text, for example: ‘read more >’. The only drawback is that the code can create quite a bit of bloat on the page if needed more than a few times.

<?php if (strlen(the_title('','',FALSE)) > 30) { //Character length
          $title_short = substr(the_title('','',FALSE), 0, 30); // Character length
          preg_match('/^(.*)\s/s', $title_short, $matches);
      if ($matches[1]) $title_short = $matches[1];
          $title_short = $title_short.' ...'; // Ellipsis
      } else {
          $title_short = the_title('','',FALSE);
      } ?>

<?php echo $title_short ?>

EXAMPLE:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <?php if (strlen(the_title('','',FALSE)) > 30) {
           $title_short = substr(the_title('','',FALSE), 0, 30);
           preg_match('/^(.*)\s/s', $title_short, $matches);
       if ($matches[1]) $title_short = $matches[1];
           $title_short = $title_short.' read more >';
       } else {
           $title_short = the_title('','',FALSE);
       } ?>

 <h1><?php echo $title_short ?></h1>

 <div class="the-post"><?php the_content(); ?></div>

<?php endwhile; endif; ?>

Method 2 - Character Length:

AUTHOR: http://www.knowtebook.com/

If you need an all encompassing function that shortens all the titles across the board, then you’re in luck. This method is handy when changing the character lengths of multiple titles at the same time. Think css for title lengths. You might run into a special case where the certain titles need different length treatments, in which case you will need to repeat this function a second time changing the function name and character length number. I can see this being a little bulky in the long run but may be worth it if you’re into that sort of thing.

INSTRUCTIONS: Add the function below to your functions.php file (if you don’t have a functions.php file refer to the introduction paragraph). To print the shortened title use ‘ echo ShortenText(get_the_title());’. This method provides an ellipsis option which is used only if the length is longer than the designated ’100′ characters. The ellipsis can be changed to any text for example: ‘read more >’.

function ShortenText($text) { // Function name ShortenText
  $chars_limit = 100; // Character length
  $chars_text = strlen($text);
  $text = $text." ";
  $text = substr($text,0,$chars_limit);
  $text = substr($text,0,strrpos($text,' '));

  if ($chars_text > $chars_limit)
     { $text = $text."..."; } // Ellipsis
     return $text;
}
<?php echo ShortenText(get_the_title()); ?>

EXAMPLE:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <h1><?php echo ShortenText(get_the_title()); ?></h1>

 <div class="post-title"><?php the_content(); ?></div>

<?php endwhile; endif; ?>

Method 3 - Word Length:

AUTHOR: http://bavotasan.com/

This method is different in that we are shortening the title by word length and not character length as in previous methods. The biggest benefit is that we are able to determine the word length on the fly instead of only in the functions file.

INSTRUCTIONS: Add the function below to your functions.php file (if you don’t have a functions.php file refer to the introduction paragraph). To print the shortened title use ‘ echo short_title(‘…’, 10);’. This method provides an ellipsis option which is used only if the length is longer than the designated ’10′ words. The ellipsis can be changed to any text for example: ‘read more >’.

function short_title($after = '', $length) {
   $mytitle = explode(' ', get_the_title(), $length);
   if (count($mytitle)>=$length) {
       array_pop($mytitle);
       $mytitle = implode(" ",$mytitle). $after;
   } else {
       $mytitle = implode(" ",$mytitle);
   }
       return $mytitle;
}
<?php
 // short_title('ellipsis', 'wordlength')
 echo short_title('...', 10); ?>

EXAMPLE:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <h1><?php echo short_title('read-more >', 10); ?></h1>

 <div class="post-title"><?php the_content(); ?></div>

<?php endwhile; endif; ?>

Method 4 – Character Length:

AUTHOR: http://old.justinshattuck.com/

The drawback to this method is the code will always add an ellipsis regardless of how long or short your title may be. It’s a little annoying but if this was all we had to work with, we would grab it in a New York minute. The benefits include title length on the fly, as well as the addition of a “before” parameter which will output any text before the title. I don’t have any examples of why this would be necessary but you may have a good reason for it.

INSTRUCTIONS: Add the function below to your functions.php file (if you don’t have a functions.php file refer to the introduction paragraph). To print the shortened title use ‘ short_title(‘’,’…’,true, ’41′)’. This method provides an ellipsis option which is used only if the length is longer than the designated ’20′ characters. The ellipsis can be changed to any text for example: ‘read more >’.

function short_title($before = '', $after = '', $echo = true,  $length = false) {
 $title = get_the_title();
 if ( $length &amp;&amp; is_numeric($length) ) {
      $title = substr( $title, 0, $length );
 }
 if ( strlen($title)> 0 ) {
      $title = apply_filters('short_title', $before . $title .  $after, $before, $after);
 if ( $echo )
      echo $title;
 else
      return $title;
 }
}
<?php
 // short_title('BeforeText'. 'ellipsis', 'true', 'wordlength')
 short_title('**','...',true, '20'); ?>

EXAMPLE:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <h1><?php short_title('**','read more >',true, '20'); ?></h1>

 <div class="post-title"><?php the_content(); ?></div>

<?php endwhile; endif; ?>

Method 5 – Character Length:

AUTHOR: http://www.studiograsshopper.ch

My personal favorite, giving character length control, shortening the title on the fly, reducing code bloat and it works well with the ellipsis. This method is a good match to the limit-post plugin being that the usage is along the same lines.

INSTRUCTIONS: Add the function below to your functions.php file (if you don’t have a functions.php file refer to the introduction paragraph). To print the shortened title use ‘ the_title_limit( 30, ‘…’);’. This method provides an ellipsis option which is used only if the length is longer than the designated ’30′ characters. The ellipsis can be changed to any text for example: ‘read more >’.

function the_title_limit($length, $replacer = '...') {
 $string = the_title('','',FALSE);
 if(strlen($string) > $length)
 $string = (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
 echo $string;
}
<?php the_title_limit( 30, '...'); ?>

EXAMPLE:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <h1><?php the_title_limit( 30, 'read more >'); ?></h1>

 <div class="post-title"><?php the_content(); ?></div>

<?php endwhile; endif; ?>

8 Comments

  1. I’ve been looking for this thing for ages. For those interested, I also found an article on how to do this on blogger: http://goo.gl/3FIh0

  2. Andrew says:

    Dude!!! Thanks so much!!! I’m gonna RSS this site as heck!

  3. Thanks so much for this post. I’ve been looking for a solution to this issue for ages!
    I used method 1 within the header template & it works like a dream.

  4. thanks alot , this is very usefull for me

  5. Matt,

    Shortening the post titles in a widget is a different issue. Are these widgets plugins?

  6. I’m stumped a little. I know to put the first part of the code in functions.php but where to I put the second part

    I want to shorten the post titles in my category posts widget, which is a plugin. You can see three of them to the right if you visit my site.

    Thanks!

  7. Toño says:

    Very useful. Thank you very much

  8. piratamovil says:

    thanks, I have been very useful

Trackbacks

  1. Limiting Characters in WordPress Blog Title – Albert Lozoya - Just another WordPress site
  2. Blog Search » Blog Archive » WordPress Tutorial:5 Ways to Shorten Your Post Titles | Doc4
  3. WordPress Tutorial:5 Ways to Shorten Your Post Titles | Doc4 | Yoobz.com

Leave A Comment

Please wrap any code within the <code> tag to display properly

Multicons is a multi-favicon code generator which automatically inserts the necessary meta tags for both favicons (site-wide and/or admin) and Apple Touch / iPhone icons. Not sure...

IE6 Upgrade Option utilizes the 25K script created by Free the Foxes: http://www.freethefoxes.com/ as a WordPress plugin. Originally this plugin utilized a smaller 7K script but it's...

The WordPress Plugin: WordPress Database Backup by Austin Matzko is one of the more intuitive backup plugins currently available and with no stern warnings to scare off the faint of...

While doing our usual run of site updates and code adjustments, we ran into a small issue: how to display WordPress bookmarks with both text and images. Utilizing the 'Links' tab (...

BookMaster is our answer to what we feel is an odd issue with the WordPress wp_list_bookmarks tag. For those that have exercised the use of wp_list_bookmarks, you are well aware that...