Add a Widget Area to Your Featured Image in Genesis

I’ve been somewhat surprised, but quite pleased, with the positive response and adoption for my featured image plugin, which is available on the WordPress repository. Apparently, I really am not the only one who wanted this functionality! If you’re not familiar with it, here’s what it does: it adds a featured image as a really large, backstretched image, to your website. The key is that it does so intelligently, so if the featured image isn’t large enough to span the site, it will fall back and display the image at a smaller size. There is quite a bit more to the plugin, such as featured images for terms and post types, but the decision making process is key to the output. This plugin is key to this tutorial, so if you’re not already a Display Featured Image for Genesis user, you’ll need to get a copy (it’s free!).

Content Sidebar

I wanted to share a tutorial to showcase a feature which is somewhat hidden inside the plugin: the ability to add content, such as a widget area, to the featured image overlay. So if you have a post or page with a smaller image, or no featured image as a fallback, this content/widget area won’t show. This means that if you want to add something to this area, you need to make sure that it shows another way on pages without the backstretch image, if it’s important to you.

By default, all that’s in the featured image overlay is the post/page title, but there are two hooks tucked in there which can be used to add something else. I’ll be adding a widget area, but you could theoretically add pretty much anything, such as a navigation menu (again, be careful with this if you might have a page without a backstretch image). The two hooks are (creatively named):

display_featured_image_genesis_before_title: outputs before the title

display_featured_image_genesis_after_title: outputs after the title

I’ve used the first hook to add a widget area to my own site. Actually, I’ve added two widget areas: one which is used throughout the site, and one which is exclusive to the front page. There are other ways to handle this setup–one could, for instance, add just one widget area and use the conditional logic in Jetpack or a similar plugin to show specific widgets only on specific pages–but I’m not currently using Jetpack, so this was easier for me.

Register the Widget Areas

Your first step will be to register the new widget areas, or sidebars, if you prefer that terminology. You can add these to your site’s functions file, either adding the new widget areas into your existing widget registration function (on my own site, this is part of a much larger function which adds all of my widget areas at once), or use this function in its entirety:

Note that the widget areas will only be added to your site if Display Featured Image for Genesis is active. If it isn’t, they’ll disappear, both from the front end of the site, and from the dashboard. At this point, they’ve only been added to the dashboard, so if you add anything to the widget areas, they still won’t show on your site.

Show the Widget Areas Over the Featured Image

To show them, we’ll need another function:

