Display Featured Image with Title from given Category

Check out this article
https://codex.www.ads-software.com/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.

Endlyss,
First and foremost thanks for the help. I basically went straight to bad aggervated after I couldn’t get this last night.

This is what I have put in, and it’s not displaying anything. My category is “11”.

<div id='cssmenu'>
<ul>
<?php

$args = array(
'posts-per-page' => 10,
'cat'      => 11,
'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(); ?>

?>
</ul>
</div>

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.)

Man, you are awesome!. It works flawlessly. Is there a way if there is no featured image set it will display a default image? Such as a face with a question mark over it? I can make the image, just don’t know how to call upon that image.

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' />";
	}

I could not have found better help. I’m pretty decent when it comes to figuring out why something in php is broken, but I’ve broken this now too many times and needed to reach our for help.

Two things though, if you don’t mind clarifying. Everything works as advertised. However, how do I get the entire
to have the rollover effect of the <div> tag. The rollover (entire div) should be a hyperlink to the post. <a href=… etc etc in there somewhere.)

Other thing is styling. I know it’s going to be echo, just decorate where you have the two echo spots now? I need the get the image smaller, float the image and have the text (title) to the right. (https://hanahanpolice.com for a preview).

Guess I Should have atleast posted the code.

<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'><li>";
			if ( has_post_thumbnail() ) {
	the_post_thumbnail();
	}
	else{
	echo "<img src='https://i0.wp.com/hanahanpolice.com/wp-content/uploads/2013/04/unknown_person.png?fit=1200%2C1200' alt='default' />";
	}
		echo "</div>";
		echo " <span class='post_title'>" . the_title() . "</span></li>";
	 endwhile;
endif;
wp_reset_query();
?>
</ul>
</div>

actually your styling would go into the regular style.css file(unless you are customizing a pre-made theme, then i would create a custom.css so that it is not over-written when updating at a later date).
Just use the above ID’s and classes.

For CSS, you grab the id or class from the HTML
Classes are signified with a period

.class-name-here

ID’s are signified with a pound sign

#id-name-here

So for example, then the above div id “cssmenu” in the html would look like this in the css file.

#cssmenu{
CSS goes in between these.
}

As for wrapping the div in a permalink, we would need to replace a few things (for example div to span, so that it would render properly in an anchor tag.):

<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='post_title'>" . the_title() . "</span></span></a></li>" ;
	 endwhile;
endif;
wp_reset_query();
?>
</ul>
</div>

–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.

Endlyss, again. You have been extremely helpful and the fastest to reply in support I have ever seen. I look forward to learning a lot more than I do now and perhaps get you to help me in the future ??

Thanks again!

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 ??

@endlyss –

feel free to add me on skype:

Please keep help on these forums as per the forum guidelines –

https://codex.www.ads-software.com/Forum_Welcome#Helping_Out

Helping out here is great and much appreciated, but asking people to contact you off the forums is really discouraged here.

Endlyss, one last thing.

I absolutely feel ridiculous now btw. I am trying to style the php to where it will display the image and then the text right next to it, wrapping it on the right instead of underneath the image.

IMAGE TITLE
IMAGE TITLE
IMAGE

IMAGE TITLE
IMAGE TITLE
IMAGE

Something like that. I can’t seem to figure it out without using tables, which I absolutely don’t want to do.

right now it’s just displaying

IMAGE
IMAGE
IMAGE TITLE
TITLE TITLE

IMAGE
IMAGE
IMAGE TITLE
TITLE TITLE

@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.