Moving Fullwidth Portfolio module to child theme - kary4/divituts GitHub Wiki

If you want to add some custom features to your fullwidth portfolio module and you don't want to lose the changes when you update/reinstall then you need to use child theme new. Firstly you need to redefine the fullwidth portfolio module in child theme and then you can add any changes to the fullwidth portfolio module. Here is the steps you need to follow to move Portfolio module to child theme

  1. Create a child theme or simply download it from here: https://github.com/kary4/divituts/wiki/divi-child-theme

  2. In the child theme folder create a new folder, for example includes folder.

  3. Now copy the divi/includes/builder/module/FullwidthPortfolio.php file into the child-theme/includes/ folder.

  4. Rename the file to something else, for example: custom-fullwidthPortfolio.php.

  5. Open up the custom-fullwidthPortfolio.php file and replace this code (the first line):

class ET_Builder_Module_Fullwidth_Portfolio extends ET_Builder_Module_Type_PostBased

with:

class Custom_ET_Builder_Module_Fullwidth_Portfolio extends ET_Builder_Module_Type_PostBased
  1. Now, if you want to add custom info to the overlay box then search for this code:
printf( '<span class="et_overlay%1$s"%2$s></span>',
   ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
      $data_icon
   );

and replace it with:

	printf( '<span class="et_overlay%1$s"%2$s>%3$s</span>',
	( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
	   $data_icon,
	   the_excerpt()
	   );
  1. Next open up functions.php file in your child theme folder and add the following code at the very bottom:
function custom_fullwidthportfolio_setup() {
	get_template_part( 'includes/custom-fullwidthPortfolio' );
	$custom-portfolio = new Custom_ET_Builder_Module_Fullwidth_Portfolio();
	remove_shortcode( 'et_pb_fullwidth_portfolio' );
	add_shortcode( 'et_pb_fullwidth_portfolio', array( $custom-portfolio, '_shortcode_callback' ) );
}
add_action( 'et_builder_ready', 'fullwidthportfolio' )

Some more customizations:

How to add an excerpt to the filterable portfolio items

In the custom-fullwidthPortfolio.php file right before

</div><!-- .et_pb_portfolio_item -->

add

<?php the_excerpt(); ?>

If you want to modify the main query and display the projects by alphabetical order then search for this line

$query_args['posts_per_page'] = $args['posts_number'];

And replace it with:

$query_args['posts_per_page'] = $args['posts_number'];
$query_args['orderby'] = 'title';
$query_args['order'] = 'ASC';

If you want to modify the default thumbnail size then modify this code

$width = 320;

and this one

$height = 241;

if you want to open the images using lighbox effect then replace this line

 <a href="<?php esc_url( the_permalink() ); ?>">

with

 <a href="<?php echo ($thumb_src); ?>" class="et_pb_lightbox_image">

Next, add this js to the Integration tab:

<script>
jQuery( document ).ready(function() {	
	jQuery( '.et_pb_filterable_portfolio' ).each(function () {
	jQuery(this).on('click', '.et_pb_portfolio_filter a', function(e) {
		e.preventDefault();
		setTimeout(function(){
			window.et_pb_image_lightbox_init(jQuery( '.et_pb_lightbox_image'));
		},100);
	});
});
}); 
</script> 

<script>
jQuery( document ).ready(function() {
	setTimeout(function(){
		window.et_pb_image_lightbox_init = function( $et_lightbox_image ) {
					$et_lightbox_image.magnificPopup( {
						type: 'image',
						removalDelay: 500,
						mainClass: 'mfp-fade',
						zoom: {
							enabled: ! et_pb_custom.is_builder_plugin_used,
							duration: 500,
							opener: function(element) {
								return element.find('img');
							}
						},
						autoFocusLast: false,
						gallery: {
                            enabled: true,
                            navigateByImgClick: true
                        },
					} );
}
		window.et_pb_image_lightbox_init(jQuery( '.et_pb_lightbox_image'));
	},100);
}); 
</script>

To display all the project categories: https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=801121&p=4402621#p4402621

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️