Ready to get started?Download WordPress


Properly Position Category Article Listings (4 posts)

  1. Gemfruit
    Posted 1 year ago #

    I'm currently formatting my category pages to list all posts, with thumbnail, and a certain amount of space between them. I understand the logic of PHP and CSS, but I'm not very good at either. I'd like to know how to properly position this page, with each article having a set vertical spacing, with the line separating posts between each.

    I essentially want a set vertical height that each post can take up, but I'm not sure how to write the proper CSS for that, and how to apply the class to this bit of php from my category.php page (category-clubs.php at the moment). Here's the PHP where the posts are being laid out:

    		$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    		<?php while (have_posts()) : the_post(); ?>
    		<div <?php post_class() ?>>
                    <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(260,200), array("class" => "alignleft post_thumbnail")); } ?>
    				<h2 class="title" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    				<div class="entry">
    					<?php the_excerpt() ?>
    		<?php endwhile; ?>

    The first bit is me listing the posts alphabetically, which is probably not done optimally, but that's all I could find. The while loop itself lists the posts, but is using the_post function as the class, which doesn't allow me to use my own. Do I wrap all of this in another div? Do I alter the_post function? It's a pretty simple result I'm looking for, I'm just not sure how to apply it.

    I love explanations, and catch on quick, so any effort to help me here won't go wasted for future issues :)

  2. but is using the_post function as the class, which doesn't allow me to use my own

    you can add your own css class(es) to 'post_class()';


  3. Gemfruit
    Posted 1 year ago #

    So the_post's parameter takes either a class, or array of classes? I program in a few other languages (AS3, Java, Haxe), so that makes sense if that's how it functions.

    I checked the function reference before posting and didn't see the_post listed, what's the deal with that?

    As for my actual class, what's the best way to define the vertical spacing I desire? set a px value for height? I can alter CSS fine, but I'm not overly familiar with all of the properties, and which ways are best to approach an issue (such as absolute positions, px, or other units).

  4. So the_post's parameter takes either a class, or array of classes?

    the_post() does not take any parameters;

    review the Codex info about post_class() http://codex.wordpress.org/Function_Reference/post_class

    define the vertical spacing

    I would work with margin http://www.w3schools.com/css/css_margin.asp

Topic Closed

This topic has been closed to new replies.

About this Topic