As of theme versions 4.0.0 released on December 18, 2018, the content width for all themes is now 720px.
This applies to:
- Foodie Pro 4.0.0 (formerly: 680px)
- Brunch Pro 4.0.0 (formerly: 680px)
- Seasoned Pro 4.0.0 (formerly: 780px)
Back when the Foodie Pro theme was initially set up, the width was specified at 610px and the content displayed at 680px, which was a good sizing setting at the time. Over the years, while the other themes have been updated to 720 px, the Foodie Pro theme remained stubbornly at the old setting.
In order to help our future customers with best practices, versions 4.0.0 and later now use 720 px as the width. Customers who use a version prior to 4.0.0 will need to decide whether the updates are worth the tradeoff.
What will happen to my 680 px images?
For new food bloggers, nothing. Upload your images at minimum 720 px, though we recommend even higher resolutions to future-proof your content. 1440-px width would be a safe size.
Upload images at 1200px width (height doesn't matter)
Update 2020/01/01
For existing blogs looking for upgrade, one of two things:
- If you uploaded at higher resolution (eg. more than 720 px wide), you can use Regenerate Thumbnails to re-build your images and thumbnails at the new sizes and everything should be fine
- If you uploaded at 680 px rather than a higher resolution, your images will appear with some whitespace on the sides (approximately 720 - 680 = 40 / 2 =) 20 px per side - this is not an issue - over 80% of food blog pageviews happen on mobile devices, with screens under 400px, so your images will be full width
Will the themes be at 720 px forever and ever?
This is impossible to predict - no one knows what devices and screen sizes will be popular 5 years down the road. We don't even know if the web as it exists will be the same in 10 years, as augmented reality and virtual reality have change the landscape and utility of websites entirely.
All we know is that at this time and for the foreseeable future, we'll be sticking to 720 px width until some unforeseen circumstance changes this best practice.
If you want to be extra safe, you can upload your photos at 1440px width and rely on WordPress to create and display the correct sizes for you.
How do I undo this?
We do not recommend you undo this. Theme styling and sizing has been updated to reflect the 720px width.
Go into your functions.php file and edit the following line:
function feast_content_width() {
$GLOBALS['content_width'] = apply_filters( 'feast_content_width', 720 );
}
to:
function feast_content_width() {
$GLOBALS['content_width'] = apply_filters( 'feast_content_width', 610 );
}
As well as:
function feast_register_image_sizes() {
add_image_size( 'horizontal-thumbnail', 720, 9999, true );
add_image_size( 'horizontal-thumbnail-small', 360, 9999, true );
add_image_size( 'vertical-thumbnail', 720, 9999, true );
add_image_size( 'vertical-thumbnail-small', 360, 9999, true );
add_image_size( 'square-thumbnail', 360, 9999, true );
}
to:
function foodie_pro_register_image_sizes() {
add_image_size( 'horizontal-thumbnail', 680, 450, true );
add_image_size( 'horizontal-thumbnail-small', 340, 225, true );
add_image_size( 'vertical-thumbnail', 680, 900, true );
add_image_size( 'vertical-thumbnail-small', 340, 450, true );
add_image_size( 'square-thumbnail', 320, 321, true );
}
Note that we don't recommend undo-ing this - this will make future updates more difficult and time consuming. Best practices have changed over the years and so must our themes.
Why was this change made?
A content width of 680 px is outdated. Due to the large numbers of bloggers installing Foodie Pro for the first time, we need to make sure they're set up for future success based on current best practices.
720px was chosen because it's double the width of the mobile setting - 360px. This makes it simple to remember, and appears to be a good, readable width on desktop for the recommended font sizes.
Q: What other sizes should I keep in mind?
The majority (~80%) of pageviews on food blog happens on mobile (360px), so mobile display should be priority #1.
On desktop, the main content displays at 720px and the sidebar displays at 300px. There's a 76px whitespace gap between the content and sidebar, making the total .site-inner container 1096px.
With 37px of padding on either side of .site-inner, the entire container comes to 1170px, which is the maximum width of the primary navigation, header and footer.
Q: I want different sizes, how do I set them?
Our themes provide base styling and configuration that works for 99% of food blogs. If you're looking for custom work, you can look into hiring a programmer to design a custom theme specific to your use case.
These typically run between $10,000 - $30,000. If that's in your budget, reach out to us and we can make some referrals.
You might find the types of customizations and how to use inspect element posts useful.