Some themes are nice and with the sprinkle of a shorcode your page is transformed into a three or four, even five, column layout. But what if the theme is not nice? You want columns and you shall have them using this how to guide.
Some themes are nice and with the sprinkle of a shorcode your page is transformed into a three or four, even five, column layout. But what if the theme is not nice? You want columns and you shall have them using this how to guide.
Essentially we will be splitting up the available space into columns, let’s say three for now, you can always alter the numbers to have more or less columns.
1. How Much Space Do We Have to Play With?
Depending on where you want put your columns we need to know the width of the page, post or homepage that we have to play with. We can do this easily with Chrome or Safari using the Inspector. Just right click inside open area of where you will be putting your columns, select Inspect Element, then point to the area. You will see the width highlighted and if you do not, click the little magnifying glass on the bottom left and point again, see it works.
Let’s say that we have 600px to play with. Your theme maybe different, it just means the numbers will be slightly different but the method is still the same.
2. Bust Out the Calculator If Needed
Now we have the full width of 600px, we know we want 3 equal columns thus each column needs to be a total width of 200px. With our columns we don`t want the content to be too close so we need some padding. Now here is where the maths gets a little tricky because whenever you add padding, margin or a boarder to an element, it adds width. If we was to just add 20px padding to the columns without reducing the width it would kick one of our columns down and that’s not nice!
Total Width: 600 / 3 = 200px – 20px right margin = 180px.
3. Setting up the HTML
For this we will need 4 DIVs and some dummy text (now I do recommend actually using a little more text than this, try getting some from http://www.lipsum.com/feed/html) so we can see if everything is working well. Here is the structure:
<div class="col-3”>
<div class="col">This is a column</div>
<div class="col">This is a column</div>
<div class="col">This is a column</div>
</div>
The class=”col-3” gives us the ability to columize everything inside the div, then the class=”col” allows us to style each column. For example you may want a nice border or a background, the class=”col” allows us to apply styles to the columns.
So we have a post or page with our test content in. Check in the browser and then we will be ready to move onto the CSS layouts.
4. CSS Layouts
Now we need to apply some new styles to our theme. All themes have a style.css which we can edit in the Appearance > Editor. When you open this page for the first time you`ll have the right file ready and open for you. We will just slot our new styles in at the top for now, you can move them later.
Expert Tip
:
A far better way of making regular CSS edits is using your favourite editor that has dynamically downloaded your CSS file so as you save it re-uploads it automatically. All you have to do after each edit is hit save in the editor then refresh in the browser.
If you are running a MAC that I suggest installing Coda, logging into your server via FTP and editing the wp-contents/themes/themename/style.css.
If you are sporting a PC then install FireFTP on FireFox, then install notepad++, login to your server via FTP and edit the file above using notepad++ ( you will need to set notepad++ as the editor for css.)
…meanwhile back at the CSS Bat Cave.
Now what I like to do is a step by step process starting with checking we have our selectors correct by simply putting a border around column div. This just makes sure everything is working. So add the following to your style.css (note, If your theme has a custom CSS field, then use this)
div.col-3 {
border:1px solid red;
}
All working well? Great, then let’s finish this off and move onto the columns.
div.col-3{
overflow:hidden; /* contains our floating columns *.
}
Now let’s move onto the columns:
div.col-3 .col {
border:1px solid red;
}
Columns got a nice border around them? Notice that we use the div.col-3 to make it clear what we are effecting but we leave the class open so it can be attached to a <div> or even a <p>. Then time to make our columns.
div.col-3 .col {
border:1px solid red;
width:180px;
float:left;
padding-right:18px;
}
Great so there we have our nice columns. We use a 18px padding so that the floats work out with the 1px border. Problem is that we have padding on the far right column making it not hit the edge of the page. We fix this by using a .last class that removes from, you guessed it, the last column.
div.col-3 .last{
padding-right:0px;
}
The Final Product for Making Columns in WordPress
Removing the unwanted edge padding we will have some extra space to play with, so we can play with the width until the end column hits the edge of the page. So now we will look at both the extra HTML and then the CSS.
<div class="col-3”>
<div class="col">This is a column</div>
<div class="col">This is a column</div>
<div class="col late">This is a column</div>
</div>
And now time for the complete CSS (minus the border this time).
div.col-3 {
overflow:hidden;
}
div.col-3 .col {
width:186px;
float:left;
padding-right:20px;
}
div.col-3 .last{
padding-right:0px;
}
Conclusion
So there we go kids, a quick way of making your own columns using WordPress. We will be looking at turning this into a shortcode later in our series of WordPress Training posts.
An essential part of this is CSS which is part of Learning Web Design, click here for more information on our Beginners Web Design course.
