$content_width is a global variable recognized by both WordPress core and various plugins. It represents the maximum width of the content area excluding margin and padding. It is necessary for every theme to define a value for this variable as well as make adjustments, if needed, for specific templates.
How to Find Content Width
Here is a video showing how to find the content width for the main content area of a website using browser tools:
Setting the Value
$content_width must be set in the global scope as early as possible. We suggest that this is done at the very top of functions.php outside of any class or function. Here is an example:
<?php if ( ! isset( $content_width ) ) $content_width = 640; ?>
In the above example, we have conditionally set $content_width. This will allow a child theme to override this value in the global scope. For a large number of themes, this is all that really needs to be done to support $content_width. However, there are special situations where we need to adjust the value if a particular template is being used.
Adjusting the Value
Many themes ship with one or more custom page templates. A full-width page template is among the most popular. In many full-width page templates the sidebar will be omitted allowing for the width of the post content to increase. In cases like this it is important to adjust the value of the $content_width global to match the new width of the content area. We’ve found that it is best to make this adjustment during the template_redirect action. Here’s an example:
<?php
if ( ! isset( $content_width ) )
$content_width = 640;
function mytheme_adjust_content_width() {
global $content_width;
if ( is_page_template( 'full-width.php' ) )
$content_width = 780;
}
add_action( 'template_redirect', 'mytheme_adjust_content_width' );
?>
Supported Plugins
Many plugins on WordPress.com utilize the value of $content_width to determine the correct rendering size. Here is a list of these plugins:
