Screenshot of Flying Eyes homepage

How to implement parallax scrolling with the featured image in WordPress Genesis

If you’re just here for the code, go to the project on GitHub!

This is a solution I made while working on the Flying Eyes site – check that out as a demo of this solution.

Since I like making things easier to use for everybody, including clients, I figured it would be a great idea to be able to change the background image for parallax scrolling in the WordPress dashboard. Normally, you’d have have fiddle with the CSS file every time, which is obviously no good for clients, or your general workflow! Unfortunately, there seemed to be no plugins or other solutions that could make this happen in a simple and clean way, so I combined a few ideas to make this solution.

Inspired by WevoStudio’s tutorial for parallax scrolling implementation for WordPress, I improved it by making it super-easy to use. Literally, just set a featured image for any page or post, and let ‘er rip!

This solution is specifically for WordPress Genesis, but you could easily modify it for any template use by inserting the PHP structural directions right after the body tag.

Remember, you should be working on a chid theme with these modifications, otherwise they will be erased when your theme is updated! -sadface-

The JavaScript files

First of all, you’ll need the JavaScript that makes the whole thing possible. I used Ian Lunn’s jQuery Parallax script, which you can find at his GitHub here. (I’ve also included it in my project on GitHub.)

You’ll also need a script to tell the page what to do in terms of animation:

The 50% value is the x-position of the image (which you should leave alone), and the 0.1 in this case is the speed at which it will scroll. You can change the speed to your liking.

Put the jQuery Parallax script as well as the parallaxcall.js script into a js folder in your child theme folder. The structure should be child-theme > js.

The PHP (enter all of this in your child theme’s functions.php file)

Now we have to tell WordPress to call the scripts, using the enqueue function like usual:

 

Now here comes the structural directions. The following tells WordPress that if there’s a featured image (i.e. “post_thumbnail”) attached to the post, to assign it the variable $parallaxImage that carries the URL of the image’s large version. (Make sure you get a nice big image for this use!)

It makes a new <div> immediately after the <body> tag, with the class “parallax.” It also places a background image with the right styling, using the value of $parallaxImage, which is the featured image’s URL.

I inserted all of the CSS inline, so it it takes precedence over anything else. You can change the “min-width” to anything you like. “Background-size:cover” (and all the related flavors to cover all browsers) will make sure the image covers the entire browser width, at any size.

If there is no featured image attached to the post, it will insert a <div> with class “top_margin” to give it some space that we can style later, IF you’re using a fixed navigation bar like I was doing. (Otherwise the page content will go underneath the nav bar if I didn’t have that there.) If you don’t have a fixed navigation bar, you can take that off.

 

