display posts under their categories in two columns

Question

I have created a Member Directory page and I am attempting to display a list of members under their category name, alphabetically in two columns (div.members-colA and div.members-colB). The members should populate div.members-colA until the rounded post count reaches 1/2, at which time the posts should populate div.members-colB. My code isn't displaying the content this way and I am stumped. Obviously a PHP newbie so any help would be greatly appreciated!! You can view the page on the development server here. http://www.airwaysdigital.com/sauganash/member-directory-2/

CSS:
.members-colA{
width:49%;
float:left;
}
.members-colB{
width:49%;
float:right;
}
.members-colC{
width:100%;
}


PHP:
<div class="members-colA">

               <?php
                //get all categories then display all posts in each term
                $taxonomy = 'category';
                $param_type = 'category__in';
                $term_args = array(
                  'orderby' => 'name',
                  'order' => 'ASC'
                );
                $terms = get_terms($taxonomy, $term_args);
                if ($terms) {
                  foreach( $terms as $term ) {
                    $args=array(
                      "$param_type" => array($term->term_id),
                      'post_type' => 'members',
                      'post_status' => 'publish',
                      'posts_per_page' => -1,
                      'caller_get_posts'=> 1,
                      'orderby' => 'title',
                      'order' => 'ASC'
                      );
                    $my_query = null;
                    $my_query = new WP_Query($args); 
                    $i = 0;
                    if( $my_query->have_posts() ) { 
                        if ($i == 0) ?>
                        <h3 class="member-category"><?php echo $term->name; ?></h3>
                        <?php 
                            while ($my_query->have_posts()) : $my_query->the_post(); 
                                echo '<div class="members-colC">'; ?>
                                <p class="member-cat bold"><?php the_title(); ?></p>
                                <?php the_content(); 
                                echo '</div>';
                                if ($i == round($my_query->post_count / 2)) echo '</div><div class="members-colB">';
                                if ($i == round($my_query->post_count)) echo '</div>';
                                $i++;                            
                            endwhile;
                    }
                  }
                } ?>
                <?php wp_reset_postdata(); ?>

               </div><!-- end .members-colB -->

Wissam El-Kik · Answer 1 · 2014-05-08T16:56:19.687

0

CSS:

.members-column {width:49%;}
.members-wrapper {width:100%; clear:both; float:none;}

/**
 * @info Float
 */
.float-left {float:left;}
.float-right {float:right;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

PHP:

<?php 
$iterator = 0;
$column1_html = '';
$column2_html = '';
while ($my_query->have_posts()) : $my_query->the_post();
$title = the_title('','', false);
$html_str = '<p class="member-cat bold">' . $title . '</p>';
if($iterator % 2){
   // write in one column
   $column1_html .= $html_str;
} else {
   // write in the other column
   $column2_html .= $html_str;
}
$iterator++;                        
endwhile;
?>
<div class="members-wrapper">
<div class="members-column float-left"><?php echo htmlspecialchars($column1_html); ?></div>
<div class="members-column float-right"><?php echo htmlspecialchars($column2_html); ?></div>
<div class="clearfix"></div>
</div>

edited May 08 '14 at 16:56

answered May 07 '14 at 15:07

Wissam El-Kik

2,469
1
17
21

Thanks for a quick response Wissam! I am going to have about 70 members listed (and more that show up dynamically as they become members). I want them to populate the two columns evenly (while their category "titles" are in alphabetical order). Does that give you enough info? – Brian Seifert May 07 '14 at 17:16
I want the columns to be displayed in two even columns (each 49% width of the content area, floated next to each other) similar to the way they look in the development phase seen here, http://www.airwaysdigital.com/sauganash/member-directory-2/ – Brian Seifert May 07 '14 at 17:49
I am still having a problem in that I need the category titles to be listed only once while the posts within that category are listed below them. So the category title and the posts are populated within two divs that are 49% of their parent and floated left. Any more help would be much appreciated! – Brian Seifert May 07 '14 at 21:13
I don't know the structure of your database, but you need to move the code I gave you in a For Loop. You need to do a query for all the categories and then use the For Loop. Inside the For Loop you'll have to create a different query which gets only the posts related to a specific category. You'll display the category title at the beginning of the For Loop. – Wissam El-Kik May 08 '14 at 22:09
These 2 answers might help you in the DB query: - http://wordpress.stackexchange.com/questions/43426/get-all-categories-and-posts-in-those-categories - http://stackoverflow.com/questions/13071035/sql-query-to-extract-all-wordpress-posts-with-categories Concerning the second link, I do recommend using the Wordpress functions to query the database instead of building your own functions. – Wissam El-Kik May 08 '14 at 22:17

display posts under their categories in two columns

1 Answers1