Additional Options For Blog Module - kary4/divituts GitHub Wiki

If you want to add some custom features to your blog 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 blog module in child theme and then you can add any changes to the blog module. Here are the steps you need to follow to move blog 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/blog.php file into the child-theme/includes/ folder.

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

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

class ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased 

with:

class Custom_ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased {

Now you can modify the code in the custom-blog.php file the way you like.

If you want to add a sorting post option then right after this code:

'posts_number' => array(
				'label'             => esc_html__( 'Posts Number', 'et_builder' ),
				'type'              => 'text',
				'option_category'   => 'configuration',
				'description'       => esc_html__( 'Choose how much posts you would like to display per page.', 'et_builder' ),
				'computed_affects'   => array(
					'__posts',
				),
				'toggle_slug'       => 'main_content',
			),

add the following lines:

'post_order' => array(
	'label'             => esc_html__( 'Order Posts', 'et_builder' ),
	'type'              => 'select',
	'option_category'   => 'configuration',
	'options'           => array(
		'option_1' => esc_html__( 'Order Posts by publish date in DESC order', 'et_builder' ),
		'option_2' => esc_html__( 'Order Posts by publish date in ASC order', 'et_builder' ),
		'option_3' => esc_html__( 'Order Posts by title in DESC order', 'et_builder' ),
		'option_4' => esc_html__( 'Order Posts by title in ASC order', 'et_builder' ),
		'option_5' => esc_html__( 'Order Posts Random', 'et_builder' ),
	),
),

Next right after these lines:

if ( 'on' !== $fullwidth ){
			if ( 'on' === $use_dropshadow ) {
				$module_class .= ' et_pb_blog_grid_dropshadow';
			}

			wp_enqueue_script( 'salvattore' );

			$background_layout = 'light';
		}

add:

switch ($post_order) {
	case 'option_1':
		$order_by = 'date';
		$order = "DESC";
	break;
	case 'option_2':
		$order_by = 'date';
		$order = "ASC";
	break;
	case 'option_3':
		$order_by = 'title';
		$order = "DESC";
	break;
	case 'option_4':
		$order_by = 'title';
		$order = "ASC";
	break;
	case 'option_5':
	$order = "RAND";
	break;
}

if ($post_order != 'option_5') {
	$args = array(
		'posts_per_page' => (int) $posts_number,
		'orderby' => $order_by,
		'order' => $order
	);
} else {
	$args = array(
		'posts_per_page' => (int) $posts_number,
		'orderby' => 'rand'
	);
}

Then remove this line from the very bottom: new ET_Builder_Module_Blog; and replace this line: $this->vb_support = 'on'; with $this->vb_support = 'off';

Finally, add this code to the functions.php file in your child theme folder:

function divi_custom_blog() {
	get_template_part( '/includes/custom-Blog' );
	$cbm = new custom_ET_Builder_Module_Blog();
	remove_shortcode( 'et_pb_blog' );
	add_shortcode( 'et_pb_blog', array( $cbm, '_shortcode_callback' ) );
}
add_action( 'et_builder_ready', 'divi_custom_blog' );

At this point in Backend builder you will have a new option, to sort the blog post in the Blog Post Module:

Light box effect

If you need to open the thumbnails in lighbox window then search for this code (there are two lines of similar code):

<a href="<?php esc_url( the_permalink() ); ?>" class="entry-featured-image-url">

and replace it with:

<a href="<?php echo $thumb; ?>" class="entry-featured-image-url et_pb_lightbox_image">