Sort posts alphabetically by custom field value, insert divider between different letters

2 Views

i’m listing all posts of my custom post type “person” alphabetically sorted by the custom field last_name on a page.

How would i insert a divider (e.g. an image of the letter) before a letter range starts?

Read More

Here’s what i’m trying to do:

alphabetical list with dividers

Update:
Here’s the code i’m using: 

<ul class="list-ensemble">
<?php query_posts('post_type=person&post_status=publish&meta_key=last_name&orderby=meta_value&order=ASC'); 
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <li data-id="<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>" class="ensemble-single-link">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail(thumbnail); } ?>
        </a>
    </li>
<?php endwhile; // end of the loop. ?>
</ul>
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Try this:

    <ul class="list-ensemble">
<?php query_posts('post_type=person&post_status=publish&meta_key=last_name&orderby=meta_value&order=ASC'); 
$current_letter = '';
if ( have_posts() ) while ( have_posts() ) : the_post();
    $last_name = get_post_meta( $post->ID, 'last_name', true );
    $letter = strtolower( substr( $last_name, 0, 1 ) );
    if ( $letter != $current_letter ) {
        $current_letter = $letter; ?>
        <li class="letter">
            <img src="<?php echo $letter; ?>.jpg" alt="<?php echo $letter; ?>" title="<?php echo $letter; ?>">
        </li>
    <?php } ?>
    <li data-id="<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>" class="ensemble-single-link">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumbnail' ); } ?>
        </a>
    </li>
<?php endwhile; // end of the loop. ?>
</ul>

    For each post in the loop, it retrieves the last_name postmeta field (this won’t add any queries to the page because WordPress caches the postmeta), then checks the first letter of it. If it’s a new letter, it outputs a list element with an image named after the letter (e.g. f.jpg).

  2. Well since WordPress’s sorting features don’t include that kind of functionality, you should probably ask Matt Mullenweg… haha…

    No, but really, you can probably use query_posts() for each letter (in other words call the loop up to 26 times, once for each letter. Then, for each loop, make include some code that’ll check to see if the first letter of the post meta_value fits with the corresponding letter. If there are no posts that match that letter, then make just skip that letter.

    You currently only have one loop. You might have to write a for() loop that will in turn generate each wordpress loop.

    Something like this (just a rough draft):

    <ul class="list-ensemble">
    <? for ($i=65; $i<91; $i++) : // 65 through 90 represent the uppercase alphabet
        query_posts('post_type=person&post_status=publish&meta_key=last_name&orderby=meta_value&order=ASC'); 
        //PUT SOME CODE HERE TO CHECK IF THE FIRST LETTER IS EQUAL TO $i
        //Set some variable $letter_matches == true if the letter matches.
    ?>
        <h3 class="letter">
            <?php //ECHO THE LETTER CORRESPONDING TO $i HERE ?>
        </h3>
        <?
        if ( have_posts() and $letter_matches ) while ( have_posts() ) : the_post(); ?>
            <li data-id="<?php the_ID(); ?>">
                <a href="<?php the_permalink(); ?>" class="ensemble-single-link">
                    <?php if ( has_post_thumbnail() ) { the_post_thumbnail(thumbnail); } ?>
                </a>
            </li>
        <?php endwhile; // end of the loop. ?>
<?endfor; ?>
</ul>

    So essentially you will have up to 26 wordpress loops in the page. I’m not sure how straining that is on the server, but it should work. It’s the first thing I thought of. Lemme know how it goes!