There’s 2 ways to add new widget area’s in Genesis.
1. One method is to simply register the new widget and add the custom function with hook in your child themes functions.php file.
2. The other way is to add the widget function directly into your child themes home.php file.
In this tutorial, we’ll use the 2nd method to add a new widget below existing home page widgets.
Register New Widget
The easiest way to register a new widget is to copy the code for an existing widget and change the i.d and description.
Add Custom Home Loop Helper Function
This codes gets added to the home_genesis_meta add actions in the home.php file, around line 15
Add Function To Home.php File
This code gets added in the location you want the new widget to display on your home page.
In this example, the code was added at the end of the home.php file resulting in the widget content displaying below all other home page widgets.
If you want the new widget to output the content in another location, you would add the function in the appropriate order in the file.
Full Home.php File
Below is the entire code for the new home.php file.
I have used the Agency child theme by StudioPress as an example.
Styling Custom Home Page Widget
Styling your new widget is easy.
Simply use the new CSS class generated by the custom function as your selector and add your declarations.
Here’s some Sample CSS code you can use to add styles to your new custom home page widget area.
Here’s another way to add custom home page widgets in Genesis.
You can also duplicate home widgets in Genesis.
And here’s a way to add a custom widget area to your home page for a slider.
What do you think? Pretty cool or not?
Brad, thank you for this post it was really helpful in adding a new set of widgets to my home page on the Balance theme from StudioPress. I just have one question for you. I added the new function to the home.php file, and it doesn’t matter where I place it in the home.php file it adds the new widget to the end of the page, instead of between the featured home page widgets, and the blog posts excerpts like I want it to. Do you have any suggestions on how to place the new widget just after the featured home widgets instead of the end of the page?
Brad Dalton says
I would need to test the code again locally but i think changing the loop hook to another above it should work.
Try that and let me know how you go.
That worked, thank you!
Brad Dalton says
No worries Brian