WordPress Parallax Implementation

by

wordpress_parallax

Parallax has become a quite known phenomenon in the World Wide Web.

In this tutorial we will create an one page website and learn how to implement this effect in a easy and effective way.

 

What do we need for Parallax ?

For this tutorial we will use the jQuery plugin from Ian Lunn which we will thank for creating this awesome plugin and we will need an WordPress install.

 

Let’s begin

First of all, we have to insert the plugin in our theme by adding the following lines of code in functions.php:

Above we used the wp_enqueue_script() function wich WordPress gave us to add scripts representing the following:

$handle – Name used as a handle for the script

$src – URL to the script, e.g. http://example.com/wp-content/themes/my-theme/my-theme-script.js. You should never hardcode URLs to local scripts.

$deps – Array of the handles of all the registered scripts that this script depends on, that is the scripts that must be loaded before this script. Set false if there are no dependencies.

$ver – String specifying the script version number, if it has one, which is concatenated to the end of the path as a query string. If no version is specified or set to false, then WordPress automatically adds a version number equal to the current version of WordPress you are running. If set to null no version is added.

$in_footer – Normally, scripts are placed inof the HTML document. If this parameter is true, the script is placed before the end tag. This requires the theme to have the wp_footer() template tag in the appropriate place.

Note: If you already have a function which in most cases all the themes have, you don’t need to do another function, just insert wp_enqueue_script there.

 

Next step

Now that we have the script installed, we can create a custom post type to easily manage all things, as I like to say: “Only your imagination limits the use of a custom post type“.

custom_post_type

Good, now we have the Parallax script installed, custom post type, all we need is a page template wich you can call page-home.php or whatever you like, but remember that you must have page-templatename.php

So let’s create a file, I will name it page-parallax.php and I will add the following lines:

We will go in Admin / Pages create a new page e.g. (‘New Parallax’) and assign the custom template name wich is Parallax page.

After we have created the page, we can see what is going on live, you can simply “view” the page “New Parallax”.

For template names you can read more here

The magic will happen between get_header(); and get_footer();

First we create a custom query:

So what do we do in fact? We are telling the query that we want only the custom post type we created earlier register_post_type(__( 'parallax' ), $args);
'post_type' => 'parallax – name of custom post type, in our case is parallax

menu_order you can find it above the featured image in your custom post type page.
You can read more about WP_Query here.

Let’s go further adding in loop the following:

So we created a variable $parallaxImage wich uses wp_get_attachment_image_src the last function is composed of an id and image size and in this way we will remove the source of image added in admin.

se_featured_image

Read more about wp_get_attachment_image_src

The function will show us the source: http://website-name.com/wp-content/uploads/2013/10/image.jpg , by default all images you insert in admin go to uploads folder.

What we will do next? We are going to use a php function str_replace to replace http://website-name.com/ with an empty string, and we will get /wp-content/uploads/2013/10/image.jpg

Note: home_url() is http://website-name.com/, '' is the empty string and $parallaxImage[0] is the image.

You can see more about this function here

 

Now that we have all that we need, what next?

We have the template file, the query, the path of the image, but what to do with them?

Simple, we create the structure inside the query, I will add the image first, title and content of the page after, but you can create your own structure, you can add meta boxes, etc.

 

So, we have a class parallax that we can use later in order to call the jQuery Parallax plugin, one id with the ID of page created in admin (you can use also the_title() ), the_content(); to display page content, and finally the inline style background wich is (../wp-content/uploads/2013/10/image.jpg)

 

Now, we can go in our style.css and do some customisation, also we need to add the width and height for image:

 

Final step

For the final step, we must call the script in our .js file

If you don’t have any custom js file, you can create one e.g. ( custom.js ) in your template directory and add it as you added the Parallax plugin with wp_enqueue_script() in same function in our case function add_theme_scripts()

In custom.js we will call the plugin by adding the following:

We have 2 values:

  1. 50% : x-position of image
  2. 0.2 : the speed to move to vertical scroll

So that’s it, you have implemented Parallax in WordPress and every page you create in Custom Post Type the Query will show in our template.

 

Update

The effect works on Mozilla Firefox, so we may add another plugin with wp_enqueue_script() as I did above, to work on main browsers, you can find it here.

After I added the plugin, we must go in our custom.js file and add following code:

 

All together

 

We are looking forward to see your comments.

Hope you enjoyed it !

comments powered by Disqus