I'm using a plugin that displays post and shows them in a certain area on my site, such as the sidebar or anywhere i put the <?php;?> code, but only if the author that is writing the post clicks the check box in the new post window.

The plugin comes with an options page that allows me to set how many post to display.

Here is the code in the plugin that displays the post.


    $m_slider_sort = get_option('sort'); if(empty($c_slider_sort))    {$c_slider_sort = "post_date";}
    $m_slider_order = get_option('order'); if(empty($c_slider_order)){$c_slider_order = "DESC";}
    $m_slider_post_limit = get_option('limit_posts'); if(empty($m_slider_limit_posts)){$m_slider_limit_posts = "-1";}

    global $wpdb;

    global $post;

    $args = array( 'meta_key' => 'feat_music', 'meta_value'=> '1', 'suppress_filters' => 0, 'post_type' => array('post', 'page'), 'orderby' => $m_slider_sort, 'order' => $m_slider_order, 'numberposts'=> $m_slider_post_limit);

    $myposts = get_posts( $args );

    foreach( $myposts as $post ) :  setup_postdata($post);

        $m_slider_custom = get_post_custom($post->ID);

        $m_slider_thumb = m_slider_get_thumb("featmusic");



<?php endforeach; ?>    

I will be showing seven post. I want the first post to be styled differently than the next six post. Does anyone have any idea as to how to alter the code above so that I can style the first post differently from the next 6 post.

Also this line $m_slider_thumb = m_slider_get_thumb("featmusic"); grabs the thumbnail for the post but I need two of them, one for the first post and another for the next six post. This part of php coding I am not familiar with.


You don't need to alter the code for different formatting, you can simply use the :first-child pseudoclass in css. The foreach loop will, presumably, generate similar blocks of code, structured like this:

<div class="all-my-posts">
    <article class="my-slider-post">
    <article ..>

Now you can simply addres the first <article> block with css like this:

.my-slider-post:first-child h1 {...}
.my-slider-post:first-child h2 {...}

Another approach would be to add a counter to the foreach loop like this

foreach (...) {
    if ($i=1) { 
         echo '<div class="first-post>';
         { do your thing for the first post }
         echo '</div>';
    else { ... }

This will give you an extra div to base your css on and allows you different function calls for the first and other posts to change the thumbnail.

| improve this answer | |
  • I don't think that's the correct answer. I'm not doing simple styling so using fist-child is not an option. This image explains what I am trying to accomplish. --> i.stack.imgur.com/cawPS.png @cjbj – Terrell Anderson Jun 11 '16 at 10:13
  • The image looks like styling only. But otherwise the second approach would completely split the loop. – cjbj Jun 11 '16 at 10:29
  • is this the correct way to do this gist.github.com/mihadaiko/d9888ce360b27324bd6d75dbe81b7235 – Terrell Anderson Jun 13 '16 at 17:55
  • Looks good. But you only know for sure, of course, once you have it working the way you want to. I can't completely guess what you are after. – cjbj Jun 13 '16 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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