Also, I was also using WooCommerce, which uses the featured image as its main product image. No parallax scrolling wanted there! You can use this conditional immediately after the function use_parallax() { line if that’s the case. Make it line 4 in the previous example. And don’t forget the additional right brace at the end of the entire thing if you use this conditional!

 

Next, we can’t ignore the post titles! Usually for a featured image, the entry title is also styled differently, and this is what the next PHP snippet will do for you. For the Flying Eyes site, I had the headline scrolling normally, in the middle of the image off to the left. This has to be styled different for posts without a featured image, otherwise the design becomes a mess.

Basically, it adds a class of “parallax-page” to the <body> tag if there is a featured image attached to the post, and a blank class if not. By using CSS, I can select the entry title of only pages with a body class of “parallax-page” later.

The CSS (enter all of this in your child theme’s style.css file)

Now, for the styling of the parts surrounding your parallax div.

If you have a fixed navigation bar for the primary menu, add some margin to the top of the content so it doesn’t slide under when there’s no featured image:

Again, you can change the value of the margin to your liking.

 

Next is the styling of the titles of these special pages. You can change any of these values as you see fit.

 

With WooCommerce, we turned off parallax scrolling, so we sure want to turn off any parallax-related title styling too! The most important part is the positioning.

I know, all those !importants are really annoying, but you gotta override the WooCommerce styling!

 

Don’t forget the media queries to make your parallax section nice and responsive.

Change any of the values as you like, but I found this worked great for me.

Ta da!

And that’s it! Now you can set any featured image to be the background for your awesome parallax scrolling page!

  • zlaci

    Hi!

    It’s seems to be a great solution, however, it does not work for me.
    First of all, there is a typo, which is included in your Github file as well:

    in Parallax scrolling structural directions box LINE 8 should [contain the “php” within the initial tag].

    So what I did is that
    – I modified my theme to try it out, so did not create child theme,
    – I added the two js files to /js (which are called during page load),
    – added the php script to functions.php
    – added CSS script to style.css

    The effect is not working, Page has featured image, but not parallaxed.
    Do I miss something? Do I need some customization?

    Thanks,
    Laszlo

    • Thanks for your comment, Laszlo! Sorry, I had to edit your comment since Disqus didn’t like the PHP tags. I’ve used the “php”-less shortcut before, and it will work in the middle of a PHP file, which functions.php is. But for sure, you need to call that tag with “php” at the beginning of the functions.php file! Sorry for any confusion.

      As for your second question, are there any errors in your console when you use “Inspect Element?” And are you using Genesis? The hooks in the “Parallax scrolling structural directions box” are Genesis-only hooks. The “genesis_before” hook will call the structural function immediately after the opening body tag. For a non-Genesis setup, I believe this means you’ll need to use special page templates like the WevoStudio solution, adding the function after

      in lieu of line 2 of the structural directions. (The part that starts with

      I’m not sure if there’s a hook in the default WordPress setup that will achieve the same thing – hence the customizable power of Genesis.

      Try those out!

    • zlaci

      Hi!
      Sorry for the late answer, I waited for an email upon post update 🙂

      Maybe I was not clear, I have talked about this:

      // Adds parallax to all featured images, adds top margin if there is no featured image
      1. add_action ('genesis_before','use_parallax');
      2. function use_parallax() {
      3. if ( has_post_thumbnail() ) {
      4. $parallaxImage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large');
      5. ?>
      6. <div class="parallax" id="section_" style="background: url('')
      no-repeat fixed; min-height:700px; background-size:cover;
      -webkit-
      7. background-size: cover; -moz-background-size: cover;
      -o-background-size: cover; background-color: #000;">
      8. <?
      9. }
      10. else {
      11. echo ' ';
      12. }

      13. }

      And here, in line 8 a php is missing.

      Any way, I also realised that your code is for genesis and I wanted to apply it to another themeforest theme, but without success.
      So I checked Genesis framework and finally I bought it (Studiopress can thank you), together with some other stuff:)

      Now I will set up and try your solution! Thanks!

    • Hi Laszlo,

      Hm, Sublime Text doesn’t throw any errors without the *php*, but definitely give it a try if it doesn’t work for you! I hope you enjoy Genesis – it’s an extremely modular way to work with WordPress, for sure! I love that it simplifies templating a lot, since you don’t have to repeat any code, you just add, move, or remove the parts you want changed.

    • zlaci

      Hi!
      My previous post was parsed incorrectly, the problematic line is actually not visible.

      I am not a developer, rather a site owner who is fed up with crappy developers.
      Actually I bought two themeforest templates but I soon realised that I would have difficulties with customization.
      As I read this wont be a problem with Genesis.

    • Yes, that’s been my experience with premium themes from sites like Themeforest – they tend to be overloaded with features that I don’t need, and figuring out how to get it to do what you want becomes very complicated. What’s nice about Genesis, I believe, is that it comes with a pretty good default template to start with, themes to augment the framework, lots of documentation in blogposts, and there’s TONS of great developers who work with it – I got started on Genesis because three WordPress devs I worked with at a hackathon used it, so I figured there must be something to it!

      Good luck with your WordPress journey!