Skip to main content
Hello!
This is more advanced but I was wondering if you could do a PHP tutorial on how to split posts into two or three columns on the home page? Kind of like:http://www.happyindulgencebooks.com/
Thank you!
I’m going to do my best to answer this question, but it’s hard because I can’t give a “one solution fits all” answer. The code I provide here will have to be changed and adapted for your own theme. Everyone’s theme is slightly different, so all I can really do is give a generic response and hope that people reading this are able to change it to suit their own themes!

What we’ll be doing

Before

One column post layout

After

Two column post layout
What you see above in “after” is the roughest mockup ever. Sorry.

Requirements

If you’re going to attempt this, I advise the following:
  • You are using a custom theme or a custom child theme. In other words, your theme won’t have an “update” that will then delete all your changes.
  • You feel at least somewhat comfortable poking around theme files.
  • You don’t have to KNOW PHP, but you do have to be comfortable working around it and copying/pasting lines of PHP code.
  • You have FTP access to your blog so you can edit the theme files if you make a mistake and your blog becomes inaccessible because of a PHP error.

Step #1: Create column CSS

In order to do this, you need to have some CSS column classes in place. Your theme may already have these, or you may have to make them yourself. But basically what you need is a CSS class that acts as a column. Here’s one example for a two-column (so two posts side-by-side) layout:
.half {
 width: 50%;
 float: left;
}
The key thing is in the width. Since I want two columns, I need my div’s width to be half of 100%, which is 50%. If you wanted three columns, you’d need to set the div to one third of 100, which would be 33.3%.
Note: you can name the div whatever you want. I chose “half” just as an example. In order to avoid conflicts, it might be better to prefix it with something, like: ng-half (I chose “ng” here for “Nose Graze”).
Next, we need a div to wrap around the columns and clear the float. For this example, I’ll use:
.ng-row {
 clear: both;
}

Step 2: Finding your theme’s code for the homepage posts

The next step is finding the right file in your theme that outputs the code on the homepage for displaying your posts. In most themes this is the index.phpfile. However, some themes may have a different structure. For example, in the themes I code, I do have an index.php file, but in that file I tell it to include a separate file, which is where I keep the post code. I call that file loop-archive.php.
Now inside that file, you want to find a very specific block of code:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

[..]

<?php endwhile; ?>
There will be a lot of code in between, but you need to find the bit starting with the if (have_posts()) : while (have_posts()) : the_post(); portion. It may look slightly different from theme to theme, so look carefully. Then you need to find the end bit, which will be <? endwhile; ?>. We’re going to be working in and around this snippet.
This portion of the code is called The Loop. What it does is basically cycle through your WordPress posts. Everything inside that snippet is repeated for each individual post on your homepage.

Step 3: The column code

a) The easy way (may be glitchy)

There is an “easy” way to do this. Right after this line:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Add this code:
<div class="half">
(or whatever your class name was)
And right before this line:
<?php endwhile; ?>
Add this code:
</div>
In the end, your code should look like this:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">

[..]

</div>
<?php endwhile; ?>
With the rest of your theme’s code where the [..] bit is. You’re basically just wrapping your posts inside that column div. However, if your posts have varying heights, this could have some weird, unexpected results. There is a more complex method that is a lot more reliable…

b) The more advanced way

The more advanced way looks something like this:
<?php $i = 0; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php
if($i == 0) {
 echo '<div class="ng-row">';
}
?>

<div class="half">

[..]

</div>

<?php
$i++;
if($i == 2) {
 $i = 0;
 echo '</div>';
}
?>

<?php endwhile; ?>

<?php
if($i > 0) {
 echo '</div>';
}
?>
Basically what we’re doing it starting a counter inside the code. We start the count at 0, then begin cycling through the posts. The first step is: if the counter is 0, add the div class for a new row. Then, after that, we insert the div class for a column (<div class="half">), and make sure the rest of the post display stuff from your theme is in there, before closing the div. Then, at the end, we increase the counter by one (so it’s now 1). However, then we need to perform some checks to determine if we should close the row div. Since we want two columns, we say: if the counter is 2, reset the counter to 0, then close the row div.
Once that’s done, The Loop (cycling through the posts) ends with <?php endwhile; ?> But what happens if the loop ends when the counter is only at 1? We won’t have closed the row div! So, we perform one final check at the end: if the counter is greater than 0, close the row div.

And that’s it!

If you’re not familiar with coding, I know this can look kind of confusing and intimidating.. especially if you’ve never seen/touched much PHP before. And since all themes have slightly different structures and layouts, it’s hard to have a “one size fits all” solution. Ultimately, you have to just try to apply the same logic to the theme that you have.

Just change the values for different numbers of columns

If you’re able to get it working with two columns, you can even try making it work with any number! You just have to change the values in the CSS (the div width) and in the PHP counter.

Comments

Post a Comment

Popular posts from this blog

》¡》》》¡》 NAVIGATE Want To Spend More Time On Your Writing And Tired Of Doing It All? A Virtual Assistant Can Help Alexandra Amor Sometimes you need specific help for your situation Indie authors often have an edge of control freakery … well, I do! I like being in control and I enjoy pretty much all aspects of being an author entrepreneur. But I hit a wall about 18 months ago, and I definitely needed some help, so I started looking for a virtual assistant to help me. I had a few varied experiences and learned some lessons, and then  Alexandra Amor reached out to me with some brilliant suggestions for how she could help. Alexandra is a children's author, but she is also a fantastic virtual assistant for me and a number of other authors. I trust her to help me with key tasks in my author business, and she even suggests things that I may not have thought of. Alexandra Amor Today, Alexandra explains how a VA can help authors. Joanna has previously...
Post a Comment
Read more
When we have excerpts or chapter reveals on site I do not like to copy and paste that long doc into a post. I have using a Google Embedder but it can get annoying and glitchy. Is there anyway to add a scrolling text box to posts? Juliana Hi Juliana! This is absolutely possible.   And luckily, it’s super easy to do! Here’s a preview of what we’ll be creating: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non finibus tortor, sed ullamcorper massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nulla lacus, maximus at tristique et, accumsan eget metus. Suspendisse arcu nisl, malesuada sit amet ante et, auctor porttitor nisl. Ut dictum leo metus, ac accumsan sem volutpat ac. Nulla leo eros, ultrices quis gravida id, rutrum at enim. Nam et volutpat nunc. Phasellus eu mollis nisl. Aliquam eget scelerisque ex, in dapibus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse mollis s...
Post a Comment
Read more
How to add an Image Slider to Your Blogger Blog Posted by  Ashley 8th March, 2013 Blogging Bitchin' Book Blog ,  Blogger ,  Coding ,  Image Slider ,  jQuery ,  Nivo Slider ,  Tutorial Last updated: 4 December 2015. We have a great question this week from Kaina! All you Blogger folks listen up, because this one is just for you! I was just wondering since I have a blogger blog do you know of any good picture sliders I could find or the process in which to make one? I would appreciate it tons!!  Kaina To make the image slider work, you need to add some extra files to your site. We need to add one or two JavaScript files and one CSS file. Step 1: Add the jQuery library (if you don’t already have it). First, you need to figure out if you need to include jQuery or not. The easiest way to do that is to visit your block, right click, select  “View Page Source”  and do a CTRL+F search for  jquery . If you get a ...
Post a Comment
Read more