—
by
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.
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,
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?
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
Hi. Try this code instead
You can then add the background image using CSS or jQuery using Backstretch.
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
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
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 [code]add_action( ‘genesis_after_header’, ‘inline_widgets’ );[/code] to [code]add_action( ‘genesis_before_footer’, ‘inline_widgets’, 5 );[/code]
I tested this and it works on any HTML 5 theme.
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
Hi Scott
Did you want the widgets displayed inline or stacked on top of each other?
Access only to all free tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Access to 10 premium tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Access to 15 premium tutorials per month.
Monthly Tutorial Request
Includes code guarantee and priority coding support.
Was This Tutorial Helpful?