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?Subscribe for new Genesis Tutorials