Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
Have you heard of WordPress $content_width?
The WordPress theme check is a great plugin. For those who haven’t seen it it’s a way to check that you theme covers all of the functionality required to be added to the WordPress.org theme directory. I have been using this plugin to help me test the themes that I am creating on Pro Theme Design.It covers a surprisingly wide array of tests, making sure that you don’t have any errors, and that you support all the most important elements of WordPress (to provide maximum bang for buck).
One of the features it checks for is use of the $content_width variable – and this isn’t something I have ever seen used or mentioned, so I thought I would do a bit of research into it.
$content_width;
So, it turns out, that the usage is simple. The variable is a global variable that is used to set the width of the content on the site. The only thing this affects is the images uploaded to the image uploader, and videos embedded with the video shortcodes. Setting the variable correctly means that the images will have a resized version that fits perfectly within your content – so it’s definitely a nice thing to include.
The recommended implementation is to add the following to your functions.php file in the theme root.
if ( ! isset( $content_width ) ) $content_width = 900;
Personally I would like to see this variable filterable so that I don’t have to add some random floating code in my functions.php
If you want to try the WordPress Theme Check plugin for yourself then you can download it from WordPress.org.
Wow, I had never heard of that. $content_width sounds pretty darn handy, indeed! Thanks Ben.
Sounds like a good plugin to try! Supporting all the required elements of wordpress is what we strive for especially when it comes to the design and layout of a website. This should make the job a little easier. I can also see the importance of the content width feature within wordpress especially if you intend on uploading a lot of photos to your website.
Actually it is filterable: A parent themes functions.php loads before the child themes functions.php file. So if you’re setting
if ( ! isset( $content_width ) ) $content_width = 123;, then it is overridable from within your child themes functions.php file.Actually, a child theme’s functions.php loads first.
That doesn’t matter as you can simply hook in after the main theme has loaded.
Thanks! Your article helped me a lot to make this clear!
I’m finding this overrides the setting in Media Settings. That is, the largest image size available via “Add Image” corresponds to my $content_width, not to the Media Settings width.
It’s a strange setting, me thinks, as it’s common for text to have different widths in different areas of a site. Not to mention Responsive designs. I’d prefer more granularity, such as the ability to set or override it per template, or even per block.
Setting it per template is easy – just check what type of page it is and set the width accordingly. 🙂
I have creating a Responsive theme for my client. How much width should be given for a responsive theme?
Interesting question – I have the same issue when creating my own responsive sites.
Normally when you make responsive sites you have a maximum content width – and when the width is likely to grow larger you alter the design – so I use the maximum size as the content_width