Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

hoping someone here can help a noob.

Ideally I'd like to get a featured post from a category 'Featured Club' to display above three posts from the same custom post type. I've got the following working but for one I'm using two loops where I'm sure one would work, and two, the results under the full width featured post, display in a column and I need them in a row.

Additionally, I have another custom post type that I'd like to display on the same page under this block, with another 'Featured Category', and the way I'm going, I'll end up with four loops.

Look forward to getting some help.

Here's the code:

<h2 class="home-title">Jazz Clubs</h2>
            <?php
                $args = array (
                    'post_type'  => 'jazz clubs',
                    'meta_query'             => array(
                    array(
                    'key'       => '_jazz_club_feature_club',
                        ),
                    ),
                );
                // The Query
                $jazzclubs = new WP_Query( $args );
                // The Loop
                if ( $jazzclubs->have_posts() ) {
                    while ( $jazzclubs->have_posts() ) {
                        $jazzclubs->the_post();
            ?>
            <h3><?php the_title() ?></h3>
                <?php the_post_thumbnail() ?>
                    <div class='post-content'><?php the_excerpt() ?></div> 
            <?php
                    }
                } else {
                    // no posts found
                }       
                wp_reset_postdata();
            ?>
        </div>
    </div>
    <div class="row">
        <div class="small-12 large-4 columns" id="home-club">
        <?php           
        // WP_Query arguments
            $args = array (
                'post_type'  => 'jazz clubs',
                'orderby'    => 'date',
            );
            // The Query
                $jazzclubs = new WP_Query( $args );
                // The Loop
                if ( $jazzclubs->have_posts() ) {
                    while ( $jazzclubs->have_posts() ) {
                        $jazzclubs->the_post();
        ?>
                <div id="homeclub">
                    <div class="homethumb">
                <?php the_post_thumbnail() ?>
                    <h5 id="city"class="h5"><span><?php $terms = get_the_terms( $post->ID , 'city' );
                                                        if ( $terms != null ){
                                                        foreach( $terms as $term ) {
                                                        print $term->name ;
                                                        unset($term);
                                                        } } 
                                                    ?></span></h5>
                    </div>
                    <h4 id="home"class="h4"><a href="<?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>

            <?php
                    }
                } else {
                    // no posts found
                }
                // Restore original Post Data
                wp_reset_postdata();
            ?>
    </div>
share|improve this question
add comment

1 Answer 1

up vote 0 down vote accepted

... 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="<?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="<?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.

share|improve this answer
    
Thank you for all your help Charles. Will digest all this and start testing. Still working on this project... –  JCJ Jan 9 at 20:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.