Display Featured Image with Title from given Category

Check out this article
http://codex.wordpress.org/Function_Reference/query_posts
in the codex, and then skip down to “usage” for examples.

What I do:

first you set up the query.
There are many available arguments to apply to a post query. The ones you need are:

• ‘posts_per_page’ – this will display how many per page. Since you are not including pagination, it will simply cut off.
• ‘cat’ – this is the category id. you can find this in the url of a given category. Here is how to find this. Head into the Admin Dashboard, and then head to the posts tab, and then down to categories. Click on any category to open it. Then take note of the URL. For example, the uncategorized url has this on the end.
  

  edit-tags.php?action=edit&taxonomy=category&tag_ID=1&post_type=post

  Now take note of the tag_ID=1 in that URL.
  That is the number you are looking for. the one after tag_ID=

• ‘order’ – self explanatory. Either ascending (oldest to latest) or descending (latest to oldest)

Once the query is in place, then you set up the loop. Which will take the arguments and create a list of posts based on those arguments, as well as provide formatting.

I have adjusted a sample to include your needed image, and title, but there are also other parameters available in the codex.

Query Sample: Latest 10 posts from the Uncategorized category in descending order, and then formatted accordingly.:

$args = array(
'posts-per-page' => 10,
'cat'      => 1,
'order'    => 'DESC'
);
query_posts( $args );
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post();
		echo "<div class='post-loop-image'>";
			if ( has_post_thumbnail() ) {
			the_post_thumbnail();
			}
		echo "</div>";
		echo "<span class='post_title'>" . the_title(); . "</span>";
	 endwhile;
php endif?>
<?wp_reset_query(); ?>

And then you would apply any necessary css (such as floating the image to the left, sizing the title, adding margins, setting a width for the image, all that good stuff.)

If you have any questions, I’ll be up for a lil while longer and be checking back in.

Apologies…I wrote that at near 2 in the morning my time, and it would appear I let my performance slip with a few rogue open/close php tags 😛

<div id='cssmenu'>

<ul>
<?php
$args = array(
'posts-per-page' => 10,
'cat'      => 11,
'order'    => 'DESC'
);
query_posts( $args );
if (have_posts()) :
	while (have_posts()) : the_post();
		echo "<div class='post-loop-image'>";
			if ( has_post_thumbnail() ) {
			the_post_thumbnail();
			}
		echo "</div>";
		echo "<span class='post_title'>" . the_title() . "</span>";
	 endwhile;
endif;
wp_reset_query();
?>
</ul>
</div>

That should better suit? (tested it this time, too.)

Thanks 😛
adding an “else” statement in there should do the trick.

Replace:

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
	}

With:

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
	}
	else{
	echo "<img src='path-to-default-here' alt='default' />";
	}

–double post…sorry…lagged a bit, and for some reason wordpres.org on my side is showing kinda scrambled so I didn’t see it first time around.

No problem man.
If you have it, feel free to add me on skype: [removed]
Go ahead and switch this over to resolved (dropdown menu on the right), if you would be so kind 😛

@wpyogi

Apologies. He had mentioned “I look forward to learning a lot more than I do now and perhaps get you to help me in the future“

Figured it would have been easier to find me on skype (where we could talk through an instant message environment, rather than refreshing/checking back every so often). My mistake. I will remember that for the future 😀 and thank you for the clarification, as I was not 100% sure when I had read that in the guidelines.

@dmkjr
You need to float the image in order to have it display to the left

position: relative;
float: left;

The title is also being displayed outside of the “wanted” container. (if I understand correctly, you switched the “post-title” class with “wanted”)?
I feel this may be something that I had not run into before: echo’ing “the_title()” instead of just calling the function.

Try this: divide the line that echos the title container and the title into these three sections

echo "<span class='wanted'>";
the_title();
echo "</span></span></li>" ;

Since you are going to have a placeholder image, you could also try absolute positioning and fixed-widths (that way the “wanted: -name here-” won’t wrap around the image)

If you wish to try the absolute positioning:

The HTML/PHP

<div id='cssmenu'>
	<ul>
	<?php
	$args = array(
		'posts-per-page' => 10,
		'cat'      => 1,
		'order'    => 'DESC'
	);
	query_posts( $args );
	if (have_posts()) :
		while (have_posts()) : the_post();
			echo "<li><a href='" . get_permalink() . "' class='post-wrap'>
				<span class='post-loop-image'>";
					if ( has_post_thumbnail() ) {
						the_post_thumbnail();
					}
					else{
						echo "<img src='path-to-default-here' alt='default' />";
					}
				echo "</span>";
			echo "<span class='wanted'>";
			the_title();
			echo "</span></span></li>" ;
		 endwhile;
	endif;
	wp_reset_query();
	?>
	</ul>
</div>

THE CSS

.css-menu
{

}
	.css-menu>ul
	{
	background: #F0EFEA;
	border: 1px solid #AAAAAA;
	padding: 4px;
	width: 100%;
	border-radius: 5px;
	box-shadow: 5px 7px 6px #888;
	}
		.css-menu>ul>li
		{
			position: relative;
			display: inline-block;
		}
			.css-menu>ul>li>a
			{
				display: block;
			}
				.css-menu .post-loop-image
				{
					width: 100px;
					height: 75px;
					overflow: hidden;
					position: relative;
				}
					.css-menu .post-loop-image img
					{
						width: 100%;
						height: auto;
						display: block;
						position: absolute;
						top: 0px;
						left: 0px;
					}
				.css-menu .wanted
				{
					width: 55%;
					display: block;
					right: 0px;
					position: absolute;
					top: 15px;
				}

Of course Adjust that as you see fit, but that should be a decent start. 😀
The above will set the Wanted title to absolutely position (it will stay to the right side of the li, and 15px down from the top no matter what. and is only 55% width, so the image does not interfere with the content of the title) and then have the image to the left as it is now, as well as crop it by the outer container (that way you dont have to worry about pictures being distorted, it will simply cut the little bit of hangover off.