Display WordPress Post Content in Multiple Columns

WordPress is a well known CMS, however to implement some different things we need some lateral thinking. Nowadays we find that most of the blogs are displayed in multiple column formats. We can also build this style with the help of CSS and other tools. But with the help of WordPress we can design it in easy and perfect manner provided little knowledge of WordPress is required. Newspapers and magazine themes are good example of displaying blogs in multiple columns.

What to do

A single function the_content(args) is used to manage output type or pattern of a blog. But to place output into multiple column format, we need some other technique. WordPress provides get_the_content() function to return the content as a PHP variable.

Using WordPress

The better solution is to use tag in WordPress. Normally the tag is used to split articles into two or more pages, but remember not all themes support this technique. Only WordPress default page support this technique.

Following are some advantages of tag:

Divisions can be placed anywhere in the content.

Both in the visual and HTML editing pane a “more” toolbar button is available.

Even non-technical user can understand the technique of splitting article in multiple columns.

Steps to follow

Here is an actual implementation of code. Before creating any file, first locate theme folder of project. Create function.php file in the same directory and put following code in it.

// This code splits article into multiple tag and returns an array

function split_content() {

global $more= true;

$content = preg_split('//i', get_the_content('more')); for($c = 0, $csize = count($content); $c

}

// returns the content in the form an array

return $content;

}

Next, find the file in your theme directory which actually implement the the_content() function.

However, we can find this function call in a single.php and page.php because these file displays single post.

Once the relevant code or file is found, call above function i.e split_content() instead of calling simply the_content() function. Or comment out the_content() function and below that call split_content() function.

After editing your code will looks like as follows:

// Commented the_content() function

// Following function splits contents into array

$content = split_content();

// Output of first content section is placed in content2

echo '', array_shift($content), '';

// Remaining contents are placed in content2

echo '', implode($content), '';

?>

The above code will return the content in the form of array. Each element of an array contains single content block at respective index position. This can only be possible with the help of tag.

Summary

There are lot many technique with which we can split the contents into multiple columns like using CSS3 and progressive enhancement or displaying multiple loops in multiple columns. But using WordPress we can easily implement this technique. With less code and little amount of implementation logic this code is also helpful for non technical users. The most important things to remember are finding an appropriate display php file and using more tag.

 

About the author: Margaret is a blogger by profession. She loves writing on environment and technology. Beside this she is fond of books. She recently bought a  waterproof mp3 player. These days she is busy in writing an article on best surround sound system.


Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply