• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Insert a Widget Area in Between Blog Posts in Genesis

Last Updated on January 25, 2020 Favorited: 0 times

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 a widget area for showing it in between posts. Add the following in functions.php

// 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/

Related Posts

  • Horizontal Newsletter widget design in Genesis
  • Convert Search form into the widget area in Essence Pro theme
  • Integrate MailChimp with the Genesis Enews Extended plugin
  • Integrate Mailerlite with the Genesis Enews Extended plugin
  • Newsletter section design having Image and Text widget

Categories: Free Content, Genesis Tutorials Tags: between posts, newsletter, widget area

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service