0

I am trying to replicate the same style as seen in this picture displaying the latest posts. I am aware as to how to recreate it using a WP Loop and having the content sizes all the same. What I want to do is have it so it varies the sizing based on a fixed template. So the layout would be constant but the posts would change based on the latest posts. If I could be pointed in the right direction as to how to achieve this.

As I said I know how to use the loop to recreate the posts using a single layout style. Ideally I don't want to use featured posts.

enter image description here

The loop I am using is:

<?php if ( have_posts() ) : ?>

        <?php /* Limit Number of posts returned to 4 !important */ ?>
        <? $numberOfPost = 4;
            $catId = get_query_var('cat');  
            $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
            query_posts('paged='.$page.'&posts_per_page='.$numberOfPost.'&cat='.$catId); ?>

        <?php while ( have_posts() ) : the_post(); ?>
            <?php
                /* Include the Post-Format-specific template for the content.
                 * If you want to overload this in a child theme then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                get_template_part( '/templates/content-latest', get_post_format() );
            ?>

        <?php endwhile; ?>

    <?php endif; ?>
2
  • I don't see this as a WP related question. It's mostly about styling your template in css (article:nth-child(1), etc.). If you want to add different markup/css class/template for each post in your loop instead of using just plain css, just add a simple counter in your loop and do stuff according to counter reading. Nov 29, 2013 at 13:18
  • 1
    Hi @jleander . I have updated it to make it more wordpress related. How would I change my loop to target the certain post based on its location. I have added my current loop to the question. Nov 29, 2013 at 13:28

3 Answers 3

0

I'm not too sure I get the question but here goes nothing: What you could do is wrap you posts loop in a PHP counter or jQuery counter to change the style of the first div at every itteration.

<?php if ( have_posts() ) : ?>

    <?php /* Limit Number of posts returned to 4 !important */ ?>
    <? $numberOfPost = 4;
        $catId = get_query_var('cat');  
        $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
        query_posts('paged='.$page.'&posts_per_page='.$numberOfPost.'&cat='.$catId); ?>

    <?php $i = 1; while ( have_posts() ) : the_post(); ?>
        <?php
            /* Include the Post-Format-specific template for the content.
             * If you want to overload this in a child theme then include a file
             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
             */
            if( $i == 1 ){
                get_template_part( '/templates/content-latest', get_post_format() );
            } else {
               **// your other template file.**
            }
        ?>

    <?php $i++; endwhile; ?>

<?php endif; ?>
3
  • You can also use the built in counter current_post without having to set and increment one yourself.
    – Milo
    Nov 29, 2013 at 15:18
  • this didn't work (blank page) but looks like what I am after. How would I use the 'current_post' counter @Milo ? Nov 29, 2013 at 15:32
  • @Milo Thanks for that variable definition, just looked it up and works amazingly!
    – user37263
    Nov 29, 2013 at 16:17
0

Use add_image_size to specify what dimensions your images will have. WordPress resizes them on upload, so you may need to use the Regenerate Thumbnails plugin if you already uploaded the images into WordPress.

Then, depending where you are in the WP Loop, you can get the images of the post while specifying what size you want them to be.

1
  • This answer had very little to do with the question. Nov 29, 2013 at 13:25
0

I don't know if it helps you, but I had kind of the same problem erlier. This was what was answered:

3 random images from custom post type, each in a div with a diffrent class

s_ha_dum made an array of classes in this topic (wich you can style diffrently in css) and the loop would also run through the classes.

this code pruduces random images but ofcourse you can change that by changing 'orderby' => 'rand'

Hope it helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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