Create A YouTube Section With WordPress--tutorial.jcwcn.com

Step 1 - The Necessities

Alrighty. So apart from the obvious need of a WordPress installation, we're going to need a few extra things too. I got a whole bunch of files you're gonna need to have in your theme folder. Name a new folder in wp-content/themes 'youtubeFeature', and put all this stuff into it.

Images folder - Duh, what good site doesn't have some images!?
- bg.png
- containerBg.png
- contentTop.png
- headerImg.png
- tag.png
- tv.png - A little TV set I've whipped up for you. Original was actually from sxc.hu Stock image exchange
index.php
style.css

Edit style.css if you want, though it's default wont hurt. Go to your wp-admin and activate the theme!

We need a video post!

Now for the tutorials sake, we need to make a new post in wp-admin. So open up your wp-admin, click write new post. We only want the content to be the youtube vid, right? Go to your favorite YouTube video, and in the info section on the right (right next to the video player itself) you should see the embed bit.

Grab that bit of code, and paste it straight into your wp-admin write new post content area! Don't forget to make sure that you're editing in HTML mode not Visual:

. Very important! You need to change some parameters so that the video fits our screen. On both occasions, change the '425' in the width parameters to '250', and the '344' to '210'. Go down to the categories, and click '+ Add New Category', and aptly name it 'Video':

Click Publish, and we're away!

Step 2 - HTML

We'll need some base HTML and basic WP info, right? We'll do that now, then we can add the important WordPress code later on. This does contain some WordPress code, but not the bits that show the YouTube vid!

view plaincopy to clipboardprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>" title="home"><img src="<?php bloginfo('template_directory'); ?>/images/headerImg.png" alt="" /></a></h1>
</div>
<div id="container">
<img src="<?php bloginfo('template_directory'); ?>/images/tag.png" alt="" id="tag" />
<div id="content">
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	
	<?php wp_head(); ?>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1><a href="<?php bloginfo('url'); ?>" title="home"><img src="<?php bloginfo('template_directory'); ?>/images/headerImg.png" alt="" /></a></h1>
		</div>
		
		<!-- tvSection goes here! -->
		
		<div id="container">
			<img src="<?php bloginfo('template_directory'); ?>/images/tag.png" alt="" id="tag" />
			<div id="content">
				
				<!-- Normal WP loop goes here -->
				
			</div>
		</div>
	</div>
</body>
</html>

Huh? Did you say that's a lot? Yeah... It's a bit I guess. But it's all basic stuff. Link the stylesheet in, show the h1 a img (which happens to say IBLOG in Arial), show a little tag, and close all the divs. Real easy stuff.

Step 3 - WordPress code

As I said before, we need 2 loops. One for the video section, the other for the main loop. Easy done with WP_Query! Our first loop query will tell the loop to only show the content of the most recent post under the category 'Video'. Replace the tv-Section comment with:

view plaincopy to clipboardprint?

<?php
$youtube = new WP_Query();
$youtube->query('category_name=video&showposts=1');
while($youtube->have_posts()) : $youtube->the_post();
?>
<div id="tvSection">
<?php the_content(''); ?>
</div>
<?php endwhile; ?>

<?php 
	$youtube = new WP_Query();
	$youtube->query('category_name=video&showposts=1');
	while($youtube->have_posts()) : $youtube->the_post();
?>
	<div id="tvSection">
		<?php the_content(''); ?>
	</div>
<?php endwhile; ?>

You get the parameters in the query, right? Like I said, post from category name: Video, only show 1 post. Simple. If you don't understand WP_Query, have a look back at this tutorial for a more extensive look. Great! So if you'd added the post correctly, with only the YouTube content as the content, it should look something like this:

The second loop is a much simpler, basic loop. Just your Average Joe loop. It should replace the second comment in index.php!

view plaincopy to clipboardprint?

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('read more...'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
	<div class="post">
		<h2><?php the_title(); ?></h2>
		<div class="entry">
			<?php the_content('read more...'); ?>
		</div>
	</div>
<?php endwhile; ?>
<?php endif; ?>

Now, without any CSS styling just yet, it should look something similar to this:

Step 4 - CSS

Here is where the magic happens!

To start off, we'll get some basic stuff out of the way.

view plaincopy to clipboardprint?

*{
margin: 0;
padding: 0;
border: 0;
}
body{
font: 75%/18px Helvetica, Arial, Tahoma;
background: #998835 url(images/bg.png) repeat-x;
margin: 0;
padding: 0;
}
#wrapper{
width: 800px;
margin: 0 auto;
}
h1{
margin-top: 30px;
padding-left: 90px;
}

