How to Change the $content_width Variable in WordPress

It’s funny. No matter how long you’ve been using WordPress, there always seems to be something new to discover, even if it’s existed forever. For me that would be the $content_width variable.

Here’s how I stumbled upon it. I recently changed my theme on another blog of mine, when I noticed that the large image size wasn’t correct. I had it set to 1024 in Settings->Media, yet in the media screen, when inserting an image to a post, the large size was showing as 678. Odd.

That was not the first time I had noticed that either. I’ve noticed that the large size doesn’t usually match up to what you set for years. Yes, literally years. However, it was never a big deal with previous themes; it worked out regardless. This time though, I was determined to figure out why.

$content_width

So, I did a search on the parent theme for the value 678 (I have a child theme). I came across this.

function ribbon_lite_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'ribbon_lite_content_width', 678 );
}
add_action( 'after_setup_theme', 'ribbon_lite_content_width', 0 );

Well, that was easy enough to find.

I then did some research on the variable. The $content_width variable is used by WordPress to effectively set a maximum width for various elements – including image sizes. It’s also used for videos as well, another issue I was running into.

Anyway, so while I may have set the large image size to 1024, it showed as 678 because that was the size set by $content_width, so it takes precedence and restricts anything larger.

Normally, you can just set the variable simply like this inside your child theme’s functions.php file:

$content_width = 770;

And that should override the parent theme’s setting of it. However, because my parent theme set it up using a filter, it meant I had to override that filter.

To do that I did this:

add_filter('ribbon_lite_content_width', function($content_width) {
    $content_width = 770;
    return $content_width; 
});

In Closing

So, if you find just setting $content_width┬áin your child theme doesn’t work then you will need to look in your parent theme for where it’s set. Find the function they use to set it, and then write your own filter to override it. That’s it!

Please Rate this Article

Please take a second to rate this. It helps us deliver to you the stuff you enjoy.

How to Change the $content_width Variable in WordPress
3 (60%) 2 votes

Author: Thor

I started blogging in 2009 for my gaming blog Creative Twilight. I've been blogging ever since.

I later created Command Center, a tool for 40K. I've also set up, maintain, and run my wife's site ecoLifestyle for her business.

I'm also a PHP programmer for a local web hosting company where I develop WordPress plugins.

Leave a Reply!

Note: You can comment as a guest by clicking the field indicated Name and checking off “