Powered By WordPress.com VIP

As a member of VIP, your theme should have a “Powered by WordPress.com VIP” link displayed. Most people put this link in the footer of their website.

Rather than hardcoding this link, we would prefer if you used existing helper functions to do it. This makes it much easier to maintain the link’s URL and such in the long run.

Widget

If you want, we have a widget available to VIPs that will display this link. It requires no theme modifications and can go directly into your sidebar or even your footer if you have a widget area set up there.

PHP Function

The more flexible solution is our helper function, vip_powered_wpcom(). Example:

<?php if ( function_exists('vip_powered_wpcom') ) { echo vip_powered_wpcom(); } ?>

If called with no arguments, vip_powered_wpcom() will return the following:

Powered by <a href="http://vip.wordpress.com/" rel="generator">WordPress.com VIP</a>

However you can customize that to better fit your site if you wish.

The first argument controls the output type. The default is text, but you can also pass the numbers 1 through 6 to use one of these images instead of text:

1.

2.

3.

4.

5.

6.

The second parameter only applies to the text format and controls the text before the link. It defaults to “Powered by ” (note the trailing space).

Redirect the Feed To Feedburner

To redirect the feed to Feedburner, use vip_main_feed_redirect() from vip-helper.php. For example, you would add the following line to functions.php:

vip_main_feed_redirect( 'http://feeds.feedburner.com/FEEDNAME' );

This function includes logic for batcache to serve the feed dynamically to Feedburner.

Image Resizing And Cropping

We have a few different solutions available if you need to thumbnail 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 ); // this should be called in a callback for after_setup_theme
    the_post_thumbnail( 'article-image' );
}

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

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 strongly recommend using add_query_arg() to add these query string parameters.

Example:

$url = 'http://vip.files.wordpress.com/2010/09/wpcomlogo.png';
$url = add_query_arg( 'w', 100, $url );
$url = add_query_arg( 'h', 50, $url );
$url = add_query_arg( 'crop', 1, $url );

That will get you the following URL:

http://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.

Altering Feeds

You may want to provide a custom RSS feed, or alter the content of an existing feed. The following examples show how easily this can be done by using some filters and actions.

Custom Feeds

To add new feeds to your site, use WordPress’s add_feed() function. It will handle a majority of the under-hood magic for you.

Altering Existing Feeds

/**
 * Example on how to implement custom feeds without code duplication
 * In this example a secondary feed that will return all posts of the last two weeks
 * with stripped out images will be implemented.
 * to access the feed use /feed/?show_custom_feed=two_weeks
 */

/**
 * Add custom variable 'my_show_custom_feed' which we will use to identify our feed.
 */
function my_add_custom_feed_var( $query_vars ) {
	$query_vars[] = 'my_show_custom_feed';
	return $query_vars;
}
add_action( 'query_vars', 'my_add_custom_feed_var' );

/**
 * Recognize feed and parameters and initialie actions accordingly.
 */
function my_change_custom_feed( $query ) {
	if ( $query->is_feed() && 'two_weeks' == $query->get( 'my_show_custom_feed' ) ) {
		// this filter is used to alter the where statement for the feed
		add_filter( 'posts_where', 'my_filter_last_two_weeks' );

		// the following two filters allow altering the content. in our example filtering images
		add_filter( 'the_content_feed', 'my_alter_feed_content' );
		add_filter( 'the_excerpt_rss', 'my_alter_feed_content' );

		// it would be also possible to alter the query directly via $query->set()
		// $query->set( 'cat', '123' ); // display only posts with category id 123
	}
	return $query;
}
add_filter( 'pre_get_posts', 'my_change_custom_feed' );

/**
 * Alter where query to limit posts to the last 14 days
 */
function my_filter_last_two_weeks( $where = '' ) {
	global $wpdb;
	$where .= $wpdb->prepare( " AND $wpdb->posts.post_date > %s", date( 'Y-m-d', strtotime( '-14 days' ) ) );
	return $where;
}

/**
 * Filter img tags from content and excerpt.
 */
function my_alter_feed_content( $content ) {
	$content = preg_replace( '#(<[/]?img.*>)#miU', '', $content );
	return $content;
}

