Blog Archive Layout

Control how your blog posts appear on your main blog page, category pages, and archive pages. Choose from four different layouts and customize how posts are displayed.

The Site Blog panel in the WordPress Customizer showing layout options, image position, and post element controls

What You Can Do

With BuddyX Pro’s blog archive settings, you can:

• Choose from 4 different blog layouts (Default, List, Grid, Masonry)
• Control how many posts appear per page
• Show excerpt or full content on archive pages
• Configure featured image sizes and positions
• Display post metadata (date, author, categories)
• Add tag badges to posts
• Show or hide specific post elements

Choosing Your Blog Layout

Step 1: Access Blog Settings

1. Go to Appearance > Customize
2. Click on Blog
3. Find the Blog Archive Layout section

Step 2: Select a Layout

BuddyX Pro offers four distinct blog layouts:

Layout	Best For	Description
Default	Traditional blogs	Classic single-column layout with featured images
List	News/magazine sites	Horizontal layout with thumbnail on left or right
Grid	Portfolio/visual blogs	Card-based grid with 1 or 2 columns
Masonry	Image-heavy blogs	Pinterest-style staggered grid

Layout Previews

Default Layout:

Default blog layout – classic single-column with featured images above titles

┌────────────────────────────────────┐
│  ┌────────────────────────────┐   │
│  │    Featured Image          │   │
│  └────────────────────────────┘   │
│  Blog Post Title                   │
│  Meta: Date | Author | Categories  │
│  Post excerpt text here...         │
│  [Read More]                       │
├────────────────────────────────────┤
│  ┌────────────────────────────┐   │
│  │    Featured Image          │   │
│  └────────────────────────────┘   │
│  Blog Post Title                   │
│  Meta: Date | Author | Categories  │
│  Post excerpt text here...         │
│  [Read More]                       │
└────────────────────────────────────┘

List Layout:

┌────────────────────────────────────┐
│  ┌──────┐                          │
│  │Image │  Blog Post Title         │
│  │      │  Date | Author           │
│  └──────┘  Excerpt text...         │
│            [Read More]             │
├────────────────────────────────────┤
│  ┌──────┐                          │
│  │Image │  Blog Post Title         │
│  │      │  Date | Author           │
│  └──────┘  Excerpt text...         │
│            [Read More]             │
└────────────────────────────────────┘

Grid Layout (2 Columns):

Grid layout – card-based 2-column design with consistent heights

┌──────────────────┬──────────────────┐
│ ┌──────────────┐ │ ┌──────────────┐ │
│ │Featured Image│ │ │Featured Image│ │
│ └──────────────┘ │ └──────────────┘ │
│ Post Title       │ │ Post Title       │
│ Date | Author    │ │ Date | Author    │
│ Excerpt...       │ │ Excerpt...       │
│ [Read More]      │ │ [Read More]      │
├──────────────────┼──────────────────┤
│ ┌──────────────┐ │ ┌──────────────┐ │
│ │Featured Image│ │ │Featured Image│ │
│ └──────────────┘ │ └──────────────┘ │
│ Post Title       │ │ Post Title       │
│ Date | Author    │ │ Date | Author    │
│ Excerpt...       │ │ Excerpt...       │
│ [Read More]      │ │ [Read More]      │
└──────────────────┴──────────────────┘

Masonry Layout:

Masonry layout – Pinterest-style staggered grid with variable heights

┌──────────────┬──────────────┬──────────────┐
│ ┌──────────┐ │ ┌──────────┐ │ ┌──────────┐ │
│ │  Image   │ │ │  Image   │ │ │  Image   │ │
│ │          │ │ │  (tall)  │ │ │          │ │
│ └──────────┘ │ │          │ │ └──────────┘ │
│ Title        │ │          │ │ Title        │
│ Excerpt...   │ │          │ │ Excerpt...   │
│              │ │          │ │              │
├──────────────┤ └──────────┘ ├──────────────┤
│ ┌──────────┐ │ Title        │ ┌──────────┐ │
│ │  Image   │ │ Excerpt...   │ │  Image   │ │
│ │  (tall)  │ │              │ │          │ │
│ │          │ ├──────────────┤ └──────────┘ │
│ │          │ │ ┌──────────┐ │ Title        │
│ │          │ │ │  Image   │ │ Excerpt...   │
│ └──────────┘ │ │          │ │              │
│ Title        │ │ └──────────┘│              │
└──────────────┴──────────────┴──────────────┘

