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

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

Create a child theme or simply download it from here: https://github.com/kary4/divituts/wiki/divi-child-theme
In the child theme folder create a new folder, for example includes folder.
Now copy the divi/includes/builder/module/Portfolio.php file into the child-theme/includes/ folder.
Rename the file to something else, for example: custom-Portfolio.php.
Open up the custom-Portfolio.php file and replace this code (the first line):

class ET_Builder_Module_Portfolio extends ET_Builder_Module_Type_PostBased {

with:

class Custom_ET_Builder_Module_Portfolio extends ET_Builder_Module_Type_PostBased {

Next, open up functions.php file in your child theme folder and add the following code at the very bottom:

function custom_portfolio_setup() {
	get_template_part( 'includes/custom-Portfolio' );
	$custom-portfolio = new Custom_ET_Builder_Module_Portfolio();
	remove_shortcode( 'et_pb_portfolio' );
	add_shortcode( 'et_pb_portfolio', array( $custom-portfolio, '_shortcode_callback' ) );
}
add_action( 'et_builder_ready', 'custom_portfolio_setup' )

Now you can customize the portfolio module the way you need.

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

If you want to add excerpts when you hover over the portfolio items then replace this code

printf( '<span class="et_overlay%1$s"%2$s></span>',
								( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
								$data_icon
							);

with

printf( '<span class="et_overlay%1$s"%2$s>%3$s</span>',
								( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
								$data_icon,
								get_the_content()
							);

or if you need to modify the main query and display the project by alphabetical order then search for this line

$args = array(
            'posts_per_page' => (int) $posts_number,
            'post_type'      => 'project',
        );

and replace it with

$args = array(
            'posts_per_page' => (int) $posts_number,
            'post_type'      => 'project',
            'orderby' => 'title',
            'order'      => 'ASC',

        );

If you want to add Excerpts to the portfolio items then right before:

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

add

<?php the_excerpt();?>

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

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️