How to customize Single Video page in Haru Vidi

[admin]

Hi all customer,

In this topic tutorial we’ll help you customize single video page in Haru Vidi plugin template.

First of all you need to understand how to customize template display of plugin use child theme follow this topic:

How to customize WordPress theme using Child theme

In this case we need to customize template file: wp-content/plugins/haru-vidi/templates/vidi/video/single-video.php

More detail please read in the document: https://document.harutheme.com/vidi/ (Section 13)

Example we’ll customize display of Related Video from Carousel Slideshow to Grid.

You need change the code from line 627 to 659 from

<div class="related-list haru-slick"
                            data-slick='{"slidesToShow" : 3, "slidesToScroll" : 1, "arrows" : true, "infinite" : true, "centerMode" : false, "focusOnSelect" : false, "vertical" : false, "responsive" : [{"breakpoint": 767,"settings":{"slidesToShow": 1}}] }'
                        >
                            <?php 
                                // Get video more by category
                                $custom_taxterms = wp_get_object_terms( get_the_ID(), 'video_category', array('fields' => 'ids') );

                                $video_args = array(
                                    'post__not_in'       => array( get_the_ID() ),
                                    'posts_per_page'     => 6,
                                    'orderby'            => 'rand',
                                    'post_type'          => 'haru_video',
                                    'post_status'        => 'publish',
                                    'tax_query' => array(
                                        array(
                                            'taxonomy'  => 'video_category',
                                            'field'     => 'id',
                                            'terms'     => $custom_taxterms
                                        )
                                    ),

                                );
                                $more_videos         = new WP_Query( $video_args );
                            ?>
                            <?php 
                                if ( $more_videos->have_posts() ) :
                                    while ( $more_videos->have_posts() ) : $more_videos->the_post();
                                        echo haru_vidi_get_shortcode_template('vidi/video/'. 'content-video' . '.php', array(), '', '');
                                    endwhile;
                                endif;
                                wp_reset_query();
                            ?>
                        </div>

to

<div class="archive-video-list layout-wrap style-grid grid-columns grid-columns__3">
                            <?php 
                                // Get video more by category
                                $custom_taxterms = wp_get_object_terms( get_the_ID(), 'video_category', array('fields' => 'ids') );

                                $video_args = array(
                                    'post__not_in'       => array( get_the_ID() ),
                                    'posts_per_page'     => 8,
                                    'orderby'            => 'rand',
                                    'post_type'          => 'haru_video',
                                    'post_status'        => 'publish',
                                    'tax_query' => array(
                                        array(
                                            'taxonomy'  => 'video_category',
                                            'field'     => 'id',
                                            'terms'     => $custom_taxterms
                                        )
                                    ),

                                );
                                $more_videos         = new WP_Query( $video_args );
                            ?>
                            <?php 
                                if ( $more_videos->have_posts() ) :
                                    while ( $more_videos->have_posts() ) : $more_videos->the_post();
                                        echo haru_vidi_get_shortcode_template('vidi/video/'. 'content-video' . '.php', array(), '', '');
                                    endwhile;
                                endif;
                                wp_reset_query();
                            ?>
                        </div>

Go to Appearance -> Customize -> Additional CSS and add more CSS code for the best display:

.single-related-video .archive-video-list {
    margin: 0 -15px;
}

Thanks for reading!

 

****
Best regards,

HaruTheme

• This topic was modified 1 year, 8 months ago by admin.
• This topic was modified 1 year, 8 months ago by admin.
• This topic was modified 1 year, 8 months ago by admin.

[Author]

Posts