Advertisement
WordPress

Create a YouTube Section With WordPress

by

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!

Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Working With LoopsMetadata
    In the first two parts of this series, we covered what meta data is in WordPress and how to work with the arrays that are typically returned. Now that you've learned to do the detective work necessary to find the structure of an array, it's time to learn to use loops to automate the process of outputting an array. Once you learn this important skill you will never have to write repetitive HTML markup again.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…