I'm about to convert my Bootstrap template to a custom Wordpress theme and have a little issue.
I want to display all of my blog posts. So far, it is working well. But here is the thing: Because of my design preferences I want to change the used styles for the displayed posts after a specific post. So let's say for the first three posts I want to use style A (post displayed in a great box with title and excerpt) and after the third I want to display thw following posts with style B (two per row, smaller box, just image and title, no excerpt).
I am just starting out with WP syntax, so I have no idea how to accomplish this. Any suggestions?
Thanks
EDIT
This is the code I am currently using
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post-type' => 'post',
'post-per-page' => 8,
'paged' => $paged,
);
$wp_query = new WP_Query($args);
if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<article class="single-post">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/example.jpg">
</a>
</div>
<div class="post-content">
<div class="content-header">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="content-text">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
</article>
<?php endwhile; else: ?>
<p>Sorry, no posts yet.</p>
<?php endif; ?>
This will result in a list of my current posts, all the same style. I actually want, as I said, that the style will change after the third post. This looks like the following in my current Bootstrap code:
<article class="single-post">
// all the stuff above
</article>
<div class="row"> <!-- a new row for smaller post boxes -->
<div class="col-sm-6"> <!-- first box -->
<article class="multiple-post">
// all the stuff here
</article>
</div>
<div class="col-sm-6"> <!-- second box -->
<article class="multiple-post">
// all the stuff here
</article>
</div>
</div>
So, I want use article with class single-post for the first 3 or so blog posts and after those, the page should use article with class multiple-post INCLUDING the additional div-row. Otherwise I can not use the exact layout because of how Bootstrap works.
Hope this makes it much more clearly to you.
I'm about to convert my Bootstrap template to a custom Wordpress theme and have a little issue.
I want to display all of my blog posts. So far, it is working well. But here is the thing: Because of my design preferences I want to change the used styles for the displayed posts after a specific post. So let's say for the first three posts I want to use style A (post displayed in a great box with title and excerpt) and after the third I want to display thw following posts with style B (two per row, smaller box, just image and title, no excerpt).
I am just starting out with WP syntax, so I have no idea how to accomplish this. Any suggestions?
Thanks
EDIT
This is the code I am currently using
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post-type' => 'post',
'post-per-page' => 8,
'paged' => $paged,
);
$wp_query = new WP_Query($args);
if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<article class="single-post">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/example.jpg">
</a>
</div>
<div class="post-content">
<div class="content-header">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="content-text">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
</article>
<?php endwhile; else: ?>
<p>Sorry, no posts yet.</p>
<?php endif; ?>
This will result in a list of my current posts, all the same style. I actually want, as I said, that the style will change after the third post. This looks like the following in my current Bootstrap code:
<article class="single-post">
// all the stuff above
</article>
<div class="row"> <!-- a new row for smaller post boxes -->
<div class="col-sm-6"> <!-- first box -->
<article class="multiple-post">
// all the stuff here
</article>
</div>
<div class="col-sm-6"> <!-- second box -->
<article class="multiple-post">
// all the stuff here
</article>
</div>
</div>
So, I want use article with class single-post for the first 3 or so blog posts and after those, the page should use article with class multiple-post INCLUDING the additional div-row. Otherwise I can not use the exact layout because of how Bootstrap works.
Hope this makes it much more clearly to you.
You can just set a variable to count the loop iterations, and then apply different styles or output depending on the value. For example:
$post_index = 1;
/* Start the Loop */
while ( have_posts() ) :
the_post();
$post_class = ($post_index > 3 ? 'style-a col-sm-12' : 'style-b col-sm-6');
echo '<div class="' . $post_class . '">';
// Both post types use the title
echo '<h2>' . the_title() . '</h2>';
if($post_index <= 3) {
// Style A - Title and Excerpt
the_excerpt();
} else {
// Style B - Title and Image
the_post_thumbnail('thumbnail');
}
echo '</div>';
$post_index++;
endwhile; // End of the loop.
Untested, but that gives you the general idea.
OK, so here's the code after changes:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 8,
'paged' => $paged,
);
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) :
?>
<?php if ( 1 == $paged ) : // <- remove this if, if the layout should be the same for all pages ?>
<?php while ( $wp_query->have_posts() && $wp_query->current_post < 3 ) : $wp_query->the_post(); // print first 3 posts ?>
<article class="single-post">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/example.jpg">
</a>
</div>
<div class="post-content">
<div class="content-header">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="content-text">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
</article>
<?php endwhile; ?>
<?php endif; // <- remove this endif, if the layout should be the same for all pages ?>
<?php if ( $wp_query->have_posts() ) : // if there were more than 3 posts found ?>
<div class="row"> <!-- a new row for smaller post boxes -->
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); // display smaller posts ?>
<div class="col-sm-6"> <!-- first box -->
<article class="multiple-post">
// all the stuff here
</article>
</div>
<?php endwhile; ?>
</div><!-- .row -->
<?php endif; ?>
<?php else : // if no posts found ?>
<p>Sorry, no posts yet.</p>
<?php endif; ?>
If you'll use this code, then the first 3 posts will be bigger only on first page. If you want to show the same layout on all pages, then you'll have to remove the if statement - I've marked it in comments.
BTW. Using $wp_query variable for your custom query isn't the best idea...