Great — you’ve already made smart architectural choices (ACF + CPT UI + WPGraphQL). That tells me you’re thinking long-term and possibly headless later 👌
Since you want:
- ✅ MSN.com-style layout (news portal / content grid / sections)
- ✅ 100% FREE plugins (no paid themes, no subscriptions)
- ✅ Categories already created
- ✅ No posts or homepage yet
I’ll give you a clear, professional step-by-step roadmap from zero → MSN-style news portal.
🔵 PHASE 1 — Foundation Setup (Clean & Structured)
Step 1: Choose the Right Free Theme (Very Important)
To achieve MSN-style layout, you need a lightweight, customizable theme.
✅ Best FREE Options:
- Blocksy (Free) ⭐ Recommended
- Astra (Free)
- GeneratePress (Free)
👉 I recommend Blocksy Free because:
- Built-in header builder
- Grid layout control
- Great with Gutenberg
- No paid requirement
- Very customizable
Install:
Dashboard → Appearance → Themes → Add New → Search “Blocksy” → Install → Activate
Step 2: Clean WordPress Defaults
Delete:
- Sample Post
- Sample Page
- Hello Theme (if exists)
- Unused plugins
Then:
Settings → Permalinks → Choose:
Post name
Save.
🔵 PHASE 2 — Structure Like MSN (Content Architecture)
MSN homepage structure is basically:
[Top Navigation]
[Breaking / Featured Section]
[Trending Slider or Grid]
[Category Sections]
- Tech News
- Reviews
- Tutorials
- Programming
[Sidebar Widgets]
[Footer]
We will build this using:
- Gutenberg (native editor)
- ACF (for structured content)
- Query Loop block (VERY important)
- Optional free blocks plugin
🔵 PHASE 3 — Install Essential FREE Plugins
You already installed:
- ACF ✅
- CPT UI ✅
- WPGraphQL ✅
- WPGraphQL for ACF ✅
Now install:
1️⃣ Kadence Blocks (FREE)
OR
2️⃣ Spectra (by Astra) – FREE
These give:
- Advanced grid layouts
- Post grids
- Row layout blocks
👉 Install one only. I recommend Spectra (cleaner news layouts).
🔵 PHASE 4 — Create Content Structure
Step 3: Do You Really Need Custom Post Types?
For a news portal like MSN, you actually don’t need custom post types.
Categories are enough:
- Reviews
- Tech News
- Trending
- Tutorials
- Programming
⚠️ Recommendation:
Use default Posts, organize by categories.
Keep CPT for future if needed.
🔵 PHASE 5 — Build MSN-Style Homepage
Step 4: Create Homepage
- Pages → Add New
- Title: Home
- Publish
Then:
Settings → Reading →
- Set “Your homepage displays” → A static page
- Select “Home”
Save.
🔵 PHASE 6 — Build the Layout (Core Step)
Edit Home page with Gutenberg.
We will build in sections.
🔹 SECTION 1 — Top Featured Story (Hero Section)
Add:
- Cover Block OR Group Block
- Insert Query Loop block
- Filter by Category: “Trending”
- Order by: Date
- Posts per page: 1
Design:
- Large featured image
- Big headline
- Excerpt
- “Read More”
This mimics MSN’s top banner story.
🔹 SECTION 2 — Trending Grid (3–4 Posts)
Add:
- Columns (3 or 4)
- Insert Query Loop
- Category: Trending
- Show 4 posts
- Grid layout
Style:
- Image on top
- Title below
- No excerpt (clean look)
🔹 SECTION 3 — Category Blocks (Repeatable Structure)
Now for each category:
Example: Tech News
Add:
- Heading Block → “Tech News”
- Query Loop
- Filter: Tech News
- Show 4–6 posts
- Layout: Grid
Repeat for:
- Reviews
- Tutorials
- Programming
This creates MSN-style sections.
🔵 PHASE 7 — Sidebar (Like MSN)
Go to:
Appearance → Widgets
Add:
- Search
- Categories
- Latest Posts
- Trending Posts
- Tag Cloud
If using Blocksy:
Customize → Sidebar → Enable Right Sidebar for Home
🔵 PHASE 8 — Create Navigation Menu
Appearance → Menus
Create:
Main Menu:
- Home
- Tech News
- Reviews
- Tutorials
- Programming
- Trending
Assign to:
Primary Menu
🔵 PHASE 9 — Use ACF Properly (Professional Setup)
Instead of normal posts, enhance posts with:
Create ACF Fields:
For Posts:
- Rating (Number)
- Pros (Repeater)
- Cons (Repeater)
- Author Position
- Featured Badge (True/False)
- External Link (optional)
Now your Reviews can look professional.
🔵 PHASE 10 — Improve UI (Still Free)
Customize Theme:
Appearance → Customize
Adjust:
- Typography
- Colors
- Container width (MSN is wide)
- Header style
- Sticky header
🔵 PHASE 11 — Add Free SEO & Performance
Install:
SEO:
- Rank Math (Free)
Caching:
- LiteSpeed Cache (best for Hostinger)
Image Optimization:
- Optimole (Free tier)
🔵 PHASE 12 — Make It Look More Like MSN
To get closer:
✔ Use:
- Wide container (1200px+)
- Light grey background (#f5f5f5)
- White content cards
- Subtle shadows
- Blue accent color
✔ Use card-style design:
Spectra → Post Grid → Card Layout
🔵 PHASE 13 — Create 15–20 Sample Posts
Before finalizing design, create:
- 5 Tech News
- 5 Reviews
- 3 Tutorials
- 3 Programming
- 3 Trending
Real layout only looks correct with content.
🔵 PHASE 14 — Optional (Advanced but Powerful)
Since you installed WPGraphQL:
You can later:
- Convert to headless (Next.js frontend)
- Build mobile app
- Create dynamic widgets
But ignore for now until content is ready.
🔵 FINAL STRUCTURE CHECKLIST
You should now have:
✔ Blocksy Theme
✔ Static homepage
✔ Hero featured section
✔ Category grids
✔ Sidebar
✔ Navigation
✔ ACF review fields
✔ SEO plugin
✔ Cache plugin
✔ 15+ posts
⚠️ Important Professional Advice
Avoid:
- Installing 20+ plugins
- Page builders like Elementor (slows news sites)
- Paid themes
- Overdesigning before content
News sites are:
Content-driven, not animation-driven.
