Many of the blogs actually exhibit their contents in single columns only as the bloggers prefer this method the most. But at the same time they can achieve in exhibiting their contents in multiple columns. Though multiple-column layouts are mostly used on newspapers and magazine-styled themes, but nowadays they are also applied on web pages.
We’ve mentioned here 6 various ways how to display the WordPress post content in multiple columns.
Use CSS3 and progressive development
The simplest and the excellent method to exhibit your content in multiple columns is to start using a bit of CSS3 in the developing style. CSS will help to exhibit contents in 3 columns along with 10px gap between each column. Those people who are administering the modern browsers such as Firefox and Safari, this method will be a superb way for improving your content display.
Filter content with multiple column use
If you want to explore something more with CSS3, you can adjust things at PHP/[X] HTML stage and thus style it by applying the CSS. The multi-column technique when executed properly, crafts a column for each case of <h2> set up with the post content. To evade layout rupture, you should ensure to maximize the number of <h2> elements to two only. You can even amend the code to utilize a distinct element if <h2> tag isn’t fine for you.
Multiple loops exhibited in multiple columns
While displaying multiple loops in multiple columns, you have to follow 3 important steps using WordPress and a bit of CSS. The 1st step includes setting up multiple loops where the first column, first loop exhibits 1 to 5 posts; the second column, second loop exhibits 6 to 10 posts; and the third column, third loop exhibits 11 to 15 posts, each of which are perfect. The 2nd stepcovers marking up your theme template files. Each of the 3 loops will be positioned into its own div that will be then designed with a bit of CSS to change it into 1 of 3 columns. The 3rd step is styling of columns along with CSS. You can apply width values which will craft the right column widths. Finally when the setup is done, your posts can easily exhibit your multiple-loop contents in multiple columns.
More kinds of flexible multiple columns
When you’re going for three or more columns, you can use a technique which permits number of columns with entirely distinct content in each column as it crafts columns that are based on multiple cases of <!- -more- -> tag. There are 4 steps that are entailed in executing this technique. Firstly, you can insert my_multi_col_v2 function towards your functions.php file. Secondly, you can add an additional snippet towards your theme template file; take for example, page.php. Thirdly, you can add few CSS for formatting the markup into the columns. Fourthly, you can add a couple of <!- – more- -> in your page or post for producing the 3 column.
Exhibit your posts in horizontal display order along with two columns
Now you should make some changes and exhibit your two-column posts in the horizontal display order on the page. It can be completed applying 2 default loops as well the rewind_posts() function. The first loop will be exhibiting the posts in the first column, whereas the second loop will be exhibiting the posts in the second column. In order to execute this, you can utilize the modulus operator of PHP for sorting out each post from first loop that will exhibit posts in the horizontal order. For making it occur, you have to firstly restore your default WordPress loop with its essential code. When the code is positioned, the unusually numbered posts will show in a division that is spotted with an aspect of id=”right-column”. Hence you can use the required CSS to place the divisions as 2 adjacent columns. This is how your page is styled in horizontal display with two columns.
Bonus- Exhibit your category list in the two columns
With the use of a bit of PHP, you can acquire the WP’s wp_list_categories() for exhibiting your categories in 2 columns. You just need to place the necessary codes positioned in your theme file where you would want the categories to show and thus get the required results.
My last Speech:
Thus,I hope with the above use of multiple columns, the visual look of your design as well as content readability will surely increase greatly.
