How to show short Title in WordPress


It is sometimes required to show the whole title of  an article in a single row, if the title flows for more than one line then it can disturb the whole setting of your website.

To show the title of any blog post in a single row, we have taken two approach, The first one use CSS to hide the unnecessory chars from and the second method is purely based on php.

CSS to show a blog title in a row.

To display our blog title we have the following code

<h3> <?php the_title() ;?> </h3>

as we all know h1,h2,h3,h4,h5 and h6 always rendered in a block, thus they take  100% width of the block. WE will use the same principle and will apply following inline CSS.

<h3 style=”width:100%; overflow:hidden ; height:1em;”> <?php the_title() ;?><h3>

Now the title of your blogpost will always fall in a single row.

PHP method to show short blog Title

Open functions.php file in your favorite editor and paste the following code. This code will return the blog title as per the size of char defined

<pre>function short_title($length=25) {
 $title = get_the_title();
 $count = strlen($title);
 if ($count >= $length) {
 $title = substr($title, 0, $length);
 $title .= '...';
 }
 echo $title;
}

Now its time to use this function in your index.php or single.php or any other Theme file wherever you want to show short post title. Just replace <?php the_title() ;?> with <?php short_title(25) ;?>  or <?php short_title( );?>




Suggested Similar Articles

One Brilliant Comment - Join Discussion Now!

  1. Thanks Rakesh! You shared a very important piece of information. Actually I m just through with my HTML course and there are few things which I was not told during the course. How to show a short title is one of them. Also, if you could share some more information about the other vital topics too. That will be a great help and it would be a pleasure to hear from you. Cheers.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>