Show Featured Image After Specific Paragraph GeneratePress Free and Premium Theme

by

In this GeneratePress Tutorial, you are going to learn how to show the featured image after a specific paragraph.

GeneratePress has a free and premium version. I will show here how the featured image can be shown after a certain paragraph in the case of two versions.

CONTENTS

For GeneratePress Free Version

We will not be able to change the position or hide the featured image due to the limited features in the free version of GeneretPress. That’s why we need to use some custom code.

We can add this code to the GeneratePress theme in two ways. One is through Code Snippets plugins or directly insert the code into the functions.php file of GeneratePress child theme.

Method 1: Show featured image after specific paragraph

Suppose, you want to show your featured image after 2nd paragraph. You need to follow the steps below.

  • Go to Plugin->Add New.
  • Search the plugin Code Snippets
  • Install the plugin and activate it.
  • After that, go to WordPress Admin Sidebar click on Snippets->Add New.
  • Enter any title and select Run snippet everywhere.
  • Paste the below code and save the snippet.
  • Finally activate this snippet.
Show featured image after 2nd paragraph
function chb_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

add_filter( 'the_content', 'insert_featured_image', 20);
function insert_featured_image( $content ) {
	global $post;
    $feat_img = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
        //change "2" to any no of paragraph where you want to show
        return chb_insert_after_paragraph( $feat_img, 2, $content );
    }
    return $content;
}


add_action( 'wp', 'chb_remove_featured_image' );
function chb_remove_featured_image()
{
    if ( is_single() ) :
        remove_action('generate_before_content','generate_featured_page_header_inside_single', 10);
    endif;
}

Here I have added an action i.e. chb_remove_featured_image that will remove an already defined action i.e. generate_before_content. If we don’t remove the generate_before_content action, your post will show two featured images as GeneratePress free theme don’t have the feature to turn off the featured image.

Method 2: Change Featured Image position using the Theme Customizer

The above method allows you to show featured images only after a certain paragraph. But if you want to show featured images after a specific paragraph globally for all posts or after a certain paragraph in a specific post, you have to do it by using the theme customizer option.

To change the featured image position for all posts or a specific post, you have to add the below code into the code snippet.

function chb_customize_register( $wp_customize ) {

	// Theme Options Panel
	$wp_customize->add_panel( 'chb_theme_options', 
		array(
			'priority'       => 10,
			'title'            => __( 'CHB Generatepress Mod', 'chbgeneratepress' ),
			'description'      => __( 'Generatepress Theme modification', 'chbgeneratepress' ),
			'capability'	=> 'edit_theme_options',
		) 
	);

	// Theme Options section
	$wp_customize->add_section( 'chb_gp_blog', 
		array(
			'priority'       => 100,
			'title'            => __( 'Blog', 'chbgeneratepress' ),
			'description'      => __( 'Modification related to Blog section', 'chbgeneratepress' ),
			'capability'	=> 'edit_theme_options',
			'panel' => 'chb_theme_options',
		) 
	);

	$wp_customize->add_setting( 'chb_featured_image_pos', 
		array(
			'default'           => __( '2', 'chbgeneratepress' ),
			'transport'         => 'refresh',
		)
	);

	$wp_customize->add_control( 'chb_featured_image_pos', 
		array(
			'priority'    => 10,
			'type'        => 'number',
			'section'     => 'chb_gp_blog',
			'description' => 'Show the featured image after "x" paragraph.',
			'label'       => 'Featured Image',
		) 
	);

}
add_action( 'customize_register', 'chb_customize_register' );


function chb_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

add_filter( 'the_content', 'chb_insert_featured_image', 20);
function chb_insert_featured_image( $content ) {
	global $post;
    $featured = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
		
		$global_pos = get_theme_mod('chb_featured_image_pos') == 0 ? 2 : get_theme_mod('chb_featured_image_pos');
		$post_pos = get_post_meta( get_the_ID(), "chb_featured_pos", true );
		if( $post_pos != 0 ){
			$pos = $post_pos;
		}else{
			$pos = $global_pos;
		}
		
        return chb_insert_after_paragraph( $featured, $pos, $content );
    }
    return $content;
}

