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.

Libraries (plugins/lib)

Much as our Shared Plugins directory provides a wide variety of useful, battle hardened, and maintained plugins, Shared Libraries aims to provide a central repository of reusable and maintained code libraries for use by our VIP customers. Shared Libraries reduces the hassle of including, maintaining, and reviewing, and lets you focus on what’s really important: making amazing WordPress websites!

To get started with Shared Libraries, checkout plugins from SVN. All shared libraries live under plugins/lib.

To utilize a shared library in your code, simply include it with:

wpcom_vip_require_lib( 'codebird' );

We have various libraries such as OAuth (via OAuth.php), the Brightcove Media API, and WP_Codebird, a PHP Twitter client based on Codebird, with many more to come!

If you know of a solid, useful library that would be a good fit for Shared Libraries, let us know!

Web Fonts and Custom Typefaces

To use a fancy typeface or font on your VIP site(s), we recommend using Typekit or Google Web Fonts. Both have very easy-to-integrate APIs, are optimized to work across a wide range of popular browsers, and have large libraries of beautiful fonts.

For licensed or custom typefaces or fonts, include font files within your themes and embed them using the @font-face declaration in your CSS.

@font-face and cross-domain

Because we serve static assets (like JS and CSS) from CDN domains (e.g. s0.wp.com), we set a “Access-Control-Allow-Origin” header for all font files to prevent cross-domain issues in certain browsers (like Firefox). Older base64-based approaches are no longer needed as workarounds.

Adding Open Graph Tags

Open Graph Tags are automatically enabled for all public, non-VIP blogs on WordPress.com. Open Graph tags make it easier for you to control what information Facebook, Google+, and other services display when users share posts from your site. VIP sites are excluded as many existing themes already have custom code that handles these tags. This functionality also enables additional Twitter Card-related metadata.

To enable Open Graph tags, add the following helper function to your functions.php and the tags will be auto-generated for you.

wpcom_vip_enable_opengraph();

The code that generates the tags can be found in Jetpack.

If you’d like to fine-tune the output of the tags, you can filter jetpack_open_graph_tags and modify the array that’s passed in. Find some examples on the Jetpack blog.

Twitter and WordPress.com

Twitter can be integrated in multiple ways with your WordPress.com VIP site:

  • Pushing out content updates.
  • Integrating Twitter updates in your site’s theme.
  • Providing your users a quick way to Tweet/share your site’s content.

WordPress.com Publicize

In addition to sending your content updates to Facebook and Yahoo!, the WordPress.com Publicize feature also supports Twitter updates. A full description of the feature can be found at the Publicize WordPress.com Support page.

WordPress.com VIPs can further customize how Publicize works by following our customization guide.

The Twitter Widget

The Twitter widget allows you to display updates from a Twitter account in the sidebar of your blog. It creates an unordered list whose look and feel can be easily altered using CSS.

A full description of this widget can be found at the Twitter Widget WordPress.com Support page.

/via in Tweets

If you’re using the built-in WordPress.com Sharing buttons, we have a helper function to customize the “/via” tag appended to Tweets. Just add the following to your functions.php and change the argument to the username you want attributed.

wpcom_vip_sharing_twitter_via( 'automattic' );

If you want to disable the “/via”, just pass in false:

wpcom_vip_sharing_twitter_via( false );

Modifying Related Accounts

By default the Twitter sharing on WordPress.com will include the Twitter account @wordpressdotcom as a “related” account in the share link. After the resulting Tweet is posted, Twitter might then offer that related Twitter account as a suggested account to follow.

If you’d like to add additional Twitter accounts in front of the default, you can add a filter to your theme code:

