• 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

Adding A Home Page Slider To The Prose Theme

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.

home slider widget

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.

Reader Interactions

Comments

  1. Neil says

    June 5, 2014 at 1:53 pm

    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,

    Log in to Reply
    • Brad Dalton says

      June 5, 2014 at 5:11 pm

      Try adding a margin http://www.w3schools.com/css/css_margin.asp

      Log in to Reply
  2. Heather Hess says

    January 2, 2014 at 12:53 am

    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

    Log in to Reply
    • Brad Dalton says

      January 2, 2014 at 1:00 pm

      Hello Heather

      Looks very nice. Like your pics!

      Log in to Reply
      • Heather Hess says

        January 2, 2014 at 4:31 pm

        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

        Log in to Reply
        • Brad Dalton says

          January 2, 2014 at 4:40 pm

          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.

          Log in to Reply
  3. hann says

    December 10, 2013 at 1:34 pm

    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.

    Log in to Reply
    • Brad Dalton says

      December 10, 2013 at 9:05 pm

      You can inspect the borders using Firebug and and add the modified CSS code in your Custom CSS field for that theme.

      Log in to Reply
  4. Christy says

    May 31, 2013 at 2:07 pm

    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!

    Log in to Reply
  5. Angel says

    April 10, 2013 at 5:58 am

    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.

    Log in to Reply
    • Brad Dalton says

      April 10, 2013 at 4:06 pm

      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.

      Log in to Reply
  6. Angel says

    April 8, 2013 at 3:56 am

    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.

    Log in to Reply
    • Brad Dalton says

      April 8, 2013 at 3:17 pm

      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?

      Log in to Reply
  7. Angel says

    April 7, 2013 at 1:01 am

    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.

    Log in to Reply
    • Brad Dalton says

      April 8, 2013 at 2:10 am

      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.

      Log in to Reply
  8. Angel says

    April 4, 2013 at 1:22 am

    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.

    Log in to Reply
    • Brad Dalton says

      April 4, 2013 at 1:50 am

      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.

      Log in to Reply
  9. Angel says

    April 4, 2013 at 12:04 am

    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

    Log in to Reply
    • Brad Dalton says

      April 4, 2013 at 12:47 am

      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.

      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
 

Loading Comments...
 

You must be logged in to post a comment.