Modifying Images within Feeds

Serve up larger sized images as part of the Media RSS component.

function my_remove_size_args_from_feed_featured_image( $medias ) {
	foreach ( $medias as $key => $media ) {
		// Skip items without a thumbnail, i.e. Gravatars and such
		if ( empty( $media['thumbnail'] ) )
			continue;

		// Make sure we have the required data
		if ( empty( $media['content'] ) || empty( $media['content']['attr'] ) || empty( $media['content']['attr']['url'] ) )
			continue;

		// Replace thumbnail URL with fullsize URL
		$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
		$medias[$key]['content']['attr']['url'] = $image[0];
	}

	return $medias;
}
add_filter( 'mrss_media', 'my_remove_size_args_from_feed_featured_image', 15 );

Allow Contributors to Upload Images

When images or other attachments are uploaded to a non-private WordPress site, the images are immediately public and can be shared on the Internet. This is why Contributors cannot normally upload images or files.

The VIP plugin repository file vip-helper-wpcom.php includes a helper function called vip_contrib_add_upload_cap() which will allow Contributors to upload. For Enterprise sites, there’s a plugin that can be activated from the admin called “Allow Contributors to Upload.”

Gravatars and Blavatars

Gravatars

A Gravatar is a Globably Recognized Avatar (and Profile), a service by Automattic that allows any person to assign an image to an email address. WordPress.com makes extensive use of Gravatars whenever possible, and we recommend using them in your theme and assigning a Gravatar to every author.

For user profiles and Gravatar management instructions, please visit the Gravatar and Public Profile pages on the WordPress.com support site.

To learn how to implement Gravatars in your site theme, please visit Using Gravatars in the WordPress.org codex.

Tip: If you are not seeing avatars on your site, check to make sure Avatar Display is enabled in Settings -> Discussion.

Blavatars

Blavatars are site icons which are automatically used on WordPress.com as the site favicon, iPhone home screen icon, etc.
You can set your site Blavatar under Options -> General in the site dashboard.

Note: If your theme already contains a reference to an icon in the header.php file, the blavatar will be ignored.

You can also use the blavatar directly in your theme, with the following functions:

blavatar_exists( $domain )
get_blavatar( $url, $size = '96')
blavatar_current_domain()

Example:

if ( blavatar_exists( blavatar_current_domain() ) )
    echo get_blavatar( blavatar_current_domain(), 128);

Tips & Tricks

The following are custom made solutions, code tips, tricks, and modifications that we’ve learned from or developed for your fellow VIP Hosting partners.

• Allow Contributors to Upload Images
• Altering Feeds
• Gravatars and Blavatars
• Backups and Restoration
• Changing Core WordPress Strings
• Configure Ad Code Manager to manage the advertisements on your site
• Custom Fields
• Customizing Invites
• Customizing Publicize Sharing Behavior
• Deleted Image, But Still There!
• Faux Single Sign-On (SSO)
• home_url() vs site_url()
• Image Resizing And Cropping
• Infinite Scroll
• List Posts By A Co-Author
• Developing for Mobile Phones and Tablets
• Adding Open Graph Tags
• Powered By WordPress.com VIP
• Redirect the Feed To Feedburner
• Register Additional HTML Attributes for TinyMCE and WP KSES

Backups and Restoration

Having frequent and reliable data backups is vitally important, both if you’re self-hosted or here on WordPress.com. We have a comprehensive backup strategy in place on WordPress.com.

Data

• VIP sites are backed up every hour.
• Real-time copies of the data are stored in 3 data centers.
• We have offsite backups for additional data protection.
• For your own development and testing purposes, you can simply export all of your site’s content at Tools > Export in the Dashboard.

Restoring

• Most of the time, you’ll want to contact us and let us know that a restore from backup is necessary. If it’s only one post, or a few, we will likely have different approaches.
• If you have a previous data export of your own, use Tools > Import in the Dashboard.
• If a full restoration is needed, contact us as quickly as possible.

Files

All of your VIP theme files (templates, scripts, media) are kept in a Subversion repository. As such, there’s no risk of losing files ever, and your entire revision history is available to you at all times.

Developing for Mobile Phones and Tablets

