3

i make a wordpress theme i make a grid structure show below i have this grid structure

Grid Structure

it contain two rows and every row has three column i want to show my wordpress random posts in this grid

this is my code

               <div class="row">
                     <div class="col-xs-12">
                         <div class="rst-mediagrid">
                                <div class="div">

                                                <?php $args = array(
                                                      'posts_per_page'   => 6,
                                                       'offset'           => 0,
                                                       'category'         => '2',
                                                       'category_name'    => '',
                                                       'orderby'          => 'date',
                                                       'include'          => '',
                                                       'exclude'          => '',
                                                       'meta_key'         => '',
                                                       'meta_value'       => '',
                                                       'post_type'        => 'post',
                                                       'post_mime_type'   => '',
                                                       'post_parent'      => '',
                                                       'author'    => '',
                                                       'post_status'      => 'publish',
                                                       'suppress_filters' => true 
                                                );


                                                global $post;
                                                $post = get_post($args);

                                                $next_post = get_adjacent_post( true, '', false, 'taxonomy_slug' ); 

                                              ?>


                            <div class="rst-col rst-col-50">
                                <div class="rst-postpic">
                                    <?php echo get_the_post_thumbnail($post->ID); //latest post thumbnail ?>
                                </div>
                            </div>
                                                        <?php //endif; ?>

                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic rst-postvideo">

                                    <?php echo get_the_post_thumbnail($next_post->ID); ?>
                                </div>
                            </div>

                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic">
                                    <?php echo get_the_post_thumbnail($next_post->ID); ?>
                                </div>
                            </div>

                            <div class="clear"></div>
                        </div>
                        <div class="div">
                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic">
                                    <?php echo get_the_post_thumbnail($next_post->ID); ?>
                                </div>
                            </div>
                            <div class="rst-col rst-col-25">
                                <div class="rst-postpic rst-postvideo">
                                    <?php echo get_the_post_thumbnail($next_post->ID); ?>
                                </div>
                            </div>
                            <div class="rst-col rst-col-50">
                                <div class="rst-postpic">
                                    <?php echo get_the_post_thumbnail($next_post->ID); ?>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>

the above code repeat the same image i want to show thumbnails in a perfact order like first row has three columns and first column has latest image second column has image of previous post and third column has image of previous of previous mean 3rd post from latest post and second row also has same things if you have better suggestion kindly tell me

  • 2
    Has anyone really been far as decided to use even go want to do look more like? – TheDeadMedic Oct 1 '15 at 10:40
  • this is my code i try many solutions from stackoverflow and many other resources from codex but issue not resolved – Hafiz Usman aftab Oct 1 '15 at 10:43
  • What I understand here is (1) grid of 2x3 where you want to show random posts as you said (2) and again you want latest post in r1xc1 and so on. So if I assume there are 10 posts in cat 2, r1xc1 = 10, r1xc2 = 9 and so on. is it? If yes whats the big deal here use wp_get_recent_posts to make this work. If not then please elaborate your question. – Webloper Oct 1 '15 at 13:35
  • @RaviKumar yes you got my point but issue is that r1xc1=10 and is also show r1xc2=10 and r1xc3=10 these all show number 10 posts please tell me how to code this you got my point i am highly thankfull to you – Hafiz Usman aftab Oct 1 '15 at 18:21
  • Would it be correct to say "Given the ID of the current post, how do I get next 5 posts and show their thumbnails?" I'd also suggest you avoid changing the $post variable – Tom J Nowell Oct 26 '15 at 14:23
2

Here is the template layout and code for your original question. I am using wp_get_recent_posts as it gives me recent posts from the category as you wanted, if not change orderby to rand for random posts, as wp_get_recent_posts return posts by default in array form you can also have a choice to shuffle them.

I checked your answer its not consistent and too much replication of codes as your first post uses rst-postpic and than rst-postinfo and so on, instead of this use post type or some meta field to determine the type of post and according to that print information about post.

Hope it helps and gives you an idea to proceed further.

Happy coding!

<?php
    $args = array(
         'numberposts' =>    6,
         'category'    =>    0,
         'post_status' =>    'publish',
         'orderby'     =>    'post_date',
    );
    $recent_post = wp_get_recent_posts( $args );

    //shuffle( $recent_post );    // Just for randomness
