WordPress :: Divi Builder :: Fullwidth Portfolio Module :: Custom Links

child-theme-functions-php-snippet.php

<?php
/* DON'T copy the first line (above) if your functions.php already has it. 
 * ---------------------------------------------------------------------- */
 
 function my_et_theme_setup() {
	if ( class_exists( 'ET_Builder_Module_Fullwidth_Portfolio' ) && file_exists( 'my-main-modules.php' ) ) {
		get_template_part( 'my-main-modules' );
		$et_pb_fullwidth_portfolio = new My_ET_Builder_Module_Fullwidth_Portfolio();
		remove_shortcode('et_pb_fullwidth_portfolio');
		add_shortcode('et_pb_fullwidth_portfolio', array( $et_pb_fullwidth_portfolio, '_shortcode_callback' ) );
	}
}
add_action( 'wp', 'my_et_theme_setup', 99 );

my-main-modules.php

<?php

class My_ET_Builder_Module_Fullwidth_Portfolio extends ET_Builder_Module_Fullwidth_Portfolio {
    
    function shortcode_callback( $atts, $content = null, $function_name ) {
		$title               = $this->shortcode_atts['title'];
		$module_id           = $this->shortcode_atts['module_id'];
		$module_class        = $this->shortcode_atts['module_class'];
		$fullwidth           = $this->shortcode_atts['fullwidth'];
		$include_categories  = $this->shortcode_atts['include_categories'];
		$posts_number        = $this->shortcode_atts['posts_number'];
		$show_title          = $this->shortcode_atts['show_title'];
		$show_date           = $this->shortcode_atts['show_date'];
		$background_layout   = $this->shortcode_atts['background_layout'];
		$auto                = $this->shortcode_atts['auto'];
		$auto_speed          = $this->shortcode_atts['auto_speed'];
		$zoom_icon_color     = $this->shortcode_atts['zoom_icon_color'];
		$hover_overlay_color = $this->shortcode_atts['hover_overlay_color'];
		$hover_icon          = $this->shortcode_atts['hover_icon'];
		$module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
		if ( '' !== $zoom_icon_color ) {
			ET_Builder_Element::set_style( $function_name, array(
				'selector'    => '%%order_class%% .et_overlay:before',
				'declaration' => sprintf(
					'color: %1$s !important;',
					esc_html( $zoom_icon_color )
				),
			) );
		}
		if ( '' !== $hover_overlay_color ) {
			ET_Builder_Element::set_style( $function_name, array(
				'selector'    => '%%order_class%% .et_overlay',
				'declaration' => sprintf(
					'background-color: %1$s;
					border-color: %1$s;',
					esc_html( $hover_overlay_color )
				),
			) );
		}
		$args = array();
		if ( is_numeric( $posts_number ) && $posts_number > 0 ) {
			$args['posts_per_page'] = $posts_number;
		} else {
			$args['nopaging'] = true;
		}
		if ( '' !== $include_categories ) {
			$args['tax_query'] = array(
				array(
					'taxonomy' => 'project_category',
					'field' => 'id',
					'terms' => explode( ',', $include_categories ),
					'operator' => 'IN'
				)
			);
		}
		$projects = self::get_portfolio_item( array(
			'posts_number'       => $posts_number,
			'include_categories' => $include_categories,
		) );
		ob_start();
		if( $projects->post_count > 0 ) {
			while ( $projects->have_posts() ) {
				$projects->the_post();
				?>
				<div id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_portfolio_item et_pb_grid_item ' ); ?>>
				<?php
					$thumb = '';
					$width = 510;
					$width = (int) apply_filters( 'et_pb_portfolio_image_width', $width );
					$height = 382;
					$height = (int) apply_filters( 'et_pb_portfolio_image_height', $height );
					list($thumb_src, $thumb_width, $thumb_height) = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), array( $width, $height ) );
					$orientation = ( $thumb_height > $thumb_width ) ? 'portrait' : 'landscape';
					$custom_link = get_post_meta( get_the_ID(), 'et-link', true );
					$custom_link_external = get_post_meta( get_the_ID(), 'et-link-external', true );
					$permalink = ( '' !== $custom_link ) ? esc_url( $custom_link ) : ( '' !== $custom_link_external ) ? esc_url( $custom_link_external ) : get_permalink();
					$link_target = ( '' !== $custom_link_external ) ? ' target="_blank"' : '';
					if ( '' !== $thumb_src ) : ?>
						<div class="et_pb_portfolio_image <?php echo esc_attr( $orientation ); ?>">
							<img src="<?php echo esc_url( $thumb_src ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>"/>
							<div class="meta">
								<a href="<?php echo $permalink; ?>"<?php echo esc_attr( $link_target ); ?>>
								<?php
									$data_icon = '' !== $hover_icon
										? sprintf(
											' data-icon="%1$s"',
											esc_attr( et_pb_process_font_icon( $hover_icon ) )
										)
										: '';
									printf( '<span class="et_overlay%1$s"%2$s></span>',
										( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
										$data_icon
									);
								?>
									<?php if ( 'on' === $show_title ) : ?>
										<h3><?php the_title(); ?></h3>
									<?php endif; ?>

									<?php if ( 'on' === $show_date ) : ?>
										<p class="post-meta"><?php echo get_the_date(); ?></p>
									<?php endif; ?>
								</a>
							</div>
						</div>
				<?php endif; ?>
				</div>
				<?php
			}
		}
		wp_reset_postdata();
		$posts = ob_get_clean();
		$class = " et_pb_module et_pb_bg_layout_{$background_layout}";
		$output = sprintf(
			'<div%4$s class="et_pb_fullwidth_portfolio %1$s%3$s%5$s" data-auto-rotate="%6$s" data-auto-rotate-speed="%7$s">
				%8$s
				<div class="et_pb_portfolio_items clearfix" data-portfolio-columns="">
					%2$s
				</div><!-- .et_pb_portfolio_items -->
			</div> <!-- .et_pb_fullwidth_portfolio -->',
			( 'on' === $fullwidth ? 'et_pb_fullwidth_portfolio_carousel' : 'et_pb_fullwidth_portfolio_grid clearfix' ),
			$posts,
			esc_attr( $class ),
			( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
			( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
			( '' !== $auto && in_array( $auto, array('on', 'off') ) ? esc_attr( $auto ) : 'off' ),
			( '' !== $auto_speed && is_numeric( $auto_speed ) ? esc_attr( $auto_speed ) : '7000' ),
			( '' !== $title ? sprintf( '<h2>%s</h2>', esc_html( $title ) ) : '' )
		);
		return $output;
	}
}

A child theme is required to properly implement this customization. If you are not currently using a child theme, you can download one here.

The first snippet (above) goes in your child theme's functions.php. The second one should be put in a new file in your child theme's directory named my-main-modules.php.

Now, to configure the custom links you need to add a custom field to your desired projects. It should be named either et-link or et-link-external (external links will be opened in a new tab) and its value should the the URL that you want to use for the link. To add custom fields, simply edit the project and look towards the bottom of the page for the box labeled Custom Fields.