How to show short Title in WordPress

default single post image

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( );?>

Related Posts

Leave a Reply

Your email address will not be published.