Add Sidebar For Comments On Full-Width Layout In Genesis

Sites featuring full-width blog layouts provide a focus on your prime content without the distraction of sidebar content like ads, lists, opt-ins and other exit paths. The comments you attract below the post can keep readers engaged and here you can spend some screen real estate on additional content.

StudioPress offers full-width theme designs like Atmosphere, Ambiance, Exposé, Pretty Pictures and Whitespace. From Themedy, see themes like Junction, Splash, Richmond and Proof. Theme shops like zigzagpress, Appfinite and others also feature full-width designs. Most themes can also select a full-width layout in Genesis > Theme Settings. Browse these themes and others at GenesisThemes.ca.

The same code used here for the Sample theme should work fine in most StudioPress themes and others, like Themedy’s Junction, needing only minor CSS tweaks to fit right in.

Summary

Register a custom sidebar widget area to run alongside the comments panel.

Add a body class to identify posts with comments so that we can style them differently with CSS:

For posts with comments, this narrows both the comments area and comments sidebar, allowing them to line up side-by-side.

For posts without comments, the comments sidebar appears full-width below the entry form.

Reposition the comment entry form to appear before the comments list, instead of after the last comment near the bottom of the page. It now appears full-width at the bottom of the post for every commenter, as it would for the very first.

Add CSS in the child theme stylesheet to make both the comments/no comments schemes work and make everything mobile responsive.

Fill the comments sidebar widget area with widgets.

Build Steps

Coded for the StudioPress Sample child theme.

Step 1: Register comments sidebar widget area

The first snippet placed in functions.php creates the new comments sidebar widget area.