The Prose child theme has been around for over 2 years and its a little bit different than the other StudioPress child themes.
Prose doesn’t include a home.php file and uses a custom code page for adding PHP and CSS rather than child themes functions.php and style.css files.
Prose also doesn’t offer home page featured widgets like home top which can be used with the Genesis responsive slider.
In this tutorial we’ll be adding a new widget area which display content on the home page only.
At the end of this post, you’ll also find a link to another tutorial which uses a different method to display a slider on the home page and a different slider plugin.
Create Home Page Widget Area
Add this PHP code to the end of your init.php file:
Code not displaying? Grab it from Github.
This code registers a new widget area and creates the function to display the widget area’s content on the home page only using a conditional tag.
It also displays the widgets content in the location using the genesis hook before_content_sidebar_wrap.
Style Your Sliders Widget Area
Once you install the Genesis Responsive Slider and configure the settings, you can also style the widget area using CSS code:
Here’s some code code you can modify:
.home slider {
background: #f2f2f2;
padding: 5px;
border: 5px solid #D4D0C8;
}Other Options
Here’s another way to add a slider on your homepage using any theme in any location.
Don’t forget to backup your files just in case you forget and update your child theme at some stage.
Genesis Prose Extras Plugin
This is a new plugin which makes adding widgets, customizing layouts and other changes easy for Prose theme users. Discover how easy it is to add home page widgets and change the layouts after installing this plugin.
Hi there,
Nice article, however I’m still struggling with styling the border.
In particular I want to add padding outside the border, as if you add the slider to the top widget area in Magazine Pro the widget area below is right next to the slider with no gap!
any information most welcome.
Thanks,
Try adding a margin http://www.w3schools.com/css/css_margin.asp
Thanks Brad- you are a life saver. I finally figured out how to add the slider to my modern portfolio theme – http://mariposamemoirs.com
I made my photos 1140 wide but they’re to wide enough to fit the slider – what size do I need to make the photos please.
Also – I tried adding the bottom code to change the border colour but it didn’t work so I just left it fray.
I think I finally have started a site I like and can’t wait to start adding content.
Heather Hess
Hello Heather
Looks very nice. Like your pics!
Thanks for the compliment on my photos. I originally put the slider above the black comment area of Modern Portfolio but the format was wrong so now I have put it inside the black box – does it look ok this way.
Heather
Yes, it looks very nice however you may consider increasing your title area a bit so it displays both words inline.
You may need to slightly decrease your header right widget area if you do.
Hi Brad!
I’m new to GF, and I wonder how to remove borders of the slider, and where to put the custom css. In lib/css/ I have only admin.css file, not custom.
You can inspect the borders using Firebug and and add the modified CSS code in your Custom CSS field for that theme.
Thank you! I’m new to design/building sites and am so used to new things not working at first. I’m always having to go back and follow instructions AGAIN and find what I did wrong. This actually worked THE FIRST TIME! Yay!
I am using Prose. The code worked perfectly, but I didn’t like the grey border around the slider.
I’ll be sure to recommend you to anyone who needs help designing a site, and I may hire you for some future projects. You’ve been great at responding to my questions.
Thank you.
You can remove the border simply by inspecting it using Firebug and removing the border in your custom code. Link to your site please Angel.
Thanks for the link to the Hook Guide. But, that just made me more confused. I don’t know what all of those codes mean. I took down my “Coming Soon” page so that you can see my site (parentjob.com). I want a slider displayed directly under the navigation bar, above the posts. I hope you can help. Thank you for your time.
The hooks are the locations where you can output the widget content for your slider.
Here’s the code.https://gist.github.com/braddalton/5257550
If you want me to setup your slider, you can hire me for a half hour job for $40.
What theme are you using?
Hi Brad, it’s me again. I am trying to add the slider again. I copied and pasted all of the code, and my site went off-line again. Let me explain what I need for my home page:
I have an image for my header. I want a slider between the secondary navigation menu and the post heading. The primary sidebar would be to the right of the slider.
I’m starting to think that your code is just inteded for a slider as the header. Will your code work for my site’s layout?
Thank you for all of your help, Brad.
Hi Angel. Yes the code is meant only for the header. Here’s the visual hook guide. Which location you do want to display the slider? Send me a link to your site please.
Thanks, Brad, for the prompt response. I was able to remove the code in cPanel. Now I will retry this, but I need to know exactly where to paste the code. Do I start it next to the bracket that looks like this } Or do I start it under that bracket? Please have patience with me, I am a novice designing my own site. Thanks again.
Copy the entire code including ALL characters. Brackets included.
Navigate to your your theme > prose > lib > init.php file and paste ALL the code at the very end of the file.
Leave one line of space after the existing code ends and paste it there.
Save the file changes and refresh your site then go to widgets in your dashboard and drag the Genesis slider into the new widget area.
Can you help? I copied and pasted this code into the php file. Now my site is offline. I started copying on the next line, was I supposed to start next to the bracket that is already there? Please respond, I really need help. Thanks
You need to copy ALL the code from the raw view and paste it into the lib/init.php file.
Don’t worry, just login to your server using File Manager in cPanel or FTP and navigate to the functions.php. Open it in a text editor like Notepad++ and remove the code you pasted in there that caused the error.
If you don’t copy ALL the code from the raw view and paste it in, you can get an error.
P.S Send me your login details if you get stuck and i’ll fix it for you.