Create a Magazine Layout with the WordPress Gutenberg Block Editor
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- How to create a Magazine Layout for your website or blog with the WordPress Gutenberg Block Editor, full site editing, no plugins and no code!
In my tutorial I'm using the 2022 Theme and WordPress 5.9
Sign up for my newsletter www.pootlepress.com/sign-up-t...
Email me: jamie@pootlepress.com 📧
Our lovely Gutenberg WordPress plugins 🔥 www.pootlepress.com/wordpress...
Timeline
0:00 - Intro
0:05 - The magazine layout we'll build
0:50 - The Gutenberg Blocks we will need
1:00 - How the magazine layout is constructed
2:00 - How to create a page template
2:30 - Designing the magazine layout
3:00 - The Gutenberg List layout view
3:30 - Add the Columns Block
4:00 - Changing the Columns Block widths
4:45 - Adding the Query Loop Block
5:00 - Editing the Query Loop Block
5:00 - Choosing the quantity of Posts to display using the Query Loop
6:15 - Filtering the posts on the Query Loop Block
7:20 - Showing Post Titles using the Query Loop Block
8:20 - Choose the Query Loop categories
8:40 - What the Query Loop offset setting does
9:13 - Editing what Blocks to show in the Query Loop
9:35 - Adding text within the Query Loop Block
10:00 - Styling the Query Loop Block
10:20 - Duplicating Gutenberg Columns
12:00 - Use the Group Block to add a background colour to a Section
13:25 - How to display your Page Template - วิทยาศาสตร์และเทคโนโลยี
I just got the cat another treat :)
I am seeing many popular post grid plugins soon becoming redundant. Great video.
Yup me too 😀
That's pretty cool stuff, Jamiel. This is the first of your videos that I didn't get a good grasp on the first pass. That query loop block is still a bit of a mystery to me, but I'll get to the video on that soon enough, I'm sure. 🙂
👍
Thanks for this. I've been resisting Gutenberg until now, but seeing what it can do is making me rethink.
That's great to hear Philip 😀
I've been talking smack about FSE for weeks, and you just showed me it might actually be useful. I had no idea what the Query block was for.
Great to hear - it's really early days for FSE, this release is certainly a stepping stone
This is what I have been looking for. Thank you.
Thank you! Very inspirational video as always.
thank you Viktor 👍
This can be reconfigured for other purposes besides online magazines. Very useful!
Thanks Kevin 👍
Thank you! Your tutorials are excellent!
thanks Kim 🙏
Wonderful Gutenberg by wonderful teacher
Wow, thank you Ehsan 🙏
Super helpful. Thanks!
👍
Very informative video. Thank you
thank you Vikash 🙏
Excellent work!
Thanks 🙏
Nice video, thanks Jamie. I know it's for the sake of the demo, but just to be exact, if you offset by 1 or 4 in columns 2 and 3, then it will skip the 1st post, however, when the next first post is not in the "featured" category, it won't appear anywhere. Thanks again and hello to the cat
Great point - also someone else pointed out that I could have use the same query block for columns 2 and 3 🤦♂️
Yes I noticed the same. Perhaps he could add a "See More Feature Content" link to a dedicated section.
The ideal is to arrange a larger layout with just one or few query loops. Every time you use a query loop block it translates to a database request. The more you use increments significatively the load on the page and affects rather hard the performance
Yup great point 👍
nice work, well done but if i wanted to change the layout
This Lut color look great on you
Fuji :)
This has to be one of the best Wordpress blog post layout videos I've ever seen. So many other videos assume you need to use plugins or site builders to do this.
One question which I don't think you explained in the video is the grid layout of the photos in the middle Sports section. The photos in this section seem to be fixed in size, square shaped, how would you make that responsive to a mix of portrait and landscape photos (masonry layout)? If I contrast the Sports section layout to the section above it, the size of the text is driving a masonry-style grid layout here, so it's responsive to the amount of text. The Sports section doesn't appear to be responsive to different image shapes. This might be an idea for another video altogether (fixed grid vs masonry responsive layouts)
Fab …and thank you 🙏
Wonderful tutorial Jamie! If I wanted to add this layout on my existing home page below the fold should I just start adding the blocks directly to the home page? Or should I approach it differently? Thank you
thanks Chris - yes just add blocks :)
Jamie, Great stuff you are creating!
What are your thoughts regarding the lack of google/custom fonts availability currently?
hi Paul, check out the create block theme plugin :)
good no know ... i will be try this
Another interesting and informative video, Jamie. One quick question; how are you populating the posts with The Guardian news stories? I am intrigued! 👍🤔
Thanks Simon - copy and paste 😉
The other thing we newbies need is a check list of what has be be present before one can proceed. I just recently had an ah-ha moment (from watching this vid) that you get the content in a page form a post. Yes, probable a basic point. But, show me a place where it is talked about. So, to proceed I need to populate posts with this and that so it will show up on my page. Additionally, I need to add some tags and categories so that part works. Am I getting closer yet? Thanks for your patience. kaw
thank you - so how do we decide to use group vs container?
Hi Jamie, Is there a way to control the size of the image in the query loop? Mine is displaying a small image but is using the full-size featured image.
This is amazing. Thank you. I wish you could do a tutorial like this on Generate Press theme.
Hi Dino, i'm sure i will at some point 😀
@@jamiewp I hope so. It is one of the best themes that everyone is using when dumping elementor and there are no adequate video tutorials on it. I am sure you have mastered CSS and for you this stuff is easy .. but for us beginners ... it is not. :). I have an example of a magazine-style site done in GP that I'd like you to see and dissect.
@@dinorossi6611 sounds great, can you share a link to it?
@@jamiewp I posted it and it got removed. Do you have a website I can email it to?
@@jamiewp I found your contast. I will send it. Please make an A to Z tutorial on it. It will get a million views. :)
Great video. Puts the new 5.9 in plain understandable english. One question. If you wanted to make the page wider, how would you do that? I know how in the old wordpress but can't find it in 5.9 Trying to squeeze those three column into the default space given in the theme I am working on jut won't work. It ends of being vertical text! Need to give it more room somehow. How to? Must be simple!
Yeah even I would like to know
Hi Jamie, I am strugging a lot to recreate the same magazine for posts but in Bento like style as you showed in another video. would it be possible to please create a tutorial to make bento grid with cover block for blog posts using query loops?
Hi Ashish, atm that's not so easy atm with quite some coding , but we do have a gutenberg pro plugin that has this functionality built in - details here www.pootlepress.com/gutenberg-pro/ - check out the extra options we've built into the query loop block.
Please make a video on how to create a single post template for a custom post type by using a full site editing theme.
Also, how to make a custom archive page, would be very useful. (A catalog with filters, more like a shop than a homepage)
So basically, the two main templates of a listing website.
Thank you for the vids. Really enjoying the content
Hi Jonathan, here's one covering the single post template th-cam.com/video/NJH6XU3jHaU/w-d-xo.html . And here's one that shows you how to create a custom archive page th-cam.com/video/b22_5n3oB7s/w-d-xo.html
@@jamiewp Thanks for answering.
I know that you have bits and pieces here and there...
I guess I'm spoiled by how WPTuts shows the process from start to finish - Makes a CPT, builds the single post layout and the catalog page.
I want to move my website from Elementor to Gutenberg. So, I've been talking to people on Facebook. Most of them think that FSE themes don't support CPTs. And you've been only editing blog related pages.
So, a video like this would be very valuable to the community
@@379rale ok understood 👍 Do you have an example of the archive page you are looking to replicate?
Awesome video as usual Jamie!! I was wondering if you could do a video on unique ways to make the sidebar more useful or better with Gutenberg? Can You put recent posts into the sidebar with a Query block?
Hi Kile , that's a great idea - i'll get my thinking hat on 👍
@@jamiewp Would love to see that. I am struggling to figure out how to create a sidebar. This post seems to indicate you can do it with columns. But can you name it? Save it as a template part? I sure did like the old way....will look forward to seeing what you will do on this Jamie and many thanks for your excellent channel. I don't think there is another channel that is as helpful re 5.9. Well done.
Hi Jamie, Cool video! Can you tell me what plugin you use for the list view feature? :)
Hi, that's just wordpress 😀
@@jamiewp Yes I know but I don't see the three dots to select options. :(
@@itbrewmee3306 my guess is that you are not using wordpress 5.9
👍
Would it be easier to use the 2023 template or something like the Blocksy theme (which has a magazine option)?
You could use blocksy or a magazine theme , but there are 2 advantages doing it this way 1) more flexibility 2) no theme lock in
Hi Jamie. Hope you are doing fine. I am trying to put up this style in a standard amp, but I am struggling with the margins/padding of the main content. Somehow it is showing it as full width. Is there a way to may the content boxed so that I have some space on both the right and left sides?
Hi - what theme are you using ?
@@jamiewp I am using twenty twenty three (2023). Somehow I managed it for most of the menu when in stacking mode. When I disable stacking the page stretches too much compressing the rest of the page to the left.
@@williamoliveira4740 try adding it in group block
Jamie, love your post but WP 6.1.1 and Query loop looks to have have a bug. It can't find the post. Error "No post excerpt found". Others reporting the same issue.
Thanks for the heads up - do you also have the Gutenberg plugin installed?
Yes. Some pretty smart guys found and isolated the bug and did bug report to the WP Team. They will fix. They figured out a work around but too complicated. I'll wait. I will just create a ton of posts form active old site.
@@kentek3141 tks for the update 👍
@@jamiewp Weren't a bug. Twas me! Now know how pages and posts work with categories etc.
Aren't the changes saved in the database rather than the theme files, making moving from local to production and reverse a bit trickier for some folks? I've started creating a mag theme with e-commerce and community but am using the file system, eg. theme.json, etc as I don't want the changes saved only to the database. Feedback?
If you use the free Create Block Theme to export your theme it essentially flattens the file 👍
@@jamiewp So essentially use that plugin for all exports and imports -- and backups as the latter could contain a database change if one isn't attentive to small changes. Good to know re the flattening. I have been coding since the first day of the web becoming public --- boy that ages me but I do miss the wild west of those times -- so this switch is a bit unsettling to me. Left WP years ago when I saw the classic/block/FSE concurrent evolution occurring (the code is kinda a mess right now with this transition still occurring) but came back a few weeks ago to see what had happened. Interesting. On the other hand, I still prefer a stick shift over automatic as I like the feel of driving and more control. LOL. TY for the speedy reply.
@@sunnifreyer2759 my pleasure - i like your analogy
@@jamiewp Post Script: And this was also stated by ChatGPT, which makes sense and includes the use of the CBT plugin:
Making changes directly in the theme files can indeed simplify the migration process and avoid the need for complex database migrations. Here are the advantages and a streamlined approach if you prefer to handle customizations this way:
Advantages of Direct File Customization
Ease of Migration: Changes made directly to the theme files (PHP, CSS, HTML, JavaScript) are easily transferable since they reside within the theme folder.
Version Control: Using version control systems like Git is more straightforward with file-based changes, making it easier to track and manage modifications.
Consistency: Ensures that all customizations are included without relying on the database to store settings, reducing the risk of missing configurations during migration.
Streamlined Approach
Develop Locally with File-Based Changes:
Make all your customizations directly in the theme files on your local development environment. This includes editing style.css, functions.php, template files, and any other custom files or scripts.
Use a Child Theme:
If you are customizing an existing theme, use a child theme to ensure your changes are preserved even if the parent theme is updated.
Version Control:
Use a version control system like Git to manage your theme files. This allows you to easily push changes from your local environment to your production server.
Export Theme:
If you're using the Create Block Theme plugin, export your custom theme once all changes are made. Unzip the exported theme and place it in your local wp-content/themes/ directory.
Deploy to Production:
Use a tool or method to deploy your theme files to the production server. You can use FTP, SFTP, or automated deployment tools like Git-based deployment (e.g., using services like GitHub Actions, DeployHQ, or a similar deployment service).
Hi, how do I make this page my homepage?
Go to dashboard/ settings/ reading
Here is my frustration: Your new page's right hand column has stuff that mine doesn't. I am on WP v 6.1.1 using the Astra theme. I can't find the new template thingy.
Hi - Astra is not a block theme so it doesn’t have that capability
@@jamiewp Great...after I paid for it. The Video that is needed is a "This is a Football"... If you are not a pro you get taken advantage of. I tried Elementor and thought is sucked. Could not even change size on jpegs. I am not a coder but pretty adept on configuration of anything but WP is like peeling an onion. For grins I will change themes and try your stuff again.
@@kentek3141 astra is free though?
Where is the `create new template` in WP 6?
In templates but might need the Gutenberg plugin installed
@@jamiewp Thank you, I think it was because I didn't have the twentytwentytwo theme active
@@manofqwerty 👍
Lowkey comment to say that he looks like Thome Yorke 🥸