How To Add A Line-Break In WordPress Post Titles

Adding a Line-Break In WordPress Post Titles

Surprisingly, adding a line-break (splitting a line into two) for Post Titles in WordPress isn’t as easy as one would think so. Generally, post titles are not meant to have any line breaks. If required by design, the developer is expected to make it happen via CSS.

However, there could be circumstances whereby you’d rather use a line-break rather than styling multiple titles with CSS. For such cases, there is a trick that can be used to display the titles with a line-break without using CSS.

The following snippet does that by replacing the “|” character with a line-break. The vertical bar symbol, i.e. “|”, isn’t a must – you can use any character for that matter.

<?php

function ws_title_break( ){
   return str_replace(' | ', '<br />', get_the_title());
}
add_shortcode( 'ws_title', 'ws_title_break' );

So, a title that looks like “This Post Title Has a | Line Break In Between” will in-fact have a line-break before the word “Line”. The vertical-bar symbol will be replaced by a “</br>” symbol (which tells the browser to input a line-break).

How To Output The Title?

Using the shortcode – [ws_title]

The code above will create a shortcode [ws_title], and that shortcode can be used to output the title with line-breaks. If you need to use a different symbol than “|”, make sure you replace the same in the code.

If you need to output the post title inside theme files, you can simply use <?php echo str_replace(' | ', '<br />', get_the_title()); ?> instead of creating a shortcode.