All WordPress.com sites have a theme for “advanced smartphones” and a separate theme for “dumb devices.” See Mobile Themes > Support — WordPress.com for general support info.

Custom Mobile Themes

If you would like to use custom mobile themes, we can:

• Set a single mobile-theme which will be used for smart and dumb devices.
• Set different themes for smart and dumb.
• Set a theme for smart and our wpcom theme will be used for dumb.
• Set a theme for dumb and our wpcom theme will be used for smart.
• Set a theme specifically for the iPad (otherwise treated as a desktop.)
• Set a theme for all Tablets (excluding the iPad.)

You can grab our custom mobile themes with an SVN checkout.

svn checkout https://wpcom-themes.svn.automattic.com/minileven/

svn checkout https://wpcom-themes.svn.automattic.com/wp-mobile/

If you only need to customize the look and feel of the existing mobile themes, it’s a good idea to create a child theme instead of replicating the existing theme code.

When you have a theme ready, send a zip back to us for review.

Shared Functionality

Note that if you’re using the default mobile themes, your main theme functions.php file will still be loaded. If using a custom mobile theme, we’ll only load your mobile theme’s functions.php file.

If there is common functionality between the main and mobile themes, instead of duplicating the content, we recommend sharing it. You should add a file called functions-shared.php in your main theme that is loaded from both and contains any shared functionality. Alternatively, you can add a file functions-mobile.php in your main theme and load only the plugins/files you want for mobile:

In your mobile theme’s functions.php:

require_once( wpcom_vip_theme_dir( 'main-theme' ) . '/functions-shared.php' );

In your main theme’s functions-shared.php:

// This plugin is used and loaded on desktop and mobile themes
require_once( __DIR__ . '/plugins/bearify/bearify.php' );

Targeting Mobile Visitors

If you want to target mobile users for any reason, you can use WordPress.com’s is_mobile() function.

function jetpack_is_mobile( $kind = 'any', $return_matched_agent = false ) 

Where kind can be:

• smart
• dumb
• any

You can also use:

• Jetpack_User_Agent_Info::is_ipad()
• Jetpack_User_Agent_Info::is_tablet()

Views from mobile devices are batcached and to make sure things work as expected, please let us know before including any additional server-side logic (PHP) in your code.

These are loaded for you automatically.

Mobile to Full Desktop Theme Switching

If you’d like to allow your users to switch from the mobile theme to the regular theme, you can create a link similar to:

View <!--?php bloginfo('title'); ?--> <a href="<?php echo esc_url( add_query_arg( 'ak_action', 'reject_mobile', home_url() ) ); ?>">Regular Theme</a>

For the other way around, use ?ak_action=accept_mobile.

This code is already included in the default mobile themes.

Local Testing

The bulk of our mobile handling code is available via the Jetpack Mobile module. To use it with a custom mobile theme, you can add your mobile theme in the VIP themes repo (wp-content/themes/vip/) and use a snippet like a following in a mu-plugin to toggle the loading of your custom theme:

if ( ! defined( 'VIP_CUSTOM_MOBILE_TEMPLATE' ) )
	define( 'VIP_CUSTOM_MOBILE_TEMPLATE', '' );

if ( ! defined( 'VIP_CUSTOM_MOBILE_STYLESHEET' ) )
	define( 'VIP_CUSTOM_MOBILE_STYLESHEET', '' );

add_action( 'jetpack_modules_loaded', function() {
	if ( '' == VIP_CUSTOM_MOBILE_TEMPLATE || '' == VIP_CUSTOM_MOBILE_STYLESHEET )
		return;

	if ( ! jetpack_check_mobile() )
		return;

	// Remove Minileven's path overrides
	remove_filter( 'theme_root', 'minileven_theme_root' );
	remove_filter( 'theme_root_uri', 'minileven_theme_root_uri' );

	add_filter( 'jetpack_mobile_stylesheet', function( $stylesheet, $theme ) {
		return VIP_CUSTOM_MOBILE_STYLESHEET;
	}, 99, 2 );

	add_filter( 'jetpack_mobile_template', function ( $template, $theme ) {
			return VIP_CUSTOM_MOBILE_TEMPLATE;
	}, 99, 2 );
} );