WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Display Featured Image with Title from given Category (23 posts)

  1. dmkjr
    Member
    Posted 6 months ago #

    Hello ladies and gents!

    It's been awhile since I've been around here looking for help.

    I am trying to find the code that would get a list (latest 5 to 10) of posts from a given category. This list will be displayed on my homepage with the featured image and the Title.

    IMAGE IMAGE IMAGE
    IMAGE IMAGE IMAGE TITLE TITLE TITLE
    IMAGE IMAGE IMAGE

    IMAGE IMAGE IMAGE
    IMAGE IMAGE IMAGE TITLE TITLE TITLE
    IMAGE IMAGE IMAGE

    Any help would be greatly appreciated.

  2. Endlyss
    Member
    Posted 6 months ago #

    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.

  3. dmkjr
    Member
    Posted 6 months ago #

    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>
  4. Endlyss
    Member
    Posted 6 months ago #

    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 :P

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

  5. dmkjr
    Member
    Posted 6 months ago #

    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.

  6. Endlyss
    Member
    Posted 6 months ago #

    Thanks :P
    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' />";
    	}
  7. dmkjr
    Member
    Posted 6 months ago #

    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. (http://hanahanpolice.com for a preview).

  8. dmkjr
    Member
    Posted 6 months ago #

    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='http://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>
  9. Endlyss
    Member
    Posted 6 months ago #

    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>
  10. Endlyss
    Member
    Posted 6 months ago #

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

  11. dmkjr
    Member
    Posted 6 months ago #

    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!

  12. Endlyss
    Member
    Posted 6 months ago #

    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 :P

  13. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    @Endlyss -

    feel free to add me on skype:

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

    http://codex.wordpress.org/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.

  14. dmkjr
    Member
    Posted 6 months ago #

    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.

  15. dmkjr
    Member
    Posted 6 months ago #

    right now it's just displaying

    IMAGE
    IMAGE
    IMAGE TITLE
    TITLE TITLE

    IMAGE
    IMAGE
    IMAGE TITLE
    TITLE TITLE

  16. Endlyss
    Member
    Posted 6 months ago #

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

  17. dmkjr
    Member
    Posted 6 months ago #

    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.

  18. dmkjr
    Member
    Posted 6 months ago #

    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 (http://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.

  19. dmkjr
    Member
    Posted 6 months ago #

    <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='http://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.

  20. Endlyss
    Member
    Posted 6 months ago #

    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;
    				}
  21. dmkjr
    Member
    Posted 6 months ago #

    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.

  22. dmkjr
    Member
    Posted 6 months ago #

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

  23. Endlyss
    Member
    Posted 6 months ago #

    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.

Reply

You must log in to post.

About this Topic