Define WordPress Content Width

All oEmbeds are not created equal

Content Width is a feature in themes that allows you to set the maximum allowed width for videos, images, and other oEmbed content in a theme.

That means, when you paste that YouTube URL in the visual editor and WordPress automatically displays the actual video on the front-end, that video will not exceed the width you set using the $content_width variable.

For example, to limit any embedded content to 600px in width, add the following to the functions.php:

if ( ! isset( $content_width ) )
  $content_width = 600;

WordPress also recommends addition of the following CSS rules to your style.css:

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
  max-width: 100%;
  height: auto;
}

While the Content Width feature is useful, its a bit heavy handed. It aggressively defines the content width for ALL content. What if you wanted videos of a larger width on pages than in posts and an even larger size in a custom post type? Currently, there is no way to define this.

There is however a feature request proposing the inclusion of the $content_width variable into the built-in add_theme_support().

A welcome conditional

Any front-end littered with conditional statements quickly gets out of hand but if and until this feature is part of the WordPress core, a conditional statement is the only way to make it versatile.

Crack open the current Twenty Fourteen theme and you’ll find this function in the functions.php:

function twentyfourteen_content_width() {
  if ( is_attachment() && wp_attachment_is_image() ) {
    $GLOBALS['content_width'] = 810;
  }
}
add_action( 'template_redirect', 'twentyfourteen_content_width' );

This function is several lines down in the functions.php. The very first function in the functions.php, however, is one that defines the content width at a seemingly arbitrary max-width of 474:

if ( ! isset( $content_width ) ) {
  $content_width = 474;
}

The twentyfourteen_content_width() function is, ostensibly, one that reneges on the previously defined core function. Its a Mulligan. A do-over. This function is taking what was defined and changing it for pages that are attachments and that have images as said attachments.

Until an official function is added to core, though, implementing the above is the only way to conditionally define content width.