After Entry Widget

The Coveted After Entry Widget

Danger Will Robinson, Affiliate Link Landmines!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):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<?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:

11
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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
/* 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;
}
view raw after-entry.css hosted with ❤ by GitHub

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:

14 15
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!

Conductor Plugin
Rainmaker Platform: Build a Powerful Website

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

Comments

  1. says

    Evernoted !

    I was going about why the Brian Gardner tutorial (based on previous Genesis versions) wasn’t working on my Minimum Pro theme.

    I now can place my optin box in every single post.

    Thank you very much, Carrie !

  2. Jonas says

    Great explanation Carrie, it shows up in the Widgets panel.

    I used some text to try it and went to a blog post to check it out. It does show after the blog post, but it also shows duplicated above the comments: http://i.imgur.com/h3Rt2Xj.png

    Maybe I did something wrong?

    • says

      Hmm, is that post for a custom post type or just a regular post?

      Change the conditional from is_singular( 'post' ) to is_single( 'post') and see if that does the trick.

      • Jonas says

        I changed child theme and it works as intended now, it was probably something I did or the child theme.

        On a different question, can the After Entry display different messages according to category?

        For example, if you wanted to display different content after the post on your Grab Bag and another on Typography category?

        • says

          Hey Jonas,
          Sorry your comment slipped by me. You could do that programatically, but probably easier with a plugin. If you’re running Jetpack, there’s a visibility setting on widgets that you can use to toggle it on/off for categories. If not Jetpack, there are others like the Dynamic Widgets plugin.

          So, with a plugin like that, you’d still follow the tutorial, but you could drag multiple widgets into that widget area and display each one conditionally using a plugin. Make sense?

          Cheers,
          Carrie

          • Jonas says

            No worries Carrie, thank you for replying.

            That makes perfect sense.

            I looked at Jetpack but someone mentioned it was bloated so I used Dynamic Widgets instead.

            Here’s what I did, this might be useful to Christina or others.

            I dragged two text widgets into the After Entry widget (created through your tutorial), where each text widget had a different message according to category.

            When you open the text widget to type your text you’ll notice a new option below the “adds paragraphs automatically”. It will say “Dynamic Widgets: Static”. You click on it and look for individual articles and then choose to show the widget on individual articles, and where it should not show up.

            Note that it is “except on these categories”. Save and it brings you back to the widgets pane. See the front-end of the website and you’ll see it display different content according to the category you set.

  3. orgspring says

    Can it accept and array for multiple custom post types or do they need to be in separate functions?

    • says

      The concept certainly would. I don’t work with Prose often, but if I recall – I think you’d add your customizations to init.php instead of functions.php. Let me know if that works for you.

      • says

        Am getting ready to install and use Prose for first time, so have saved this post – will try this and let you know – but will be later :-) – Thank you for your reply.

  4. says

    Thank you so much for this tut! I applied it to my first Genesis child theme that is currently under works, and it worked like a charm! I also took your suggestion at the end of the tut, and applied the code with minor changes and created another one I called “After Loop” widget. I’m glad I found this blog. I love your tips, please continue posting more, as a beginner front-end dev I appreciate a community of devs willing to teach, share and help others like myself. :)

  5. says

    HI Carrie,

    Thanks for the detailed tutorial. The process went smoothly.

    However, I don’t see anything new in the Widgets section or rather what should I be looking for?

  6. says

    For my Education theme I had to remove ” and the matching ” to contain the widget within the post-width. Otherwise, the widget is spreading across the entire width of the site.

  7. says

    Sorry…my above comment didn’t include code snippets. So here it is again for benefit of others.

    For my Education theme I had to remove ‘<div class=”wrap”>’ and the matching ‘</div>’ to contain the widget within the post-width. Otherwise, the widget is spreading across the entire width of the site.

  8. says

    Thank you so much Carrie! I am using this on my website. However, what I would like to achieve is to display related posts on the right side of my widget (left one is for newsletter sign up). I would it if you could point me to how to achieve this. Note: I haven’t got a related post plugin installed nor hard-coded it in the functions.php.

    What I can’t figure out is to tell WP/Genesis to display the related posts at that very location. Anyhow, if you have a minute and an idea it would be greatly appreciated.

    • says

      Heya,
      You could use the Genesis built-in column classes to split that widget area into a left/right part. So, drag a text widget into the After Entry widget area and use something like this:

      <div><!-- put your newsletter signup shortcode or form here --></div>
      <div><!-- put related posts shortcode or whatever here --></div>

      Cheers,
      Carrie

      • says

        Thanks Carrie, that’s what I ended up using but I had to find a way to display the related posts in the columns! My solution is ok but not great. Really appreciate your help!

  9. says

    Hi Carrie,

    After searching and searching in Google I finally found your tutorial and it worked like a charm at the exact position I want it to be :). Just one question. How to do I make it visible on certain post? For example I want to insert a disclaimer on sponsored post but not wanting it to appear on non-sponsored post. So I need to have it on certain post only.

    Thanks in advance!

    • says

      Glad it worked! Simplest approach would be to add a “sponsored” category and make sure all your sponsored post are assigned to that (and assume that any not assigned to that category are non-sponsored).

      From there, use a conditional statement to show it when you want. Here are examples from the codex and an intro post to WordPress conditionals if you’re still getting your feet wet with them.

      Another approach is to still use the categories, but use a plugin like Display Widgets to take care of the conditionals part.

  10. says

    Hi Carrie.

    I was wondering what you would do if you wanted to have multiple widgeted areas after the entry (ie: one for the sign-up form and a second for an ad)? This way, each different section stands on its own and is a bit cleaner aesthetically. Thanks for your time :-)

  11. says

    Hi, thank you for the great article! Do you know how to make this mobile responsive? I implemented this and add the genesis newsletter widget, however it looks distorted. Thanks!

  12. says

    Hey Carrie,

    Great tutorial! I’m trying to exclude just a handful of pages and posts from displaying the after entry widget, but so far, no dice. Any advice? #phpisnotmyforte

  13. says

    HI, thanks for the great tut. Sorry iam ni developer.
    How to change the script to show on individual pages, not posts?

    Below code is not working ;-(

    /** Add the after post section */
    genesis_register_sidebar( array(
    ‘id’ => ‘afterpost’,
    ‘name’ => __( ‘After Post Widget’, ‘child theme’ ),
    ‘description’ => __( ‘This is the after post section.’, ‘child theme’ ),
    ) );

    /** Add Hook to show widgets after Post Section. */
    add_action( ‘genesis_after_entry’, ‘custom_add_after_post_box’, 1 );
    function custom_add_after_post_box() {
    if ( is_singular( ‘post’ ) )
    genesis_widget_area( ‘afterpost’, array(
    ‘before’ => ”,
    ) );
    }

    • says

      You’ll need to change the conditional statement to trigger for pages, not posts, so

      is_singular( 'post' ) should be is_page()

      To understand more about how conditionals work, check out this tutorial.

  14. says

    Carrie, I just want to express my appreciation of your work. You, more than anyone else, has taught me how to code and build my own genesis wordpress site. Seriously…every time I need to figure out how to do something I Google “Carrie Dils + whatever it is I need to do”. You’re awesome.

  15. says

    My theme now already has this widget enabled and has the line below in the functions.php

    //* Add support for after entry widget
    add_theme_support( ‘genesis-after-entry-widget-area’ );

    How could I make this conditional based on category? Would I have to remove it in the child theme, then re-setup as above. Or is there an easier way?

    Many thanks for any pointers… Lins

    • says

      Yep, you’d need to remove the theme support for it and then manually add it in per this tutorial so that you can get those conditional statements in there.

Trackbacks