WP SITES

Log in

Add More Home Page Widget Sections To Parallax Pro

—

by

Brad Dalton

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.

Comments

45 responses to “Add More Home Page Widget Sections To Parallax Pro”

  1. fotod0g13 Avatar
    fotod0g13

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Something like this should work

      [code]
      .home-even {
      background-color: red;
      }
      [/code]

      1. fotod0g13 Avatar
        fotod0g13

        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

        1. Brad Dalton Avatar
          Brad Dalton

          Did you try:
          [code]
          .front-page-6 {
          background-color: red;
          }
          [/code]

          1. fotod0g13 Avatar
            fotod0g13

            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

          2. Brad Dalton Avatar
            Brad Dalton

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

        2. Brad Dalton Avatar
          Brad Dalton

          Try
          [code]
          .home-section-6 {
          background-color: red;
          }
          [/code]

          Works when i test it.

          1. fotod0g13 Avatar
            fotod0g13

            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

          2. Brad Dalton Avatar
            Brad Dalton

            On what line of your style.css file did you add this CSS?
            [code]
            .home-section-6 {
            background-color: red;
            }
            [/code]

          3. fotod0g13 Avatar
            fotod0g13

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

          4. Brad Dalton Avatar
            Brad Dalton

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

            [code]
            .home-section-6 {
            background-color: red;
            }
            [/code]

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

      2. fotod0g13 Avatar
        fotod0g13

        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

        1. Brad Dalton Avatar
          Brad Dalton

          Good stuff. I know the feeling well!

  2. derekmagill Avatar
    derekmagill

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  3. sentientusa Avatar
    sentientusa

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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/

  4. Add Extra Background Image To New Home Widget Section in Parallax Pro

    […] you’ve added a 7th home widget to the Parallax Pro theme by StudioPress, you may also want to add an additional background image to your new content […]

  5. Chris Avatar
    Chris

    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!

    1. Brad Dalton Avatar
      Brad Dalton

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

  6. Lantz Avatar
    Lantz

    Hey Brad thanks!

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

    1. Brad Dalton Avatar
      Brad Dalton

      Sure Lantz. Color for the background, font?

  7. Emilee Avatar
    Emilee

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

  8. Julia Avatar
    Julia

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Julia.

      Give me a link if you can. Thanks

  9. Dave Soucy Avatar
    Dave Soucy

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

    Thanks,
    Dave

    1. Brad Dalton Avatar
      Brad Dalton

      Your welcome Dave,

      Thanks for the positive feedback.

  10. Nanci Murdock Avatar
    Nanci Murdock

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  11. Barbara Avatar
    Barbara

    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

  12. Thuan Avatar
    Thuan

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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. thuan Avatar
        thuan

        Thank you so much! the now it is working.

  13. Kurt Avatar
    Kurt

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Kurt Avatar
        Kurt

        Hi Brad,

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

        Thanks,
        Kurt

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. Kurt Avatar
            Kurt

            I feel a little stupid… Thanks for your help!

            Kurt

          2. Brad Dalton Avatar
            Brad Dalton

            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.

          3. Brad Dalton Avatar
            Brad Dalton

            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.

  14. John Avatar
    John

    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

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome John.

  15. Lynne Avatar
    Lynne

    Hi Brad,

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

    1. Brad Dalton Avatar
      Brad Dalton

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

      1. Lynne Avatar
        Lynne

        I just finished reading before you replied!

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.