How to customize content-video.php file in wordpress as is in html file?

Viewed 23

I hope all of you are fine,

I'm beginner, and I'm converting an HTML site to a WORDPRESS THEME
and I'm using the content-video.php file as the supported format in the theme.

There are two possibilities for the user:

Either he uploads a video in which case Wordpress will automatically generate a [video] shortcode,
or he puts an external link from youtube, vimeo...etc in which case Wordpress will convert the link into an iframe tag.

So please, how can I do that?

I will attach the html file I want to implement (the final output) and the content-video.php file so you can see what I did.

Let me share the html blog page link to show you how displaying the video (the video post in the bottom) : https://consulty.hatemfrere.com/blog.html

You may want additional information .. I am ready to provide you with any other information, files or codes if you want.

Thank you in advance

ATTACHMENTS:

  • HTML File (Final Output) :
<div class="video">
    <div class="inner-box">
        <figure class="image-box">
            <img src="src/images/pages/blog/news-19.jpg" alt="news-19">
            <span class="category">business</span>
            <div class="video-btn">
                <a href="https://www.youtube.com/watch?v=A3jc8bV13jM" class="lightbox-image" data-caption=""><i
                        class="fas fa-play"></i></a>
            </div>
        </figure>
        <div class="lower-content">
            <ul class="post-info clearfix">
                <li><i class="far fa-user"></i><a href="blog.html">Admin</a></li>
                <li><i class="far fa-calendar-alt"></i>March 19, 2020</li>
                <li><i class="far fa-comment-alt"></i><a href="blog.html">97
                        Comments</a></li>
                <li><i class="far fa-heart"></i><a href="blog.html">1.5k Likes</a></li>
            </ul>
            <h2><a href="blog-details.html">Taking Action For Benefits Of Business</a></h2>
            <p>Eabore etsu dolore magn aliqua enim veniam quis nostrud exercitas reprehenderit
                voluptate sed bvelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non.</p>
            <div class="link"><a href="blog-details.html"><i class="fas fa-arrow-right"></i><span>Read More</span></a>
            </div>
        </div>
    </div>
</div>

  • content-video.php file :

<?php 
/**
 * -- Video Post Format
 */
if ( has_post_format( 'video' ) ) {
?>
<div id="post-<?php the_ID(); ?>" <?php post_class('video'); ?>>
    <div class="inner-box">
        <figure class="image-box">
            <img src="<?php echo CONSULTY_THEME_DIR_URI . '/src/images/pages/blog/news-19.jpg' ?>" alt="news-19">
            <span class="category"><?php the_category( ', ' ); ?></span>
            <div class="video-btn">

                <a href="https://www.youtube.com/watch?v=A3jc8bV13jM" class="lightbox-image"
                    data-caption="">
                    <i class="fas fa-play"></i>
                </a>
            </div>
        </figure>
        <div class="lower-content">
            <ul class="post-info clearfix">
                <li>
                    <i class="far fa-user"></i><a
                        href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a>
                </li>
                <li><i class="far fa-calendar-alt"></i><?php the_time('F jS, Y') ?></li>
                <li><i class="far fa-comment-alt"></i>
                    <?php //comments_popup_link(); 
                            comments_popup_link( 'No Comment', '1 Comment', '% Commentston', '', 'Comments Off' );
                            ?>
                </li>
                <li>
                    <i class="far fa-folder"></i>
                    <?php
                                                $categories     =   get_the_category();
                                                $separator      =   ', ';
                                                $output         =   '';

                                                if ( $categories ) {
                                                    foreach ( $categories as $category) {
                                                        $output .=  '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $separator;
                                                    }
                                                    echo trim($output, $separator);
                                                }
                                            ?>
                </li>
            </ul><!-- /ul /.post-info -->
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p>
                <?php the_excerpt(); ?>
            </p>
            <div class="read-more-link">
                <a href="<?php the_permalink(); ?>">
                    <i class="fas fa-arrow-right"></i>
                    <span><?php _e('Read More'); ?></span>
                </a>
            </div>
        </div>
    </div>
</div><!-- /.video -->
<?php } ?>

0 Answers
Related