Display Featured Image with Title from given Category

Thanks again. I’m trying to implement that now. It’s displaying and I’m getting there with it. WordPress is an awesome engine, and this WordPress community in the 8 years I’ve been apart of it has helped out a lot.

I’ve forgotten more than I’ll ever learn again. I’ll keep this thread open until I get it displaying properly.

Thanks Endlyss.

Endlyss,
If you don’t mind and I’m not being too bothersome yet, you can check out the site and see how it’s displaying (https://hanahanpolice.com) it’s on the sidebar to the left.

I think we are getting there, but I cannot get it to display. I copied your CSS above, edited where it needed and did the same with the html and put it in the widget. It’s displaying, but not as we are trying to get it to.

<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 "<li><a href='" . get_permalink() . "' class='post-wrap'>
				<span class='post-loop-image'>";
					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 "</span>";
			echo "<span class='wanted'>";
			the_title();
			echo "</span></span></a></li>" ;
		 endwhile;
	endif;
	wp_reset_query();
	?>
	</ul>
</div>

That’s what I have after I edited. I had to add to close the loop, but no biggy. I just cannot for the life of me see why the “wanted” attributes aren’t being applied. Should work, in theory.

Ah.

try replacing my .css-menu with #cssmenu in all of the occurrences in my above CSS (sorry I’m used to using dashes and classes.)

#cssmenu
{

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

As always I appreciate the help. I copied this CSS to my Custom CSS block and all went hay-wire. My images were displayed on top of each other and they took up majority of the screen. The title blocks went away too.

I can add it back if you need to see what it did. As familiar as I am with this, I am now lost.

Nevermind, I think I got the style I need/want.

The posts count isn’t working though. I have it set for “5” and it’s still displaying 10. hmm…

I normally end up catching these things before I get too far…I’m sorry.

‘posts_per_page’
underscores instead of dashes.

As for the CSS, except for colors or fonts, remove your other css that you have for #cssmenu, then paste my above, and then start from there. That way you dont have to worry about conflicting styles.