add_filter( 'jetpack_sharing_twitter_related', function( $related, $post_id ) {
	$related = array(
		'@firsttwitteraccount' => 'A custom description here',
		'@secondtwitteraccount' => 'A second custom description here'
	);	
	return $related;
}

Twitter Cards

To automatically add Twitter Cards support for your site, just use our Open Graph Tags. We’ll add some additional metadata including some user-specific info if you’re using Publicize.

You can customize the output of the tags using the jetpack_open_graph_tags filter:

function my_add_twitter_card_extras( $tags ) {
	$tags[ 'twitter:site' ] = '@automattic'; // set @username of website
	return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'my_add_twitter_card_extras' );

The Twitter API

Need to interact with the Twitter API? Check the WP Codebird library included in our Shared Libraries.

Manipulating Images

WordPress.com automatically handles images in ways that should help minimize the need to manually perform image resizing, cropping, and optimization:

  • For high-DPI (aka Retina) devices, we automatically serve higher resolution versions of images in most cases; you should not need to upload or reference separate higher-resolution images. (This does not take effect for graphics defined by CSS, canvas, SVG, etc.)
  • In theme images, we perform automatic lossless compression on PNG and JPEG images that can be losslessly compressed, and automatically commit the compressed version to your theme’s subversion repository.
  • We also support the WebP image format—and while WebP isn’t yet supported by all browsers, we auto-detect which browsers your readers are using to make sure they can enjoy your images at the best possible quality. Our system will always serve your viewers the best image format at the highest speed possible.
  • Images uploaded directly through WordPress are also compressed using lossless methods by default. You can optionally specify lossy compression methods as well.

We have a few different solutions for resizing and cropping available if you need to create thumbnail versions of your images. Which method you should use depends on where the image is hosted and where the image will be displayed:

For Posts And Pages

This is the most common situation, where you want to have an image that is representative of the post or page.

To do this, you’ll want to use WordPress’s built-in Featured Image functionality. Setting the image is really easy. After having done so, you can access and display this image from within your theme. You can even use a different sized thumbnail depending on where you are (single post view, multi-post view, etc.).

You can also define additional image sizes by using the add_image_size function:

add_action( 'after_setup_theme', 'x_setup_image_sizes' );

function x_setup_image_sizes() {
    add_image_size( 'article-image', 300, 300 );
    add_image_size( 'article-image-cropped', 300, 300, true ); // this will force the image size to 300x300 by cropping it
}

Unlike a self-hosted WordPress install, WordPress.com will generate these images on-the-fly.

Multiple Post Thumbnails

If you’ve ever wanted more than one Featured Image on a post, check out the Multiple Post Thumbnails plugin.

Custom Cropping / Editing Thumbnails

If your editorial team needs complete control over the crops for images, you can use the WP.com Thumbnail Editor plugin

For Other Uploaded Images

If the image file is hosted on our websevers, i.e. yourblog.files.wordpress.com, then you can do some on-the-fly resizing and cropping using some query string parameters.

Set a w value to control the width, a h if you want to control the height, and/or crop=1 if you want to crop to those exact width and heights. We have a helper function that can handle this for you.

Example:

wpcom_vip_get_resized_attachment_url( $attachment_id, 100, 50, true );

That will get you the following URL:

https://vip.files.wordpress.com/2010/09/wpcomlogo.png?w=100&h=50&crop=1

For Other Locations

We also have functionality for resizing and cropping images that are hosted anywhere (both on our servers and elsewhere). Here’s some example code:

echo '<img src="' . wpcom_vip_get_resized_remote_image_url( $url, $width, $height ) . '" alt="Image" />';

This function will return the URL to a resized and then cropped version of $url, served off of our CDN and escaped of all HTML entities. If you want the raw URL (with no HTML escaping), pass false as a fourth parameter.

This is powered by our own Photon service which we use to “edit” images. It’s important to not call this RESTful API directly, but to use the function described above. If you are looking to edit the image in another way, give us a holler.

Note that this function will only work on WordPress.com or on a self-hosted test site which is public, and not your local test environment, since the images need to be publicly accessible.

Image Compression

As mentioned above, we automatically perform lossless compression on images included in your theme and plugins, as well as images that you’ve uploaded through WordPress directly.

If you’d like to further optimize your uploaded images with lossy compression methods, we have a function you can use to enable that:

wpcom_vip_set_image_quality( $quality, $strip )

$quality can be a value between 0 and 100, where 100 is the original image quality.

$strip refers to meta data embedded in the file and has the following options:

info: will remove thumbnails, all Exif, IPTC and comment data from the image.
color: will remove any ICC color profiles present in the image.
all: will remove all of the above.

Note, none of these settings converts to sRGB, also these settings apply to images at the time they are displayed via our CDN; the original uncompressed image is still retained, allowing you to change quality settings later.

This function can be called direction in functions.php, or elsewhere in your theme code where you’re defining image display settings for a particular feature on your site.

Custom image sizes and custom cropping

Since WordPress.com does not store additional image sizes but rather generates them on the fly with Photon it can pose some problems with functionality that expects those image sizes to be present. For custom cropping and image sizes we recommend using wpcom_vip_get_resized_attachment_url() which allows you to specify a width, height as well as x and y of the cropping.

Fetching Remote Data

If you need to fetch data from another server, you should remember that doing so is a relatively slow process and that you can run into problems if there are any timeouts.

To help you to efficiently and robustly fetch your data, we have created two helper functions that you can use.

Both functions are defined in our vip-helper.php file, which can be loaded by including vip-init.php from within your theme’s functions.php file as described in our Development Environment document.

wpcom_vip_file_get_contents()

wpcom_vip_file_get_contents() works much like PHP’s built-in file_get_contents() function (although it no longer internally uses it). It returns either the HTML result as a string or false on failure. However, it caches and even returns previously cached data if a new remote request fails. We strongly recommend using this function for any remote request that does not require receiving fresh, up-to-the-second results, i.e. anything on the front end of your blog.

  1. The URL you want to fetch. This is the only required argument.
  2. The timeout limit in seconds. Can be 1 to 10 seconds and it defaults to 3 seconds. We strongly discourage using a timeout greater than 3 seconds since remote requests require that the user wait for them to complete before the rest of the page will load.
  3. The minimum cache time in seconds. It cannot be less than 60 and it defaults to 900 (15 minutes). Setting this higher will result in a faster site as remote requests are relatively slow. Results may be cached even longer if the remote sever sends a cache-control header along with its response, and if that value is larger than this value. See below for details and how to disable this.
  4. An array of additional advanced arguments. See below.

The fourth parameter is an optional argument that can be used to set advanced configuration options. The current additional advanced arguments are:

  • obey_cache_control_header — By default if the remote server sends a cache-control header with a max-age value that is larger than the cache time passed as the third parameter of this function, then this remotely provided value will be used instead. This is because it’s assumed that it’s safe to cache data for a longer period of time if the remote server says the data is not going to change. If you wish to ignore the remote server’s header response and forcibly cache for only the time specified by the third parameter, than a function call along these lines should be used:
    echo wpcom_vip_file_get_contents( 'http://example.com/file.txt', 3, 900,
    array( 'obey_cache_control_header' =&gt; false ) );
    
  • http_api_args — Allows you to pass arguments directly to the wp_remote_get() call. See the WordPress.org Code Reference for a list of available arguments. Using this argument will allow you to send things like custom headers or cookies. Example usage:
    echo wpcom_vip_file_get_contents( 'http://example.com/file.txt', 3, 900,
    array( 'http_api_args' =&gt; array( 'headers' =&gt; array( 'Accept-Encoding' =&gt; 'gzip' ) ) ) );
    

Note that like PHP’s file_get_contents() function, wpcom_vip_file_get_contents() will return the result. You will need to echo it if you want it outputted. This is different from our previous and now deprecated functions, including vip_wp_file_get_contents().

vip_safe_wp_remote_get()

vip_safe_wp_remote_get() is a sophisticated extended version of wp_remote_get(). It is designed to more gracefully handle failure than wp_safe_remote_get() does. Note that like wp_remote_get() and wp_safe_remote_get, it does not cache. Its arguments are as follows:

  1. The URL you want to fetch. This is the only required argument.
  2. This argument is optional. Pass false if you need to set any of the next arguments.
  3. The number of fails required before subsequent requests automatically return the fallback value. This prevents continually making requests and receiving timeouts for a down or slow remote site. Defaults to 3 retries. Cannot be more than 10.
  4. Number of seconds before the request times out. Can be 1, 2, or 3 and it defaults to 1 second.
  5. This argument controls both the number of seconds before resetting the fail counter and the number of seconds to delay making new requests after the fail threshold is reached. Defaults to 20 and cannot be less than 10.

If you’re confused, here’s some examples that should help clarify:

// Get a URL with a 1 second timeout and cancel remote calls for
// 20 seconds after 3 failed attempts in 20 seconds have occurred
$response = vip_safe_wp_remote_get( $url );
if ( is_wp_error( $response ) )
	echo 'No data is available.';
else
	echo wp_remote_retrieve_body( $response );

// Get a URL with 1 second timeout and cancel remote calls for 60 seconds
// after 1 failed attempt in 60 seconds has occurred. On failure, display "N/A".
$response = vip_safe_wp_remote_get( $url, false, 1, 1, 60 );
if ( is_wp_error( $response ) )
	echo 'N/A';
else
	echo wp_remote_retrieve_body( $response );

fetch_feed()

WordPress’s built-in fetch_feed() function should be used for fetching and parsing feeds. It has built-in caching that defaults to 43200 seconds (12 hours). To change that value, use a filter:

function someprefix_return_900() {
	return 900;
}

add_filter( 'wp_feed_cache_transient_lifetime', 'someprefix_return_900' );
$feed = fetch_feed( $feed_url );
remove_filter( 'wp_feed_cache_transient_lifetime', 'someprefix_return_900' );

wpcom_vip_wp_oembed_get()

`wpcom_vip_wp_oembed_get()` is a wrapper for WordPress’ own `wp_oembed_get()` but with added caching.

Uncached Remote Requests

If for some reason you need to make an uncached remote request, such as to ping an external service during post publish, then you should use the powerful and flexible WordPress HTTP API rather than directly using cURL or some other method like that.

Note that uncached remote requests should never run on the front end of your site for speed and performance reasons.

cURL fopen fsockopen

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.