Originally I wanted to add my embedded YouTube Video to the 'day' boxes on the left hand side of the Tour Pages on Midway Responsive Wordpress Theme. As pictured here on the Polzeath Camping
Which looked fine on my PC. However it messes up the Responsive aspect of this theme when you go small. So making the site look awful on tablets and smart phones.
I added the Video just underneath the top gallery in the end. I've tested this on a heap of views and it looks good.
Here' what I needed to add to the code to make this work . Please note I've made these notes as if you're hacking the 'Midway' theme but highly recommend you do this in a child theme concept. Also remember to make a full backup before attempting this.
OPEN wp-content/themes/midway/style.css
AT THE BOTTOM OF PAGE ADD
div.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-top: 5%; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
SAVE AND UPLOAD
OPEN wp-content/themes/midway/single-tour.php
FIND
UNDERNEATH ADD
$youtubevideo=themex_youtubevideo($post->ID); if ($youtubevideo != NULL) { ?>
SAVE AND UPLOAD
OPEN wp-content/themes/midway/framework/config.php
FIND
array( 'name' => __('Facebook','midway'), 'desc' => __('Does this tour have a seperate Facebook Account','midway'), 'id' => 'facebook', 'type' => 'text'),
ABOVE ADD
array( 'name' => __('YouTubeVideo','midway'), 'desc' => __('The id of the YouTube Video you want to show for this tour . If any!.','midway'), 'id' => 'youtubevideo', 'type' => 'text'),
SAVE AND UPLOAD
OPEN wp-content/themes/midway/framework/functions.php
################
All you need to do then to add further Videos is copy the Youtube id . Which is after the 'v=' in the URL.
FIND
function themex_emaillink($id=null, $before='', $after='') {
ABOVE ADD
function themex_youtubevideo($id=null, $before='', $after='') { $youtubevideo=get_post_meta($id,'_tour_youtubevideo',true); $out=$youtubevideo; return $out; }
SAVE AND UPLOAD
Thats all the changes to the site done. Now you need to set the videos in the database.
You'll need to get the Youtube ID
> The goto your /wp-admin
> Go to 'Tours' on the left menu
> In the main window click on 'edit' - under the Tour you want to add the Video too.
> Scroll down to 'Tour Options' and paste the Youtube ID in . In the 'YouTubeVideo' input box.
> then you'll need to click on 'update' - upper right hand side of the blog.
No comments:
Post a Comment