add_action( 'wp', 'chb_remove_featured_image' );
function chb_remove_featured_image()
{
    if ( is_single() ) :
        remove_action('generate_before_content','generate_featured_page_header_inside_single', 10);
    endif;
}


class FeaturedImagePositionMetabox {

	private $screens = array('post');

	private $fields = array(
	  array(
		'label' => 'Featured Image Position',
		'id' => 'chb_featured_pos',
		'type' => 'number',
		'default' => '0'
	   )  
	);

	public function __construct() {
	  add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
	  add_action( 'save_post', array( $this, 'save_fields' ) );
	}

	public function add_meta_boxes() {
	  foreach ( $this->screens as $s ) {
		add_meta_box(
		  'FeaturedImagePosition',
		  __( 'Featured Image Position', '' ),
		  array( $this, 'meta_box_callback' ),
		  $s,
		  'side',
		  'high'
		);
	  }
	}

	public function meta_box_callback( $post ) {
	  wp_nonce_field( 'FeaturedImagePosition_data', 'FeaturedImagePosition_nonce' ); 
	  echo "You can set custom featured image location for this post. Set the value to '0' to use global position";
	  $this->field_generator( $post );
	}

	public function field_generator( $post ) {
	  $output = '';
	  foreach ( $this->fields as $field ) {
		$label = '<label for="' . $field['id'] . '">' . $field['label'] . '</label>';
		$meta_value = get_post_meta( $post->ID, $field['id'], true );
		if ( empty( $meta_value ) ) {
		  if ( isset( $field['default'] ) ) {
			$meta_value = $field['default'];
		  }
		}
		switch ( $field['type'] ) {
		  default:
			$input = sprintf(
			'<input %s id="%s" name="%s" type="%s" value="%s">',
			$field['type'] !== 'color' ? 'style="width: 100%"' : '',
			$field['id'],
			$field['id'],
			$field['type'],
			$meta_value
		  );
		}
		$output .= $this->format_rows( $label, $input );
	  }
	  echo '<table class="form-table"><tbody>' . $output . '</tbody></table>';
	}

	public function format_rows( $label, $input ) {
	  return '<div style="margin-top: 10px;"><strong>'.$label.'</strong></div><div>'.$input.'</div>';
	}

	

	public function save_fields( $post_id ) {
	  if ( !isset( $_POST['FeaturedImagePosition_nonce'] ) ) {
		return $post_id;
	  }
	  $nonce = $_POST['FeaturedImagePosition_nonce'];
	  if ( !wp_verify_nonce( $nonce, 'FeaturedImagePosition_data' ) ) {
		return $post_id;
	  }
	  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return $post_id;
	  }
	  foreach ( $this->fields as $field ) {
		if ( isset( $_POST[ $field['id'] ] ) ) {
		  switch ( $field['type'] ) {
			case 'email':
			  $_POST[ $field['id'] ] = sanitize_email( $_POST[ $field['id'] ] );
			  break;
			case 'text':
			  $_POST[ $field['id'] ] = sanitize_text_field( $_POST[ $field['id'] ] );
			  break;
		  }
		  update_post_meta( $post_id, $field['id'], $_POST[ $field['id'] ] );
		} else if ( $field['type'] === 'checkbox' ) {
		  update_post_meta( $post_id, $field['id'], '0' );
		}
	  }
	}

  }

  if (class_exists('FeaturedImagePositionMetabox')) {
	new FeaturedImagePositionMetabox;
  };

In this method, you do not have to enter the paragraph number into the snippet code manually. Instead, you can select the paragraph number from the theme customize option.

Steps to change featured image position from customizer

