Do you want to add new widget area after 2, 3 or 4 posts on homepage of your Genesis Theme? New widget area can be used for almost anything: be it Adsense Ad code, newsletter sign up box, social media button, any random text or image.

Add new widget area between posts in Genesis

1. Paste the following code in the end of functions.php file. Remember to backup your functions.php file before making changes.

https://gist.github.com/9510445

2. Then go to Appearance > Widgets area, you should see new “Between Posts Area” section. Drag and drop any widget into this section to display it after 3 posts on homepage.

New widget area between posts in genesis theme

3. You can customize this widget area by adding specific (.between-posts-area ) class to your style.css file. Add following code to style.css (this is a sample code and can be modified to your specific requirements).

[cc]
.between-posts-area .wrap{
background:#ddd;
color:#444;
margin-bottom:20px;
padding:20px;
text-align:center;
clear:both;
}
[/cc]

4. You can also customize “after number of posts” this new widget box should appear, just change “3” number in the code. You can also change loop counter value (currently 0 in the code). For example: If you want to display this new widget after 3 post only once. Considering that you have 10 posts showing on homepage, then set loop counter value to 10.

Share on LinkedIn

Davinder Singh Kainth

A digital creator with 15+ years of experience in Website Design, Development, SEO, and Content Creation to Podcasting at SmartWebCreators.com with the motto of "Be Smart, Keep Creating". A coach, consultant, and your dear geek friend ❖

8 Comments

  1. vamsi on May 28, 2014 at 7:58 am

    That was awesome and it just what I was looking for. But what if I just want to show a widget after 3 posts and no-repetitions i.e, the widget should not appear again in the loop.

    Reply
    • Roselle on March 11, 2016 at 8:42 pm

      Check out step #4.

      You can also customize “after number of posts” this new widget box should appear, just change “3” number in the code. You can also change loop counter value (currently 0 in the code).

      For example: If you want to display this new widget after 3 post only once. Considering that you have 10 posts showing on homepage, then set loop counter value to 10.

      Reply
  2. Sachin Verma on May 28, 2014 at 9:26 am

    Thanks a lot for the tutorial, exactly what I was looking for. :)

    Reply
  3. Alyssa Gorraiz on January 17, 2016 at 7:56 pm

    I just now found this tutorial, and I thank you for posting. Works like a charm and its hard to find good tutorials for genesis that are reliable.

    Reply
  4. Roselle on March 11, 2016 at 9:04 pm

    Is there anyway to add multiple widgets between posts?

    Reply
  5. Maira on July 9, 2016 at 6:55 pm

    Hi Davinder, this was just great and exactly what I needed. However, I’m facing some problems with CSS. The new area wraps the first three articles and all styles I add affect them too, see image > http://puu.sh/pVYlS/269da7afc9.jpg

    Any idea about what I need to change or add to separate the posts from the new widget section?
    Thanks!

    Reply
  6. Shirsha on June 15, 2017 at 6:27 pm

    Hi,

    This is awesome, and works like a charm! I am a complete noob wrt coding and all, so my question might sound really stupid, but here goes: I have blog content showing on the front page / homepage. And obviously there is a separate page where all the blog posts are. I don’t want the front page to show this Between Posts Widget Area. How can I tweak the code such that it shows only the Blog Page, but not on the front page?

    Reply
  7. ahmed on August 6, 2017 at 1:55 am

    thank you this was awesome and do what i need

    Reply

Leave a Comment