WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

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. 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

      • 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

          • 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

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

          • 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

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

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

          • 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?

      • 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

    • 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. 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

  4. 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!

  7. 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!

  9. 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

    • 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.

  10. 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. 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

    • 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.

        • 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.

          • 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.

          • 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. 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

Leave a Reply