How to insert a video on the news page in the Revolution Theme

Continuing my process of passing on my experience of this theme and how to develop it, a question has been asked on how to insert a video into the template news page, in replacement of a picture and it is actually quite straightforward to do

The aim of this tutorial is to end up with this:

The best way to achieve this is to not use the wp-youtube plugin here. Rather you need to embed the code to call the youtube video into the space that is currently being used by the picture.

What you will need:

1. Access to your Blog directory structure from an FTP client such as Filezilla
2. Text editing software such as Notepad

Understand the style.css page

1) Firstly copy the style.css file from your server onto your computer and make a backup copy of it – just in case

2) Open it up in your favourite text editor and scroll down to the News Section, where you will see this code:

#newspage {
width: 920px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
line-height: 20px;
}

This means that the page is 920px wide. Scroll down a bit more and see this code:

#newspageleft {
float: left;
width: 280px;
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 0px;
border-right: 1px solid #C0C0C0;
overflow: hidden;
}

#newspagemiddle {
float: left;
width: 280px;
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 20px;
border-right: 1px solid #C0C0C0;
overflow: hidden;
}

#newspageright {
float: right;
width: 280px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
overflow: hidden;
}

If you take a look at the news page you will see that it is divded up into 3 sections: left, middle and right and that each of those sections has various atributes. This image may describe it more clearly:

So if you add all the dimensions (image width and padding) up you get 920px! It’s important to realise that this is the space you have to play with. Whatever you do it should always add up to 920 px wide in totality, to keep the nice clean lines.

Understand the page_news.php file

1) Firstly copy the page_news.php file from your server onto your computer and make a backup copy of it – just in case

2) Open it up and you will see this text at the top:

<div id=”newspageleft”>

<b>News Section #1</b>
<img src=”<?php bloginfo(‘template_url’); ?>/images/np-1.jpg” alt=”<?php bloginfo(‘name’); ?>” />

This is calling in the left handside section the image that is in the revolution/images folder called np-1.jpg. And it is this that needs to be changed. However it is worth understanding the other sections:

<?php $recent = new WP_Query(“cat=1&showposts=1″); while($recent->have_posts()) : $recent->the_post();?>
<b><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></b>

<?php the_excerpt(__(‘Read more’));?><div style=”clear:both;”></div>
<?php endwhile; ?><br />

This is saying show some of the latest post in category 1 and just show 1 of them. You could if you wish replace ‘cat=1′ with cat=[whatever category you like] and will only show a post from that category. Scrolling on:

<b>Recent News Section #1 Articles</b>
<ul>
<?php $recent = new WP_Query(“cat=1&showposts=5″); while($recent->have_posts()) : $recent->the_post();?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

This section is saying show 5 recent posts from category 1. As per the above you could change this cat=[whatever category]

Making the changes

1) Now that we have a clear understanding of what is going on, go to your page_news.php and locate this section:

<b>News Section #1</b>
<img src=”<?php bloginfo(‘template_url’); ?>/images/np-1.jpg” alt=”<?php bloginfo(‘name’); ?>” />

You will now need to replace it with this code:

object width=”280” height=”180“><param name=”movie” value=”http://www.youtube.com/v/EKGW9WH_0gM“></param><param name=”wmode” value=”transparent”></param><embed style=”margin-bottom:6px” src=”http://www.youtube.com/v/EKGW9WH_0gM” type=”application/x-shockwave-flash” wmode=”transparent” width=”280” height=”180“></embed></object>

The items in ‘red‘ can be changed to reflect the size of your player but remember that if you change the ‘280′ you will need to change the style.css file as well. The items in ‘green‘ are changed to reflect the youtube reference code

2) Once that is done upload the file and check to see if it has turned out as you wish.

Variables

1) You could of course make the videos bigger by removing say the middle column totally from the page_news.php and tweaking the red items as mentioned above (don’t forget to alter the style.css as well!)

Any comments let me know