Latest revision as of 14:55, 14 March 2023

Languages: English • 日本語 (Add your language)

Content Width is a theme feature, first introduced in Version 2.6. Using this feature you can set the maximum allowed width for any content in the theme, like oEmbeds and images added to posts.

Using this theme feature, WordPress can scale oEmbed code to a specific size (width) in the front-end, and insert large images without breaking the main content area.

Adding Theme Support

Since Version 2.6, themes need to specify the $content_width variable in the functions.php file, like so:

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

It's also recommended to add the following CSS to your theme:

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

Notes: This variable is also used when displaying a pop-up selection in the Media Editor. If you have used the global $_wp_additional_image_sizes to allow a pop-up of your custom image sizes defined using add_image_size() then the $content_width will override the width specified by your add_image_size() function. (The array $_wp_additional_image_sizes is covered in get_intermediate_image_sizes() and basically holds the name/height/width of your various image sizes available.)

Example: Suppose you define a 640x320 image using

add_image_size( 'full-width-horizontal', 640, 320,true );

If you have set your $content width to 600 for some reason

$content_width = 600;

then you also add your size to the media pop-up using this example by kucrut the result will be a pop-up that shows
"Full width horizontal - 600 x 300"
rather than the expected
"Full width horizontal - 640 x 320"

Future Development

• add_theme_support( 'content-width', $defaults ); - Trac ticket #21256

Resources

• "Why the content width global sucks" - a detailed explanation of what it really does.

Related

Theme Support: add_theme_support(), remove_theme_support(), current_theme_supports()
Theme Features: sidebar, menus, post-formats, title-tag, custom-background, custom-header, custom-logo, post-thumbnails, automatic-feed-links, html5, editor-style, content_width