This article covers a wordpress two column php loop to display either posts or video’s. I been working on a php two column loop to display my video’s in WordPress at seotool.tv/video and finally finished it today. What a pain it was, especially when your not a coding genious. The deal was I wanted to display my videos and to get them up easily, all I do is create a post in wordpress and slap the ember code in and I’m done. Well the main problem you run into is having to resize the default wordpress post area. Instead what you want to do is put the posts in 2 individual columns and every time you post a new video it will automatically displayed. That way I can have 10 video’s on the front page for visitors to watch and they will change daily. 

If you use Thesis theme you will have to edit your custom.functions.php and add the following code, the following code is a loop for a 2 column display seen in the above link…

<?php

// Using hooks is absolutely the smartest, most bulletproof way to implement things like plugins,
// custom design elements, and ads. You can add your hook calls below, and they should take the
// following form:
// add_action(‘thesis_hook_name’, ‘function_name’);
// The function you name above will run at the location of the specified hook. The example
// hook below demonstrates how you can insert Thesis’ default recent posts widget above
// the content in Sidebar 1:
// add_action(‘thesis_hook_before_sidebar_1′, ‘thesis_widget_recent_posts’);

$loopty_loop = new my_loops;

class my_loops extends thesis_custom_loop {
    function home() {
global $wp_query;
echo ‘<div id=”video”>’;

echo ‘<div id=”left_video”>’;

while(have_posts()) : $i++; 
    if(($i % 2) == 0) : $wp_query->next_post(); else : the_post();
 
echo ‘<div id=”post-’; the_ID();  echo ‘”‘; post_class(); echo ‘>’;

echo ‘<a href=”‘;
echo the_permalink();
echo ‘”>’;

echo the_title(‘<h2>’ , ‘</h2>’);
echo ‘</a>’;
the_content();

echo ‘<br /></div>’;
endif; endwhile; 
echo ‘</div>’;

 $i = 0; 
 rewind_posts(); 

echo ‘<div id=”right_video”>’;
while(have_posts()) : $i++; 
    if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); 

echo ‘<div id=”post-’; the_ID();  echo ‘”‘; post_class(); echo ‘>’;

echo ‘<a href=”‘;
echo the_permalink();
echo ‘”>’;
echo the_title(‘<h2>’ , ‘</h2>’);
echo ‘</a>’;

the_content();
echo ‘<br /></div>’;
endif; endwhile;
 
echo ‘</div>’;
echo ‘</div>’;

 
}
}

The css design is rather simple it is more for setting the width of the columns, if you are running Thesis for WordPress this code will go in your custom.css file...

 

div#left_video {

text-align: center; 

font-size:12px; 

width: 320px;
float: left;
clear: none; 

padding:1em; 

div#right_video { 

text-align: center; 

font-size:12px; 

width: 320px;
float: left;
clear: none; 

padding:1em; 

So if your looking for a 2 column desing for your video’s there you go pretty straight forward. If you want the technical breakdown of what everything does let me know I can go through it with you. I suggest when embeding your video to embed them at 320 width and 240 height. 640x 480 is the standard size for web video. So now I’m off to slapping a fancy border on each of them. 

About Scot Manaher

Scot Manaher has written 111 post in this blog.

Scot is a blogger that loves writing about SEO, Internet Marketing and Work at Home opportunities. He owns and operates Niche Website Strategy and the Web Content Course system. He is also the Marketing Manager for The Content Authority which is a premier article writing service.

Tagged with:
 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>