Trying to achieve row posts below category with multiple loops in custom tax

by

… for one I’m using two loops where I’m sure one would work …

I don’t think one query would be easy to do here. It might also be tough to maintain the code if everything was done in one database query. Five queries (the 4 you run plus the main query WordPress runs) is a lot, but caching can help reduce the average number of queries run per page view.

… and two, the results under the full width featured post, display in a column and I need them in a row.

This can be fixed using CSS. Search Google for horizontal lists for CSS examples of doing this with lists (<ul> and <ol>). It is fairly easy to adapt similar styling to divs.

There are some other things in the code that should be addressed.

First, it looks like the city taxonomy will only have one city in it and testing the result of get_the_terms() for null is not a good enough test. get_the_terms() can return a WP_Error object.

$terms = get_the_terms( $post->ID , 'city' );
if ( $terms != null ) {
    foreach( $terms as $term ) {
        print $term->name ;
        unset($term);
    }
}

Here is a user defined function that echoes the city (or an empty string) to the browser for the current post. Place this function definition at the bottom of the file.

function wpse_117541_the_post_city() {
    global $post;

    $terms = get_the_terms( $post->ID , 'city' );

    if ( $terms && ! is_wp_error( $terms ) )
        echo $terms[0]->name;

    echo '';
}

Note: I didn’t fully test this function.

In your code you can use it like this:

 <h5 id="city" class="h5"><span><?php wpse_117541_the_post_city(); ?></span></h5>

Second, each HTML id attribute must be unique. It cannot appear on the web page more than once.

In your code, this HTML code appears in the row loop:

<div id="homeclub">
    <div class="homethumb">
        <?php the_post_thumbnail() ?>
        <h5 id="city" class="h5"><span><?php wpse_117541_the_post_city(); ?></span></h5>
    </div>
    <h4 id="home" class="h4"><a href="https://wordpress.stackexchange.com/questions/117541/<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
    <h6 id="home" class="h6"><?php the_date( 'F j Y' ); ?></h6>
    <div class="post-content"><?php the_excerpt() ?></div>
</div>

If there is 1 row of 4 columns, there would be 4 homeclub and 8 home id attributes. Using a class name that is the same as an element name doesn’t give you much benefit. In CSS, h4 elements can be styled using the h4 selector. Adding an HTML class of the same name only allows you to use .h4 as a selector.

You might use this instead:

<div class="home-club">
    <div class="thumb">
        <?php the_post_thumbnail() ?>
        <h5 class="city"><span><?php wpse_117541_the_post_city(); ?></span></h5>
    </div>
    <h4><a href="https://wordpress.stackexchange.com/questions/117541/<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
    <h6><?php the_date( 'F j Y' ); ?></h6>
    <div class="post-content"><?php the_excerpt() ?></div>
</div>

In the style sheet, use these CSS selectors to style each part:

.home-club {}
.home-club thumb {}
.home-club h5 {} or .home-club .city {}
.home-club h4 {}
.home-club h6 {}
.home-club post-content {}

{} would contain the styles for that part of the HTML, if any. I used home-club because I prefer separating words in class names with a dash.

Third, you only have to use wp_reset_postdata() once after all your custom loops are done. What this does is reset the post data (that was clobbered with the each call to the_post() method) for the query that WordPress used to get to this page.

You reset the data so that other code, like widget code, for example, will see the data of the main query which is expected and not the data of your custom queries which is not expected. It probably doesn’t hurt to call it several times, but it isn’t needed.