Steps to change featured image position from customizer
  • Go to Appeareance->Customize.
  • A new menu has been added called  CHB Generatepress Mod click on it and also click on blog option.
  • By default paragraph position is set to 2. You can change it to whatever you want.
  • Click on Publish to update the value.

The above steps will set the featured image position for all the posts. But if you want to set the featured image position for a specific post other than the default value i.e. 2, you have to update it from the post meta value.

Steps to change the featured image position for a specific post

In order to change it, go to the Featured Image Position meta box option at the right side of the edit post window.

Steps to change the featured image position for a specific post

Its default value is 0. It means it will use the position from the theme customizer option. Otherwise, it will set the different positions based on the Featured Image Position meta box value.

For GeneratePress Premium Version

For GeneratePress Premium Version, you can disable the featured image from the theme customizer. In order to do it, you have to activate some modules i.e. Blog and Elements by going to Appearance->GeneratePress.

To disable the featured image in GeneratePress follow the steps-

  1. Go to Appearance->Customize.
  2. After that go to Layout->Blog option.
  3. Scroll down and you can see Featured Image option.
  4. Select Posts tab and unchecked Display featured images.

It will disable the featured image from your post. Otherwise, two images will be shown in your post. Now apply the below methods to show your featured image.

Show featured image after specific paragraph

Here we don’t use the Code Snippet plugin. This is because we have already activated the Elements module which is exactly the same as Code Snippets. Follow the steps below to add the code.

  1. Go to Appearance->Elements.
  2. Click on Add New Element.
  3. Select Element type as Hook.
  4. Add the below code.
  5. In Settings tab, select wp_head hook and also checked Execute PHP option.
  6. Now go to Display Rules tab and set the Location to post.
  7. Click on Publish to activate the hook.
<?php
function chb_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

add_filter( 'the_content', 'insert_featured_image', 20);
function insert_featured_image( $content ) {
	global $post;
    $feat_img = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
        //change "2" to any no of paragraph where you want to show
        return chb_insert_after_paragraph( $feat_img, 2, $content );
    }
    return $content;
}
?>

Change featured image position from customizer

The code we used for the Free GeneratePress theme is exactly the code we will use here.

But there we were disabling the featured image through the code but in this case, we have already done it through the Generate Press Premium feature.

So add the code below using Elements hook.

<?php
function chb_customize_register( $wp_customize ) {

	// Theme Options Panel
	$wp_customize->add_panel( 'chb_theme_options', 
		array(
			'priority'       => 10,
			'title'            => __( 'CHB Generatepress Mod', 'generatepress' ),
			'description'      => __( 'Generatepress Theme modification', 'generatepress' ),
			'capability'	=> 'edit_theme_options',
		) 
	);

	// Theme Options section
	$wp_customize->add_section( 'chb_gp_blog', 
		array(
			'priority'       => 100,
			'title'            => __( 'Blog', 'generatepress' ),
			'description'      => __( 'Modification related to Blog section', 'generatepress' ),
			'capability'	=> 'edit_theme_options',
			'panel' => 'chb_theme_options',
		) 
	);

	$wp_customize->add_setting( 'chb_featured_image_pos', 
		array(
			'default'           => __( '2', 'generatepress' ),
			'transport'         => 'refresh',
		)
	);

	$wp_customize->add_control( 'chb_featured_image_pos', 
		array(
			'priority'    => 10,
			'type'        => 'number',
			'section'     => 'chb_gp_blog',
			'description' => 'Show the featured image after "x" paragraph.',
			'label'       => 'Featured Image',
		) 
	);

}
add_action( 'customize_register', 'chb_customize_register' );


function chb_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

