genesis-after-entry-widget-area. That means you can create the After Entry widget area more simply than I’ve shown in this tutorial. I’m leaving this tutorial intact as everything still works and this demonstrates how to register a widget area, add it to a theme, and style it.
If you’d like to see genesis-after-entry-widget-area in action, check out this tutorial by Marcy Diaz.
StudioPress keeps cranking out beautiful, new themes for the Genesis Framework like nobody’s business. These themes all share some things in common, like HTML5 markup, mobile responsiveness, and clean designs. A handful of these themes (like Beautiful Pro and Magazine Pro) have a bonus feature I’m really digging:
The After Entry Widget
What is it? Simply put, it’s a widget area that appears after every single post entry. It’s a great place to stash a call to action, like a newsletter signup, related content, or maybe an affiliate banner.
And guess what? I’m going to show you how to add it to your theme.
Step 1: Add the After Entry Widget Code
Hold on real quick. I need to make a quick disclaimer. We’re about to directly edit your child theme’s functions.php file. This is dangerous territory where one tiny typo can cause your site to tank. If that makes you squeamish, then beware. If you’re comfortable accessing your site files via FTP, SFTP, a file manager or whatever and know how to un-tank your site, proceed with glee.
Plop this code in its entirety into functions.php (or Genesis Extender, if you use it):
| <?php // Get rid of this tag | |
| //* Register widget areas | |
| genesis_register_sidebar( array( | |
| 'id' => 'after-entry', | |
| 'name' => __( 'After Entry', 'theme-prefix' ), | |
| 'description' => __( 'This is the after entry section.', 'theme-prefix' ), | |
| ) ); | |
| //* Hooks after-entry widget area to single posts | |
| add_action( 'genesis_entry_footer', 'my_after_entry_widget' ); | |
| function my_after_entry_widget() { | |
| if ( ! is_singular( 'post' ) ) | |
| return; | |
| genesis_widget_area( 'after-entry', array( | |
| 'before' => '<div class="after-entry widget-area"><div class="wrap">', | |
| 'after' => '</div></div>', | |
| ) ); | |
| } |
If you’re using an older, non-HTML5 enabled theme, you’ll have to change one line of code:
add_action( 'genesis_entry_footer', 'my_after_entry_widget' );
Instead of genesis_entry_footer, you’ll need to change the hook location to genesis_after_post_content. Here’s a Genesis 2.0 Hook Reference if you need it.
Step 2: Add the After Entry Widget Style
You’ll obviously want to change the CSS to match your child theme, but here’s some basic style to get you started. Drop this into your theme’s style.css file:
| /* After Entry | |
| --------------------------------------------- */ | |
| .after-entry { | |
| background-color: #ddd; | |
| border-bottom: 1px solid #222; | |
| border-top: 2px solid #222; | |
| margin-top: 40px; | |
| margin-top: 4rem; | |
| padding: 30px 0; | |
| padding: 3rem 0; | |
| } | |
| .after-entry p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .after-entry .widget { | |
| margin-bottom: 30px; | |
| margin-bottom: 3rem; | |
| } | |
| .after-entry .widget:last-child { | |
| margin-bottom: 0; | |
| } |
Save it and go check it out. You can use the Firebug add-on for Firefox or Chrome Developer Tools to help you tweak your styles to perfection.
Step 3: (Optional) Change the Conditional
Using the code above, the After Entry Widget will only display on single posts. But what if we want it to show on pages, too? Or maybe only posts in a particular category? Totally doable. It just involves changing the conditional statement to reflect where you want that widget area to show.
If you’re not familiar with WordPress conditional statements and want to learn more, check out this post.
Let’s hone in on this line of code:
if ( ! is_singular( 'post' ) )
return;
The plain English translation is “if this is not a single post, don’t proceed any further.” You can check out the WordPress Codex for a full list of conditional tags, but here are a few common conditionals you could substitute:
Show the after entry widget on any single post, page, or attachment:
is_singular()
Show the after entry widget on just one category:
is_category( 'my-category' ) // Change 'my-category' to your category's ID, title, or slug
Show the after entry widget only on a specific custom post type:
is_singular( 'movie' ) // Change 'movie' to your custom post type's ID, title, or slug
For an advanced example of how to combine conditionals and display different widget areas, check out this tutorial on adding a widget area below the navigation bar.
What’s in Your Widget?
That’s all there is to it! What will you put in your widget area? Leave your ideas and comments below. Happy customizing!
Late to the party, but just sayin’ … nice one Carrie, got it looking nice on our app’s blog 🙂
Hey Carrie:
Thanks for the tut. Required minor experimentation for a Genesis newbie, which means that this was extremely straightforward.
I am running it on Magazine Pro and after implementation, the content is the widgetted (neologism!) area is rendered in stack format rather than side-by-side format.
Is there a quick solution to render content featured here (posts in my case) as around 1/3 of the area? I am going for the same effect of the 3 posts displayed above your comments section above.
Thanks for your time. 🙂
Hi Carrie,
I’m late to the party as well, and encountered a problem. I was able to follow the first part successfully, but I also wanted to add the second part with a conditional. In my case, the second widget needs the post to be in the “resorts” category (that’s the slug). So I tried it and nothing happens. Both widgets appear on the Widgets page and both have a text. Only the first one appears in all categories, but the second doesn’t appear even in its category posts.
This is my code for the 1st and 2nd widgets.
/* ADD THE AFTER ENTRY WIDGET */
// Register Widget Areas
genesis_register_sidebar( array(
‘id’ => ‘after-entry’,
‘name’ => __( ‘After Entry’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the After Entry Section.’, ‘theme-prefix’ ),
) );
// Hooks After Entry Widget Area to Single Posts
add_action( ‘genesis_entry_footer’, ‘after_entry_widget’ );
function after_entry_widget() {
if( ! is_singular( ‘post’ ) )
return;
genesis_widget_area( ‘after-entry’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
/*———————————————————————————-*/
/* ADD A SECOND AFTER ENTRY WIDGET, BUT THIS IS CONDITIONAL */
/* In this case, it only shows up when Post is in the “Resorts” Category */
// Register Widget Areas
genesis_register_sidebar( array(
‘id’ => ‘after-entry-conditional’,
‘name’ => __( ‘After Entry Conditional’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the After Entry Conditional Section.’, ‘theme-prefix’ ),
) );
// Hooks After Entry Conditional Widget Area to Posts in “Resorts” category
add_action( ‘genesis_entry_footer’, ‘after_entry_conditional_widget’ );
function after_entry_conditional_widget() {
// Here is the Conditional
if( ! is_category( ‘resorts’ ) )
return;
genesis_widget_area( ‘after-entry-conditional’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
Hey Carrie,
For some reason, the ‘before’ and ‘after’ code didn’t paste well, here they are:
/* ADD THE AFTER ENTRY WIDGET */
// Register Widget Areas
genesis_register_sidebar( array(
‘id’ => ‘after-entry’,
‘name’ => __( ‘After Entry’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the After Entry Section.’, ‘theme-prefix’ ),
) );
// Hooks After Entry Widget Area to Single Posts
add_action( ‘genesis_entry_footer’, ‘after_entry_widget’ );
function after_entry_widget() {
if( ! is_singular( ‘post’ ) )
return;
genesis_widget_area( ‘after-entry’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
/*———————————————————————————-*/
/* ADD A SECOND AFTER ENTRY WIDGET, BUT THIS IS CONDITIONAL */
/* In this case, it only shows up when Post is in the “Resorts” Category */
// Register Widget Areas
genesis_register_sidebar( array(
‘id’ => ‘after-entry-conditional’,
‘name’ => __( ‘After Entry Conditional’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the After Entry Conditional Section.’, ‘theme-prefix’ ),
) );
// Hooks After Entry Conditional Widget Area to Posts in “Resorts” category
add_action( ‘genesis_entry_footer’, ‘after_entry_conditional_widget’ );
function after_entry_conditional_widget() {
// Here is the Conditional
if( ! is_category( ‘resorts’ ) )
return;
genesis_widget_area( ‘after-entry-conditional’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
Oh, me again…
Carrie, I got it to work. I just had to pull off that “!” and tadaaa!…
Thanks anyway, your posts are amazing and really useful.
Glad you got it working!
Pingback: How to Convert Blog Visitors to Active Subscribers
Hi Carrie!
Your tutorial is great and was so easy to follow. I used it to add a related post widget after every post but the images are stacking on top of each other, how do I make them line-up side by side?
Thank you for this effective tutorial! However, how would I display it in a separate box?