Home Forums Plugins Support Vidi – Video WordPress plugin How to customize Single Video page in Haru Vidi

Tagged: 

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #9110

    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 week, 5 days ago by admin.
    • This topic was modified 1 week, 5 days ago by admin.
    • This topic was modified 1 week, 5 days ago by admin.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.