Parallax Image Shortcode

Below, you’ll find a detailed guide on how to add the Parallax Image Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Parallax Image Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Parallax Image Plugin and the shortcodes it provides:

Plugin Icon
Parallax Image

"Parallax Image is a dynamic WordPress plugin designed to add depth and motion to your website. It transforms static images into interactive parallax backgrounds, enhancing user engagement."

★★★★★ (10) Active Installs: 3000+ Tested with: 6.0.6 PHP Version: 5.6
Included Shortcodes:
  • [dd-parallax]

Parallax Image [dd-parallax] Shortcode

The ‘dd-parallax’ shortcode allows you to create a parallax effect on images. It accepts parameters for image source, parallax speed, image height, z-index, mobile image source, image position, offset, and text position. The PHP function ‘duck_parallax_shortcode’ processes these parameters, enqueues necessary scripts and styles, and handles mobile detection. It also provides a fallback for mobile devices, where it uses a separate image if specified. The function then generates the HTML structure for the parallax effect, inserting the user’s content where specified. The output is a visually appealing parallax section, enhancing the user experience on your WordPress site.

Shortcode: [dd-parallax]


Here is a list of all possible dd-parallax shortcode parameters and attributes:

  • img – the main image URL or filename for the parallax effect
  • speed – speed of the parallax effect, default is 2
  • height – height of the parallax section in pixels
  • z-index – sets the stack order of the parallax section
  • mobile – alternative image URL or filename for mobile devices
  • position – horizontal position of the parallax image, default is left
  • offset – enables or disables parallax offset, default is false
  • text-pos – position of the text over the parallax image, default is top

Examples and Usage

Basic example – Displays a parallax image with default settings.

[dd-parallax img='your_image_url_here']Your content here[/dd-parallax]

Advanced examples

Display a parallax image with customized speed and height. The speed is set to 3 and the minimum height is set to 500px.

[dd-parallax img='your_image_url_here' speed='3' height='500']Your content here[/dd-parallax]

Display a parallax image with a different image for mobile devices. The mobile image URL is specified separately.

[dd-parallax img='your_desktop_image_url_here' mobile='your_mobile_image_url_here']Your content here[/dd-parallax]

Display a parallax image with customized text position. The text position is set to ‘bottom’.

[dd-parallax img='your_image_url_here' text-pos='bottom']Your content here[/dd-parallax]

Display a parallax image with offset set to true. This will enqueue the ‘duck-px-offset’ script.

[dd-parallax img='your_image_url_here' offset='true']Your content here[/dd-parallax]

PHP Function Code

In case you have difficulties debugging what causing issues with [dd-parallax] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('dd-parallax', 'duck_parallax_shortcode');

Shortcode PHP function:

                    function duck_parallax_shortcode($atts, $content = null){

	$atts = shortcode_atts(
			'img' 		=> '',
			'speed' 	=> '2',
			'height' 	=> '',
			'z-index' 	=> '0',
			'mobile' 	=> '',
			'position' 	=> 'left',
			'offset' 	=> false,
			'text-pos' => 'top',
		), $atts, 'duck-parallax' );

/* Enqueue only for shortcode */ 

if ( ( null !== $atts['offset'] ) && ( $atts['offset'] == 'true' ) ) {

if ( !$atts['img']) {return;}	

// Detect Mobile
$detect = new Mobile_Detect;

// If Mobile Image isn't set
	if ($atts['mobile'] !== ""){
		$mobile_img = $atts['mobile'];
	else {
		$mobile_img = $atts['img'];
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => -1,

    $query_images = new WP_Query( $args );
	if (strpos($atts['img'], 'http') === 0){
		$image_url = esc_url($atts['img']);
	else {
		if ( $query_images->have_posts() ) {
		  foreach ( $query_images->posts as $item) { 
			$filename = wp_basename($item->guid);
			if($atts['img'] == $filename) {$image_url = $item->guid;}
	if ($atts['speed'] < 10) {
		$speed = '.'.$atts['speed'];
	else {
		$speed = 1;
	$zindex = $atts['z-index'];
	if ( $detect->isMobile() ) {
		if (strpos($mobile_img, 'http') === 0){
			$image_path = esc_url($mobile_img);
			else {
				if ($query_images->have_posts() ) {
					foreach ($query_images->posts as $item) {
						$filename = wp_basename($item->guid);
							if($mobile_img == $filename) {
							$mobile_img = $item->guid;
							$image_path = get_attached_file($item->ID);

		list($width, $height) = getimagesize($image_path);
		$factor = $height / $width;
		$divID = preg_replace('/\\.[^.\\s]{3,4}$/', '', $atts['img']);

		$textPos = strtolower($atts['text-pos']);
			case 'top':
				$align = "top: 0;";
			case 'bottom':
				$align = "bottom: 0;";
				$align = "top: 50%;transform:translate(0,-50%)";
		$output  ='<div class="px-mobile-container" id="#'.$divID.'" data-factor="'.$factor.'" data-height="'.$height.'"><div class="parallax-mobile">';
		$output .='<img src="'. $mobile_img .'" class="px-mobile-img" />';
			$output .= '<div class="parallax-content" style="'.$align.'">';
			$output .= do_shortcode($content);
			$output .= '</div>';
		$output .='</div></div>';
		$textPos = strtolower($atts['text-pos']);
			case 'top':
				$align = "flex-start;";
			case 'bottom':
				$align = "flex-end;";
				$align = "center";

			$output = '<section class="parallax-section">';
			$output .= '<div class="parallax-window" data-z-index="'.$zindex.'" data-position-x="'.$atts['position'].'" data-parallax="scroll" data-speed="'.$speed.'" data-image-src="'.$image_url.'"';
			$output .= ' style="align-items: ' . $align .';'; 
			if ($atts['height'] !== '') $output .= 'min-height: '.$atts['height'].'px;';
			$output .='">';
			$output .= '<div class="parallax-container parallax-content">';
			$output .= do_shortcode($content);
			$output .= '</div></div></section>';
			return $output;

Code file location:



Now that you’ve learned how to embed the Parallax Image Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.


Leave a Reply

Your email address will not be published. Required fields are marked *