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

Resources for Writers Some helpful books, blogs and other tools we recommend. These are tools we use and have found helpful for new writers. Alas, we don’t have time to vet new companies to add to the list, so please don’t ask us to do that. This list is simply a helpful, free offering to our readers–as is all the content of this blog. Unfortunately, we don’t have time to offer any more free services than we already offer with this blog. We need to spend some of our time writing books so we don’t starve–and we also need to sleep and see our families and go outside and breathe like other earth creatures. Thanks.    Recommended Books Social Media Smart Social Media  by Chris Syme Blog It!  By Molly Greene Rise of the Machines  by Kristen Lamb Blogging for Writers  by Robin Houghton (Only in paper. Extensively illustrated.) The Author’s Platform  by Barb Drozdowich. Barb also provides one-on-one social media help at  Bakerview Consulting . She’s great!) For Self-Pub
Post a Comment
Read more
Welcome Services Blog Charities Contact Skip to primary navigation Skip to content Skip to primary sidebar Skip to footer HORKEY HANDBOOK Find or become a kickass virtual assistant today! MENU 9 Essential Elements of a Virtual Assistant Website that Attracts Clients February 22, 2018  By  Daryn Collier   1 Comment Heads up  — this post may contain affiliate links. We might receive a small commission if you make a purchase as a result of reading our awesome content. Thanks for supporting Horkey HandBook! In our private Facebook group for virtual assistants, it’s rare for a week to go by when someone doesn’t ask for feedback on their soon to be launched website. No matter how you slice it, launching version 1.0 of your website can be nerve-wracking and time-consuming — especially if you’re new to WordPress. The temptation to find an “easier” platform can be great but as a general rule, your hard work will be rewarded.
Post a Comment
Read more
How to Create Your Own Social Media Icons Posted by  Ashley 26th June, 2014 Design Bitchin' Book Blog ,  Graphics ,  Graphics Tutorials & Freebies ,  Icons ,  Social Media I’m going to walk you through how to create your own social media icons for your blog. You can create icons that match your design, even if just by using the colours in your palette.  Requirements Photoshop : I suppose this isn’t really  required  but my tutorial will be using Photoshop. However, similar results can always be achieved in different programs. But you may not be able to follow my instructions exactly . Internet access : Good news! If you’re reading this, you have it! Step #1: Collect your icons The first step is to collect the basic, raw, social media icons. By that I mean only the site logo without any background or design elements. Decide which sites you want to make icons for, then download the icons. I personally use  IconFinder  for all my icon searches. You ca
Post a Comment
Read more