Individual Blog Posts

Purpose: Display full individual blog post with engagement features

Layout: Full-width content OR content with sidebar (choose one approach)

MAIN POST CONTENT

Key Sections:

1. Post Header Section

• Breadcrumb Navigation:
• Home > News & Updates > Blog > [Post Title]
• Category Badge:
• Visual tag showing post category
• Clickable to view all posts in category
• Post Title:
• Large, prominent (H1)
• Eye-catching typography
• Post Meta Information:
• Author name with small avatar: “By Naomi Wynters”
• Publish date: “January 15, 2024”
• Last updated date (if applicable)
• Reading time: “5 min read” (optional)
• View count (optional)
• Featured Image:
• Large, high-quality image
• Full-width or contained
• Alt text for accessibility

1. Post Content Body

• Full blog post content
• Rich text formatting:
• Headings (H2, H3, H4)
• Paragraphs with good line spacing
• Bold and italic text
• Bulleted and numbered lists
• Blockquotes (styled with brand colors)
• Pull quotes highlighted
• Embedded media:
• Additional images throughout
• Image captions
• Embedded videos
• Audio players (if podcast episode)
• Social media embeds
• Gallery shortcodes
• Links:
• Internal links (blue, underlined)
• External links (with external icon ↗)
• External links open in new tab

1. External Link Post Format (if post is about external feature)

• Summary of external content at top
• Quote or excerpt from external article
• Large CTA Button:
• “Read Full Article on [Publication Name]”
• External link icon
• Opens in new tab
• Prominent placement after intro
• Context/commentary from Naomi below

1. Post Tags

• Section after content: “Tagged:”
• Visual tag pills/badges
• Clickable to view related posts
• Example: “Performances | Makeup | Tutorial | Beauty”

1. Social Sharing Section

• Headline: “Share This Post”
• Social sharing buttons:
• Facebook
• Twitter
• Pinterest
• LinkedIn
• Instagram (or copy link for Instagram)
• Email
• Copy Link
• Floating share bar (sidebar or sticky) optional
• Share count displayed (optional)

1. Author Bio Box

• Section after post content
• Contains:
• Author photo (circular or square)
• “About the Author” heading
• Author name: Naomi Wynters (Dammon T. Johnson)
• Brief bio (2-3 sentences)
• Social media links (icon buttons)
• “View all posts by Naomi Wynters” link

1. Related Posts Section

• Headline: “You May Also Like” or “Related Posts”
• Display 3-4 related blog posts
• Selection criteria:
• Same category
• Similar tags
• Recent posts if no close matches
• Each related post shows:
• Thumbnail image
• Post title (clickable)
• Publish date
• Brief excerpt (optional)
• Grid layout: 3 columns desktop, 2 tablet, 1 mobile

1. Comments Section (Optional)

• Headline: “Leave a Comment” or “Join the Conversation”
• WordPress native comments OR third-party system
• Comment form fields:
• Name (required)
• Email (required, not published)
• Website (optional)
• Comment text area (required)
• Cookie consent checkbox
• Submit button: “Post Comment”
• Comment display:
• Avatar/gravatar
• Commenter name
• Date and time
• Comment text
• Reply button (threaded comments)
• Moderation: Comments require approval
• Comment settings:
• Enable nested/threaded replies (5 levels)
• Show comments with oldest/newest first
• Pagination for many comments

1. Newsletter CTA

• Section before or after comments
• Headline: “Enjoyed This Post?”
• Text: “Subscribe for more updates, behind-the-scenes content, and exclusive news”
• Email signup form (inline)
• Submit button: “Subscribe”
• Privacy note: “We respect your privacy”

1. Previous/Next Post Navigation

• Bottom of page
• Visual navigation to adjacent posts
• Shows:
• Previous Post: “← [Previous Post Title]”
• Next Post: “[Next Post Title] →”
• Thumbnail images optional
• Chronological order

1. Back to Blog Link

• Prominent link: “← Back to All Posts”
• Links to main Blog archive page
• Can be at top and/or bottom of post

SIDEBAR (If Using Sidebar Layout on Individual Posts)

Optional – Same widgets as Blog archive page:

• Search Blog
• Categories
• Recent Posts
• Tags
• Newsletter Signup
• Social Follow
• Popular Posts

