WordPress

Parallax WordPress Shortcode

Using shortcodes to insert parallax into any WordPress theme.

Wevo Studio have a nice tutorial on creating Parallax in WordPress. The tutorial focussed on having a custom post type, and then the page pulls these posts together – nice for a blog style website. I wanted to have the ability to do this in pages, with multiple images and blocks of text, so adpated the provided code into a shortcode format, making it very easy to set up as needed.

Required scripts – JQuery and JQuery Parallax. Ignore the bits in the tutorial about 'nicescroll' – its creates a pretty/ crazy-ass scrollbar instead of the browser default one. Additionally, as mentioned in the linked tutorial, you will need a 'custom.js' file.

Custom.js:

(function($) {
     'use strict';
     $(document).ready(function() {
          $('.parallax').parallax('50%', 0.2);
     });
})(jQuery);

All the rest of the work is done in function.php

1. Link the scripts

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
function add_theme_scripts() {
	wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/jquery.parallax-1.1.3.js', array(), '1.1.3', true );
	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true );
}

2. Add the shortcodes.

I have three - one which creates the image area, and requires the image path to be passed through. The other two create the div structure around the text content.

add_shortcode('parallax-img','parallax_img');
function parallax_img($atts){
	extract(shortcode_atts(array('imagepath' => 'Image Needed','id'=>'1',),$atts));
 	return "<section class='parallax' id='".$id."' style='background-image: url(/wp-content/uploads/".$imagepath."); background-position: 50% -80px;'></section>";
}

add_shortcode('open-parallax-content','parallax_open');
function parallax_open(){
 return "<div class='parallax_container'><div class='parallax_content'>";
}

add_shortcode('close-parallax-content','parallax_close');
function parallax_close(){
 return "</div></div>";
}

I also wanted the parallax area width to be full width, so I added in additional open/close tags for wrappers. Set these up if required.

function parallax_img($atts){
	extract(shortcode_atts(array('imagepath' => 'Image Needed','id'=>'1',),$atts));
//close the open wrapper div first before adding the section
 	return "</div><section class='parallax' id='".$id."' style='background-image: url(/wp-content/uploads/".$imagepath."); background-position: 50% -80px;'></section>";
}

function parallax_close(){
//open the wrapper div again afterwards
 return "</div></div><div class='wrapper cf'>";
}

3. Insert the shortcodes into the page

[parallax-img imagepath="2015/04/bigimage.jpg" id="2"]

[open-parallax-content]
Whatever content you wish
[close-parallax-content]

Basic CSS

.parallax {
     width: 100%;
     height: 400px;
     background-repeat:no-repeat;
     -webkit-background-size: cover;
     background-size: cover;
     background-attachment:fixed;
}

.parallax_container{
	padding:60px 0;
}

.parallax_content{
	width:80%;
	margin:auto;
}

That's pretty much it, contact me if you have any issues.