Adding a Widget Area After the Post

Astute readers will have noticed that I recently changed themes on my personal site. I’ve been on a Genesis theme for the past several years. I love the folks over at StudioPress, and I still use their themes on other sites of mine. For my personal site though, I wanted to make a little switch so I picked up a free theme by Array Themes.

One of the aspects I loved so much about Genesis themes was how simple they made it to add in extra bits like an email subscription box after the post. If you’re curious, here’s exactly how you do it. They bake in genesis-after-entry-widget-area directly so you don’t have to do much else with your theme. You just declare support like this:

add_theme_support( 'genesis-after-entry-widget-area' );

And boom – you have a footer widget area after the post.

The Array themes don’t do that so you have to go out on your own a bit and figure it out. I recently added a widget area after my posts so I thought I would share how in case anyone else is wondering.

Initializing the widget area

The first thing we need to do is to initialize a widget area. You can do that by dropping the following PHP in functions.php. Before you do that, I highly highly recommend that you work on a local copy instead of your live site just in case.

This registers a new widget area called “After Content” and adds some other items like an h3 for the widget title.

Adding the widget area to the page

At this point, we have a widget area present in Appearance -> Widgets, but it doesn’t do anything if you drop a widget in there. To make the widget actually appear, we need to tell the theme where to put the widget area.

The Fixed theme I’m currently using has an index.php file. It’s a generic templating file that manages the output of posts. We can use this file to output our widget.

We’re going to use this PHP snippet after the post div and before the comment section.

This uses the dynamic_sidebar function along with the ID of the widget area (after-content) to output the widget to the page.

Adding the form

The final step is to actually add the form to a text widget and drop it in the widget area we just created. I opted to use the “naked” subscriber form from Mailchimp. It looks a bit like this:

Style the form

I referenced some of the original styles Brian Gardner had on his tutorial for StudioPress here when creating the styles for my site. It’s pretty simple and straightforward:

And voila! You have an After Post subscriber form.

A screenshot of the after post widget area added as part of this tutorial

Featured photo by Luca Bravo on Unsplash

Categories: Development, Start, WordPress