position: relative;

Add an image above the WordPress post title and content

I had to do this recently for a client for the first time – not that difficult at all. This post serves as an example.

I used the shortcode method mentioned here.

So in functions.php I added the shortcode like this:

function mm_insert_title_func($atts) {
   global $post;
   extract(shortcode_atts(array('before' => '<h2 class="title-after-photo">', 'after' => '</h2>' ), $atts));
$output = "{$before}{$post->post_title}{$after}";
return $output;
}
add_shortcode('mm-insert-title', 'mm_insert_title_func');

Then in the post I added the title where I wanted it to appear by inserting this shortcode (but remove the spaces on either side) in the main edit window.

[ mm-insert-title ]

The parameters are set in the function, but you could leave those blank and set them in the shortcode as shown in the linked post mentioned before.

Then you’ll need to add the style into your styles.css file, something like this:

h2.title-after-photo {
	clear: both;
	font-size: 22px;
	font-weight: normal;
}

Unfortunately this theme doesn’t make it easy to hide the regular title, but you can do that in CSS using body.postid .entry-title h2 { display: none; }. Or, if you add all the posts with large images before the title to a particular category you could do this:

.singular-post .this-category .entry-title {
display: none;
}

« Reducing png file size with a native Photoshop filter Replacing the default ‘more’ in WordPress excerpts »