Extend Primary Sidebar Background To Footer

This solution enables you to display the background of the primary sidebar widget area all the way to the footer of your site like this:

The background displays when the primary sidebar is active or not.

Here’s how the sidebar background looks when you populate the primary sidebar widget area with the calendar widget.

This solution involves 3 steps:

1. Create 2 jQuery files in your child themes js folder. Create a js folder in your child themes root directory if needed.
2. Add PHP to the end of your child themes functions file to load the js.
3. Add CSS to your child themes style.css file to color the background of your sidebar.

This tutorial was written in response to the following question from a member of WP Sites:

I don’t know if it is possible, but I want the sidebar to have a background color to the bottom of the page. Now it only has a background color where the widgets are, but I also want it to have a background color where there are no widgets. It has to be one block visually so to speak. Can you help me with this problem or do I want something that is impossible to achieve?