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