How To Create Columns In Posts

The CSS Way 

If you are only making columns within one post, you can do so manually using CSS within your post.

If you’re not familiar with CSS, you can read more about width, padding and float here. The way it displays may vary on your theme, so feel free to play around.

For two columns, you would do the following:


<div style="width:100%">
<div style="width:40%;float:left;">
<p>Column 1 info here</p>
<p>Column 1 info here</p>
<p>Column 1 info here</p>
</div>
<div style="width:40%;float:right;">
<p>Column 2 info here</p>
<p>Column 2 info here</p>
<p>Column 2 info here</p>
</div>
</div>

 

It will display like this:

Column 1 info here
Column 1 info here
Column 1 info here
Column 2 info here
Column 2 info here
Column 2 info here
For three columns, you would do the following:

<div style="width:100%">
 <div style="width: 30%; float: left;">
  <p>Column 1 info here</p>
  <p>Column 1 info here</p>
  <p>Column 1 info here</p>
 </div>
 <div style="width: 30%; float: left;">
  <p>Column 2 info here</p>
  <p>Column 2 info here</p>
  <p>Column 2 info here</p>
 </div>
 <div style="width: 30%; float: right;"> 
  <p>Column 3 info here</p>
  <p>Column 3 info here</p>
  <p>Column 3 info here</p>
 </div>
</div>

 

And it will display like this:

 

Column 1 info here
Column 1 info here
Column 1 info here
Column 2 info here
Column 2 info here
Column 2 info here
Column 3 info here
Column 3 info here
Column 3 info here
You may also need to wrap a clearing div like this around content after the columns to prevent it from wrapping:
 <div style="clear: both;"></div> 

The Plugin Way

If you find yourself making columns frequently in blog posts, it’s worth it to enable the Column Shortcodes plugin, which helps you make columns easily.

Activate the Plugin

The Columns Shortcode plugin is already available to all VIPs. Simply ask the administrator on your account to go to VIP > Plugins in your dashboard to activate it. It just takes one click.

Creating Columns

Once the plugin is enabled, you will see a new button appear on top of your post editor:

column-shortcodes

When you click on it, it will give you multiple options to create two, three, four, five, and six columns. Clicking these will insert shortcodes to help you create columns.

column-shortcodes-2

How To Use Shortcodes

For example, if you’re looking to create three columns, you will use the following shortcodes. Note that the last column has a different shortcode.

[[one_third]
Column A Content Here
Column A Second Line Here
Column A Third Line Here
Column A Fourth Line Here
[/one_third]]

[[one_third]
Column B Content Here
Column B Second Line Here
Column B Third Line Here
Column B Fourth Line Here
[/one_third]]

[[one_third_last]
Column C Content Here
Column C Second Line Here
Column C Third Line Here
Column C Fourth Line Here
[/one_third_last]]

And it will display like this:

[one_third]
Column A Content Here
Column A Second Line Here
Column A Third Line Here
Column A Fourth Line Here
[/one_third]

[one_third]
Column B Content Here
Column B Second Line Here
Column B Third Line Here
Column B Fourth Line Here
[/one_third]

[one_third_last]
Column C Content Here
Column C Second Line Here
Column C Third Line Here
Column C Fourth Line Here
[/one_third_last]

How To Embed a Twitter Timeline Widget

1. Create the Widget

Go to Twitter and create your Twitter Widget. Here, you can pick your color scheme and size your Twitter widget.

Under domains, be sure to whitelist your site’s domain. This doesn’t have to be your xyz.wordpress.com domain, it can be your site domain.

Screen Shot 2013-02-01 at 2.27.33 PM

2. Insert it into your post

To insert it into your WordPress.com VIP post, paste the following shortcode into your post editor:

[twitter-timeline id=1234 username=usernamehere]

id = the long string of numbers you see in the URL while editing your Twitter widget
username = your twitter handle, without the @ symbol

Example:

Screen Shot 2013-02-01 at 2.34.54 PM

When you’re all done, it should look something like this:

Embedding rich media in your post

As a member of WordPress.com VIP, you are able to embed rich media into your posts. This document will quickly explain how embedding works.

Commonly Used Embeds

Looking to embed content from YouTube, Hulu, InstagramVimeoBlip.tvCNNMoney videoDaily MotionGist or Reddit? Simply copy the URL in your browser bar while viewing the video or photograph, and paste it into your editor on its own line. We’ll automatically embed the content for you.

Note: Make sure the URL is not linked or formatted in any way, and that it is on its own line. You can read more about WordPress’s custom embeds here.

Looking to embed content from Scribd, Slideshare, Wufoo, Flickr Video, SoundCloud or Bandcamp? Each of these services offers a WordPress.com shortcode that you can paste directly into your post editor. Click on the service’s name above for more information on how to embed their content.

Scripts, iFrames, and Objects

WordPress.com VIP handles embeds and scripts that haven’t already been whitelisted above in a special way for security protection. Here’s how to embed code that begins with `<script>, <iframe>, <object>`.

1) In your post editor, there is a tool above the formatting bar that allows you to include scripts. You can click either “Add Media” or “Add Embed.”

Screen Shot 2013-07-22 at 5.55.27 PM

2) A window will pop up. Be sure to select the “Insert Embed” tab. Paste the script code into this window, and click “Insert.”

Screen Shot 2013-07-22 at 5.55.56 PM

3) A shortcode will be inserted in your post, representing your protected embed.

Custom Widths/Heights For “Protected Embeds”

Our “protected embeds” feature attempts to make an educated guess at the ideal width or height of your embed, but if the object you’re embedding doesn’t make those values obvious, we’re not always able to do that. Instead, you can specify your own width or height attributes for the iframes in the shortcode, as such:

protected-iframe id="#" info="#" width="100%" height="200"

Importing Content with Embeds

If you’re importing content from a non-VIP site, you may have embedded scripts, iframes and objects that need to work on your WordPress.com VIP site. To ensure this happens, please open a support ticket and request that we handle the initial import for you, which will allow that embedded content to pass through the import process. Then, when you next edit one of those posts or pages, the embed will be automatically converted to a protected embed.

Ready to get started?

Tell us about your needs

Let us lead the way. We’ll help you select a top tier development partner. We’ll train your developers, operations, infrastructure, and editorial teams. We’ll coarchitect your deployment processes. We will provide live support for peak events. We’ll help your people avoid dark alleys and blind corners, and reduce wasted cycles.