/**

* Add the featured image widget areas to the featured image, if they are active.

You’ll note that by itself, this function doesn’t appear to do anything at all, because it’s not. This function is merely determining which widget area to use. The general 'over-image' widget area is used by default, but if we’re on the front page, and the custom front page widget is active, we’ll use that instead. Then the function calls another function, leaven_print_sidebar, which also doesn’t do any real work of its own, but sets up the rules for the genesis_widget_area function to output the sidebar.

* Outputs the sidebar/widget area to the site. No internal wrap is added.

You absolutely do not have to use this function–I created it because I felt like I was performing the same checks every time I added a widget area to my site, and this just simplified things for me.

What Does It Look Like?

Styling the widget area output is totally going to be a personal decision, and will really depend on what you’ve got in it. My front page widget is a simple text widget; the default over image text area has only a search widget in it:

Here’s how I’ve styled that (including some of the styling for the overlay and search forms in general):

Reader Interactions

Comments

I hadn’t yet considered this possibility, and thank you for demonstrating it including the code. It recognize some of it from the welcome-text snippet of Studiopress that I have used, but you structured it a bit different so that’s good to explore.

I’m sure this code will become handy at some point, and I notice that after following your solutions for a while and having to solve some problems myself, I’m starting to understand more about how hooks, actions and filters work and can be used. You are one of my teachers on this path.

Thank you Robin. You’ve been so nice to help me setting up this plugin too.

I understand action hooks and php/javascript now somewhat (simple tasks), but don’t yet feel secure in using filters (which hooks can manipulate which data?) and there is still a lot to learn like queries and such but I’m not in a hurry.

Thanks again, Hans

ps. Is it on purpose that I no longer receive emails from your reactions on my comment? Because the last two times I didn’t.

Filters took me a while to wrap my head around, too, but they can be incredibly useful–I was so excited when that finally started making sense to me!

A while back, I deactivated Jetpack, which was handling the comment notifications. I had some site issues and that plugin was one of the casualties–I may need to look into an alternative, or bring it back for that. I promise it’s nothing personal!

I’ve used Jetpack for comments on a website but really didn’t like that wordpress.com is than interacting in a way that my visitors can recognize it’s not from my website.

On my own website I now use “Subscribe to Comments Reloaded” and it worked flawlessly from the start, and is also localized in the Dutch language.

I have also tried “Comment Mail” that seems to have a lot of functionality and looks advanced and modern, but is new and I don’t know how lean it is. In the beginning I’ve had some problems getting it to work, so perhaps it’s too early yet to use.

The simplest solution was “Subscribe to Comments Reloaded” (I consider it proven technology), and next to it I use a php&javascript to enhance the user experience (I didn’t like how standard WP reacts if you forget to fill a comment-field and submit) and the plugins “Simple Comment Editing” and “Mention comment’s Authors” (the last one just for fun). It seems to work fine now (after some revisions of the script).

All the above plugins and scripts are described in a blog post of Saumya Majumder (I requested that in a earlier post of him in which he argues why you shouldn’t use third party services for comments). I only localized the script (he considered that to be to advanced for his readers to share) and he seems to know what he’s doing and always tests and uses before writing about it. He has helped me too on occasion.

Thanks for sharing that, Hans–I will check it out! I agree about the comment emails from WordPress. They’re certainly convenient, but I don’t know that I care for them all that much. I honestly haven’t thought much about comment notifications, as I’ve never thought that people might be all that interested in them. Maybe I need to change that!

Hi Robin! This is an amazing snippet for genesis and I’d love to use this in my site however it doesn’t seem to be registering. I’ve input all the code (although haven’t styled anything yet), but it seems to just not want to work. The widget areas don’t show up in the widgets section and nothing changes anywhere in my code when I view it with an inspector. I’m using the genesis framework on the minimum pro theme. Do you know why your code wont work for me? I appreciate any feedback! 🙂

Please ignore my last comment. I didn’t realize I needed to download your plugin! However I’m still having troubles as when I’m in the settings uploading the default featured image (I like that idea!) the min size has to be 2001px however my max size for my large widths is always 1px less then the required plugins min size.

For example, your plugin is saying it needs a min size of 2001px but my max file width is 2000. So then I go to Settings > Media to increase the large size max width to the required 2001px, head back to your plugins settings and now all of a sudden the min file size is 2002px! So I can never upload a default featured image.

Also, after the code has been inserted again I still don’t see anything happening?

Hey Amber! So you are in the unusual (as far as I know) situation of having a fairly large “large” image size, so the plugin is likely getting a little scrambled trying to evaluate this. You should be able to correct it by telling the plugin to ignore the site’s “large” width and compare to a different number instead. There is a filter for that:

That should help with the first issue. If the newly registered widget areas are not showing in the WordPress admin, that might take a bit more digging; I might need to see your functions file. If you want to create a private gist or pastebin, and use my contact form to send that to me privately, I’d be happy to look it over and see if anything obvious jumps out at me.

Yes, you can do that. There is a hook: display_featured_image_genesis_after_title, which outputs directly after the featured image title, and you can put pretty much whatever you want (within reason) in there. The standard Genesis shortcodes for the post date, etc. should work just fine.

No, the hook I mentioned is an action hook, not a filter. I’m not sure if your cfmld_post_info function is doing what you want it to, but it’s not being called in the code you posted. Something like this:

should get you started, although this doesn’t modify the actual post info (and this is for HTML5 themes; you may need the older XHTML post info code instead). This just moves the post info when is_single() is met. Hope that helps get you started.

Yes, you can absolutely move the featured image using filters (see the plugin FAQ page). However, the backstretch image is already hooked into the genesis_after_header hook, so you may need to just tweak the priority on it, if it’s showing before something else that’s using the same hook. The filter for that is in the same section on the FAQ. HTH

It is a great idea you had with your plugin. I am already using the backstretch Plugin for Landingpages on my Website without your Plugin and I am thinking of switching all Posts and Pages to Backstretch with your Plugin.

But I am a bit concerned about SEO. Because Search Bots and Social Media don’t seem to fetch the dynamically added Featured Image. That’s very sad for the ranking of the page.

If you use an SEO plugin such as Yoast, it handles adding the proper meta tags to your HTML to pass the featured image on to social media. Something like that is required no matter how you display featured images, since WordPress Core doesn’t do it, and my featured image plugin only handles visual output. Some social sharing plugins may also add the appropriate tags–personally, I have just always used Yoast.

But imagine one of your editors forgot to set the og:image meta with yoast for example:

In this case Facebook has no chance to fetch your featured image because the featured image is added on the client trough backstretch.js after the page is loaded. Its simply not there so it fetches a different image from the content area.

Hey Norman! Actually, I apparently completely failed to turn on the “Add Open Graph meta data” setting in Yoast, so thank you for making me check and fix that. With that on, facebook does properly retrieve the featured image (I had it scrape again). You raise a good point about the image being loaded after the page, but that is intentional, so that the script doesn’t prevent the content loading quickly. The image is actually output a second time in the markup as a fallback for users without js enabled, but I don’t know if that’s accessible to scrapers since it’s in a tag–or it may not show since it’s a background image, rather than inline. I’ll dig into this, and consider the possibility of adding the meta tag, although I would only want to do that if I was sure it wasn’t otherwise being handled. Thanks for the feedback!

This is awesome, I have already been using your plugin for the featured image and have been puzzling over how to do something like this. I am new to genesis and working in the code. had a question, how could I set this up so that it was conditional? Meaning having 2-3 different sections of text that show up on different sets of pages. Also how do I deactivate the page title from displaying? Everyone’s questions and comments are really interesting!

For your first question, although I expect you could register multiple widget areas and handle the output conditionally in the code, it might be easier to use a plugin that allows you to display different widgets conditionally. Jetpack has a module for this and it’s pretty user friendly.

For the second question, you can prevent the title from showing on the backstretch image with an option in the plugin settings. If you want to remove the title from the site, StudioPress has a good library of code snippets which includes that, or you can hide it with CSS.