Modifying default width of WordPress pages using new themes like Blockbase

I switched to the Blockbase WordPress theme a few weeks ago as it supports full-site editing, which brings blocks to all parts of your site rather than just posts and pages.

I found the content to be quite narrow out of the box at 620px.

Screenshot showing narrow text out of the box with the Blocbase theme
Screenshot of the default content width (620px) from my 4K display

I really wanted the default view for folks with wider screens such as myself to be a little wider, so I went on an adventure to change this.

Some old themes provided this as an option that could be customized, Blockbase did not. I tried various bits of CSS from posts on the web which looked like they might work, but with no success.

After a bunch of reading and poking, I came across a post called Global Styles & theme.json which talked about Layout and content width.

This post shows how WordPress themes configure the layout widths that are selectable using the width toggles within the block editor. In a file called theme.json, that looks something like the following:

"layout": { "contentSize": "840px", "wideSize": "1100px" }
Code language: JavaScript (javascript)

The solution I selected on was to modify the theme.json of Blockbase directly to make things wider.

The default sizes for the two supported widths were 620px for normal content and 1000px for when wide content was selected on a block. (source code)

I went ahead and changed this to 1000px and 1200px using the built-in WordPress theme editor under Tools >> Theme file editor, and selecting theme.json in the side bar.

Now I can enjoy slightly wider content out of the box!

Screenshot of the wider content from my 4K display

Hopefully, this post will help some other folks find this solution.

The one downside is I imagine this alteration will need to be applied every time the theme updates.

Ideally, there would be a way to globally set/override this for a theme.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.