Media Explorer

Using the Media Explorer, you can now insert tweets and YouTube videos without ever leaving WordPress.

This tool lets you search Twitter and YouTube from inside the “Insert Media” window in your WordPress.com Dashboard, which makes it easy to find and embed relevant Tweets and videos in your posts and pages.

To open the Media Explorer, click the “Add Media” media button.

media explorer button

Search and Embed from Twitter

Search Twitter directly and embed Tweets in your posts and pages with a single click!

Click the “Add Media” button as you would normally do to insert an image, and look for the “Insert Tweet” option in the sidebar:

Twitter search

Across the top of the search window, you’ll see several options for how to search:

  • All — search for your term in the content of tweets, as well as in Twitter hashtags and usernames;
  • With Hashtag — search for tweets with a specific hashtag;
  • By User — search for tweets by a certain user (search by Twitter username);
  • To User — search for tweets that reply to or mention a certain user (search by Twitter username); or
  • By Location — search for tweets that are “geotagged” with a certain location (the search field will detect your current location, but you can search for any location).

Select the Tweet you want to embed, click “Insert,” and the Tweet will be automatically embedded in your post:

For additional display options, check out this support document on how to use the Twitter shortcode to modify the width, language, and more.

Search and Embed from YouTube

You can also search YouTube and easily embed videos and playlists. Click the “Add Media” button as you would normally do to insert an image, and look for the “Insert YouTube” option in the sidebar:

YouTube options

Across the top of the search window, you’ll see two options for how to search:

  • All — search for your term in the content of videos and playlists, as well as in YouTube usernames; or
  • By User — search for a certain YouTube username.

Select the video or playlist you’d like to embed and click Insert. The link will be added to your post, which will automatically embed the chosen video:

You can customize the video’s appearance using the YouTube shortcode; see this support document for details.

Adding Other Services

You can add other social media services, as well. For full instructions on how to do this, please see the Extending Media Explorer developer documentation.

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:

Column 1 info here Column 1 info here Column 1 info here
Column 2 info here Column 2 info here Column 2 info here

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:

 

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
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 

around content after the columns to prevent it from wrapping.

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:

Using the Liveblog Plugin

Introduction

The Liveblog Premium Add-On helps with quick and simple blogging for following fast-paced events. It allows authors to edit the post quickly, and readers to receive realtime updates.

Activating the Liveblog Plugin

To activate the Liveblog Premium Add-On, please get in touch!

Creating a Liveblog

The liveblog lives inside of a regular WordPress post. First create a new post, complete with title, category, and maybe a short introduction. Once the liveblog plugin is installed, you will see a liveblog box on your “Edit Post” page. Simply click “Enable” to activate it, and publish the post.

If you can’t find the box, be sure that it is toggled on under “Screen Options” in the top right corner of posting page.

Screen Shot 2013-01-18 at 12.19.13 PM

Posting to the Liveblog

To post to the liveblog, navigate to the live post, and start typing. Click “Publish Update,” and your readers will see the post appear at the top of their screen. That’s all there is to it.

Screen Shot 2013-01-18 at 12.21.43 PM

Adding a Photo

To add a photo to your update, simply drag-and-drop it into the posting box from your desktop. It will upload the image and include a link. To see the image, click “Preview.”

You can also add photos from the internet by pasting in the direct URL to the image.

drag

Embedding Media

To embed tweetsYouTube videos, Vimeo videosInstagram photosHulu clips, or Spotify songs, simply paste the URL while viewing the media into the posting box on its own line. More details can be found about each media type in the links above.

Screen Shot 2013-01-18 at 12.32.59 PM

Formatting a Post

The liveblog posting box takes standard HTML formatting. To format text, simply wrap it in HTML tags.

Examples:

<strong>bold</strong>
<i>itals</i>
<u>underline</u>
<blockquote>

quote

</blockquote>
<a href=”http://www.wordpress.com”> a link </a>

Links that are pasted directly the posting box will also be automatically hyperlinked.

Manually embed a Liveblog

Sometimes you may need to manually insert the Liveblog into your theme. For this, we provide a function which simply outputs the Liveblog HTML on a post where the Liveblog is enabled.

wpcom_liveblog_get_output()

Editing Previous Posts

While a liveblog is enabled, you can edit previous posts by clicking the “Edit” button next to the update.

Screen Shot 2013-01-18 at 11.40.43 AM

Archiving a Liveblog

Once the event has wrapped up, you can archive your liveblog. This means that visitors will still be able to see the blog, but the editing tools will go away and the post will stop polling for updates. You can archive and re-enable a liveblog from the Edit Post page.

Screen Shot 2013-01-18 at 11.15.12 AM

When a liveblog is archived, your editors will see a notification that says the liveblog must be enabled to accept new posts.

Screen Shot 2013-01-18 at 11.19.52 AM

“Smart” Updates

The liveblog uses smart updates, making it easy for your readers to enjoy your liveblog without being overwhelmed with updates. If the reader’s browser is at the top of the post, new posts will automatically appear, highlighted in yellow.

Screen Shot 2013-01-18 at 11.32.38 AM

However, if your reader has scrolled down the post to catch up on previous updates, liveblog will wait to update with new posts. Instead, a notification bar will appear at the top of the screen. When the reader clicks on the bar, the new updates will resume loading at the top of the page.

Screen Shot 2013-01-18 at 11.30.51 AM

Post times are also now relative, which means it will display as “2 minutes ago,” with the time updating every minute.

Overriding default templates

Templates used by the plugin can be found in the /templates/ directory of the plugin.

You can edit these files in an upgrade-safe way using overrides. Copy the files you want to change into a directory named /liveblog within the root of your theme, keeping the same filename.

Eg: In order to override a single entry template copy templates/liveblog-single-entry.php to yourtheme/liveblog/liveblog-single-entry.php

The copied file will now override the Liveblog default template file.

Check out the related code on GitHub.

Custom location for Liveblog templates

In case the /liveblog directory in the root of your theme is not what would suit your needs, you can take advantage of the `liveblog_template_path` filter and pass in a custom absolute path without trailing slash which would then be used for template look-up.

Check out the related code.

Need more help?

If you have further questions, please don’t hesitate to contact us.

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.