WP Post Columns Plugin

Date: 15th February 2008 at 10:22 pm | Filed under: development, plugins, wordpress | Author: Sam Burdge

This WordPress plugin allows you to easily create columns within your posts. Usefull for sites with a magazine / newspaper style layout, or if you want text to appear on one side of the post with an image displayed opposite. It is much easier than creating html tables within posts, perfect for users with no coding experience.

As you can see from this example it is also possible to have text, before or after the columns, which spans the full width of the post.

It is currently a Beta version and therefore does not have an options menu in wordpress, so you need to configure the width of your columns in the plugin file itself (which is still really easy). It is based on something I built for a bespoke wordpress theme I was working on, and thought was useful enough to share.

Adding the columns to your post is incredibly simple, you just add the tag {columnX} to your post to begin the column and {/columnX} to close the column. (Replace the X in the above example with either 1 or 2, depending on which column you are opening/closing). You can only have 2 columns at the moment.

Plans for future releases:

For the next release I plan to add an options page where you can set the number of columns (2 to 4), column margins, borders etc.

Installation:

  1. Download the plugin file and unzip.
  2. Upload the wp_post_columns.php file to your wp-content/plugins folder.
  3. Activate the plugin from the Plugins page in WordPress.

Usage:

  1. To configure the width of the columns go to the Plugins page in wordpress. Locate the plugin from the list and click edit. Beneath the licensing info you will see clearly labelled 'Set up your columns width and right padding'. You can set the widths in px,mm,em,% etc.
  2. When writing a post you can use the tags {columnX} and {/columnX} to start and end each column. Replace the X in this example with either number 1 or 2 depending on which column you are opening or closing.

Updates:

24/4/2008 - Minor update to version 1.1 - Added extra preg_replace code to remove implicit <p> tags inserted by wordpress

27/4/2008 - Minor update to version 1.2 - added priority of 13 to add_filter to make compatible with 2.5.1 - preg_replace is called after shortcodes have been processed (priority 11)

Download Plugin:


