The WordPress Site Editor replaced the Customizer as the primary tool for controlling your site’s layout, and it unlocks a level of blog design control that was previously only possible through custom theme development. In this guide, you’ll build a fully custom blog layout from scratch using the Site Editor: a posts grid, a sidebar, pagination, a featured posts section, and a category filter, all without writing a single line of code.
What You Need Before Starting
The Site Editor requires a block theme, it does not work with classic PHP themes. If you are currently running a classic theme like Astra, GeneratePress, or OceanWP (in classic mode), you’ll need to switch to a block theme first. Popular starting points include Twenty Twenty-Four (bundled with WordPress), Kadence (block theme mode), or Ollie, all free and designed for Site Editor customization.
You’ll also want a few published blog posts before designing the layout so you can see real content while editing. The Site Editor previews reflect actual content from your site, placeholder text is not used in the block editor’s template preview the way it is in page builders.
Navigating to the Blog Templates in the Site Editor
Open the Site Editor from Appearance → Editor. In the left sidebar, click Templates to see all available templates. For a blog layout, the relevant templates are:
- Home (
home.html), Used when your Reading Settings are set to show “Your latest posts.” This is the default blog homepage for most blogs. - Blog Home, Some themes create this separately from the front page template.
- Archive (
archive.html), Used for category, tag, and author archive pages. Changing this changes all archive listings. - Index (
index.html), The catch-all fallback for any page that doesn’t match a more specific template.
If the Home template doesn’t exist in the list, click the “+” button and create it. WordPress will automatically use it for your blog homepage once it exists.
Setting Up the Basic Blog Layout Structure
Click the Home template to open it in the editor. The first decision is your overall layout structure. The most common blog layouts are:
- Full-width single column, Posts list spans the full content width. Clean, editorial look.
- Two-column with sidebar, Posts list on the left (70% width), sidebar on the right (30%). Classic blog format.
- Grid/Masonry, Posts displayed as cards in a 2 or 3 column grid. Works well for visual blogs and magazines.
For a two-column layout, add a Columns block to the template’s main content area. Set the left column to 70% width and the right to 30%. The left column holds your Query Loop; the right holds your sidebar content. The Columns block respects your theme’s content width constraints automatically.
Building the Posts List with the Query Loop Block
The Query Loop block is the engine of your blog layout. It fetches posts based on query parameters you define and renders them using an inner Post Template block that you style however you like. Add a Query Loop block to your main content column.
Starting from a Pattern or from Scratch
When you insert a Query Loop block, WordPress presents a set of starter patterns: standard list view, image on left with text on right, small image grid, and large image overlay. Choose the one closest to your target design and modify it, starting from a pattern is faster than building from scratch. Select “Start blank” only if none of the patterns match your vision.
Configuring Query Parameters
Select the outer Query Loop block (not the Post Template inside it) and look at the block settings in the right sidebar. Key settings to configure:
- Posts per page, Set to 10 for a standard blog, 6 for a grid layout, or 5 for a sidebar-heavy design.
- Order, Newest first is standard. Oldest first works for tutorial series where reading order matters.
- Inherit query from template, Keep this ON for the blog home template. It tells the Query Loop to use the current page’s context (homepage query, category filter, search results) automatically. Turn it OFF only when you want a static, manually-configured query (like “always show posts from the Design category”).
- Sticky posts, Choose whether sticky posts appear at the top or are treated like regular posts. For a featured-posts pattern, show sticky posts first.
Designing the Post Card Inside the Post Template
Click into the inner Post Template block to edit the card layout shown for each post. This is where the real design work happens. A typical blog post card includes:
- Post Featured Image block, set to link to the post, with a fixed aspect ratio (16:9 works well) for visual consistency across posts with different image dimensions
- Post Category block, showing the primary category as a label above the title
- Post Title block, set to link to the post, H2 heading level
- Post Excerpt block, set to 25-35 words with a “Read more” link
- Post Date and Post Author blocks, in a horizontal Group block with a separator between them
Use the Cover block or a Group block with background color to create a card container with padding and border radius for a card-style appearance. Everything in the block reference guide covers each available block’s exact attributes, useful when you want to go beyond the default options visible in the sidebar.
Creating a Post Grid Layout
For a grid layout, change the Post Template’s layout from the default list to a grid. Select the Post Template block and in the Layout section of the block settings, choose “Grid.” Set columns to 2 or 3 depending on your content width and the number of posts per page.
Grid mode in the Post Template makes each post card the same height and width, creating a clean magazine-style appearance. Combine it with a fixed-aspect-ratio featured image to ensure uniform card heights regardless of title or excerpt length. The most visually consistent results come from enforcing the same image dimensions across posts, consider adding an editorial requirement for all new posts to include a 1200×628 featured image.
Adding Pagination
Below the Post Template block inside your Query Loop, add a Query Pagination block. This automatically generates the correct previous/next page links based on your posts-per-page setting and the total number of published posts. No configuration is needed beyond styling.
WordPress provides three Query Pagination sub-blocks: Previous Page, Page Numbers, and Next Page. Add all three inside the Query Pagination block for standard pagination. Style the active page number with a distinct background color using the block settings. For simple blogs, a “Previous / Next” style without page numbers is cleaner, add only the Previous Page and Next Page blocks and remove Page Numbers.
Building the Blog Sidebar
In the right column of your Columns layout, build the sidebar. Common sidebar elements and how to implement them in the Site Editor:
Categories List
Add a Categories List block (found in the Widgets section of the block inserter). It automatically generates a linked list of all your published categories with post counts. Use the block settings to show post counts or hide them, and to display subcategories indented under their parents.
Recent Posts Widget
Add a second Query Loop block, this time a mini one for the sidebar. Turn off “Inherit query from template” and configure it manually: 5 posts, newest first, no featured image (just title and date). This gives you a fully responsive recent posts list that updates automatically as you publish new content, unlike a static list you’d have to manually maintain.
Search Block
Add the Search block to the sidebar for site-wide search. Customize the button label and placeholder text in the block settings. For a sidebar, use the compact “button inside” layout option to keep the search bar from taking up too much vertical space.
Adding a Featured Posts Section Above the Main Listing
Many blogs feature one or more highlighted posts above the main posts list. In the Site Editor, implement this with a second Query Loop block placed above the Columns layout. Configure it with a manual query (inherit: OFF), set to show 1-3 posts, and filter to only show sticky posts. Use a visually distinct layout, full-width image with text overlay using a Cover block, for example, to differentiate the featured section from the regular listing below it.
This “hero post” pattern is common on news sites and magazines. The sticky post system lets editors control which post appears in the featured slot without touching the template: sticky a post from the post editor’s sidebar and it automatically populates the hero section. Unsticky it and the next sticky post (or nothing, if the section is set to hide when empty) takes its place.
Making the Layout Responsive
The Site Editor does not have a drag-and-drop responsive editor like some page builders, but most blocks are responsive by default. The Columns block stacks to a single column on mobile automatically. The Query Loop grid reduces columns on smaller viewports based on your theme’s media queries.
To preview responsiveness, use the device preview icons in the Site Editor toolbar (desktop, tablet, mobile). The mobile preview shows how your layout will appear on small screens. If the sidebar creates an uncomfortable mobile layout, consider hiding it on mobile using additional CSS or restructuring the layout as a single column with the sidebar content moved below the main posts list for mobile visitors.
Saving and Applying the Blog Layout
When you’re satisfied with the layout, click Save in the top-right corner of the Site Editor. WordPress saves your template to the database and immediately applies it to your blog homepage. No additional configuration steps are needed, the Home template is automatically used when WordPress Reading Settings are configured to show “Your latest posts.”
If your Reading Settings point to a static front page instead of the blog, your posts page uses the Home template as well, configure the Posts Page in Settings → Reading → Posts page. Alternatively, customize the layout for that specific page using a page-specific template override, following the same template hierarchy approach described in the related guide to optimizing your WordPress site performance after the design work is complete.
Frequently Asked Questions
Can I have different layouts for different category archives?
Yes. In the Site Editor, go to Templates and create a category-specific template named for that category’s slug. WordPress uses the most specific template available, a template named for the “tutorials” category slug applies only to that category’s archive, while your general Archive template applies to all others. You can have completely different layouts, Query Loop configurations, and sidebar content per category.
Does the Query Loop block support infinite scroll?
Not natively. The Query Loop block supports standard pagination and a “Load More” button (available in WordPress 6.0+), but true infinite scroll, where new posts load automatically as you scroll, requires a JavaScript enhancement. The “Load More” button pattern in the Query Pagination block is the closest native option; it replaces the pagination with a button that appends the next page of posts to the current list without a full page refresh.
Can I filter the Query Loop by tag or custom taxonomy?
Yes, but the native block settings have limited filtering options. With “Inherit query from template” turned off, you can filter by category and author. For filtering by tag, custom taxonomy terms, or meta fields, you need to use the query_loop_block_query_vars filter in PHP to extend the Query Loop’s available parameters. Many developers add this filter in a small custom plugin or their theme’s functions.php to enable complex filtering while keeping the block’s visual configurability in the Site Editor.
How do I show a “No posts found” message?
Add the No Results block inside your Query Loop. This block renders only when the query returns zero results, on search pages with no matches, category archives with no published posts, or filtered archives. Add a helpful message and a Search block inside the No Results block so visitors can immediately try a different query rather than seeing a blank page.
Styling Your Blog Layout with Global Styles
The Site Editor’s Styles panel (accessed by clicking the circle icon in the top-right toolbar) lets you set global typography, colors, and spacing that apply consistently across your entire blog layout. Changes in Global Styles cascade to all blocks that inherit those styles, giving you a coherent visual identity without manually styling each block individually.
Key Global Styles settings for a blog layout: set your body font and heading font to establish the typographic hierarchy across all post cards, configure your color palette with your brand’s primary and secondary colors so they appear as options in the block color picker, and set a base spacing scale that controls how blocks like Columns, Groups, and Query Loop distribute padding and margin. Any block you add after configuring Global Styles will automatically inherit these defaults.
For post card typography specifically, select a Post Title block within your Post Template and style it in the block settings sidebar. The style you apply to the Post Title in the Post Template applies to all post cards in the Query Loop simultaneously, you are editing the template for all cards, not just one card. This efficiency is one of the most powerful aspects of the Site Editor approach: design once, apply everywhere.
Using Patterns to Accelerate Blog Layout Design
WordPress patterns are pre-built block combinations that you can insert and customize. The Site Editor includes dozens of patterns specifically designed for blog layouts, hero sections, post card grids, article headers, author bios, and newsletter signup sections. Access them by clicking the “+” inserter and switching to the Patterns tab, or by browsing the pattern categories in the left sidebar.
The most efficient workflow for building a blog layout is to start with patterns rather than individual blocks. Find a pattern whose structure matches your design intent, insert it into your template, then modify the individual blocks within it. This approach is far faster than building from scratch and helps you discover block combinations you might not have thought to try independently.
Synced patterns (formerly Reusable Blocks) are particularly valuable for blog layouts. Create a synced pattern for your newsletter signup section, your author bio card, or your related posts section. Insert the pattern into your single post template, category archive template, and home template. When you update the pattern once, all templates update simultaneously. This is ideal for maintaining consistent calls-to-action across multiple template types without editing each one separately.
Exporting Your Blog Template for Reuse
Once you’ve built a blog layout you’re happy with, you can export it for use on other sites. The Site Editor’s Export function (Editor menu → Export) downloads a zip file containing all your customized templates as HTML files in a theme-compatible directory structure. Unzip it and you have template files you can include in any block theme, distribute to clients, or commit to version control.
For freelancers and agencies building multiple WordPress sites, maintaining a library of exported blog layout templates saves significant time on new projects. Start a new client site with a base block theme, import your template library, customize colors and typography via Global Styles, and the structural design work is done. The Site Editor makes this workflow practical in a way that was not feasible with classic theme development.
Troubleshooting Common Site Editor Issues
A few issues come up repeatedly when building blog layouts in the Site Editor:
- Query Loop shows wrong posts, If your home template’s Query Loop shows all posts instead of respecting the homepage query, verify that “Inherit query from template” is enabled. If it’s off, the block uses a static manually configured query regardless of the page context.
- Layout doesn’t match the live site, The Site Editor preview uses your theme’s global styles but doesn’t always render third-party plugin shortcodes or JavaScript-dependent content. Test the live frontend after saving to verify the actual appearance.
- Can’t select blocks inside the Post Template, The Post Template is nested inside the Query Loop, which can make selection tricky. Use the List View panel (the icon in the top toolbar) to navigate the block hierarchy and select nested blocks precisely.
- Template changes not showing on the frontend, If your site uses caching, clear all caches after saving a template. The Site Editor saves immediately to the database, but cached pages serve the old HTML until the cache is cleared.
- Mobile layout breaks at a specific breakpoint, The Site Editor doesn’t expose breakpoint controls. If you need precise mobile layout control, add CSS using the Additional CSS field in Global Styles or a custom plugin. Inspect the generated HTML in browser DevTools to find the correct CSS selectors for your block layout.
The WordPress Site Editor’s template system gives you complete control over your blog layout without writing PHP or hiring a developer. The Query Loop block is the foundation, once you understand how to configure it and nest it within your layout structure, you can build everything from a minimal single-column blog to a full magazine-style multi-column layout entirely through the visual editor.
The workflow is straightforward in principle but deep in practice: set up your templates in the Site Editor for the structural design, refine the visual appearance through Global Styles, use patterns to accelerate repetitive design elements, and export your templates to version control or reuse them across client projects. As you grow more familiar with the Query Loop block’s querying capabilities and the Post Template’s layout options, you’ll find that the Site Editor handles the vast majority of blog layout requirements that previously demanded custom theme development or shortcode-heavy page builders. Start with the Home template, master the Query Loop, and the rest of the Site Editor’s capabilities open up naturally from there. If you run into layout limitations or need deeper customization, check the complete Gutenberg block reference for block-specific options and advanced configuration patterns.
Last modified: March 15, 2026
