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 here for Windows, and here for OS X.
Step 1 - The Necessities
- 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.
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!
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:
Well done! You've put a Youtube Vid in the tube in a wordpress skin!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Greg August 14th
Kind of neat, I’ll have to look into implementing something like this into one of my sites.
- Greg
( )w1sh August 14th
Looks awesome. Nice TV.
( )Nate August 14th
I guess I could see how this could be used on a few sites.
( )Taylor Satula August 14th
Really cool idea. Out there but still good
( )Chris August 14th
Love the idea.
lets stop using the <embed> tag!
it’s deprecated.
( )Mike August 14th
Nice idea but there is no excuse for invalid code.
( )Connor August 14th
Thanks Chris
( )Tommy M August 14th
Not bad, although I feel like it would have been easier to accomplish this in an easier way.
You could have used one loop, then just checked if the first post was a video. If it is, then apply the TV/CSS properties.
Good idea and functionality though!
( )novice August 14th
Original idea. Something like iPod with video in it can be used for mobile phones blogs
Thanks.
( )Shane August 14th
Quite right, @Chris.
A good starting point for video on a wordpress site. Thanks for posting.
( )Harley Alexander August 14th
A good point out the invalid code - I simply used the Youtube snippet out of simplicity for you all. Here, for those bothered to use it is the valid code. Turn this:
into this:
(From Connor’s Evening tip a few nights ago
)
( )Braden Keith August 14th
thx for not just showing it, but going further to show integration. Very nice tutorial, very good idea
( )mattems August 14th
this is cool but another option would be to have the TV as a png with the screen transparent. Then put the flash underneath
you could even put a shine across the tv to get the curved looked.
then you can fill those edges. As for the flash player controls. i wonder if it is possible for them to be called using javascript. Like a trigger. hmm
good tut.
cheers.
( )insic August 14th
i am looking this tutorial a long time. now its here in nettuts. thank you guys.
( )Stelios August 15th
Great idea:)
Is there any way to add this to a sidebar ?
Thanks
( )Connor August 18th
An added effect that you could add to this would be using the JQuery UI effect clip to turn on the TV (reveal the youtube video). It looks just like you’re turning on an old TV.
( )Taylor Satula August 21st
@connor Huh. I never thought of that thats a great idea
( )write out the code for it i wanna see how you would do it
sesebian September 16th
Thanks
( )bill October 25th
very cool
( )Hulusi January 17th
Thankks bro , Perfectt ! o_O xD
( )