?>
<div class="row">
    <div class="col-xs-12">
        <div class="rst-mediagrid">
            <?php
                 foreach ($recent_post as $key => $value) {
                     $class_col_50    =   $key == 0 || $key == count( $recent_post ) - 1 ? ' rst-col-50' : ' rst-col-25';
                     $class_col_video =   $key % 3 == 1 ? ' rst-postvideo' : '';

                     if ( $key % 3 === 0 )
                         echo '<div class="div">';

                     echo "<div class='rst-col$class'>";
                         echo "<div class='rst-postpic$class_col_video'>";
                             echo  $value['ID'], ' ';
                         echo '</div>';
                     echo '</div>';

                     if ( $key % 3 === 2 )
                         echo '<div class="clear"></div></div>';
                 }
            ?>
        </div>
    </div>
</div>
  • wao Ravi you got Awesome job thanks man love you :P – Hafiz Usman aftab Oct 3 '15 at 5:28
0

at last i found a solution of my question if some one else have same issue then use this

<?php 

global $post;

$loop = new WP_Query( array( 'posts_per_page' => 9,'orderby'=>rand) );
$posts = array();

while ( $loop->have_posts() ) : 

    $items = array();

    $items['link']=wp_get_attachment_url( get_post_thumbnail_id( $post->ID ));
    $items['Image'] = get_the_post_thumbnail($loop->the_post());
    $items['LinkPost']=get_permalink($post->ID);               
    $items['Title']=get_the_title($post->ID);
    $items['PostTime']=get_the_time('M d,Y', $post->ID);

    array_push($posts, $items);

endwhile;

for($i = 1; $i< count($posts); $i++){
    ?>

    <?php

    if($i==1){
    ?>
        <div class="div">
            <div class="rst-col rst-col-50">
                <div class="rst-postpic">
                    <a href="<?php echo $posts[$i]['LinkPost']; ?>">
                        <img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
                    </a>
                </div>
                <div class="rst-postinfo">
                    <a href="#"><span>Sport</span></a>
                    <h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
                </div>
            </div>
    <?php //endif; ?>

            <div class="rst-col rst-col-25">
                <div class="rst-postpic rst-postvideo">
                    <a href="<?php echo $posts[$i+1]['LinkPost']; ?>">
                        <img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
                    </a>
                </div>
                <div class="rst-postinfo">
                    <a href="#"><span>Sport</span></a>
                    <h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
                </div>
            </div>

            <div class="rst-col rst-col-25">
                <div class="rst-postpic">
                    <a href="<?php echo $posts[$i+2]['LinkPost']; ?>">
                        <img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
                    </a>
                </div>
                <div class="rst-postinfo">
                    <a href="#"><span>Sport</span></a>
                    <h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
                    <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
                </div>
            </div>

            <div class="clear"></div>

        </div><!-- end first row-->
    <?php } //end if ?>

    <?php
    if ($i == 2 ) {
    ?>

    <div class="div">
        <div class="rst-col rst-col-25">
            <div class="rst-postpic">
                <a href="<?php echo $posts[$i]['LinkPost']; ?>">
                    <img src="<?php echo $posts[$i+1]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
                </a>
            </div>
            <div class="rst-postinfo">
                <a href="#"><span>Sport</span></a>
                <h6><a href="<?php echo $posts[$i]['LinkPost']; ?>"><?php echo $posts[$i]['Title']; ?></a></h6>
                <time><i class="fa fa-clock-o"></i><?php echo $posts[$i]['PostTime']; ?></time>
            </div>
        </div>

        <div class="rst-col rst-col-25">
            <div class="rst-postpic rst-postvideo">
                <a href="<?php echo $posts[$i+1]['LinkPost']; ?>">
                    <img src="<?php echo $posts[$i+2]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
                </a>
            </div>
            <div class="rst-postinfo">
                <a href="#"><span>Sport</span></a>
                <h6><a href="<?php echo $posts[$i+1]['LinkPost']; ?>"><?php echo $posts[$i+1]['Title']; ?></a></h6>
                <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+1]['PostTime']; ?></time>
            </div>
        </div>

        <div class="rst-col rst-col-50">
            <div class="rst-postpic">
                <a href="<?php echo $posts[$i+2]['LinkPost']; ?>">
                    <img src="<?php echo $posts[$i+3]['link']; ?>" alt="" style="height: 385px;width: 770px"/>
                </a>
            </div>
            <div class="rst-postinfo">
                <a href="#"><span>Sport</span></a>
                <h6><a href="<?php echo $posts[$i+2]['LinkPost']; ?>"><?php echo $posts[$i+2]['Title']; ?></a></h6>
                <time><i class="fa fa-clock-o"></i><?php echo $posts[$i+2]['PostTime']; ?></time>
            </div>
        </div>

        <div class="clear"></div>

    </div><!--end second row-->
    <?php

    }//end if

}//end for loop ?>

if some have better suggestion kindly post you answer here and also any logical issue in my code then also tell me

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.