*{
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	font: 75%/18px Helvetica, Arial, Tahoma;
	background: #998835 url(images/bg.png) repeat-x;
	margin: 0;
	padding: 0;
}

#wrapper{
	width: 800px;
	margin: 0 auto;
}

h1{

	margin-top: 30px;
	padding-left: 90px;
}

This is just resetting the margins, setting standards for the body (giving it the background of 'bg.png' and #998835, a pukey yellow colour!). Centers the whole thing, and makes it a max of 800px.

Alright! now to style our TV!

view plaincopy to clipboardprint?

#tvSection object{
float: rightright;
background: url(images/tv.png) no-repeat left top;
width: 250px;
height: 210px;
padding: 39px 125px 70px 55px;
}

#tvSection object{
	float: right;
	background: url(images/tv.png) no-repeat left top;
	width: 250px;
	height: 210px;
	padding: 39px 125px 70px 55px;
}

The reason we're editing the object within the TV section is because no matter where that object moves on the page, it's going to take it's padding and background with it. So to save problems, giving the object such attributes fixes the background behind the vid - no matter what content there is. It also assures us that if there is any other content accidentally put in, it's displayed against the blank white of the container so you can see it's there! (Or you could give the p a grey background as a caption, who knows?)

Firstly, get it out of the way to the right. A given. Secondly, we give it our TV image as the background! By making the width and height of the TV section the same as what the YouTube video was set as, it constrains it to that small square - so we know it will remain in the right place. The padding just displays the rest of the TV. In my WYSIWYG editor, it's possible to view the padding (with the dotted line!). So to give you and idea of what the very specific padding does I'll show you a screen shot. The solid line cutting through the top half is the negative margin!

The negative top margin just shoves the whole thing a little higher up the page, so that it's halfway between what is soon to be the white container div, and the top of the body (pukey yellow!) Our TV should now look something like this:

Next up is the content and container fixing. the container needs to be white, while the content div needs to be narrow with the small shadowed thing at the top. Easy done:

view plaincopy to clipboardprint?

#container{
margin-top: 20px;
background: url(images/containerBg.png) repeat-x center top #fff;
}
#tag{
padding: 70px 0 0 34px;
}
#content{
clear: both;
width: 425px;
background: url(images/contentTop.png) no-repeat center top;
padding: 40px;
}

#container{
	margin-top: 20px;
	background: url(images/containerBg.png) repeat-x center top #fff;
}

#tag{
	padding: 70px 0 0 34px;
}

#content{
	clear: both;
	width: 425px;
	background: url(images/contentTop.png) no-repeat center top;
	padding: 40px;
}

And finally, the rest of the post content! We've been paying so much attention to our TV, that the regular loop feels insignificant! Let's give it some life with some red and grey and floaty images!

view plaincopy to clipboardprint?

.post{
margin-bottom: 30px;
}
.post h2{
font: 36px Georgia, "Times New Roman", Times, serif;
color: #b30d0d;
margin-bottom: 0.5em;
}
.post p{
color: #555;
}
.post p a{
border: 0;
color: #a80509;
}
.post p img{
float: left;
padding: 0 10px 0 0;
border: 0;
}
a.more-link{
display: block;
padding-top: 5px;
}

.post{
	margin-bottom: 30px;
}

.post h2{
	font: 36px Georgia, "Times New Roman", Times, serif;
	color: #b30d0d;
	margin-bottom: 0.5em;
}

.post p{
	color: #555;
}

.post p a{
	border: 0;
	color: #a80509;
}

.post p img{
	float: left;
	padding: 0 10px 0 0;
	border: 0;
}

a.more-link{
	display: block;
	padding-top: 5px;
}

And now it should look somewhat similar to this:

It look rather like our Photoshop mockup, and not unlike the Ideate website's header... Yes I know it's missing some patriotic flags!

Well done! You've put a Youtube Vid in the tube in a wordpress skin!

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]