Posted on

Create a WordPress Theme – Part 2 – Featured Images

Display the featured image below the title

For me it looks better having the feature image below the title and not at the very top.

So first of all we add a custom checkbox in the admin menu at ./inc/customizer.php in the function twentyfifteen_customize_register( $wp_customize ):

	 * Option to change the position of the featured images
	 * @since Twenty Fifteen Plus 1.0
	$wp_customize->add_setting( 'featured_image_below' , array(
		'default'     => 'false',
		'transport'   => 'refresh',
	) );
		new WP_Customize_Control(
				'label'          => __( 'Featured image below title', 'twentyfifteen' ),
				'section'        => 'mytheme_section_global',
				'settings'       => 'featured_image_below',
				'type'           => 'checkbox',
				'priority' 		=> 20

And then we use this setting to change the order of the display. This is changed in ./content.php where we add this before the header section:

	// Post thumbnail.
	if (!get_theme_mod('featured_image_below')) {

And this after the header section:

	// Post thumbnail.
	if (get_theme_mod('featured_image_below')) {

Use an image URL for the featured image

Sometimes it is useful to use an image URL instead of uploading an image to the media library and including it as featured image.

The easiest way (I found) was using custom fields with the featured image URL. In this case I add the custom field featured_image_url to the post and enter the URL of the image, for example

Now we need to take this custom field and process the display of the URL as featured image. In the file ./inc/template-tags.php the processing of the featured images is done. Just modify it to the following code in the function twentyfifteen_post_thumbnail() :

$id = get_the_ID();
$name = get_post_meta($id, 'featured_image_url', true);

if ( post_password_required() || is_attachment() || (!has_post_thumbnail() && ($name == '') ) ) {


<div class="post-thumbnail">
		if ($name != '') {
			echo '<img width="100%" src="' . $name . '" class="attachment-post-thumbnail wp-post-image">';
		} else { 
</div><!-- .post-thumbnail -->