Single Post Layout

Customize how individual blog posts appear when visitors click to read them. Control the header design, featured image placement, author information, and related content.

The Site Blog panel in the WordPress Customizer showing single post layout options and reading progress bar settings

What You Can Do

With BuddyX Pro’s single post settings, you can:

Choose from 4 different title and image layouts
Set content width for optimal reading
Add a reading progress bar
Display author bio at the end of posts
Show related posts to keep visitors engaged
Configure post navigation (previous/next links)
Add social sharing buttons
Customize post meta display

Accessing Single Post Settings

Go to Appearance > Customize
Click on Blog
Find the Single Post Settings section

Post Title Layouts

Choose how the post title and featured image appear at the top of your posts:

Title Over Image layout – title overlaid on featured image with dark overlay

Title Above Image layout – traditional style with title, then featured image below

Available Layouts

Layout	Description	Best For
Title Over Image	Title overlaid on featured image	Hero-style posts, dramatic effect
Half & Half	Split screen: image on one side, title on other	Modern design, visual impact
Title Above Image	Traditional: title, then featured image below	Classic blogs, clean reading
Title Below Image	Featured image first, title underneath	Image-focused content, portfolios

Layout Previews

Title Over Image:

┌─────────────────────────────────────┐
│    ┌───────────────────────────┐   │
│    │                           │   │
│    │   [Featured Image with    │   │
│    │    dark overlay]          │   │
│    │                           │   │
│    │   Post Title in White     │   │
│    │   Date | Author | Category│   │
│    │                           │   │
│    └───────────────────────────┘   │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Half & Half:

┌─────────────────────────────────────┐
│  ┌────────────┐  ┌───────────────┐ │
│  │            │  │               │ │
│  │  Featured  │  │  Post Title   │ │
│  │   Image    │  │               │ │
│  │            │  │  Date | Author│ │
│  │            │  │               │ │
│  │            │  │  Post excerpt │ │
│  └────────────┘  └───────────────┘ │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Title Above Image:

┌─────────────────────────────────────┐
│                                     │
│        Post Title in Large Text     │
│        Date | Author | Categories   │
│                                     │
│    ┌───────────────────────────┐   │
│    │                           │   │
│    │    Featured Image         │   │
│    │                           │   │
│    └───────────────────────────┘   │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Title Below Image:

┌─────────────────────────────────────┐
│    ┌───────────────────────────┐   │
│    │                           │   │
│    │    Featured Image         │   │
│    │                           │   │
│    └───────────────────────────┘   │
│                                     │
│        Post Title in Large Text     │
│        Date | Author | Categories   │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Single post layout customizer settings showing width, spacing, and element options

Content Width Settings

Control how wide the post content appears:

Setting	Width	Description	Best For
Small	~700px	Narrower content area	Long-form reading, text-heavy posts
Large	~1200px	Wider content area	Visual content, galleries, wide images

Reading Tip: Small width provides optimal line length (50-75 characters per line) for comfortable reading. This is recommended for most text-based blogs.

When to Use Each Width

Use Small Width For:

Text-focused articles
Long-form storytelling
Professional blogs
News articles
Tutorial content

Use Large Width For:

Image galleries
Portfolio posts
Video-heavy content
Wide charts/diagrams
E-commerce product showcases

Title Over Image Options

When you select Title Over Image layout, additional settings appear:

Image Overlay Color

Setting: Image Overlay Color Default: Black with 10% opacity Purpose: Makes white text readable over photos

Recommendations:

Overlay Color	Best For	Example
Dark gray/black	Light-colored images	rgba(0, 0, 0, 0.4)
Navy blue	Warm-toned images	rgba(20, 30, 60, 0.5)
Dark purple	Vibrant images	rgba(50, 20, 70, 0.4)
Gradient	All images	Custom CSS required

Opacity Guide:

10-20%: Subtle tint, image clearly visible
30-50%: Balanced, good text contrast
60-80%: Heavy overlay, focus on text
90-100%: Almost solid color

Entry Header Settings

Header Width

Setting: Single Post Entry Header Width Default: Default (follows content width) Options:

Option	Description	Best For
Default	Header matches content width	Consistent, clean design
Full Width	Header spans entire container	Dramatic, hero-style headers

Featured Image Height (Full Width Only)

When using Full Width header, you can set the featured image height:

Setting: Single Post Featured Image Height Default: 500px Range: 300px – 800px Applies to: Desktop screens (768px+)

Height Recommendations:

Content Type	Recommended Height	Why
Standard blog posts	400-500px	Balanced, not overwhelming
Portfolio/visual	600-700px	Showcases imagery
News articles	350-450px	Quick to scroll past
Landing page style	700-800px	Maximum impact

Element Spacing

Setting: Single Post Elements Spacing Default: 32px Range: 16px – 80px

Controls vertical space between:

Entry header (title/meta)
Featured image
Post content

Spacing Guide:

Space	Effect	Best For
16-24px	Tight, compact	Mobile-first, news sites
28-40px	Comfortable, standard	Most blogs, balanced design
48-80px	Spacious, airy	Luxury, minimalist, portfolio

Reading Progress Bar

Add a visual indicator showing how much of the post has been read:

Setting: Single Blog ProgressBar Default: On Options: Yes / No

How It Works

Thin bar appears at top of screen
Fills from left to right as visitor scrolls
Reaches 100% at end of post content
Encourages completion

Benefits:

Shows reading progress visually
Increases engagement
Encourages visitors to finish reading
Modern UX feature
Minimal performance impact

Best For:

