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