• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2893

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add More Home Page Widget Sections To Parallax Pro

In this tutorial, i’ll provide all the code you need to add 2 extra home sections to the Parallax Pro theme by StudioPress.

There’s 3 steps involved.

  1. Add more code to the front-page.php file
  2. Register 2 new widgets in your functions.php
  3. Add CSS to your style.css file

1front-page.php

You can simply copy all the code from the view raw link in the Gist for the front-page.php part and replace the entire code in that file of your theme.

2functions.php

Next step is to copy the code from the functions.php section of the Gist and paste it at the end of your child themes functions.php file.

3style.css

The final step is to go to Line 1130 of your child themes style.css file and add .home-section-7 to the rule which starts on that line. You can see i have done this in the style.css section of the Gist below.

You will also need to add .home-section-7 to the Media Queries on Line 1779 as well which you can see i have added in the code as well.

Register for full access


And here’s the final result:

add home section widget to Parallax Pro

Background Image For New Section

Here’s a post explaining the easiest way to add a background image to your new home area.

If you get stuck, please ask a question in the comments.

Reader Interactions

Comments

  1. fotod0g13 says

    June 7, 2016 at 5:04 pm

    Hi Brad,
    is it possible to style the even home sections individually?
    When I look at my code I see no references to the even number home widgets ( 2,4,6)
    just .home -even.

    I have adde the code above to add 2 more widgets- but would like to see if I can change the
    padding on widget#6, and the background color on that, so that it is different than the
    background color on widgets # 2,4.

    I tried adding this to my css:- with no luck.
    home-even .home-section-6 {
    background-color: #ff00ff;

    }

    here’s the site address: http://westchesterpowdercoating.com/testbuild-hdsnyc/

    any thoughts on this appreciated- thanks

    Scott

    Log in to Reply
    • Brad Dalton says

      June 7, 2016 at 5:22 pm

      Something like this should work

      .home-even {
          background-color: red;
      }
      Log in to Reply
      • fotod0g13 says

        June 7, 2016 at 5:25 pm

        yeah that seems to effect all of the even widgets. I want to know if there is a way to just target one particular even widget. In this case widget #6 – I want to change the background color and the padding on that one widget if I can.

        When I look at the code using firebug – I do not see any settings for even widgets other than .home-even – just the odd numbered widgets

        Log in to Reply
        • Brad Dalton says

          June 8, 2016 at 11:08 am

          Did you try:

          .front-page-6 {
          background-color: red;
          }
          Log in to Reply
          • fotod0g13 says

            June 8, 2016 at 12:28 pm

            Hi Brad,

            sorry for the delay – I did try it and a couple of other things with no luck.

            **Just to see if I could get anything to work I added the div call to the widget 6 ( div class= “front-page”) then added some padding to the style sheet- doing this the color red does show but it is not for the background of the entire widget 6 area. the color red only appeared in the text widget area , and only appeared because I placed padding on it.

            When I look at firebug the code says the area is
            home-even home-section-6 widget
            but that div does not show up as visible on the stylesheet in
            firebug- even though I have added it to the stylesheet.

            Loading this to the contact form in the event you see something in the front-page, and or functions file that needs to be active.

            Hope above makes sense- would seem it should be possible to do this

          • Brad Dalton says

            June 8, 2016 at 12:31 pm

            I tested it and it styles the background for the 6th widget only. Maybe you have to clear browser, server or plugin caching.

        • Brad Dalton says

          June 8, 2016 at 11:09 am

          Try

          .home-section-6 {
          background-color: red;
          }

          Works when i test it.

          Log in to Reply
          • fotod0g13 says

            June 8, 2016 at 12:35 pm

            hmmm – tried looking at it on a couple of different computers with the same results. I just sent you some files on it through the form setup you have . ( css sheet, functions and front page files – ** i turned the functions, and front page into txt type files so I could send them

            Strange

          • Brad Dalton says

            June 8, 2016 at 12:40 pm

            On what line of your style.css file did you add this CSS?

            .home-section-6 {
                background-color: red;
            }
          • fotod0g13 says

            June 8, 2016 at 12:42 pm

            fyi- I did clear the cache as well with no difference

          • Brad Dalton says

            June 8, 2016 at 1:06 pm

            Please check your CSS and make sure it uses the .home-section-6 class

            .home-section-6 {
                background-color: red;
            }

            On what line of your style.css file did you add this CSS?

      • fotod0g13 says

        June 8, 2016 at 1:24 pm

        dumb ass that I am – got it working now
        I added .home-even .home-section-6

        just changed it to
        .home-section-6
        working fine – thanks for help

        ** to many hours starting at the screen- aye carumba

        Log in to Reply
        • Brad Dalton says

          June 8, 2016 at 1:44 pm

          Good stuff. I know the feeling well!

          Log in to Reply
  2. derekmagill says

    March 23, 2016 at 12:28 pm

    Hey Brad — my site is crashing when I paste the functions code into the functions.php file.

    I’m pasting it at the bottom as per the instructions. Is there something I might be missed?

    Log in to Reply
    • Brad Dalton says

      March 23, 2016 at 7:11 pm

      All code is tested and works.

      I assume you’re adding it using the Appearance > Editor rather than using a code editor and FTP? Also, copy the the code from the view raw link in the Gist.

      Log in to Reply
  3. sentientusa says

    February 6, 2016 at 6:29 am

    Hi Brad,

    I’m running Parallax Pro Theme Version: 1.2 and Genesis Version: 2.2.6

    Does the code work for these newer versions?

    If so, would you provide newer examples/instructions.

    I’m new to changing code so basic examples would be appreciated.

    Thank you

    Log in to Reply
    • Brad Dalton says

      February 6, 2016 at 4:57 pm

      Child themes aren’t updated and the code has been tested so i assume it still works. Also, you’ll need to use one of these solutions for the background image http://wpsites.net/web-design/add-extra-background-image-to-new-home-widget-section-in-parallax-pro/

      Log in to Reply
  4. Chris says

    December 6, 2014 at 10:28 pm

    Thank you for this!! I’m also trying to figure out how I would have a large image like the parallax images but on a different page just as a header. Any ideas?

    Thank you again!

    Log in to Reply
    • Brad Dalton says

      December 7, 2014 at 3:12 am

      You’ll get the solution here Chris http://wpsites.net/registration/

      Log in to Reply
  5. Lantz says

    September 5, 2014 at 6:37 pm

    Hey Brad thanks!

    Is it possible to add a custom color to the footer?

    Log in to Reply
    • Brad Dalton says

      September 5, 2014 at 7:09 pm

      Sure Lantz. Color for the background, font?

      Log in to Reply
  6. Emilee says

    July 24, 2014 at 3:11 pm

    I figured out the scrolling problem… I was missing a comma. Any idea why the leading image still jumps upon scrolling?? Thx!

    Log in to Reply
  7. Julia says

    July 22, 2014 at 6:38 pm

    Hey Brad, thanks for this. Helped me change up some of the background coloring in the theme. (I’m just customizing it now for a website refresh I’m doing this summer.)

    I’ll definitely be taking a look through your site to see what other goodies you’ve got.

    Thanks!

    Log in to Reply
    • Brad Dalton says

      July 22, 2014 at 7:01 pm

      You’re welcome Julia.

      Give me a link if you can. Thanks

      Log in to Reply
  8. Dave Soucy says

    June 17, 2014 at 6:56 pm

    Brad,
    just wanted to say thank you for this tutorial. Exactly what I was looking for and saved me hours of work.

    Thanks,
    Dave

    Log in to Reply
    • Brad Dalton says

      June 17, 2014 at 8:56 pm

      Your welcome Dave,

      Thanks for the positive feedback.

      Log in to Reply
  9. Nanci Murdock says

    June 8, 2014 at 3:02 pm

    Brad, I don’t have a question – I just wanted to tell you that I think you are amazing. I have dozens of Studiopress question each month and whether it is in the forums or through search, you are always there and your tutorials and code are top notch.

    Would love to work with you on a project one day. I have previously told you to create something that I can buy! How is that coming along? Can’t wait.

    Have a great day.

    Nanci

    Log in to Reply
    • Brad Dalton says

      June 8, 2014 at 3:42 pm

      Thanks Nanci.

      Not sure what to make as i really love the forums and writing tutorials

      Maybe a small eBook with all my best secrets!

      Need more readers like you Nanci.

      Log in to Reply
  10. Barbara says

    May 16, 2014 at 7:30 pm

    I believe I have followed your instructions to a tee – I had this working perfectly, then made a mistake somewhere else, and had to redo everything – so now, the parallax effect is working on except 5, 6, 7 – am I missing something?

    The site I’m working on is: NorthwoodInn.net.

    Thank you!

    Barbara

    Log in to Reply
  11. Thuan says

    April 9, 2014 at 8:11 am

    it’s not working for my site:
    pls help me Brad Dalton

    Log in to Reply
    • Brad Dalton says

      April 9, 2014 at 8:33 am

      Whats not working?

      Cannot see your code so its hard to say what you did wrong but i did test the code and know it works as the screenshot shows.

      Log in to Reply
      • thuan says

        April 9, 2014 at 9:14 am

        Thank you so much! the now it is working.

        Log in to Reply
  12. Kurt says

    April 8, 2014 at 9:48 pm

    Hi Brad,

    Great information and thanks for posting the instructions.

    I am setting up a website for a new business needed more widget areas on the start page. I found your site and followed the instructions listed above, but I can’t seem to get the widget 7 area to show up. The widget area 6 works fine.

    I’m not sure if you can determine what is wrong by looking at the source, but here is my site address: If you have a minute, could you give it a look?

    Thanks,
    Kurt

    Log in to Reply
    • Brad Dalton says

      April 8, 2014 at 11:38 pm

      Sorry but cannot read the PHP from the front end, only the HTML output.

      You could paste all the PHP in a Github Gist and then link to it in your comment.

      Log in to Reply
      • Kurt says

        April 9, 2014 at 4:56 am

        Hi Brad,

        Here is the Github Gist link: https://gist.github.com/anonymous/10227246

        Thanks,
        Kurt

        Log in to Reply
        • Brad Dalton says

          April 9, 2014 at 5:29 am

          Its there but its using white font color so you need to change that in your CSS code.

          Look for the class for the 7th home widget in your style sheet for the declaration color: #fff and change it to something like #000.

          If you highlight the white area with your mouse, you will see it.

          Log in to Reply
          • Kurt says

            April 9, 2014 at 5:32 am

            I feel a little stupid… Thanks for your help!

            Kurt

          • Brad Dalton says

            April 9, 2014 at 5:41 am

            No worries. I generally don’t add much CSS code because different people use code on different themes which use different background and font colors which they may also modify as well.

          • Brad Dalton says

            April 9, 2014 at 6:42 am

            Just updated the post with some CSS to change the background color of the home section 7 widget area.

            However, the reason the title color is white is because it assumes you have added a background image which by default is dark.

            I have written another post about how to modify the themes code to include another background image for the 7th home widget area and linked to it at the end of this post.

  13. John says

    March 20, 2014 at 4:20 pm

    Thank you so much for setting up this site and leaving the answers in the public! I’ve found better answers here than in the forums sometimes… you are AWESOME

    Log in to Reply
    • Brad Dalton says

      March 20, 2014 at 4:36 pm

      You’re welcome John.

      Log in to Reply
  14. Lynne says

    March 19, 2014 at 5:16 pm

    Hi Brad,

    How do you get an image into the 7th section? This question has been asked on the Genesis forum too.

    Log in to Reply
    • Brad Dalton says

      March 19, 2014 at 5:30 pm

      Try this http://www.studiopress.com/forums/topic/parallax-pro-add-images-to-all-backgrounds-of-home-sections/

      Log in to Reply
      • Lynne says

        March 19, 2014 at 5:40 pm

        I just finished reading before you replied!

        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.

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Contact
  • Terms
  • Genesis WP Tags
  • WooCommerce
 

Loading Comments...
 

You must be logged in to post a comment.