Long-form content (1000+ words)
Tutorial and guide posts
Story-driven content
Educational articles

Consider Disabling For:

Very short posts (under 500 words)
Minimal, distraction-free design
Sites where it conflicts with header design

Author Bio Section

Display author information at the end of each post:

Setting: Show Author Bio Default: On (recommended) Options: Yes / No

What’s Included

When enabled, displays:

Author avatar
Author name (linked to archive)
Author biographical info (from user profile)
Author social links (if configured)
Link to view all author posts

Configuring Author Info

Go to Users > Your Profile
Fill out Biographical Info
Add social profile URLs
Upload profile picture
Click Update Profile

Bio Writing Tips:

Keep it 2-3 sentences
Mention expertise/credentials
Include a call-to-action
Update regularly

Example: “Sarah Johnson is a WordPress developer with 10 years of experience. She specializes in building community-driven websites and shares tips weekly on this blog.”

Keep visitors engaged by showing similar content:

Social sharing buttons and related posts section at the bottom of single posts

Setting: Single Blog Related Posts Default: Off Options: Yes / No

How Related Posts Are Selected

WordPress shows related posts based on:

Same categories (highest priority)
Same tags
Recent posts (if no matches)

Display Format

Navigation Styles

Previous Post ← | → Next Post

Simple text links
Appears at bottom of post
Shows adjacent posts by date

Advanced Navigation (if enabled in theme):

Post thumbnails
Post titles
Category/tag based navigation

Social Sharing Buttons

Let visitors share your posts on social media:

Setting: Show Social Box Default: On Options: Yes / No

Available Platforms

Setting: Show Social Links (sortable list) Default Enabled: Facebook, Twitter, Pinterest, LinkedIn, WhatsApp

Customization:

Drag to reorder platforms
Uncheck to hide specific platforms
Checked items appear in your order

Platform Descriptions

Platform	Best For	Share Format
Facebook	General content	Link with image/title
Twitter	News, quotes	Text + link (280 chars)
Pinterest	Visual content	Image + description
LinkedIn	Professional content	Article preview
WhatsApp	Mobile sharing	Direct message with link

Share Button Placement

Position: Below post content, above comments Style: Icon buttons or text links (theme dependent) Mobile: Often combined into single “Share” button

Comments Section

Comments appear after post content (WordPress core feature):

Comment Display Settings

Access via Settings > Discussion:

Setting	Description	Recommended
Allow comments	Enable/disable comments	On
Require name/email	Mandatory fields	On
Comment moderation	Manual approval	On for new sites
Comment registration	Must be logged in	Off (reduces engagement)

Comment Pagination

For posts with many comments:

Break comments into pages: Yes
Comments per page: 50
Show newer/older: Newer first

Common Questions

Can I use different layouts for different posts?

Not directly through customizer (applies to all posts), but you can:

Use a page builder plugin for specific posts
Add custom CSS targeting specific post IDs
Create custom post templates in a child theme
Use categories with category-specific templates

The title is hard to read over my featured image.

For Title Over Image layout:

Increase overlay opacity (try 0.5 or higher)
Use darker overlay color
Choose darker featured images
Switch to Title Above Image layout

How do I disable the featured image on single posts?

Option 1: Don’t set a featured image on that post
Option 2: Use custom CSS: .single-post .entry-header img { display: none; }
Option 3: Use a plugin like “Hide Featured Image”

My related posts aren’t showing.

Check these:

Setting is enabled: Customizer > Blog > Related Posts = Yes
Posts have categories/tags: Related posts need common taxonomy
Enough published posts: Need at least 4-5 posts total
Cache cleared: Clear site cache and refresh

Can I show author bio only on certain posts?

Requires custom code. Options:

Use a plugin like “Author Bio Box”
Add conditional logic in child theme
Use post meta boxes to control per-post

Social sharing buttons aren’t appearing.

Check:

Setting enabled: Customizer > Blog > Show Social Box = Yes
At least one platform selected: Check the platforms list
JavaScript enabled: Social features require JS
No conflicts: Disable other social sharing plugins
Cache cleared: Clear cache and test

How do I change the social sharing button design?

Styling is theme-controlled. To customize:

Add custom CSS in Customizer > Additional CSS
Use a child theme to override styles
Install a dedicated social sharing plugin for more options

The reading progress bar disappears on mobile.

This may be intentional design. To force it on mobile:

Check customizer for mobile-specific settings
Add custom CSS for mobile displays
Contact support if it should appear but doesn’t

Can I add more social platforms?

Default platforms are built into the theme. To add more:

Use a plugin like “Social Warfare” or “AddToAny”
Hire a developer to extend the theme
Use a child theme to add custom share buttons

Performance Tips

Optimizing Single Posts

For Speed:

Compress featured images before upload
Use appropriate content width (less HTML/CSS rendering)
Limit related posts to 3-4
Lazy load images in post content
Minimize social sharing platforms to essentials

For Engagement:

Always include featured image
Enable progress bar for long posts
Show author bio (builds trust)
Enable related posts
Keep post navigation enabled

Image Recommendations

Element	Size	Format	Max File Size
Featured image (default width)	1200×675px	JPG	150KB
Featured image (full width)	1920×800px	JPG	200KB
In-content images	800-1200px wide	JPG/PNG	100-150KB
Author avatar	150×150px	JPG/PNG	20KB

Related Settings

Blog Archive Layout – Configure blog listing pages
Post Elements & Meta – Customize post information display
Sidebar Options – Single post sidebar configuration
Typography – Post text styling
Color Scheme – Post color customization

Need Help?

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