Display Titles on Separate Lines

I just had the same need and came up with this:

Add this filter to your functions.php:

//----------------------------------------------------------
// Display Posts Shortcode plugin: add H2 to title
//----------------------------------------------------------
add_filter( 'display_posts_shortcode_output', 'format_dps_title', 10, 7 );
function format_dps_title( $output, $atts, $image, $title, $date, $excerpt, $inner_wrapper ) {

	// Make Title and H2
	$title = ' <h2>'. $title .'</h2>';

	// Now let's rebuild the output.
	$output = '<' . $inner_wrapper . ' class="listing-item">' . $image . $title . $date . $excerpt . '</' . $inner_wrapper . '>';

	// Finally we'll return the modified output
	return $output;
}

Then, if you have an excerpt following that, you’ll see a dash at the beginning of it. To remove the dash, add this to your CSS:

.display-posts-listing .excerpt-dash {
        display:none;
}

Huh. I tried adding that to my child theme’s functions.php, and sure enough it did put the title on a separate line. Unfortunately, it messed up the thumbnail graphic and it now displays above the title. But, since I didn’t really need the title centered I just changed
$title = ' <h2>'. $title .'</h2>';
to
$title = $title .'<br />';
Now the thumbnail does what you’d expect.

Thank you so much for getting me started on this!

Hey guys,
Thanks for this great info – it’s helped a lot!
My problem is I can’t get my image and my title/excerpt to line up – my content is pushed down a bit, and I want it aligned with the top of the image. Any thoughts?
Thanks!
Elaine
https://thelitkitchen.com/recipes/

Bloody fantastic. Worked for me. I’ve been searching high and low for this solution.

Thanks a million!

Elaine – you could try the margin settings for the specific areas in your CSS file. That’s what I used to adjust the margins around my image.

Cheers.