Something I think is funny when I build websites in WordPress is to try to move away from the traditional blog layout, and build the page a little differently. One of the tricks I have used are that instead of presenting blog posts in the traditional way, are listed on one line from the top down, so I have chosen to present them in columns, from left to right.
Examples of this can be seen on several of the websites I built, including the journal of the singer Carolina Wallin Pérez.
In this post I will go through how to go about implementing this technology on their own WordPress blog.
WordPress loop
For those of you who do not know what WordPress loop is, one can simply say that all the information you enter into a WordPress post is saved in a database. The loop is the code on the home page that connects to the database and retrieves the information stored, and then presents it for your visitors. The loop looks like this:
[php]<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>[/php]
Here is the loop, which defines what is to be retrieved from the database.
Now that we know what the loop is for something, we will take and modify it to get WordPress to list the entries in columns. In this example we will limit it to three columns per row, but it is easy to change to another number if you prefer. The loop that controls your blog can be found in the index.php file located in the folder to your WordPress theme.
Make a backup of index.php before you start making changes!
Modify the WordPress loop
We start with the beginning of the loop. We want to give each column a value of 1, 2 or 3, in order to count the posts and tell WordPress when it’s time for a new line. We define at the beginning of the loop that we begin to count the posts from the first
[php]<?php if (have_posts()) : ?> <?php $col = 1; // Start counting from 1 while (have_posts()) : the_post(); ?>[/php]
We want each row to start with a new series of container, and therefore continue the race with the following code:
<?php if ($col == 1) echo "<divpln">rad">"; ?>
Since we continue to define what content is displayed on each post. In this example, we choose to show:
- The title of the post
- The date when this was written
- Number of Comments
- A summary of this
- A link to the full post
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('j F Y') ?><?php comments_popup_link( 'Start Comment', '1 Comment', '% Comments'); ?></small>
<div>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">Link →</a>
</div>
</div>
Now for the beauty of it, the small part of the code that makes sure that it all works. Here counts posts and decide when a new line should begin. We end even with an extra new line-container, which will help to break the floats from the bottom line. I will explain what this means later in the post.
<?php
if ($col == 1) echo "</div>";
if($col == 1) {$col = 2;} else {
if($col != 1) {
if($col == 3) {$col = 1;}
if($col == 2) {$col = 3;}
}
}
endwhile; ?>
<div></div>
We end the loop by adding navigation for newer / older posts, and an error message if there would be no posts in the database.
<div>
<div><?php previous_posts_link('← Previous Post') ?></div>
<div><?php next_posts_link('Next Post →') ?></div>
</div>
<?php else : ?>
<h2>No posts found</h2>
<p>Find anywhere else on our website. Thanks
<?php endif; ?>
The entire loop:
Now you should if you followed the guide to the letter have a loop that looks like this:
[php]
<? php if (have_posts ()):?>
<? php $ col = 1 / / Start counting from 1
while (have_posts ()): the_post ();?>
<? php if ($ col == 1) echo "<div>";?>
<- If we are in column 1, add a new line-container ->
<div class = "post-col <? php echo $ col;?>" id = "post-<? php the_ID ();?>">
<! – Provides each post a CSS class, "col1" "col2" or "col3" ->
<h2> <a href = "<? php the_permalink ();?>" title = "<? php the_title (); ?>"><? php the_title ();?> </ a> </ h2>
<! – Gets the post’s title ->
<small> <? php the_time (‘j F Y’)?> <? php comments_popup_link (‘No comments’, ‘1 comment’, ‘% Comments’);?> </ small>
<! – Showing the post date and number of comments ->
<div>
<? php the_excerpt ();?>
<! – Gets the summary of the post ->
<a href = "<? php the_permalink ();?>" title = "<? php the_title ();?>"> Read the full post → </ a>
<! – A link to the full post ->
</ div>
<! – Closes the entry ->
</ div>
<! – Closes the record ->
<? php
if ($ col == 1) echo "</ div>", / / if we are in column 1, close the new line-container.
if ($ col == 1) {$ col = 2;} else {/ / if we are in column 1, then the next column 2.
if ($ col: = 1) {/ / if we are not at column 1, do the following:
if ($ col == 3) {$ col = 1;} / / if we are in column 3, then the next column No. 1.
if ($ col == 2) {$ col = 3;} / / if we are in column 2, then the next column No 3.
}
}
EndWhile;?>
<div> </ div>
<! – Break last row of floats. ->
<div> <! – Navigate newer / older pages ->
<div> <? php previous_posts_link (‘← Newer Posts ")?> </ div>
<div> <? php next_posts_link (‘Older Posts →’)?> </ div>
</ div>
<? php else:?> <! – If nothing was found in the database: ->
<h2> No posts found </ h2>
<p> Unfortunately it seems that you are looking for something that does not exist.
<? php endif;?> <! – Closes the loop ->
[/php]
Formatting with CSS
If you were to look at your website in your browser right now you would not see any particular difference, despite all these changes in the code. Contributions are not in columns, three per row, but still in succession from top to bottom. Strange? Not at all! For the browser to understand that we want the posts should be in horizontal rows, we must give the instructions on this matter. We do this in the file style.css that is also located in the folder to your WordPress theme.
Make a backup of style.css before making any changes!
The first thing we must do is decide how wide each post-column should be, and how much space we want between each column. If we assume that the page where we publish our WordPress posts is 1000 pixels wide, so it fits quite well to each column is 300 pixels wide, with a gap between them of 50 pixels. Then each line that looks something like this (the white spaces is thus 50 pixels wide):
To achieve this we need to write the following in our style.css file:
.col1, .col2 {width:300px; float:left; margin:0 50px 25px 0;} .col3 {width:300px; float:left; margin:0 0 25px 0;}
What we are doing here is we set the width of columns to 300 pixels. Then we attribute float:left of each column, which means that the columns flows / is / are listed next to each other instead of each post end up in the previous. In columns 1 and 2, we also have a margin of 50 pixels to the right, which means that there will be 50 pixels apart to the next post. In all three columns, we also have a bottom margin of 25 pixels, which ensures that it is never less than 25 pixels between each line.
Press refresh in the browser now, it will look different, but still not right out. This is because the float ( float:left ) as we sat on the columns. We must ensure that they are reset when each new row starts and that is why we put in our new series of container in the code earlier.
So we add the following little code in our style.css file:
.rad {clear: both;}
The code clear:both ensures that reset our float, and since this is now sitting on our new line-container which enters into every row, so will it all work properly.
The final details
If we list our WordPress posts as in the example, with three posts per line, so you probably want to change the number of posts to be displayed per page. WordPress default’s 10 posts, but in Carolina Wallin Pérez diary , we have eg have 6 posts per page.
To change the number of posts per page to be displayed, go to Settings -> Reading in wordpress menu, and under the posts per page, change the number you want to use.
I hope you enjoyed the advantage of this guide, I will love to receive both the questions and comments down in the comments below!
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
You may also like
