Insert a Widget Area in Between Blog Posts in Genesis

This tutorial provides the steps to insert a widget area in between posts on the Post page or category archive in any child theme based on the Genesis framework.

You can Add a new widget for ads or any widget after 2 or 3 posts in any Genesis child theme.

Live Demo

The Idea:

1. Condition – Where to show?

The first step is to define where (page) we are going to hook the widget. This depends on Settings > Reading. Remember we will use is_home() to make sure we work on Post page no matter if you have custom homepage is set.

2. Paging

Sometimes, depends on widget we want to show it only first page and not on paging /page/2/

We will use is_paged() to have more control over the widget area.

3. After How many Posts?

The default post page setting shows 6 recent posts which can be changed from here Settings > Reading or using a new query in functions.php to limit the posts on post page or an archive.

STEP 1

// Register Newsletter widget area in between posts.
genesis_register_sidebar( array(
    'id'          => 'newsletter',
    'name'        => __( 'Newsletter', 'theme-name' ),
    'description' => __( 'This is the newsletter widget area.', 'theme-name' ),
) );

STEP 2

We are using return early function. is_home() for post page. You can use is_archive() for showing it on global category archives.

Take the help of WordPress Conditional Tags and return early function.

We will show the widget after 3 post list. Add the following in functions.php

// Add newsletter signup box after 3rd entry.
add_action( 'genesis_after_entry', 'theme_newsletter_widget_area' );
function theme_newsletter_widget_area() {
    //if we are not on the post page, Abort.
    if ( ! is_home() ) {
        return;
    }
    global $wp_query;
    $counter = $wp_query->current_post;
    if ( 2 == $counter ) {// should skip the number of post

        genesis_widget_area( 'newsletter', array(
            'before' => '<div id="newsletter" class="news-page-widget newsletter"><div class="wrap">',
            'after'  => '</div></div>',
        ) );
    }
}

We can restrict the widget area not to display on paging /page/2/* by adding additional conditional tag is_paged()

//if we are not on the post page, Abort.
    if ( ! is_home() || is_paged() ) {
        return;
    }

Change the number 2 depends on the number of posts. It will be -1 post of what you are going to show after.

Showing in on Category archive.

We will use the same function and will need to only change the conditional tag to is_archive.

//if we are not on the archive page, Abort.
    if ( ! is_archive() || is_paged() ) {
        return;
    }

additionally, we can show on both post page and category archives.

//if we are not on archive or post page, Abort.
    if ( ! ( is_home() || is_archive() )  ) {
        return;
    }

Remember: These are just a part of return early function to control the widget visibility. Match it with the actual function which is theme_newsletter_widget_area() mentioned in STEP 2.

References:

https://studiopress.blog/insert-widget-area/
https://www.billerickson.net/code/use-the-built-in-post-counter/

The Idea:

STEP 1

STEP 2

Showing in on Category archive.

Related Posts

Reader Interactions