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.

1 Answer 1


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.

  • 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 Jun 11, 2016 at 10:13
  • The image looks like styling only. But otherwise the second approach would completely split the loop.
    – cjbj
    Jun 11, 2016 at 10:29
  • is this the correct way to do this gist.github.com/mihadaiko/d9888ce360b27324bd6d75dbe81b7235 Jun 13, 2016 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, 2016 at 19:09
  • there's no reason first-child couldn't be used here, .all-my-posts .article:first-child is the same as .all-my-posts .first-post but does not require the HTML to be changed. If there are other elements that are not article tags then :first-of-type can be substituted. Likewise this can be used to display both thumbnails, hiding one and showing the other dependent on wether it is the first post or not
    – Tom J Nowell
    Aug 7 at 14:14

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.