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

If you want to add some custom features to your filterable portfolio module and you don't want to lose the changes when you update/reinstall then you need to use child theme. More info here: https://github.com/kary4/divituts/wiki/divi-child-theme

Firstly you need to redefine the filterable portfolio module in child theme and then you can add any changes to the filterable portfolio module. Here is the steps you need to follow to move filterable 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/FilterablePortfolio.php file into the child-theme/includes/ folder.

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

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

class ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module_Type_PostBased

with:

class Custom_ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module_Type_PostBased

Also, replace this line:

$this->vb_support = 'on';

with:

$this->vb_support = 'off';
  1. Next open up functions.php file in your child theme folder and add the following code at the very bottom:
function custom_filterableportfolio_setup() {
	get_template_part( 'includes/custom-FilterablePortfolio' );
	$custom_portfolio = new Custom_ET_Builder_Module_Filterable_Portfolio();
	remove_shortcode( 'et_pb_filterable_portfolio' );
	add_shortcode( 'et_pb_filterable_portfolio', array( $custom_portfolio, '_render()' ) );
}
add_action( 'et_builder_ready', 'custom_filterableportfolio_setup' );

How to open Filterable images via lightbox

Just search for this code in the code above

if ( '' !== $thumb ) : ?>
<a href="<?php the_permalink(); ?>">

and replace it with

if ( '' !== $thumb ) : ?>
<a href="<?php echo ($thumb); ?>" class="et_pb_lightbox_image">

Now add this code to the Integration tag:

<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>

How to add excerpt to the filterable portfolio items

In the cfwpm.php file right before

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

add

<?php the_excerpt(); ?>

If you want to display the filterable project items randomly:

Right before:

if ( '' !== $args['include_categories'] ) {

add:

$query_args['orderby'] =  'rand';

If you want to display the filterable project items in ASC order:

Right before:

if ( '' !== $args['include_categories'] ) {

add:

$query_args = array(
'orderby' => 'title',
'order' => 'ASC',
);

Another method: https://gist.github.com/indikatordesign/069c0b7f363977e092bb5193bdf74133

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