Layout-Specific Options

List Layout Settings

When you select List Layout, additional options appear:

Image Position:

Option	Description	Best For
Left	Thumbnail on left, content on right	Most common reading pattern
Right	Thumbnail on right, content on left	Alternative visual style

Grid Layout Settings

When you select Grid Layout, additional options appear:

Grid Columns:

Option	Description	Best For
One Column	Single-column grid	Mobile-first design, simple blogs
Two Columns	Two-column grid	Maximum visual impact, galleries

Masonry Layout Settings

When you select Masonry Layout, additional options appear:

Masonry View:

Option	Description
Without Masonry	Regular grid without staggered heights
With Masonry	True Pinterest-style with staggered heights

Posts Per Row:

Option	Description	Best For
Two	2 posts per row	Larger images, more focus per post
Three	3 posts per row	More posts visible, magazine style

Posts Per Page

Control how many blog posts appear before pagination:

1. Go to Settings > Reading
2. Find Blog pages show at most
3. Enter number of posts (default: 10)
4. Click Save Changes

Recommendations by Layout:

Layout	Recommended Count	Why
Default	8-10 posts	Good scroll depth without overwhelming
List	10-15 posts	Compact format allows more posts
Grid (2 col)	6, 8, 10 posts	Even numbers look best
Masonry	9, 12, 15 posts	Multiples of 3 create balanced grids

Content Display Options

Excerpt vs Full Content

Choose what content visitors see on archive pages:

1. Go to Appearance > Customize
2. Navigate to Blog > Archive Settings
3. Find Post Content setting

Option	What It Shows	Best For
Excerpt	Short summary (usually first 55 words)	Faster page loads, cleaner layout
Full Content	Complete post text	Long-form sites, single-topic posts

Excerpt Length

If using excerpts, customize the length:

Setting: Excerpt Length Default: 55 words Range: 10-100 words

Guidelines:

• Short (10-30 words): Visual-heavy blogs, card layouts
• Medium (40-60 words): Balanced approach, most blogs
• Long (70-100 words): Content-rich sites, news portals

Featured Images

Control how featured images appear on archive pages:

Image Display

Setting	Options	Description
Show Featured Images	Yes / No	Display featured images on blog archives
Image Size	Thumbnail, Medium, Large, Full	Image dimensions
Image Position	Above Title, Below Title	Where image appears

Image Settings by Layout

Default Layout:

• Recommended size: Large (1024px width)
• Aspect ratio: 16:9 or 3:2
• Position: Above title

List Layout:

• Recommended size: Medium (300px width)
• Aspect ratio: Square (1:1) or 4:3
• Position: Side of content

Grid/Masonry Layout:

• Recommended size: Medium-Large (600px width)
• Aspect ratio: Flexible (masonry) or consistent (grid)
• Position: Above title

Post Elements

Control what information appears on each post:

Post Meta Display

Show or hide these elements:

Element	Setting Name	Default	Description
Post Date	Show Post Date	On	When post was published
Author Name	Show Author	On	Post author with avatar
Categories	Show Categories	On	Post categories
Tags	Show Tags	Off	Post tags
Comment Count	Show Comment Count	On	Number of comments
Reading Time	Show Reading Time	Off	Estimated read time

Tags Display Options

When Show Tags is enabled:

Tag Style:

Style	Appearance	Best For
Default	Plain text links	Minimal, clean design
Badge	Tags with colored background	Visual emphasis, modern look
Underline	Tags with bottom border	Subtle highlighting

Additional Archive Options

Show Edit Link

Setting: Show Edit Link Default: Off Who sees it: Logged-in users with edit permissions

Shows an “Edit” link on posts for administrators and editors. Useful for managing content directly from the frontend.

Read More Button

Customize the “Read More” button:

