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.
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 -->'; | |
| } |
**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%; | |
| } | |
| } |
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.
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)
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.