Add custom links to each image in Elementor carousel

In this tutorial I'm going to walk you through the steps to create custom links for each of the images in an image carousel on your website. This will improve the user experience and contribute to search engine optimization.

Step 1: Topic Preparation

Before you begin, it's essential to make sure you have an active child theme on your website so you don't lose your custom settings when updating the parent theme.

Step 2: Carousel Customization

  1. Editing the Functions.php File of the Child Theme: Go to the appearance section in the WordPress dashboard and select the child theme file editor. Make sure you have the child theme selected and open the functions.php file.

  2. Incorporation of Custom Code: Copy and paste the code provided in the link that Carlos has left in the video description at the end of the child theme's functions.php file.

  3. Saving Changes: Once the code is added, save the changes and update the file.

Step 3: Carousel Configuration

  1. Added Carousel Widget: Head to the widgets section in the WordPress dashboard and drag the image carousel widget to the desired location on the website.

  2. Image Selection: Select the images you want to include in the carousel. For each image, you will have the option to add a custom link.

  3. Link Customization: Defines custom links for each image in the carousel. You can choose whether you want the link to open in a new window or in the same browser window.

  4. Personalization Options: Adjust customization options according to preferences, such as image size, carousel navigation, etc.

  5. Saved and Updated: Once all the links and customization options are configured, save the changes and refresh the website.

Step 4: Verification and Optimization

  1. Link Verification: Refresh the page and verify that the custom links are working correctly. Click on each image in the carousel to ensure you are directed to the correct URLs.

  2. SEO Optimization: Make sure the URLs your links point to are relevant and SEO optimized. Use relevant keywords in links and make sure landing pages are well optimized.

By following these steps, you will have created an image carousel with custom links on your website, which will improve the user experience and contribute to your SEO strategy. Remember to follow SEO best practices to keep your website optimized and relevant to search engines. If you have any questions, leave them in the comments and Carlos will be happy to help you. Until next time!

				
					add_filter( 'attachment_fields_to_edit', function( $form_fields, $post ) {
	$form_fields[ 'elementor_carousel_custom_link' ] = array(
		'label' => __( 'Custom link', 'elementor' ),
		'input' => 'text',
		'value' => get_post_meta( $post->ID, 'elementor_carousel_custom_link', true ),
		'helps' => __( 'This will add a link to images in Elementor Carousel', 'elementor' ),
	);

	$target  = (bool) get_post_meta( $post->ID, 'elementor_carousel_custom_link_target', true );
	$checked = ( $target ) ? 'checked' : '';

	$form_fields[ 'elementor_carousel_custom_link_target' ] = array(
		'label' => __( 'Open in new tab ?', 'elementor' ),
		'input' => 'html',
		'html'  => "<input type='checkbox' {$checked} name='attachments[{$post->ID}][elementor_carousel_custom_link_target]' id='attachments[{$post->ID}][elementor_carousel_custom_link_target]' />",
		'value' => $target,
		'helps' => __( 'Open custom link in Elementor Carousel in new tab ?', 'elementor' ),
	);

	return $form_fields;
},          10, 2 );

add_filter( 'attachment_fields_to_save', function( $post, $attachment ) {
	if ( isset( $attachment[ 'elementor_carousel_custom_link' ] ) ) {
		update_post_meta(
			$post[ 'ID' ],
			'elementor_carousel_custom_link',
			$attachment[ 'elementor_carousel_custom_link' ]
		);
	}

	if ( isset( $attachment[ 'elementor_carousel_custom_link_target' ] ) ) {
		$target = ( $attachment[ 'elementor_carousel_custom_link_target' ] == 'on' ) ? '1' : '0';
		update_post_meta( $post[ 'ID' ], 'elementor_carousel_custom_link_target', $target );
	}

	return $post;
},          10, 2 );

