Hello Guy!

Often in many blogging sites, you will see two or three columns of the most important categories. Recently I had to do this for a blog. It was a little bit cumbersome and time consuming. So, I would like to share the solution so that you can kill the time waste trying yourself in case you do not know how to do it. In this solution, I show 5 posts at maximum from my chosen three categories.

OK.
Let us start and let me show how to do it.

Step One: See the sample what would be the output

In the above image, you will notice that the first category has enough posts, so it can fetch 5 (five) posts for us. But in second column and third column, there are only three posts because those categories do not have more than three posts. And what I want to say at this point is – although we will try to get 5 posts from each category, we will not get enough in case that category has less than 5 (five) posts and this is done automatically.

Step Two: Adding custom function

<?php
	if(!function_exists('postListByCategory'))
	{
		function categoryNameByCategoryID($categoryID = 0)
		{
			global $wpdb;
			$sqlQuery = 'SELECT name FROM ' . $wpdb->prefix . "terms WHERE term_id=$categoryID";
			return $wpdb->get_var($sqlQuery);
		}
	}
	if(!function_exists('postListByCategory'))
	{
		function postListByCategoryID($categoryID = 0)
		{
			$outputString = '';
			query_posts('orderby=name&amp;order=asc&amp;cat=' . $categoryID . '&amp;showposts=5');
			$outputString .= '<ul>' . chr(10);
			while (have_posts()) : the_post();
				$permaLink = get_permalink();
				$permaLink = trim($permaLink);
				if(!empty($permaLink))
				{
					$outputString .= '<li>' . chr(10);
					$outputString .= '<a href="' . get_permalink() . '">' . get_the_title($post->ID) . '</a><br />' . chr(10);
					$outputString .= '<small>' . get_the_time('D M jS Y') .'</small>' . chr(10);
					$outputString .= '</li>' . chr(10);
				}
			endwhile;
			$outputString .= '</ul>' . chr(10);
			return $outputString;
		}
	}
?>

Now open the functions.php file inside your theme directory and insert these two functions. If there is none, create a functions.php file. And at this point, please remember that all the functions and coding in this file are automatically added during the code execution.

Note that the function names are self descriptive.

Step Three: Embed code in your file(s)

Now open your footer.php file or any other file and add this code. In 99% cases, you may need to customize this small piece of code. The first three lines are category IDs.

<?php
	$firstColumnCategoryID  = 1;
	$secondColumnCategoryID = 30;
	$thirdColumnCategoryID  = 31;
?>
	<div id="bottomThreeColumns">
		<div id="bottomColumn">
			<div id="bottomColumnTop">&nbsp;<?php echo categoryNameByCategoryID($firstColumnCategoryID); ?></div>
			<?php echo postListByCategoryID($firstColumnCategoryID); ?>
		</div>
		<div id="bottomColumn">
			<div id="bottomColumnTop">&nbsp;<?php echo categoryNameByCategoryID($secondColumnCategoryID); ?></div>
				<?php echo postListByCategoryID($secondColumnCategoryID); ?>
		</div>
		<div id="bottomColumnThird">
			<div id="bottomColumnTop">&nbsp;<?php echo categoryNameByCategoryID($thirdColumnCategoryID); ?></div>
			<?php echo postListByCategoryID($thirdColumnCategoryID); ?>
		</div>
	</div>

Step Four: Link your CSS code

#bottomThreeColumns
{
	width:940px; min-height:100px; margin:0 auto; clear:both;
}
#bottomThreeColumns UL
{
	margin:0px 0px 30px 0px; padding:0px;
}
#bottomThreeColumns LI
{
	list-style:none; border-bottom:#EEEEEE solid 1px; margin:7px 0px 0px 4px;
}
#bottomThreeColumns LI A
{
	text-decoration:none; color:#000000;
}
#bottomThreeColumns LI A:hover
{
	text-decoration:underline;
}
#bottomThreeColumns SMALL
{
	font-style:italic; line-height:25px; padding:0px 0px 0px 4px;
}
#bottomColumn
{
	float:left; width:300px; margin:20px 20px 0px 0px;
}
#bottomColumnThird
{
	float:left; width:300px; margin:20px 0px 0px 0px;
}
#bottomColumnTop
{
	width:300px; height:26px; background:#5FB8EB; color:#FFFFFF;
	line-height:25px; font-weight:bold;
}

I have put the above CSS code in my style.css file. In 99% cases, you may need to customize according to your requirements.

Step Five: Test everything by opening the link

Now test you code and we are done!

Thank you for reading.