—
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?
Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.
Leave a Reply
You must be logged in to post a comment.