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’.


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 …


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

Defining the writing area of the dashboard editor

the first of my upcoming ‘tips and tricks’ – a handy function to style the editor area of your self-hosted wordpress blog or cms:
if you are working on a modern widescreen monitor, but want to restrict the wordpress editor area (your writing paper, so to speak) to the width as it will later show in your blog, here is a tip what to add to functions.php of your theme:

function custom_max_width_editor() {
echo '<style type="text/css"> textarea#content, #content_ifr {
border-right: 1px solid #ddd; }</style>';
add_action('admin_head', 'custom_max_width_editor');

the ‘min-height’ is optional, and will give you a larger writing area to start with.
and the border shows clearly how wide the defined writing area is.
adjust the number values, and enjoy the next level of control over your wordpress.

you might even want to add the predominant background-color of your blog’s content area …

a big thank you to @Purren from the wordpress support forum, who submitted a correction to make it also work for the visual editor.

wp3 has brought the ‘add_editor_style()‘ function which makes the above tip redundant.

for theme independant, more permament changes, the principle can also be turned into a basic plugin; in this example to change the font-size in the html editor:

Plugin Name: Html Editor Font Size
Description: set the font size for the html editor.
License: GPL2
function custom_font_size_html_editor() {
echo '<style type="text/css"> #editorcontainer textarea#content {
font-size: 20px; }</style>';
add_action('admin_head', 'custom_font_size_html_editor');