Setting	Options	Default
Show Read More	Yes / No	Yes
Button Text	Custom text	“Read More”
Button Style	Text link, Button, Arrow	Button

Recommended Blog Layouts by Site Type

Magazine / News Site

Layout: Grid (2 columns) or Masonry (3 per row) Posts per page: 9-12 Content: Excerpt (30-40 words) Featured images: Medium-Large, consistent aspect ratio Meta display: Date, Categories, Tags (Badge style) Best for: High volume content, visual storytelling

Personal Blog

Layout: Default Posts per page: 5-8 Content: Excerpt (50-60 words) Featured images: Large, above title Meta display: Date, Author, Comment count Best for: Long-form writing, personal stories

Corporate / Business Blog

Layout: List (Image on left) Posts per page: 8-10 Content: Excerpt (40-50 words) Featured images: Medium, square format Meta display: Date, Author, Categories Best for: Professional content, thought leadership

Portfolio / Photography

Layout: Masonry (2 per row, with masonry) Posts per page: 6-9 Content: Excerpt (20-30 words) Featured images: Large, variable aspect ratios Meta display: Minimal (Date only) Best for: Visual showcase, image galleries

E-Learning / Tutorial Site

Layout: Grid (2 columns) Posts per page: 6-8 Content: Excerpt (50-60 words) Featured images: Medium-Large, 16:9 ratio Meta display: Date, Author, Reading time, Categories Best for: Educational content, course previews

Common Questions

Why aren’t my layout changes showing?

Check these:

1. Click Publish in the customizer
2. Clear your browser cache (Ctrl+F5 or Cmd+Shift+R)
3. Clear any caching plugins (WP Super Cache, W3 Total Cache)
4. Check if a child theme is overriding templates

Can I use different layouts for different categories?

Not directly through the customizer, but you can:

1. Use category-specific templates in a child theme
2. Add custom CSS to target specific category pages
3. Use a page builder plugin for custom category archives

My masonry layout isn’t working properly.

Common fixes:

1. Ensure JavaScript is enabled
2. Check for JavaScript console errors
3. Verify all images have proper dimensions
4. Clear cache and reload the page
5. Try “Without Masonry” option first, then enable

How do I change the number of posts per page?

Go to Settings > Reading (not in the Customizer). This is a WordPress core setting that affects all archive pages.

Featured images are different sizes in masonry layout – is this normal?

Yes! Masonry layout is designed to accommodate varying image heights. If you want uniform heights, use Grid layout instead or select “Without Masonry” option.

Can I show full posts on the homepage but excerpts on category pages?

This requires custom coding. By default, WordPress uses the same setting for all archives. Consider:

1. Using a child theme with custom templates
2. Installing a plugin like “Display Posts” for custom loops
3. Hiring a developer for custom functionality

The excerpt is cutting off mid-sentence.

This is normal WordPress behavior. To fix:

1. Manually add excerpt in post editor (WordPress will use that instead)
2. Increase excerpt length in customizer
3. Use a plugin like “Advanced Excerpt” for smarter cutting

How do I remove the “Read More” button completely?

1. Go to Appearance > Customize > Blog
2. Find Show Read More Button
3. Set to No
4. Click Publish

Performance Tips

Optimizing Blog Archives

For Faster Loading:

• Use excerpts instead of full content
• Set posts per page to 6-10 (not 20+)
• Optimize featured images (compress before upload)
• Use lazy loading for images
• Enable caching plugins

For Better User Experience:

• Keep excerpt length 40-60 words
• Always include featured images
• Show relevant meta (date, author, categories)
• Use clear “Read More” calls to action
• Test on mobile devices

Image Optimization by Layout

Layout	Recommended Image Size	File Size Target
Default	1200×675px	Under 150KB
List	400×400px	Under 50KB
Grid	800×600px	Under 100KB
Masonry	800×variable	Under 120KB

Related Settings

• Single Post Layout – Configure individual post pages
• Post Elements & Meta – Customize post information display
• Sidebar Options – Blog sidebar configuration
• Typography – Text styling for blog posts
• Color Scheme – Blog color customization

---

Need Help?

• Visit our Documentation Portal
• Contact Support at support@wbcomdesigns.com