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.

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.. Slider Screenshot

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.

share|improve this question
    
Just for a little clarification, you want help converting the above static HTML into a PHP loop that selects posts with a particular meta key and builds the appropriate HTML? –  t31os Apr 10 '11 at 9:48
    
Correct.. thanks for clarification.. I'll update the question.. –  mauri Apr 10 '11 at 9:57
    
Are you using the WordPress featured image as your featured image, or wanting to pull images from elsewhere? Are you using frames? (the _parent target is no use here unless you're utilising frames).. –  t31os Apr 10 '11 at 11:02
    
I'll add an example once you've answered the questions in my comment above... ;) P.S. Can you add the code(to the question) that you use to save the meta data for featured posts. –  t31os Apr 10 '11 at 11:41
    
Hello @t31os, thanks for the reply. Yes, im using the wordpress featured image. –  mauri Apr 11 '11 at 3:37

1 Answer 1

up vote 2 down vote accepted

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

share|improve this answer
    
Hello t31os, the code you provided DID work, everything is working fine. you are awesome! the only adjustment that I had to implement was calling the specific post thumbnail .. and that was all.. . I have one question. how do I only show the last 10 post marked as a "featured" ? –  mauri Apr 12 '11 at 0:46
    
I just found how, codex.wordpress.org/Function_Reference/WP_Query , just added 'posts_per_page' => '7' , ill update the code just for reference.. THANKS A LOT!!! –  mauri Apr 12 '11 at 7:55
    
Glad to hear it's all working nicely for you... i did mention it would need adjustment.. ;) It was only intended as a sample to build onto.. –  t31os Apr 12 '11 at 9:29

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.