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!
Never mind, I already figured it out myself. 🙂 Hooks!
Glad you got it working!
Hey Carrie,
thanks for the code. really nice. For those who are not really comfortable with PHP I would suggest this neat plugin (did myself for one of my clients) https://wordpress.org/plugins/after-content-widgets/ which is as light as possible and supports custom post types.