• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Pre-Made Genesis Theme Installation & Customization
    • Same Day Installation Service
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
    • Support
  • Shop
  • 0 items$0.00

Published on: June 28, 2016

Add a “See Also” Widget Section to Your Blog Posts in Genesis

FacebookTweetPinPrintShares20

How to add a see also widget section to your blog posts in Genesis.

About a month or so ago I had someone inquire with me about how to add a “See Also” area to the bottom of their blog posts. She saw this on the bottom of the posts on TMZ.com. She wanted to know how she could feature other blogs that would offer a more flexible way of updating the content without using another plugin.

Before you proceed, you can see them in action here.

This tutorial is for users of the Genesis Framework only! If you are unfamiliar with working with your theme files, stop and ask for help. If you are familiar with modifying your theme files – you should back them up before proceeding.

Below are the instructions on how to accomplish this:

1. Add the widget areas

Click “View Raw” on the gist below. Copy/paste that code to the bottom of your functions.php file. Save it.

Let’s break it down. Line 2 of the code provides the new image sizes that will be added to your website and will display inside the Featured Posts Widget. Lines 4 through 14 registers the widgets so they will display in your dashboard under Appearance > Widgets. Lines 16 through 39 tells WordPress where the widgets should display (i.e., this code is placing it in the footer area of the post (genesis_entry_footer).

//* Add See Also Image sizes
add_image_size( 'see-also-entry', 50, 50, TRUE );
//* Register See Also Widget Areas
genesis_register_sidebar( array(
'id' => 'genesis-see-also-left',
'name' => __( 'Genesis See Also Left Side', 'themename' ),
'description' => __( 'This is the Genesis See Also left side section.', 'themename' ),
) );
genesis_register_sidebar( array(
'id' => 'genesis-see-also-right',
'name' => __( 'Genesis See Also Right Side', 'themename' ),
'description' => __( 'This is the Genesis See Also right side section.', 'themename' ),
) );
//* Hooks See Also Left and Right Widget Areas
add_action( 'genesis_entry_footer', 'genesis_see_also_widgets', 15 );
function genesis_see_also_widgets() {
if ( ! is_singular('post' ) )
return;
echo '<div class="genesis-see-also">';
echo '<div class="see-also">';
echo '<h4>' . __( 'See Also', 'themename' ) . '</h4>';
genesis_widget_area( 'genesis-see-also-left', array(
'before' => '<div class="genesis-see-also-left widget-area">',
'after' => '</div>',
) );
genesis_widget_area( 'genesis-see-also-right', array(
'before' => '<div class="genesis-see-also-right widget-area">',
'after' => '</div>',
) );
echo '</div></div><!-- end .genesis-see-also -->';
}
view raw functions.php hosted with ❤ by GitHub

**Note, since we added new image sizes – you should regenerate your thumbnails. You can grab that plugin here if you don’t already have it.

2. Add Styling

Now that the widgets are in place, we need to style them so they look nice but you can also add your own.  My recommendation for placement may differ from yours. But this is the method that works best for me.

Copy/paste lines 1 through 30 above your “Media Queries” section of your style sheet (style.css).

Copy/paste lines 32 through 30 to the bottom of your style sheet or to the bottom of your Media Queries.

My rule of thumb is anything that should appear on desktop be added above the Media Queries. Anything related to mobile devices be placed with the Media Queries.

/*
Genesis See Also Widget Area
---------------------------------------------------------------------------------------------------- */
.genesis-see-also {
width: 100%;
}
.genesis-see-also .entry {
margin-bottom: 10px;
}
.genesis-see-also-left .featured-content .entry-title,
.genesis-see-also-right .featured-content .entry-title {
font-size: 15px;
}
.genesis-see-also-left.widget-area {
float: left;
}
.genesis-see-also-right.widget-area {
float: right;
}
.genesis-see-also-left.widget-area,
.genesis-see-also-right.widget-area {
padding: 10px 10px 0 0;
width: 50%;
}
@media only screen and (max-width: 320px) {
.genesis-see-also-left.widget-area,
.genesis-see-also-right.widget-area {
width: 100%;
}
}
view raw style.css hosted with ❤ by GitHub

3. Bonus: Revenue Generating Areas

If you participate in revenue sharing programs, this is a great way to add your code. This newly created area can be used several ways. Add a text widget with your ad code to the left side and featured posts on the right. Or add your featured posts on the left and place a text widget with your ad code on the right.

Either way, these two widget areas will be seen before any content in the sidebar so this could be a little gold nugget for some of you!

I’d love to see what you do with it. If you use it, please post back in the comment section.

Did you find this blog or tutorial helpful?
Buy Me a Coffee at ko-fi.com
Like my Signature? Get the Signature Widget for Genesis right here!

Filed Under: Genesis Framework, Tutorials Tagged With: diy, how-to, mobile friendly widgets

Reader Interactions

Comments

  1. Christian Nelson says

    July 1, 2016 at 3:33 pm

    This is really nice, Anita….great idea, Not sure I can deal with all that code (since I am code-a-phobic), but I can think of some good ways to use this, and looking forward to trying it out sometime. Thanks for the excellent tutorial.

    Christian Nelson
    MoodyRiver (Twitter)

    • Anita C says

      July 1, 2016 at 4:05 pm

      Thank you Christian! I really enjoyed creating it and adding it to her site. If you try it out, I’d like to see what you do with it.

Primary Sidebar

Sign Me Up!

Receive my blog posts, tips and updates delivered to your inbox!

Yes, Sign Me Up

*By signing up you will receive new blogs, updates on products, services and important alerts.

Categories

  • Design
  • eCommerce
  • Five on Friday
  • Fonts
  • Free Themes
  • Freebie Friday
  • Genesis Framework
  • Genesis Plugins
  • Genesis Themes
  • Genesis Untapped
  • Instagram
  • MailChimp
  • News
  • Plugins
  • Press This News
  • Promotions
  • Social Media
  • Tipsy Tuesday
  • Troubleshooting
  • Tutorials
  • Uncategorized
  • Web Development
  • WooCommerce
  • WordPress
  • WordPress Plugins

Footer

Digital Nomad! I can be anywhere I wanna be now.

  • Facebook
  • Google+
  • RSS
  • Twitter

Latest Blog Posts

  • #BlackFriday Save up to 75% on New Hosting
  • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
  • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin

Looking for Something?

Copyright © 2012–2021 · Designed with by Me! · Hosted on SiteGround