askdesign
6/29/2016 - 4:37 PM

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

Cre8tive Diva

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!
/* 
**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%;
	}
}
//* https://cre8tivediva.com/add-see-also-widget-section-blog-posts-genesis/?utm_content=bufferdecb5&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

//* 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 -->';

}