add_filter( 'the_content', 'chb_insert_featured_image', 20);
function chb_insert_featured_image( $content ) {
	global $post;
    $featured = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
		
		$global_pos = get_theme_mod('chb_featured_image_pos') == 0 ? 2 : get_theme_mod('chb_featured_image_pos');
		$post_pos = get_post_meta( get_the_ID(), "chb_featured_pos", true );
		if( $post_pos != 0 ){
			$pos = $post_pos;
		}else{
			$pos = $global_pos;
		}
		
        return chb_insert_after_paragraph( $featured, $pos, $content );
    }
    return $content;
}


class FeaturedImagePositionMetabox {

	private $screens = array('post');

	private $fields = array(
	  array(
		'label' => 'Featured Image Position',
		'id' => 'chb_featured_pos',
		'type' => 'number',
		'default' => '0'
	   )  
	);

	public function __construct() {
	  add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
	  add_action( 'save_post', array( $this, 'save_fields' ) );
	}

	public function add_meta_boxes() {
	  foreach ( $this->screens as $s ) {
		add_meta_box(
		  'FeaturedImagePosition',
		  __( 'Featured Image Position', '' ),
		  array( $this, 'meta_box_callback' ),
		  $s,
		  'side',
		  'high'
		);
	  }
	}

	public function meta_box_callback( $post ) {
	  wp_nonce_field( 'FeaturedImagePosition_data', 'FeaturedImagePosition_nonce' ); 
	  echo "You can set custom featured image location for this post. Set the value to '0' to use global position";
	  $this->field_generator( $post );
	}

	public function field_generator( $post ) {
	  $output = '';
	  foreach ( $this->fields as $field ) {
		$label = '<label for="' . $field['id'] . '">' . $field['label'] . '</label>';
		$meta_value = get_post_meta( $post->ID, $field['id'], true );
		if ( empty( $meta_value ) ) {
		  if ( isset( $field['default'] ) ) {
			$meta_value = $field['default'];
		  }
		}
		switch ( $field['type'] ) {
		  default:
			$input = sprintf(
			'<input %s id="%s" name="%s" type="%s" value="%s">',
			$field['type'] !== 'color' ? 'style="width: 100%"' : '',
			$field['id'],
			$field['id'],
			$field['type'],
			$meta_value
		  );
		}
		$output .= $this->format_rows( $label, $input );
	  }
	  echo '<table class="form-table"><tbody>' . $output . '</tbody></table>';
	}

	public function format_rows( $label, $input ) {
	  return '<div style="margin-top: 10px;"><strong>'.$label.'</strong></div><div>'.$input.'</div>';
	}

	

	public function save_fields( $post_id ) {
	  if ( !isset( $_POST['FeaturedImagePosition_nonce'] ) ) {
		return $post_id;
	  }
	  $nonce = $_POST['FeaturedImagePosition_nonce'];
	  if ( !wp_verify_nonce( $nonce, 'FeaturedImagePosition_data' ) ) {
		return $post_id;
	  }
	  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return $post_id;
	  }
	  foreach ( $this->fields as $field ) {
		if ( isset( $_POST[ $field['id'] ] ) ) {
		  switch ( $field['type'] ) {
			case 'email':
			  $_POST[ $field['id'] ] = sanitize_email( $_POST[ $field['id'] ] );
			  break;
			case 'text':
			  $_POST[ $field['id'] ] = sanitize_text_field( $_POST[ $field['id'] ] );
			  break;
		  }
		  update_post_meta( $post_id, $field['id'], $_POST[ $field['id'] ] );
		} else if ( $field['type'] === 'checkbox' ) {
		  update_post_meta( $post_id, $field['id'], '0' );
		}
	  }
	}

  }

  if (class_exists('FeaturedImagePositionMetabox')) {
	new FeaturedImagePositionMetabox;
  };
?>

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

       ...

1 thought on “Show Featured Image After Specific Paragraph GeneratePress Free and Premium Theme”

  1. Hi man, I want my featured image to show after 4th paragraph in generate press free using code snippet. So can you give me code for that

    Reply

Leave a Comment