Showing the Content of the ‘Posts Page’ before all Posts

If you have set a static front page, and defined a ‘posts page’, WordPress will use the index template to show the list of posts.
This also means that any content you might have entereed into the ‘posts page’ will not get shown.

Make sure to add any content before you set the page as the ‘posts page’; otherwise the editor will not be shown, and a warning message will be displayed instead.

To show this content of the ‘posts page’ before the list of posts, you can use following code (to be inserted into functions.php of a child theme, the html structure of the example below is based on Twenty Fourteen):

function page_content_on_posts_page() {
if( get_option( 'page_for_posts' ) && is_home() ) {
global $wp_query;
if( !is_paged() && $wp_query->current_post == 0 ) { ?>
<article id="post-<?php echo get_option( 'page_for_posts' ); ?>" class="<?php echo implode(  ', ', get_post_class( 'posts-page-content', get_option( 'page_for_posts' ) ) ); ?>">

<div class="entry-content">
<?php
echo apply_filters( 'the_content', get_post( get_option( 'page_for_posts' ) )->post_content );
?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php }
}
}

add_action( 'the_post', 'page_content_on_posts_page' );

 

 

Adding Widgets Between Posts in the Index Page

For a child theme of the (current) default theme Twenty Fifteen – a way to add a new sidebar aka widget area to show after the first post in the index page; making use of the action hook ‘the_post’.

/* WIDGET AREAS aka SIDEBARS INBETWEEN POSTS IN LOOP OF INDEX PAGE */

add_action( 'after_setup_theme', 'twentyfifteen_child_setup' );

function twentyfifteen_child_setup() {
add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );
add_action( 'the_post', 'twentyfifteen_child_inter_posts_sidebars' );
}

//register sidebar for inbetween posts

function twentyfifteen_child_widgets_init() {

	register_sidebar( array(
		'name' => __( 'First Inter-Posts Widget Area ', 'twentyfifteen' ),
		'id' => 'inter-posts-1',
		'description'   => __( 'Add widgets here to appear between post 1 and 2 in your index page.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget inter-post-widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

}

//widget output between posts in index page

function twentyfifteen_child_inter_posts_sidebars() {
	global $wp_query;
	if( is_home() && $wp_query->current_post == 1 ) {
		dynamic_sidebar( 'inter-posts-1' );
	}
	
}

you will need to create your own CSS based on the CSS class .inter-post-widget …

example:

.inter-post-widget { 
	margin: 20px 8.33%;
	padding: 3%;
	width: auto;
}