Create a homepage with different block layout

I run a magazine website with several categories like “news”, “video”, “featured”, “blog”, “column”, etc. I’m creating a new template and I’d like to have the homepage like wired.com

e.g. different blocks of different size, with big photo, small photo, no photo etc. One block would be twice as wide with a big photo, the next block regular width with a small photo or no photo. Depending on what the editor of the article wants.

Front-end wise I know how to do this with HTML and CSS. But not back-end in WordPress. I don’t want all categories to have the same block layout.

I want to have like 4 kind of block layout of which the editor can choose which one she/he wants the article to have.

The editors would still be posting articles in Admin->Post. But how can I make it so that they can assign a block layout for the article on the homepage?

We already have a strict use of categories and tags to organize all the content (5000 articles and counting).

Any idea how I can get this done in the back-end of WordPress?

The way I was most familiar with to do this was to have the home page template arranged with particular different sized blocks, and just fill the content you wanted into it either automatically, or via some options you hand code (or use plugins) on posts (“Display as Home Page Hero Spot?”) as such. I don’t know that I’ve heard much of anything about making a post have a certain style of block display on the home page - I suspect that would result in a lot of dead space wouldn’t it, if the authors/editors regularly chose blocks that didn’t fit with the other blocks already on the page?

My idea is that the editor can choose a hompage block layout just like they can choose a page layout, a dropdown list in the admin:

“Select homepage display”

  1. Large Photo
  2. Big Text

And here I don’t know how to go about it: the code should pass (or store) a variable that would be passed along in the loop.

White space and such are not an issue because that variable I would use as a CSS class and style it responsive and flexible. I’m using css flexboxes for the blocks and grid.

My problem is figuring out the PHP and WP Admin aspect of what I want.

OK, I see, you just want to have options to alter the existence / size of the featured image, as opposed to changing the actual block size specifically for each post. That makes sense.

I think I used a theme once that did this… let me look around a little later if I have time and see if I can find it and figure out what kind of setup it used. I don’t think I’ve seen a plugin that provides this sort of functionality, which is a shame, but yeah.

In the meantime maybe one of our WordPress gurus will wander by and provide a better answer :wink:

1 Like

Did you find the example? I’m still brainstorming on how to do this. My best idea so far is custom fields but the editor has to type the class name, which mean it’s very error prone.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.