59 Responses to “WP Post Columns Plugin”

  • Comment by emeff
    Date: February 18th, 2008 at 9:50 am

    Sounds interesting. Does it work for pages, too???

  • Comment by Sam Burdge
    Date: February 18th, 2008 at 12:31 pm

    Yes, it works on pages too.

  • Comment by emeff
    Date: February 20th, 2008 at 9:21 am

    And it works great. Thank you!

  • Comment by Simon Reeves
    Date: February 20th, 2008 at 2:41 pm

    I had a problem using it on my site, as it wouldnt float the 2nd column to the right of the first, instead it is on the right, but starts when the first column stops.
    Any ideas what could cause that at all?
    Thanks

  • Comment by Sam Burdge
    Date: February 20th, 2008 at 3:06 pm

    Hi Simon,
    It is possible that your column widths were set too wide, so the two columns couldn't sit side by side. Try setting the widths narrower and using a percentage (45% and 45%) and see if that works.
    Sam

  • Comment by Matt Algren
    Date: February 22nd, 2008 at 2:14 am

    FYI, this plugin shuts down Simple Tags. Not sure why, but I had to turn it off till it's figured out.

    Nice work though, I really need this one.  
     

  • Comment by Smiddy
    Date: March 4th, 2008 at 2:44 am

    Great plugin! Just a quick question… having reduced the width of the column to a mere 25% I find that the post title and comment section are still in there original position as if the are still in one column. Any ideas?

  • Comment by Sam Burdge
    Date: March 4th, 2008 at 7:46 am

    Hi Smiddy
    I don't know what could be causing this. Send me a link to look at and I should be able to help.
    Sam

  • Comment by Francois
    Date: March 4th, 2008 at 3:23 pm

    Hi there, seems to be an intersting plugin. However, when I try to dl it I end up with an empty zip file ? Francois.

  • Comment by David
    Date: March 6th, 2008 at 10:01 pm

    Brilliant - many thanks

  • Comment by Vaska
    Date: March 8th, 2008 at 5:08 am

    Hi, I'm unable to download the plug-in, I kept getting downloading zero-byte file. Please help?

  • Comment by Sam Burdge
    Date: March 10th, 2008 at 9:59 pm

    @ Vaska & Francois
    This problem (in IE only) should be solved now. Appologies for the inconvenience.
    Sam

  • Comment by Kenya
    Date: April 3rd, 2008 at 11:13 pm

    HI Sam,The plugin was working prior to updating to WP 2.5. Have you tested it on 2.5, any idea why it won't work for me anymore? Now it just shows the tags when I publish the column.Thank you,Kenya

  • Comment by Kenya
    Date: April 3rd, 2008 at 11:16 pm

    Hi Sam,The plugin doesn't seem to be working since I upgraded to 2.5.  Any idea why?  Now the tags show and there are no columns when I post.Thank you,Kenya

  • Comment by Sam Burdge
    Date: April 6th, 2008 at 9:45 pm

    Hi Kenya
    I just looked at your site, and the plugin still appears to be working (I could identify it's code). The reason the two columns are stacked one on top of the other is that the image is too wide and is therfore forcing the second column down, reduce the width of the image, or place it after the second column and the problem should be solved.
    Sam

  • Comment by Charles
    Date: April 12th, 2008 at 10:10 pm

    Hi Sam,

    I\’m am running WP2.5 with the theme (Cutline 3-Column Split 1.1).

    As far as I am concern, I am doing everything as stated in your install documentation but can not get the the column when I post.

    Is there a functional website the I can take a look at to see what it looks like?

    Does the plugin works with WP2.5?

    Thanks

  • Comment by Sam Burdge
    Date: April 12th, 2008 at 11:00 pm

    Hi Charles

    It is working in this post (notice how the content splits into two columns). What happens when you try to use the plugin?

    Sam

    p.s I’m running 2.5 so it does work in 2.5

  • Comment by Charles
    Date: April 13th, 2008 at 5:12 pm

    Sam,

    Your two columns split looks great, that is exactly what I am trying to accomplish.

    Despite reducing my column width from 45% to 25%, I am still getting an extended width page.

    I want to believe that my template is the culprit (Cutline 3-Column Split 1.1). I’m going to find out how to create a one column post and insert the column tags.

  • Comment by Sam Burdge
    Date: April 13th, 2008 at 8:47 pm

    Hi Charles

    When you write the post it should be formatted like so:

    {column1}
    Column 1 content
    {/column1}
    {column2}
    Column 2 content
    {/column2}

    It should work with your template too.

  • Comment by Charles
    Date: April 14th, 2008 at 12:33 pm

    Sam,

    I did EXACTLY as was suggested. I also reduced the width to 15% respectively.

    This is what it looks like:
    http://www.businessafterhours.us/2008/04/14/test-column.html

    Your patience is greatly appreciated,

    Thanks,

    Charles

  • Comment by Sam Burdge
    Date: April 14th, 2008 at 6:06 pm

    Hi Charles

    I had a quick look, it looks like its working to me. The problem is that the columns are set too narrow. This is causing the longer strings of text ‘TTTTTTTT’ and ‘NNNNNNNN’ that are non-breaking to spill out of the boundary of the column.

    Sam

  • Comment by Documentary
    Date: May 1st, 2008 at 4:25 pm

    Thanks for great plugin! just two question..

    Can i align a image in column2 in any way? when i use a smaler image it looks bad when its all the way to the right and the text is to the left.. And also when its text in both column i think its a bit to big space between them if the text is continuing in column2..

  • Comment by Gene
    Date: May 19th, 2008 at 3:18 am

    Interesting plugin, especially if WP is used as a “pseudo” CMS solution, is it still in development?

    Cheers,
    Gene

  • Comment by Gene
    Date: May 19th, 2008 at 3:40 am

    I created a test page using the above mentioned method:

    {/column1}
    {column2}
    Column 2 content

    But found that the first line of column 2 was 1 line down from column 1 (carriage return) so I corrected the layout by doing:

    {/column1}
    {column2}Column 2 content

    Cheers,
    Gene

  • Comment by Jon
    Date: May 19th, 2008 at 9:48 pm

    I’m also having problems with aligning an image to the exact width of the text. How do i make it nice and neat?

  • Comment by TPN :: The Global Geek Podcast » Blog Archive » The Global Geek Podcast #084 :: We Have Chunks: Part A
    Date: May 20th, 2008 at 1:55 pm

    [...] WP Post Columns: Give posts columns, just like the newspaper [...]

  • Comment by Wordpress Plugin Centre - Wordpress Post Plugin - WP Post Columns Plugin - Sam Burdge
    Date: May 28th, 2008 at 4:55 am

    [...] WP Post Columns Plugin - Sam BurdgeThis WordPress plugin allows you to easily create columns within your posts. Usefull for sites with a magazine / newspaper style layout, or if you want text to appear on one side [...]

  • Comment by mmorts
    Date: May 31st, 2008 at 8:55 pm

    I’ll try it…

  • Comment by dirk
    Date: June 2nd, 2008 at 8:08 am

    Hi I uploaded your plugin to my host then dragged it to WP content/plugin file,but it does not show in my plugin list(where one activates plugins)

  • Comment by Michelle
    Date: June 9th, 2008 at 3:55 pm

    Sam, you’re an absolute star. I’ve been looking for just this kind of plugin for ages!

  • Comment by Kugelblitz
    Date: June 10th, 2008 at 4:15 am

    Thanks! Great Plug in works fine.
    One Question. Is it possible to define a min width of a column and if there is enough space to fill up the rest? My Layout is variable between 65 and 85em

    so s.th like that would be great.. unfortunately it does not work this way.

    $column1width = ‘32em auto’;
    $column1paddingright = ‘1em’;

    $column2width = ‘32em auto’;
    $column2paddingright = ‘0px’;

    Ps. How to make three Columns?

  • Comment by Maya
    Date: June 30th, 2008 at 2:17 am

    Sam,
    this is brilliant! I’m using WP as a CMS and this plugin is exactly what I needed. Thanks for sharing.

  • Comment by Cathy | Mommy Motivation
    Date: July 1st, 2008 at 3:20 am

    thank you so much for this - it’s perfect! :)

  • Comment by Peter Lurie
    Date: July 2nd, 2008 at 2:00 pm

    Hi Sam!

    I REALLY love this plugin, but found it caused problems when used with Darren Hoyt’s theme “Mimbo Pro”. That theme uses custom images, and somehow, when WP Post Columns was active, it caused the normally stripped image & HTML in “the_excerpt” to display. Could you investigate this? I need your plugin.

    Thanks

  • Comment by icerymmevieva
    Date: July 8th, 2008 at 5:17 pm

    tests time mashine

  • Comment by Kugelblitz
    Date: July 10th, 2008 at 8:36 am

    This Plugin collides with the http://anthologyoi.com/awp Ajax Plugin.
    In other words. Ajaxed Wordpress does not work when WP Post Columns is activated.
    Wonder why and how to fix this issue.

  • Comment by Philix
    Date: July 23rd, 2008 at 2:33 pm

    Thanks, this is exactly what i was looking for.

  • Comment by nyfamily
    Date: July 26th, 2008 at 9:51 pm

    This is just what I have been looking for!!! When I ftp the file it does not show in the plugins. Guess this means that the theme won’t support it?????? Any help

  • Comment by 60+Wordpress日志插件/文章插件 | 帕兰映像
    Date: July 28th, 2008 at 12:14 pm

    [...] WP Post Columns 这个Wordpress插件可以让你为你的文章创建多个栏目, 从而实现杂志型或者说类似门户网站的布局风格. 插件主页 [...]

  • Comment by James
    Date: July 28th, 2008 at 11:42 pm

    Wow, this plugin is awesome. Thanks!

  • Comment by Chris
    Date: July 29th, 2008 at 10:53 pm

    Sam, I love your wp post column plugin! And I wanted you to know that it does not work with the wp e-commerce plugin. I was wondering if you have considered an upgrade!!?

    Thanks again for your awesome plugins!

  • Comment by Tom K.
    Date: August 8th, 2008 at 3:57 pm

    This is just what I’m looking for……but……it doesn’t work in Wordpress 2.6. I wish it would. Any plans for an upgrade?

  • Comment by 60+Wordpress日志插件/文章插件 : : My World
    Date: August 19th, 2008 at 3:51 am

    [...] WP Post Columns 这个Wordpress插件可以让你为你的文章创建多个栏目, 从而实现杂志型或者说类似门户网站的布局风格. 插件主页 [...]

  • Comment by hubionmac
    Date: August 22nd, 2008 at 7:42 am

    I added
    text-align: justify;
    to each column-div, perhaps this looks better

  • Comment by hubionmac.com » Blog: Neues Design
    Date: August 23rd, 2008 at 10:33 pm

    [...] in die Posting nichts breites, wie eine Liste oder eine Tabelle mehr passt. Abhilfe schafft dann dieses Plug-In, welches einem nur einfaches Hinzufügen von {columnX}, wobei das X entweder 1 oder 2 sein kann, [...]

  • Comment by Matthew Weaver
    Date: August 24th, 2008 at 4:18 am

    Your plugin appears to specifically require user account named “admin” yet I have removed/renamed this account for security reasons. Is there a way to access the Configure features using an account with admin rights, though named something other than admin?

    Thanks.

  • Comment by Matthew Weaver
    Date: August 24th, 2008 at 4:19 am

    Error on my part… My just added comment was regarding a different plugin. As Tom K noted, I also find that the plugin does not work with 2.6.1.

  • Comment by hubionmac
    Date: August 27th, 2008 at 12:33 am

    A nice feature would be a Script-Button, that automaticly inserts the {} Parts within the selected text…
    By the way, it workx with Wordpress 2.6

  • Comment by TJ
    Date: September 5th, 2008 at 12:53 am

    Great plugin! Any idea when you might have a 3/4 column version coming? Thanks!!

  • Comment by WordPress天下 » Blog Archive » 60个Wordpress日志插件/文章插件
    Date: September 6th, 2008 at 3:42 am

    [...] WP Post Columns 这个Wordpress插件可以让你为你的文章创建多个栏目, 从而实现杂志型或者说类似门户网站的布局风格. 插件主页 [...]

  • Comment by 流浪滴阿三
    Date: September 22nd, 2008 at 11:43 am

    [...] 从而实现杂志型或者说类似门户网站的布局风格. 插件主页 Advanced Random Post Wordpress随机文章列表插件. Notify on Draft Post [...]

  • Comment by Melissa
    Date: September 23rd, 2008 at 3:39 am

    ok, got the plugin. When I used it colum number 2 appears underneath colum #1 and indented to the right abit. I thought (or was hoping) that colum #2 should appear directly to the right of (not under) col. 1? What did I do wrong?

  • Comment by Kristin
    Date: September 26th, 2008 at 1:22 pm

    Thank you! Thank you! Thank you!

    This plug-in is GREAT!!! I will continue to check back for updates!

  • Comment by George Meltow
    Date: October 6th, 2008 at 11:29 am

    Thank you, thank you, thank you - so much!!!

    Beautiful work. You made my day!

  • Comment by SuccessFul! » 60+Wordpress日志插件/文章插件
    Date: October 12th, 2008 at 12:27 pm

    [...] WP Post Columns 这个Wordpress插件可以让你为你的文章创建多个栏目, 从而实现杂志型或者说类似门户网站的布局风格. 插件主页 [...]

  • Comment by Martin
    Date: October 17th, 2008 at 10:07 pm

    Hi Sam,
    I’m brand new to this but love the idea of your plugin. I’m only running locally at the moment whilst I learn moreabout wordpress but I’m having the same problem as smiddy from the 4th March?
    Did you manage to help them. cheers

  • Comment by Jason
    Date: October 18th, 2008 at 4:09 pm

    GREAT plugin, thanks for making it. I’ve figured out how to do three columns but I was wondering, do you know if there’s a way to make the column tags work for excerpts?

  • Comment by António Lima
    Date: October 21st, 2008 at 3:14 pm

    Very nice pluign! Makes publishing a lot more easy as aesthetic

  • Comment by Nowog.com » 60余款Wordpress日志插件/文章编辑插件
    Date: October 26th, 2008 at 10:33 am

    [...] WP Post Columns 这个Wordpress插件可以让你为你的文章创建多个栏目, 从而实现杂志型或者说类似门户网站的布局风格. 插件主页 [...]

Leave a Comment

Removing defualt borders from links in Firefox (CSS)

Date: 14th January 2008 at 6:13 pm | Filed under: development, scripts | Author: Sam Burdge

One of Firefox's default styles is to put a dotted line border around active links. For many sites this is not an issue, and can even be helpful to the user, making it clear when they have clicked on a link. However, with some sites, especially when using images as links in the nav, it can look really ugly. To get rid of the dotted borders use the following CSS:

a:active, a:focus {outline: 0;}

3 Responses to “Removing defualt borders from links in Firefox (CSS)”

Leave a Comment