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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add Full Width Widget Areas To Any Genesis Child Theme

This tutorial for a member shows you how to add a front-page.php file with 4 full width widget areas.

You can add more if you like as long as the widget I.D’s are unique.

There’s 3 code snippets to deal with:

The first step is to create a new file using a code editor like Notepad++ for Windows or Text Wrangler for Mac.

Paste the following code at the very top of the file and save it as a PHP file named front-page.php in your child themes root directory.

Register for full access

Related Tutorials

  • Responsive Inline Widgets With Full Width Background

Reader Interactions

Comments

  1. Jonathon Fowler says

    January 10, 2022 at 1:03 pm

    Hi Brad,

    I already have a front-page.php which I created to accommodate your ‘Hero Image’ option on my homepage.

    How do I add a full-width widget to my homepage with a coloured background, responsive, too? Can I add the text in the tutorial, or does it need further modification to work with the Hero Image part?

    Thanks,

    Jonathon,

    Log in to Reply
    • Brad Dalton says

      January 10, 2022 at 1:10 pm

      Hi Jonathon. Please email me a copy of your theme which includes the code you installed for the hero image. Do you only want 1 full width widget area after the hero image?

      Log in to Reply
  2. fotod0g13 says

    September 22, 2016 at 5:40 am

    Hi Brad,
    I am trying to run the widgets inline- similar to how they are appear here
    ( http://aielloreviews.com) like the white area above the red footer widgets.
    This is the site I am redoing with the Sample theme to make it responsive.
    The current site is using the Metric theme which is non-responsive and outdated.
    I could not figure out how to write the new code needed

    Hope that explains it better

    thanks
    S

    Log in to Reply
    • Brad Dalton says

      September 22, 2016 at 6:50 am

      Hi. Try this code instead

      You can then add the background image using CSS or jQuery using Backstretch.

      Log in to Reply
      • fotod0g13 says

        September 22, 2016 at 9:09 am

        Still having issues with this – I had to change the code a little and have it partially working but not fully as I am trying to do.

        It looks like these inline widgets are contained within the the site inner> content

        I am trying to get the background color to go all the way across the page like the navigation bar background, or footer widget background does , but only have the inline widgets appear on the home page.

        If you look at the site again:
        http://www.nysinsp.com/sample/

        you can see I have changed the background-color of the inline widgets – but cannot figure out how to get it to truck all the way across

        Hope above makes sense – thanks for the help
        best

        Scott

        Log in to Reply
        • Brad Dalton says

          September 23, 2016 at 1:43 am

          Which hook position do you want to use? I assume genesis_after_header?

          Try this new solution which enables you to add a background color or background image via the WordPress customizer.

          Only works on HTML child themes

          Log in to Reply
          • fotod0g13 says

            September 23, 2016 at 5:41 am

            I have tried genesis_ after_header, but that puts it at the top of the page. I have changed it to genesis?after_content, which put it in the correct area, just above the footer widget area, but I am trying to add these three widgets so that the background color works similar to footer widgets. i.e. – the color of the background goes all across the screen and is not contained by the content>site inner.

            ** Imagine this to be like I am trying to duplicate the 3 column footer widgets calling them something else- the widgets appear in line but the background color stretched across the screen
            http://www.nysinsp.com/sample/

            *** It looks to me like a div id needs to be added to the current code I am using to set the background to that color, but I am not having any luck in getting that to be recognized.

            hope above is clear now

            best
            Scott

          • Brad Dalton says

            September 23, 2016 at 5:54 am

            Use this code and change

            add_action( 'genesis_after_header', 'inline_widgets' );

            to

            add_action( 'genesis_before_footer', 'inline_widgets', 5 );

            I tested this and it works on any HTML 5 theme.

  3. fotod0g13 says

    September 21, 2016 at 9:18 am

    Hi Brad,

    I have added the code above and got it to work using the sample theme – I am looking for a little bit more control over this area and thinking it is a css issue but is beyond me how to do it.

    I want to add a class to this area that wraps all 3 widgets so that I can add a background color. Ideally it would work exactly as the genesis footer widgets section – but these widgets will only appear on the front page.

    Would really appreciate it if you could take a look and give me a little guidance.
    http://www.nysinsp.com/sample/

    thanks

    Best
    Scott V

    Log in to Reply
    • Brad Dalton says

      September 21, 2016 at 9:28 pm

      Hi Scott

      Did you want the widgets displayed inline or stacked on top of each other?

      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