If your website uses the Genesis Framework, you already know how easy it is to do things like change page layouts, widgetize your homepage, or use different sidebars for different parts of your site. Those are just a few of the reasons I love Genesis and recommend it to all my clients.
As part of my effort to give back to the Genesis community, I volunteer in the StudioPress support forums, where users ask questions and look for tips about different customizations. Recently, several people have asked how they can add a widget area to a specific page on their sites – not in a sidebar, but inside the page itself.
Using a widget area on a page can serve any number of purposes. For example, one user wanted to create a full-page layout using the various social media widgets available for sidebars. Another wanted to display RSS feeds on a page using an RSS widget.
Here’s how you can add a widget area to a page, step by step. Please note: This method will not work for your site’s homepage unless you are using a static page. Instructions for adding a widget area to your homepage depend on what child theme you’re using and how it’s configured.
How to Add a Widget Area to a Genesis Page
1. Create the widget area.
To add a new widget area to your child theme, open functions.php and add the following:
You can change the ID, name, and description to fit your use case. So if this widget area is going on your contact page, for example, you could change the ID to something like “contact-widget” or “contactwidget.” Just make sure you change it in all the other steps.
2. Create the condition for displaying the widget area.
We want the widget area to display only on a particular page, so we need to add code to functions.php to tell the theme where it goes.
If your Genesis child theme uses XHTML (older or non-Pro themes):
If your Genesis child theme uses HTML5 (Pro child themes):
A few things to keep in mind:
- If you changed the name of the widget area in Step 1, you’ll need to change it twice in this step.
- You’ll need to replace “ID” with the page ID number you are using. To find your page ID, go to Pages > All Pages in your WordPress dashboard. Hover over the page title and you’ll see a URL like this at the bottom of your browser window:
- That number is the page ID, which you’ll need to use in the function above. Do not use the entire URL – just the ID number.
- In each function above, we are using a hook to place the widget after any content on the page. That allows you to add regular content to the page and display the widget area afterward. To change that, check the Genesis hook reference.
3. Add some CSS rules.
Without some CSS, your widget area won’t display correctly. Here is some base CSS to add to your child theme’s stylesheet (though it is definitely not exhaustive – feel free to alter as needed).
Again, if you changed the name of your widget area, you’ll want to update here so your stylesheet is looking for the correct div ID.
4. Drop in some widgets and take a look.
Now you should see your widget area under Appearance > Widgets. Drag a widget into the new area, then go check out your page to see how it looks!