OR Simplified Sidebar:

• About the Author (brief)
• Related Posts
• Newsletter Signup
• Social Follow

POST FORMATTING & STYLE GUIDE

Typography:

• Post title: Large, bold (32-40px)
• Body text: Readable size (16-18px)
• Line height: 1.6-1.8 for readability
• Paragraph spacing: Good white space between paragraphs
• Headings hierarchy clear (H2, H3 styled distinctly)

Images:

• Featured image: 1200x630px minimum
• In-post images: Optimized for web
• Image alignment: Centered, left, right, full-width options
• Image captions: Italic, smaller font
• Alt text: Always include for SEO and accessibility

Links:

• Internal links: Brand blue (#2173A6)
• External links: Include external icon
• Hover state: Underline or color change
• Visited links: Slightly different shade

Blockquotes:

• Styled with left border in brand color
• Larger or italic font
• Background tint (light blue #B4D2D9)
• Attributed quotes include citation

Lists:

• Bulleted lists: Custom bullet style (snowflake icon optional)
• Numbered lists: Clear numbering
• Indented properly
• Good spacing between items

Embedded Media:

• Videos: Responsive embed (16:9 ratio)
• Audio players: Brand-styled controls
• Social embeds: Instagram, Twitter, Facebook supported
• Galleries: Grid layout with lightbox

Call-Out Boxes:

• Info boxes for important notes
• Styled with brand colors
• Icon or emoji to indicate type
• Border or background to stand out

CONTENT MIGRATION REQUIREMENTS

Tasks for Design Team:

☐ Extract from existing News & Updates page:

• Latest blog post → Feature on News & Updates landing page
• ALL external links → Display on News & Updates page in organized section
• All blog post content → Import to Blog archive page
• All images → Download and re-upload optimized
• Preserve publish dates (backdate posts)

☐ Create spreadsheet of external links:

• Link URL
• Link title/headline
• Publication/source name
• Date published/featured
• Brief description
• Category (Press, Interview, Feature, etc.)
• Status (active/broken)

☐ Import blog posts to WordPress:

• Create all posts
• Set proper categories
• Add relevant tags
• Upload featured images
• Format content (headings, links, images)
• Set publish dates to original dates
• Configure permalinks/URLs

☐ Set up blog categories:

• Create category structure
• Assign posts to categories
• Set category descriptions

☐ Configure sidebar widgets:

• Search widget
• Categories widget
• Recent posts widget
• Tag cloud widget
• Newsletter widget
• Archive widget
• Social follow widget

☐ Test functionality:

• Search works correctly
• Category filtering works
• Pagination works
• Links all functional
• Mobile responsive
• Images display correctly
• Comments work (if enabled)

☐ SEO optimization:

• Meta titles for each post
• Meta descriptions
• Image alt text
• Proper heading structure (H1, H2, H3)
• Internal linking between posts
• Schema markup for blog posts

BLOG SETTINGS & CONFIGURATION

WordPress Settings:

• Posts per page: 9-12 posts
• Post format support: Standard, Link, Video, Gallery, Image
• Comment moderation: On (require approval)
• Comment registration: Optional (allow guests or require login)
• Pingbacks/trackbacks: Enable or disable as preferred
• RSS feed: Full content or excerpt (full recommended)

Permalink Structure:

• Recommended: /blog/[post-name]/
• Example: naomiwynters.com/blog/latest-pageant-recap/

Categories Setup:

• Create all categories before importing posts
• Set parent categories if hierarchical
• Write category descriptions (for SEO)

Tag Guidelines:

• Use consistent tags across posts
• Don’t over-tag (5-10 tags per post max)
• Use existing tags when possible
• Tag naming: Capitalize first letter

MOBILE OPTIMIZATION

Mobile-Specific Considerations:

News & Updates Page:

• Featured post stacks vertically
• External links grid becomes single column
• Large tap-friendly buttons

Blog Archive Page:

• Sidebar moves below content on mobile
• Single column post grid
• Larger, easier tap targets
• Simplified navigation

Individual Blog Post:

• Full-width content on mobile
• Readable text size (16px minimum)
• Images scale responsively
• Social sharing buttons accessible
• Comments form mobile-friendly
• Sticky social share bar optional