WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. 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,

  2. 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

      • 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

          • 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

          • 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. 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

Leave a Reply