• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Adding New Widgets To Your Home.php File

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.

Note: Any widget code added to the home.php only displays the widgets on the home page. If you want to add a new widget to other area’s of your site, please use a custom function.

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?

Reader Interactions

Comments

  1. Brian says

    September 5, 2013 at 11:40 pm

    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?

    Log in to Reply
    • Brad Dalton says

      September 6, 2013 at 2:20 am

      Hi Brian

      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.

      Log in to Reply
      • Brian says

        September 9, 2013 at 11:51 pm

        That worked, thank you!

        Log in to Reply
        • Brad Dalton says

          September 10, 2013 at 10:05 am

          No worries Brian

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags