Moving videos to the sidebar of the detail page

Introduction

  1. One of the standard custom fields is a video field where you or your users can add a YouTube video to a listing.
  2. That video then will show on the detail page in the content section of the listing.
  3. This article explains how you can move the video from the content section to the sidebar.

Before:

After:

Step 1: Install Code Snippets plugin

  1. You can add the code below to your child theme’s functions.php file as well, but using the Code Snippets plugin makes it easier to keep track of the code, and it will be less likely the code is overwritten by a theme update.

Step 2: Code

Add a new code snippet, and copy and paste the following code:

[php]
add_filter(‘geodir_detail_page_tab_is_display’, ‘custom_gd_hide_video_tab’, 10, 2);
function custom_gd_hide_video_tab($value, $tab) {
if ($tab == ‘post_video’) {
$value = false;
}
return $value;
}

add_action(‘geodir_detail_sidebar_inside’, ‘custom_gd_show_video_in_sidebar’, 1);
function custom_gd_show_video_in_sidebar() {
global $post;
$video = ”;
if (geodir_is_page(‘preview’)) {
$video = isset($post->geodir_video) ? $post->geodir_video : ”;
} elseif (geodir_is_page(‘detail’)) {
$video = geodir_get_video($post->ID);
}
if ($video != ”) {
echo ‘<div class="geodir-video-wrapper">’;
echo wp_oembed_get(stripslashes($video));
echo ‘</div>’;
}
}

add_action(‘wp_head’, ‘custom_video_responsive_css’);
function custom_video_responsive_css() {
if (geodir_is_page(‘preview’) || geodir_is_page(‘detail’)) {
?>
<style type="text/css">
.geodir-video-wrapper {
margin-top: 20px;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
margin-bottom: 10px;
}

.geodir-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<?php
}
}
[/php]

Make sure you activate the snippet when using the Code Snippets plugin.

Step 3: Adding video link

When adding the video link, only add the link to the video. For example:

[html]https://www.youtube.com/watch?v=rxgWHzMvXOY[/html]

Step 4: Add a tip for your users

You can add a description to the video field at GD > Place Settings > Custom fields > Video field: