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.

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?

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>
share|improve this question
1  
Your inclusion of an image is nice, but it's not clear exactly what you want to do or on what page in your site you want to do it. Are you coding things inside of The Loop, will you have all posts on the same page, etc. etc.? Can you post the code you are currently trying to use as an update to your question? More info will help. –  MikeSchinkel Feb 26 '11 at 22:44
    
I'm trying to have an alphabetical list of people. For that, i created a custom post type "person". Each person is a single post. On a page i generate a list of all persons (their post thumbnail). My question is, how i can insert dividers (in my case: the green images containing a letter) between the posts thumbnails. Maybe with a separate query for each letter? Maybe with javascript? –  Christoph Feb 26 '11 at 23:41
add comment

2 Answers

up vote 4 down vote accepted

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).

share|improve this answer
    
Oh Simon, that's brilliant! Thank you very much! –  Christoph Feb 27 '11 at 17:32
add comment

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!

share|improve this answer
    
Hey trusktr, thanks! I also thought about doing 26 loops, but i was hoping there is a more neat solution. Plus: i add a filter, that replaces the actual set of persons with a different set via ajax call. I'm worried about performance. –  Christoph Feb 27 '11 at 12:56
    
Shoot, if you're using AJAX, you should just make a page (wth no header or footer) that outputs all the employees alphabetically. Then (if you're using jQuery) grab all the content from that page, then do a loop that goes through each post's title and as soon as it encounters the first instance of each letter, it can inject the letter's html before that post, then inject it on your site. If you do it that way, it's slightly more complicated, but less demanding on the server. I also updated the code above. –  trusktr Feb 27 '11 at 13:04
    
Hey, can you link to your site to see it in action? :D –  trusktr Mar 1 '11 at 22:50
1  
Here you can see it in action: landestheater-oberpfalz.de/ueber-uns/ensemble –  Christoph Jun 6 '11 at 15:09
    
Looks very nice! –  trusktr Jun 7 '11 at 1:40
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.