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.
- Add more code to the front-page.php file
- Register 2 new widgets in your functions.php
- 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.
And here’s the final result:
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.
fotod0g13 says
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
Brad Dalton says
Something like this should work
fotod0g13 says
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
Brad Dalton says
Did you try:
fotod0g13 says
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
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
Try
Works when i test it.
fotod0g13 says
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
On what line of your style.css file did you add this CSS?
fotod0g13 says
fyi- I did clear the cache as well with no difference
Brad Dalton says
Please check your CSS and make sure it uses the .home-section-6 class
On what line of your style.css file did you add this CSS?
fotod0g13 says
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
Brad Dalton says
Good stuff. I know the feeling well!
derekmagill says
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?
Brad Dalton says
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.
sentientusa says
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
Brad Dalton says
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/
Chris says
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!
Brad Dalton says
You’ll get the solution here Chris http://wpsites.net/registration/
Lantz says
Hey Brad thanks!
Is it possible to add a custom color to the footer?
Brad Dalton says
Sure Lantz. Color for the background, font?
Emilee says
I figured out the scrolling problem… I was missing a comma. Any idea why the leading image still jumps upon scrolling?? Thx!
Julia says
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!
Brad Dalton says
You’re welcome Julia.
Give me a link if you can. Thanks
Dave Soucy says
Brad,
just wanted to say thank you for this tutorial. Exactly what I was looking for and saved me hours of work.
Thanks,
Dave
Brad Dalton says
Your welcome Dave,
Thanks for the positive feedback.
Nanci Murdock says
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
Brad Dalton says
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.
Barbara says
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
Thuan says
it’s not working for my site:
pls help me Brad Dalton
Brad Dalton says
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.
thuan says
Thank you so much! the now it is working.
Kurt says
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
Brad Dalton says
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.
Kurt says
Hi Brad,
Here is the Github Gist link: https://gist.github.com/anonymous/10227246
Thanks,
Kurt
Brad Dalton says
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.
Kurt says
I feel a little stupid… Thanks for your help!
Kurt
Brad Dalton says
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
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.
John says
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
Brad Dalton says
You’re welcome John.
Lynne says
Hi Brad,
How do you get an image into the 7th section? This question has been asked on the Genesis forum too.
Brad Dalton says
Try this http://www.studiopress.com/forums/topic/parallax-pro-add-images-to-all-backgrounds-of-home-sections/
Lynne says
I just finished reading before you replied!