Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a YouTube Section With WordPress

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

So I was reading a few blogs that I read, as you do on a lazy afternoon, and I came across Ideate . I loved the theme so much, I wanted to re-create the little TV box they have that contains a YouTube video. In this tutorial, we'll have a look at how!

Preface

We'll assume that you have a live WordPress installation, whether it be local or hosted.
There are tutorials on running WordPress locally title="geeks are sexy on how to install WordPress locally under XP">here for Windows,
and
here for OS X
.

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.

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!

<!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:

<?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!

<?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.

*{
	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!

#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:

#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!

.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!

Advertisement