PHP loop that selects posts with a particular in-post option

Question

Im trying to build a Featured post slider to show any post that i mark as a "featured" (with a in-post option) regardless the category or tag type... Im new to wordpress and although I understand a little bit php language im not a coder :(

The slider is already working. The question is, how can can i build this slider with a loop to show the last 7 post marked as "featured" with the corresponding featured image?

I already have the in-post option set up in a metabox in the post edit page, also the image size configured in my function.php ...

Im using wordpress 3.1 with the genesis framework.

Here is the slider code

<div class="slider">
    <ul class="main-wapper">
      <li> <img src="path to featured img" title="the post title" height="300" width="315">
        <div class="main-item-desc">
          <h2><a target="_parent" title="Post Title" href="post link">POST TITLE</a></h2>
          <p>Post Description limited to 150 character</p>
        </div>
      </li>
      <li> <img src="path to featured img" title="the post title" height="300" width="315">
        <div class="main-item-desc">
          <h2><a target="_parent" title="Post Title" href="post link">POST TITLE</a></h2>
          <p>Post Description limited to 150 character</p>
        </div>
      </li>
      <li> <img src="path to featured img" title="the post title" height="300" width="315">
        <div class="main-item-desc">
          <h2><a target="_parent" title="Post Title" href="post link">POST TITLE</a></h2>
          <p>Post Description limited to 150 character</p>
        </div>
      </li>
      <li> <img src="path to featured img" title="the post title" height="300" width="315">
        <div class="main-item-desc">
          <h2><a target="_parent" title="Post Title" href="post link">POST TITLE</a></h2>
          <p>Post Description limited to 150 character</p>
        </div>
      </li>
      </ul>
  </div>
  <div class="navigator-outer">
    <ul class="navigator">
      <li>
        <div> <img src="img src" />
          <h3>Content Title H3</h3>
          <p><span class="date">20.01.2010</span> | <span class="category">CATEGORY NAME</span></p></div>
      </li>
      <li>
        <div> <img src="img src" />
          <h3>Content Title H3</h3>
          <p><span class="date">20.01.2010</span> | <span class="category">CATEGORY NAME</span></p></div>
      </li>
      <li>
        <div> <img src="img src" />
          <h3>Content Title H3</h3>
          <p><span class="date">20.01.2010</span> | <span class="category">CATEGORY NAME</span></p></div>
      </li>
      <li>
        <div> <img src="img src" />
          <h3>Content Title H3</h3>
          <p><span class="date">20.01.2010</span> | <span class="category">CATEGORY NAME</span></p></div>
      </li>

    </ul>
  </div>
</div>

here is a screenshot of the slider..

UPDATE: in my functions.php files i have this..

// Add new image sizes
add_image_size('Slider', 315, 300, TRUE);

require_once(CHILD_DIR . '/lib/admin/inpost-settings.php');
wich is the code below..

inpost-settings.php

$prefix = 'myslider_';

$meta_box = array(
    'id' => 'slider-meta-box',
    'title' => 'Featured Slider Options',
    'page' => 'post',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(
        array(
            'name' => 'Show in featured slider',
            'id' => $prefix . 'show_post_slider',
            'type' => 'checkbox'
        )
    )
);
add_action('admin_menu', 'mytheme_add_box');

// Add meta box
function mytheme_add_box() {
    global $meta_box;

    add_meta_box($meta_box['id'], $meta_box['title'], 'mytheme_show_box', $meta_box['page'], $meta_box['context'], $meta_box['priority']);
}

// Callback function to show fields in meta box
function mytheme_show_box() {
    global $meta_box, $post;

    // Use nonce for verification
    echo '<input type="hidden" name="mytheme_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';

    echo '<table class="form-table">';

    foreach ($meta_box['fields'] as $field) {
        // get current post meta data
        $meta = get_post_meta($post->ID, $field['id'], true);

        echo '<tr>',
                '<th style="width:20%"><label for="', $field['id'], '">', $field['name'], '</label></th>',
                '<td>';
        switch ($field['type']) {
             case 'checkbox':
                echo '<input type="checkbox" name="', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';
                break;
        }
        echo     '<td>',
            '</tr>';
    }

    echo '</table>';
}
add_action('save_post', 'mytheme_save_data');

// Save data from meta box
function mytheme_save_data($post_id) {
    global $meta_box;

    // verify nonce
    if (!wp_verify_nonce($_POST['mytheme_meta_box_nonce'], basename(__FILE__))) {
        return $post_id;
    }

    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $post_id;
    }

    // check permissions
    if ('page' == $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id)) {
            return $post_id;
        }
    } elseif (!current_user_can('edit_post', $post_id)) {
        return $post_id;
    }

    foreach ($meta_box['fields'] as $field) {
        $old = get_post_meta($post_id, $field['id'], true);
        $new = $_POST[$field['id']];

        if ($new && $new != $old) {
            update_post_meta($post_id, $field['id'], $new);
        } elseif ('' == $new && $old) {
            delete_post_meta($post_id, $field['id'], $old);
        }
    }
}
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
 return $post_id;
}

Thanks in advance.

Answer 1

All you need is a simple query and to iterate over that query a couple of times so you can build the two required lists. WP_Query has a convenient method for resetting the pointer in the posts array, so you can loop over it again, called rewind_posts though i believe inside custom loops you have to reference the method directly..

Anyway, here's the kind of thing you're looking for, simply make adjustments as necessary..

<?php   
    $featured = new WP_Query;
    $featured->query( array( 
        'meta_query'  => array( 
            array(
                'key'     => 'myslider_show_post_slider',
                'value'   => array('on','1'),
                'compare' => 'IN',
                'type'    => 'CHAR',
            )
        ),
        'post_type'       => 'post',
        'post_status'     => 'publish',
        'ignore_sticky_posts' => '1',
        'posts_per_page' => '7' //The number of post in the slider.
    ) );
    if( $featured->have_posts() ) :
    ?>

    <div class="slider">
        <ul class="main-wapper">

        <?php
        while( $featured->have_posts() ) : $featured->the_post();
        ?>

        <li>
            <?php the_post_thumbnail(); ?>
            <div class="main-item-desc">
                <h2><a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p>Where's this description suppose to be coming from?</p>
            </div>
      </li>

        <?php
        endwhile;
        $featured->rewind_posts();
        ?>

        </ul>
    </div>
    <div class="navigator-outer">
        <ul class="navigator">

        <?php
        while( $featured->have_posts() ) : $featured->the_post();
        ?>

        <li>
            <div>
                 <?php the_post_thumbnail('Slider'); ?>
                <h3><?php the_title(); ?></h3>
                <p><span class="date"><?php the_time( 'd.m.Y' ); ?></span> | <span class="category"><?php the_category(','); ?></span></p>
            </div>
        </li>

        <?php
        endwhile;
        ?>

        </ul>
    </div>

    <?php
    endif; 
    ?>

Firstly, there was a stray closing DIV in the HTML you posted, so i simply removed that from the code above.

Secondly, the checkbox does not have a value specified, in such cases a checkbox isn't given a specific value, the browser assigns the checkbox one, i'm not sure whether there's a common value that all browsers will use, but Firefox produces the value on, but i accounted for the possibility that the browser may assign a value of 1, ideally the checkbox should be given a implicit value to ensure consistent behaviour, eg..

echo '<input type="checkbox" value="1" name="', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';

Any questions, lemme know..