add_action( 'elementor/widget/render_content', function( $content, $widget ) {
	if ( 'image-carousel' === $widget->get_name() ) {
		// ob_start();
		$settings = $widget->get_settings_for_display();

		if ( empty( $settings[ 'carousel' ] ) ) {
			return;
		}

		$slides = [];

		foreach ( $settings[ 'carousel' ] as $index => $attachment ) {
			$image_url = Elementor\Group_Control_Image_Size::get_attachment_image_src( $attachment[ 'id' ], 'thumbnail', $settings );

			if ( ! $image_url && isset( $attachment[ 'url' ] ) ) {
				$image_url = $attachment[ 'url' ];
			}

			$image_html = '<img decoding="async" class="swiper-slide-image" src="&#039; . esc_attr( $image_url ) . &#039;" alt="&#039; . esc_attr( Elementor\Control_Media::get_image_alt( $attachment ) ) . &#039;" title="Añadir enlaces personalizados a cada imagen en carrusel de Elementor 1">';

			$link_tag = '';

			$link = elementor_carousel_custom_link_get_link_url( $attachment, $settings );

			if ( $link ) {
				$link_key = 'link_' . $index;

				if ( get_elementor_carousel_custom_link( $attachment ) ) {
					$link_tag = '<a data-elementor-open-lightbox="no" href="' . get_elementor_carousel_custom_link( $attachment ) . '" target="' . get_elementor_carousel_custom_link_target( $attachment ) . '">';
				} else {
					$link_tag = '<a ' . $widget->get_render_attribute_string( $link_key ) . '>';
				}
			}

			$image_caption = elementor_carousel_custom_link_get_image_caption( $attachment, $widget );

			$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;

			if ( ! empty( $image_caption ) ) {
				$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
			}

			$slide_html .= '</figure>';

			if ( $link ) {
				$slide_html .= '</a>';
			}

			$slide_html .= '</div>';

			$slides[] = $slide_html;
		}

		if ( empty( $slides ) ) {
			return;
		}

		$show_dots   = ( in_array( $settings[ 'navigation' ], [ 'dots', 'both' ] ) );
		$show_arrows = ( in_array( $settings[ 'navigation' ], [ 'arrows', 'both' ] ) );

		$slides_count = count( $settings[ 'carousel' ] );

		?>
        <div <?php $widget->print_render_attribute_string( 'carousel-wrapper' ); ?>>
            <div <?php $widget->print_render_attribute_string( 'carousel' ); ?>>
				<?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
				<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
            </div>
			<?php if ( 1 < $slides_count ) : ?>
				<?php if ( $show_dots ) : ?>
                    <div class="swiper-pagination"></div>
				<?php endif; ?>
				<?php if ( $show_arrows ) : ?>
                    <div class="elementor-swiper-button elementor-swiper-button-prev">
                        <i class="eicon-chevron-left" aria-hidden="true"></i>
                        <span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'elementor' ); ?></span>
                    </div>
                    <div class="elementor-swiper-button elementor-swiper-button-next">
                        <i class="eicon-chevron-right" aria-hidden="true"></i>
                        <span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'elementor' ); ?></span>
                    </div>
				<?php endif; ?>
			<?php endif; ?>
        </div>
		<?php
	} else {
		return $content;
	}
},          10, 2 );

function get_elementor_carousel_custom_link( $attachment ) {
	$custom_link = get_post_meta( $attachment[ 'id' ], 'elementor_carousel_custom_link' );
	if ( isset( $custom_link ) && is_array( $custom_link ) && ! empty( $custom_link[ 0 ] ) ) {
		return $custom_link[ 0 ];
	}

	return false;
}

function get_elementor_carousel_custom_link_target( $attachment ) {
	$target = get_post_meta( $attachment[ 'id' ], 'elementor_carousel_custom_link_target' );
	if ( isset( $target ) && is_array( $target ) && ! empty( $target[ 0 ] ) ) {
		if ( $target[ 0 ] === '1' ) {
			return "_blank";
		}

		return "";
	}

	return "";
}

function elementor_carousel_custom_link_get_link_url( $attachment, $instance ) {
	if ( 'none' === $instance[ 'link_to' ] ) {
		return false;
	}

	if ( 'custom' === $instance[ 'link_to' ] ) {
		if ( empty( $instance[ 'link' ][ 'url' ] ) ) {
			return false;
		}

		return $instance[ 'link' ];
	}

	return [
		'url' => wp_get_attachment_url( $attachment[ 'id' ] ),
	];
}

function elementor_carousel_custom_link_get_image_caption( $attachment, $widget ) {
	$caption_type = $widget->get_settings_for_display( 'caption_type' );

	if ( empty( $caption_type ) ) {
		return '';
	}

	$attachment_post = get_post( $attachment[ 'id' ] );

	if ( 'caption' === $caption_type ) {
		return $attachment_post->post_excerpt;
	}

	if ( 'title' === $caption_type ) {
		return $attachment_post->post_title;
	}

	return $attachment_post->post_content;
}
				
			

If for this tutorial you need a plugin you can find it in the plugin page.

Share in your social networks

Leave a Comment