Phase 1 — Module 1.9: Users, Roles & Settings Configuration

Part 1 — Users in WordPress

What is a User in WordPress?

Every person who has an account on your WordPress site is a user. Users are stored in the wp_users table in the database.

Each user has:

- Username
- Password (hashed, never stored as plain text)
- Email address
- Display name
- Role (what they are allowed to do)
- Registration date

Extra user data like first name, last name, bio, profile picture URL is stored in wp_usermeta table.

---

Part 2 — User Roles

This is the most important part of this module. WordPress has a Role-Based Access Control (RBAC) system — exactly like Laravel's Gates and Policies but built into the core.

Every user has exactly one role. The role determines what that user can and cannot do on the site.

WordPress has 5 built-in roles:

---

Role 1 — Administrator

Access Level: FULL ACCESS — everything

An Administrator can:

✓ Install, activate, delete themes and plugins
✓ Create, edit, delete ANY post or page (including other users' content)
✓ Manage all users — create, edit, delete, change roles
✓ Access all Settings
✓ Manage menus, widgets, customizer
✓ Import and export content
✓ Manage site options

Who should be Administrator? Only the site owner and lead developer. Never give Administrator access to content writers or clients unless absolutely necessary.

---

Role 2 — Editor

Access Level: Full content control, no site management

An Editor can:

✓ Create, edit, publish, delete their OWN posts
✓ Create, edit, publish, delete OTHER users' posts too
✓ Manage categories and tags
✓ Moderate and manage ALL comments
✓ Upload files to Media Library
✓ Manage pages
✗ Cannot install plugins or themes
✗ Cannot access Settings
✗ Cannot manage users

Who should be Editor? A senior content manager who oversees all content — reviews and publishes other writers' articles.

---

Role 3 — Author

Access Level: Manage only their own content

An Author can:

✓ Create, edit, publish, delete their OWN posts
✓ Upload files to Media Library
✗ Cannot edit or delete OTHER users' posts
✗ Cannot manage pages
✗ Cannot manage categories/tags
✗ Cannot install plugins or themes
✗ Cannot access Settings

Who should be Author? A regular content writer who writes and publishes their own articles independently.

---

Role 4 — Contributor

Access Level: Write content but cannot publish

A Contributor can:

✓ Create and edit their OWN posts (drafts only)
✓ Submit posts for review
✗ Cannot publish posts — needs Editor/Admin approval
✗ Cannot upload images to Media Library
✗ Cannot edit already published posts
✗ Cannot manage pages, categories, tags

Who should be Contributor? A guest writer or new team member whose content needs to be reviewed before going live.

---

Role 5 — Subscriber

Access Level: Minimal — only their own profile

A Subscriber can:

✓ Log in to the site
✓ Read content (same as a non-logged-in visitor)
✓ Edit their own profile (name, password, email)
✗ Cannot create any content
✗ Cannot access admin panel features
✗ Cannot upload files

Who should be Subscriber? Regular registered users of your site. For StreamVault — anyone who signs up to use the platform will be a Subscriber by default.

---

Role Comparison Table

Capability	Admin	Editor	Author	Contributor	Subscriber
Manage plugins/themes	✓	✗	✗	✗	✗
Manage users	✓	✗	✗	✗	✗
Access Settings	✓	✗	✗	✗	✗
Edit others' posts	✓	✓	✗	✗	✗
Publish own posts	✓	✓	✓	✗	✗
Create draft posts	✓	✓	✓	✓	✗
Upload media	✓	✓	✓	✗	✗
Read content	✓	✓	✓	✓	✓
Edit own profile	✓	✓	✓	✓	✓

---

Part 3 — Managing Users

Viewing All Users

Go to Users → All Users

+----------------------------------------------------------------+
|  All Users   Administrator(1)  Subscriber(0)                   |
|----------------------------------------------------------------|
|  [ ] Username    Name    Email           Role        Posts     |
|----------------------------------------------------------------|
|  [ ] admin       —       admin@test.com  Administrator  3      |
+----------------------------------------------------------------+

At the top you see filter links — click Administrator, Editor, etc. to filter by role.

---

Creating a New User

Go to Users → Add New

+------------------------------------------+
|  Add New User                            |
|------------------------------------------|
|  Username:        [                    ] |
|  Email:           [                    ] |
|  First Name:      [                    ] |
|  Last Name:       [                    ] |
|  Website:         [                    ] |
|  Language:        [ Site Default ▼     ] |
|  Password:        [ Auto-generated     ] |
|                   [✓] Send User Notification |
|  Role:            [ Subscriber ▼       ] |
|                                          |
|  [ Add New User ]                        |
+------------------------------------------+

Fields explained:

Field	Purpose
Username	Cannot be changed after creation — choose carefully
Email	Must be unique — used for login and notifications
Password	Auto-generated strong password or set your own
Send User Notification	Emails the new user their login details
Role	What this user is allowed to do

---

Editing a User

Go to Users → All Users → hover over a username → click Edit

Or go to Users → Your Profile to edit your own account.

+------------------------------------------+
|  Edit User                               |
|------------------------------------------|
|  PERSONAL OPTIONS                        |
|  [ ] Visual Editor — disable             |
|  [ ] Show toolbar when viewing site      |
|  Language: [ Site Default ▼ ]            |
|                                          |
|  NAME                                    |
|  Username:    admin (cannot change)      |
|  First Name:  [                    ]     |
|  Last Name:   [                    ]     |
|  Nickname:    [ admin              ]     |
|  Display name publicly as: [ admin ▼ ]  |
|                                          |
|  CONTACT INFO                            |
|  Email:       [ admin@test.com     ]     |
|  Website:     [                    ]     |
|                                          |
|  ABOUT YOURSELF                          |
|  Bio:         [                    ]     |
|  Profile Picture: (via Gravatar)         |
|                                          |
|  ACCOUNT MANAGEMENT                      |
|  New Password: [ Generate Password ]     |
|                                          |
|  ROLE                                    |
|  Role: [ Administrator ▼ ]              |
|                                          |
|  [ Update User ]                         |
+------------------------------------------+

---

Changing a User's Role

Method 1 — From All Users list:

Select user checkbox → Bulk Actions → Change role to... → Apply

Method 2 — From Edit User screen:

Scroll down to Role dropdown → change → Update User.

Method 3 — Quick Edit:

Hover over username → Quick Edit → change role inline.

---

Deleting a User

Hover over a username in the Users list → click Delete

WordPress asks what to do with their content:

What should be done with content owned by this user?

○ Delete all content
● Attribute all content to: [ admin ▼ ]

Always choose "Attribute all content" — so their posts are not deleted but transferred to another user.

---

Part 4 — Capabilities System

Roles are made up of individual capabilities. A capability is a specific permission like:

edit_posts          → can edit posts
publish_posts       → can publish posts
delete_posts        → can delete posts
manage_options      → can access Settings
install_plugins     → can install plugins
manage_users        → can manage other users
upload_files        → can upload to Media Library
edit_others_posts   → can edit other users' posts

When you assign a role to a user, they get all capabilities that role includes. In Phase 6 and 7, we will:

• Create a custom "StreamVault Member" role
• Assign specific capabilities like accessing watchlist, rating movies
• Check capabilities in code using current_user_can()

if (current_user_can('edit_posts')) {
    echo 'You can edit posts';
}

if (current_user_can('manage_options')) {
    echo 'You are an admin';
}

---

Part 5 — Important Settings Configuration

Now let us go through every important Settings section and configure StreamVault properly.

---

Settings → General

Go to Settings → General

Configure exactly like this:

Site Title:              StreamVault
Tagline:                 Watch Movies & Web Series Online
WordPress Address (URL): http://streamvault.local
Site Address (URL):      http://streamvault.local
Administration Email:    admin@test.com

Membership:
[ ] Anyone can register     ← uncheck for now

New User Default Role:   Subscriber   ← keep this

Timezone:                Asia/Kolkata
Date Format:             F j, Y        (January 5, 2024)
Time Format:             g:i a         (10:30 am)
Week Starts On:          Monday

[ Save Changes ]

Why "Anyone can register" is unchecked for now?

We will build a custom registration system in Phase 6. For now we do not want random people registering through the default WordPress registration page.

---

Settings → Reading

Go to Settings → Reading

Your homepage displays:
  ○ Your latest posts
  ● A static page        ← select this

Homepage:    [ Home   ▼ ]
Posts page:  [ Blog   ▼ ]    ← create a Blog page if not done

Blog pages show at most:    [ 10 ] posts
Search engine visibility:
[ ] Discourage search engines    ← keep unchecked

Important: If you have not created a "Blog" page yet — go to Pages → Add New → Title: Blog → Publish. Then come back here and assign it.

---

Settings → Discussion

Go to Settings → Discussion

DEFAULT POST SETTINGS
[✓] Allow link notifications (pingbacks and trackbacks)
[✓] Allow people to submit comments on new posts
    ← for StreamVault movies we will disable this per post

OTHER COMMENT SETTINGS
[✓] Comment author must fill out name and email
[ ] Users must be registered and logged in to comment
[✓] Automatically close comments after [ 14 ] days
[ ] Enable threaded (nested) comments
[✓] Break comments into pages with [ 50 ] comments per page

EMAIL ME WHENEVER
[✓] Anyone posts a comment
[✓] A comment is held for moderation

BEFORE A COMMENT APPEARS
[✓] Comment must be manually approved
[ ] Comment author must have previously approved comment

AVATARS
[✓] Show avatars
Default Avatar: Mystery Person

---

Settings → Media

Go to Settings → Media

IMAGE SIZES

Thumbnail size:
  Width:  [ 150 ]   Height: [ 150 ]
  [✓] Crop thumbnail to exact dimensions

Medium size:
  Max Width:  [ 300 ]   Max Height: [ 300 ]

Large size:
  Max Width:  [ 1024 ]   Max Height: [ 1024 ]

UPLOADING FILES
[✓] Organize my uploads into month and year-based folders

For StreamVault we will later register custom image sizes for movie posters:

Movie Poster:   300 x 450px  (2:3 ratio — standard poster)
Movie Banner:   1280 x 720px (16:9 ratio — hero banner)
Movie Card:     400 x 225px  (16:9 ratio — listing card)

We will add these in functions.php when building our theme.

---

Settings → Permalinks

Go to Settings → Permalinks — this is the most important setting

PERMALINK STRUCTURE

○ Plain          →  http://streamvault.local/?p=123
○ Day and name   →  http://streamvault.local/2024/01/01/sample/
○ Month and name →  http://streamvault.local/2024/01/sample/
○ Numeric        →  http://streamvault.local/archives/123
● Post name      →  http://streamvault.local/sample-post/
○ Custom         →  [ /%postname%/ ]

OPTIONAL

Category base:  [ ]    (leave empty — uses /category/)
Tag base:       [ ]    (leave empty — uses /tag/)

[ Save Changes ]

Always select Post name. This gives clean URLs:

Blog post:  /top-10-action-movies/
Page:       /about/
Movie:      /movies/inception/        (we set this up in Phase 4)
Genre:      /genre/action/            (we set this up in Phase 4)

Click Save Changes — WordPress updates .htaccess automatically.

---

Settings → Privacy

Go to Settings → Privacy

Privacy Policy Page:
  [ Create New Page ]  or  [ -- Select -- ▼ ]

Either create a new Privacy Policy page or select an existing one. This page is linked in WordPress's default login/registration footer.

For StreamVault — go to Pages → Add New → Title: Privacy Policy → add basic content → Publish. Then come back here and select it.

---

Part 6 — Hands On Tasks

Complete all of these before moving to the next module:

Task 1: Update Site Title to "StreamVault"
        Update Tagline to "Watch Movies & Web Series Online"
        Set Timezone to Asia/Kolkata
        Go to: Settings → General

Task 2: Set Homepage to static "Home" page
        Set Posts page to "Blog" page
        Go to: Settings → Reading

Task 3: Set Permalinks to "Post name"
        Go to: Settings → Permalinks → Save Changes

Task 4: Create a new user with role "Editor"
        Username: editor_test
        Email: editor@test.com
        Go to: Users → Add New

Task 5: Create a new user with role "Subscriber"
        Username: subscriber_test
        Email: subscriber@test.com
        Go to: Users → Add New

Task 6: Log out from admin → log in as editor_test
        Notice what options are missing from the dashboard
        Log back in as admin

Task 7: Create a Privacy Policy page
        Go to: Pages → Add New → Title: Privacy Policy
        Go to: Settings → Privacy → select this page

---

Summary

• WordPress has 5 built-in roles — Administrator, Editor, Author, Contributor, Subscriber.
• Roles are made up of individual capabilities — specific permissions.
• Administrator has full access. Subscriber has minimal access.
• For StreamVault — regular users will be Subscribers with custom capabilities added in Phase 6.
• current_user_can('capability') is how you check permissions in code.
• Username cannot be changed after creation — choose carefully.
• Always set Permalinks to Post name on every fresh WordPress installation.
• Settings → Reading → set a static homepage for StreamVault.
• Settings → General → set site title, tagline, timezone correctly.

Module 2.4 — The Attention Mechanism

The actual secret sauce — why "Attention Is All You Need" changed everything

---

Start With a Simple Sentence

Read this sentence:

"The animal didn't cross the street because it was too tired."

One question — what does "it" refer to?

The animal? Or the street?

You instantly knew — the animal. Streets don't get tired.

But think about HOW you knew. You didn't just read "it" in isolation. Your brain automatically connected "it" to "animal" — because "tired" makes sense for animals, not streets.

Your brain paid more attention to "animal" than "street" when figuring out what "it" means.

This is exactly what the Attention Mechanism does — but inside a neural network, with numbers.

---

The Core Idea — One Sentence

Attention lets every token look at every other token and decide how much to focus on each one.

That's it. That's the whole idea.

Now let's understand exactly how it works.

---

The Problem Attention Solves

Before Attention — each word was processed somewhat independently. The model struggled to connect words that were far apart in a sentence.

"The trophy didn't fit in the suitcase 
 because it was too big."

"it" is 8 words away from "trophy." Old models would lose that connection. They'd struggle to figure out what "it" refers to.

Attention solves this by letting "it" directly look at "trophy" — no matter how far apart they are.

Distance doesn't matter in Attention. Every token can directly connect to every other token.

---

How Attention Actually Works — Simply

Let's use a simple example sentence:

"Arjun ate the pizza because he was hungry"

Focus on the word "he."

The model needs to figure out — who is "he"?

With Attention, "he" gets to look at every other word and assign an attention score:

"he" looks at:

"Arjun"   → HIGH attention  (0.82) ← most likely "he" = Arjun
"ate"     → low attention   (0.05)
"the"     → very low        (0.01)
"pizza"   → low attention   (0.04)
"because" → very low        (0.01)
"he"      → itself          (0.02)
"was"     → low attention   (0.02)
"hungry"  → medium attention(0.03)

Total = 1.0 (always adds up to 1 — like percentages)

"he" puts 82% of its attention on "Arjun."

Now the model knows — "he" most likely refers to "Arjun."

The attention scores are learned during training — the model figured out on its own that pronouns should pay attention to nearby nouns.

---

The Three Players — Query, Key, Value

This is where most explanations get complicated. We'll keep it simple.

Inside Attention, every token gets turned into three things:

Every token gets:

Q → Query   "What am I looking for?"
K → Key     "What do I contain?"
V → Value   "What information do I actually give?"

Think of it like a search engine:

You searching Google:
Query   = what you type in the search bar
Key     = the titles/descriptions of web pages
Value   = the actual content of those web pages

Attention works the same way:
Each token's Query searches against all other tokens' Keys
The match score decides how much of each token's Value to use

---

A Real Life Analogy — The Library

Imagine you're in a library looking for information about "cats."

YOU         → Query    ("I'm looking for: cats")

Every book has:
→ Key       (the title and description on the spine)
→ Value     (the actual content inside)

You scan the spines (Keys):
"Encyclopedia of Animals"  → HIGH match with your Query
"Cat Care Guide"           → HIGH match
"History of Rome"          → LOW match
"Pizza Recipes"            → NO match

You spend most time reading (attending to):
"Encyclopedia of Animals"  → gives you lots of info (Value)
"Cat Care Guide"           → gives you specific info (Value)
"History of Rome"          → you barely open it
"Pizza Recipes"            → you ignore completely

This is exactly what Attention does — for every single token, with every other token, all at the same time.

---

Multi-Head Attention — Looking From Multiple Angles

Here's something that makes Transformers even more powerful.

The model doesn't run Attention just once. It runs it multiple times in parallel — each time looking for different types of relationships.

This is called Multi-Head Attention.

Same sentence: "Arjun ate the pizza because he was hungry"

Head 1 → focuses on: who is doing what?
         (subject-verb relationships)
         "Arjun" ←→ "ate"

Head 2 → focuses on: pronoun references
         "he" ←→ "Arjun"

Head 3 → focuses on: what was eaten?
         "ate" ←→ "pizza"

Head 4 → focuses on: cause and effect
         "hungry" ←→ "because" ←→ "ate"

Head 5 → focuses on: articles and nouns
         "the" ←→ "pizza"

Each head learns to pay attention to a different type of linguistic relationship — all at the same time.

Then all the results from all heads get combined into one rich understanding.

Multi-Head Attention output:
A deep understanding of ALL relationships 
in the sentence simultaneously

GPT-3 uses 96 attention heads per layer. Across 96 layers. That's a massive amount of relationship-finding happening at once.

---

Self-Attention vs Cross-Attention

Two types of Attention you'll hear about:

Self-Attention — tokens in the same sequence attend to each other.

Input: "The cat sat on the mat"

Every word attends to every other word 
in the SAME sentence.

"cat" looks at "The", "sat", "on", "the", "mat"
"sat" looks at "The", "cat", "on", "the", "mat"
...etc

This is what builds understanding of the input.

Cross-Attention — tokens from one sequence attend to tokens from another sequence.

Used in translation:

English input: "Hello, how are you?"
French output being generated: "Bonjour, comment..."

"comment" (French) attends to "how" (English)
because they correspond to each other

For LLMs doing text generation — Self-Attention is the main one you need to understand.

---

Visualizing Attention — What the Model Actually Sees

Researchers have built tools that visualize which words attend to which. Here's what they find:

Sentence: "The trophy didn't fit in the suitcase 
           because it was too big"

Attention on word "it":

"The"       ░░░░░░░░░░  (low)
"trophy"    ████████░░  (HIGH) ← model correctly identifies
"didn't"    ░░░░░░░░░░  (low)      "it" refers to "trophy"
"fit"       ░░░░░░░░░░  (low)
"in"        ░░░░░░░░░░  (low)
"the"       ░░░░░░░░░░  (low)
"suitcase"  ░░░░░░░░░░  (low)
"because"   ░░░░░░░░░░  (low)
"it"        ░░░░░░░░░░  (itself)
"was"       ░░░░░░░░░░  (low)
"too"       ░░░░░░░░░░  (low)
"big"       ██░░░░░░░░  (medium) ← "big" helps figure out "it"

The model learned — completely on its own — that "it" should pay most attention to "trophy" in this context.

---

Why This Was Revolutionary

Before Attention — connecting words far apart in a sentence was hard.

After Attention — any word can directly connect to any other word regardless of distance.

Before Attention:
"The old man who lived next to the park 
 where children played every afternoon 
 suddenly fell."

Who fell? The model had trouble connecting 
"fell" back to "man" — too many words in between.

After Attention:
"fell" directly attends to "man" with high score
Distance doesn't matter — direct connection every time

This is why the paper was called "Attention Is All You Need" — they showed that you don't need complex recurrent networks. Just Attention, done right, was enough to beat everything.

---

How Attention Builds Through Layers

Remember — the Transformer has many layers. Attention runs in EVERY layer.

Layer 1 Attention:
→ Learns basic grammar relationships
→ "the" attends to the noun it modifies

Layer 2 Attention:
→ Learns slightly deeper patterns
→ Subject attends to its verb

Layer 5 Attention:
→ Pronoun resolution
→ "he/she/it" attends to what they refer to

Layer 20 Attention:
→ Complex semantic relationships
→ "bank" attends to context words to determine meaning

Layer 96 Attention:
→ Very deep reasoning
→ Complex logical and factual relationships

Each layer's Attention builds on the previous layer's output. By the final layer — the model has an incredibly rich understanding of the text.

---

Attention and the Context Window — The Connection

Here's something important for your applications.

Attention is run between every pair of tokens in the context window.

Context window with N tokens:
Attention calculations = N × N

100 tokens   → 10,000 calculations
1,000 tokens → 1,000,000 calculations
10,000 tokens → 100,000,000 calculations

This is why longer context windows are expensive and slow — the amount of computation grows with the square of the number of tokens.

128,000 token context window = 128,000 × 128,000 = 16 billion attention calculations per layer.

This is why large context models cost more to run. Now you know exactly why.

---

The Complete Flow — Everything Together

Let's put the last four modules together into one clean picture:

You type: "What does 'bank' mean in this sentence: 
           I walked to the river bank"

Step 1 — Tokenization (Module 2.1)
Text → ["What", " does", " bank", " mean", ...]

Step 2 — Embeddings (Module 2.2)  
Each token → list of 1536 numbers
"bank" starts with a generic "bank" embedding

Step 3 — Transformer Layers (Module 2.3)
Many layers process the embeddings

Step 4 — Attention (this module)
In each layer, "bank" runs Attention:
→ "bank" attends to "river" → HIGH score
→ "bank" attends to "money" → not present, so N/A
→ "bank" attends to "walked" → medium score

After Attention:
"bank" embedding is now updated to reflect
RIVER bank meaning — not money bank

Step 5 — Output
Model generates: "In this sentence, 'bank' 
refers to the side of a river..."

Attention is what allows the same word "bank" to mean different things in different contexts. The embedding gets updated by Attention at each layer — shaped by the surrounding words.

---

Why This Matters for RAG and Agents

When we get to Phase 5 — RAG — you'll see this directly.

When a user asks a question, we convert it to an embedding and search for similar document chunks. The quality of that embedding — how well it captures meaning — depends entirely on Attention.

User question: "What are the side effects of aspirin?"

The embedding of this question captures:
- "side effects" → medical context (high attention to "aspirin")
- "aspirin"      → medication (high attention to "side effects")
- Combined meaning: looking for medical risk information

This rich embedding finds the RIGHT document chunks.

Without Attention — the embedding would be shallow. With Attention — the embedding deeply captures meaning and context.

---

3-Line Summary

1. Attention lets every token look at every other token and assign a score — how much should I focus on you right now — which lets the model understand relationships between any words regardless of distance.
2. Multi-Head Attention runs this process many times in parallel — each head learning different types of relationships like pronoun references, subject-verb connections, or cause and effect.
3. Attention is what makes the same word mean different things in different contexts — "bank" near "river" gets a different final embedding than "bank" near "money" — and this context-awareness is what makes LLMs powerful.

---

Module 2.4 — Complete ✅

Phase 2 is done. 🎉

You now understand what's actually happening inside an LLM:

Text → Tokens → Embeddings → Transformer 
→ Attention (many layers) → Output tokens → Text

---

Coming Up — Phase 3: Embeddings Deep Dive

Module 3.1 — What is an Embedding and Why Does it Exist

Phase 2 gave you a basic intro to embeddings. Now we go deep. This entire phase is dedicated to embeddings — because they are the foundation of everything we'll build. RAG, vector databases, similarity search — it all runs on embeddings. By the end of Phase 3 you'll feel embeddings, not just understand them.

Phase 1 — Module 1.8: Media Library, Menus & Widgets

Part 1 — Media Library

What is the Media Library?

The Media Library is WordPress's built-in file manager. Every image, video, PDF, audio file, or document you upload to WordPress is stored here and tracked in the database.

When you upload a file:

• The physical file goes to wp-content/uploads/YEAR/MONTH/
• A record is created in wp_posts table with post_type = 'attachment'
• Meta data (file size, dimensions, alt text) goes to wp_postmeta

---

Accessing the Media Library

Go to Media → Library

You will see two view modes:

[ Grid View ]  [ List View ]

Grid View — shows thumbnails in a visual grid. Good for browsing images.

List View — shows files in a table with columns for filename, author, upload date, and which post it is attached to.

---

Uploading Files

Method 1 — Media Library upload: Go to Media → Add New → drag and drop files or click "Select Files".

Method 2 — While writing a post: Inside the Block Editor, click + → choose Image block → Upload.

Method 3 — Featured image: In the post sidebar → Featured Image → Set featured image → Upload Files.

---

File Organization

WordPress organizes uploads by year and month automatically:

wp-content/uploads/
├── 2024/
│   ├── 01/
│   │   ├── inception-poster.jpg
│   │   ├── inception-poster-300x450.jpg
│   │   └── inception-poster-150x150.jpg
│   └── 02/
│       └── banner.png
└── 2025/
    └── 01/
        └── new-movie.jpg

---

Image Sizes — How WordPress Handles Them

When you upload an image, WordPress automatically generates multiple sizes:

Original     →  Full resolution as uploaded
Large        →  max 1024 x 1024px
Medium Large →  max 768px wide
Medium       →  max 300 x 300px
Thumbnail    →  150 x 150px (hard cropped)

These sizes are configured under Settings → Media:

Thumbnail size:
  Width:  150    Height: 150
  [ ✓ ] Crop thumbnail to exact dimensions

Medium size:
  Max Width:  300    Max Height: 300

Large size:
  Max Width:  1024   Max Height: 1024

Your theme can also register custom image sizes — we will do this when building the StreamVault theme.

---

Media Library — File Details

Click any image in the grid to open its details panel:

+----------------------------------+
|  [image preview]                 |
|----------------------------------|
|  File name:   inception.jpg      |
|  File type:   image/jpeg         |
|  Uploaded on: January 5, 2024    |
|  File size:   245 KB             |
|  Dimensions:  1200 × 1800 px     |
|                                  |
|  Alt Text:    Inception movie... |
|  Title:       inception          |
|  Caption:     ...                |
|  Description: ...                |
|                                  |
|  File URL:                       |
|  https://streamvault.local/      |
|  wp-content/uploads/2024/01/     |
|  inception.jpg                   |
|                                  |
|  [ Edit Image ]  [ Delete ]      |
+----------------------------------+

Alt Text is the most important field here — it is used for accessibility and SEO. Always fill this in.

---

Editing Images in WordPress

Click "Edit Image" to open the built-in image editor:

Actions available:
- Crop
- Rotate left / right
- Flip horizontal / vertical
- Scale image (resize)

This is basic editing — for serious image editing you use external tools. But it is useful for quick crops.

---

Hands On — Upload Media for StreamVault

Upload these types of files to the Media Library:

1. A movie poster image (any movie image)
   - Set Alt Text: "Movie poster for [movie name]"

2. A banner/hero image for the homepage
   - Set Alt Text: "StreamVault homepage banner"

3. A logo image for StreamVault
   - Set Alt Text: "StreamVault logo"

---

Accessing Media Files in Code

Later when building your theme, you will need these functions:

// Get the full URL of an uploaded image
wp_get_attachment_url($attachment_id);

// Get image HTML with srcset
wp_get_attachment_image($attachment_id, 'medium');

// Get featured image URL of current post
get_the_post_thumbnail_url(get_the_ID(), 'large');

// Display featured image HTML
the_post_thumbnail('medium');

We will use all of these in Phase 2 when building the theme.

---

Part 2 — Menus

What Are WordPress Menus?

WordPress has a built-in navigation menu system. You create menus in the admin, assign them to locations registered by your theme, and WordPress renders them as HTML <nav> elements.

The system has two parts:

• Menu locations — registered by the theme (header, footer, mobile, etc.)
• Menus — created by you in the admin and assigned to locations

---

Creating a Menu

Go to Appearance → Menus

+------------------------------------------+
|  Edit Menus    Manage Locations           |
|------------------------------------------|
|  Menu Name: [ Primary Menu        ]      |
|             [ Create Menu ]              |
+------------------------------------------+

Type "Primary Menu" and click Create Menu.

If you are not seeing Menus and Widgets under Appearance is because your current active theme is a Block Theme (FSE — Full Site Editing theme).

---

Why This Happens

WordPress now ships with modern Block Themes (like Twenty Twenty-Three, Twenty Twenty-Four) by default. These themes use the Full Site Editor instead of the classic Menus and Widgets system.

In Block Themes:

• Menus → replaced by Navigation block inside Site Editor
• Widgets → replaced by blocks inside Site Editor
• You see "Editor" under Appearance instead of Menus/Widgets

In Classic Themes:

• You get Menus and Widgets options under Appearance
• This is what we will use for custom theme development

---

The Fix — Two Options

Option 1 — Install a Classic Theme (Recommended for this course)

Go to Appearance → Themes → Add New

Search for "Astra" or "GeneratePress" — these are popular classic themes.

Install and Activate Astra.

Now go back to Appearance — you will see:

Appearance
├── Themes
├── Customize
├── Widgets      ← now visible
├── Menus        ← now visible
└── Theme Editor

Option 2 — Use the Site Editor (Block Theme way)

Click Appearance → Editor to manage navigation and layout using the Full Site Editor.

---

What We Will Do Going Forward

For this course we will build a Classic Theme from scratch — so install Astra temporarily just to explore Menus and Widgets right now.

When we reach Phase 2, we will deactivate Astra and build our own streamvault classic theme completely from scratch.

---

First — Verify Astra is Active

Go to Appearance → Themes

You should see Astra with a blue border and "Active" label. If yes, good. Now go to Appearance in the left sidebar and you should see:

Appearance
├── Themes
├── Customize
├── Widgets
├── Menus        ← this should now be visible
└── Theme Editor

If you see Menus — perfect. Let us begin.

---

Understanding the Menu System — The Big Picture

Before clicking anything, understand this concept clearly:

STEP 1 — Theme registers "locations"
         (slots where menus can appear — header, footer, sidebar)
                        ↓
STEP 2 — You create a "menu" in admin
         (a list of links you build yourself)
                        ↓
STEP 3 — You assign your menu to a location
         (connect your menu to the slot)
                        ↓
STEP 4 — Menu appears on the website

Without Step 1, Step 3 is impossible. Without Step 3, your menu will never show on the site even if you build it perfectly.

Think of it like this:

Location  =  An empty picture frame on a wall
Menu      =  A painting you created
Assign    =  Putting the painting inside the frame

The frame (location) is put there by the theme. You create the painting (menu). Then you hang it (assign).

---

Where Are Menu Locations Defined?

Astra theme has already registered several locations for you. You do not need to worry about the code right now — but just so you know, this is what happens behind the scenes in functions.php:

register_nav_menus([
    'primary'    => 'Primary Menu',
    'footer_menu' => 'Footer Menu',
]);

This tells WordPress — "I have two slots available. One in the header called Primary Menu, one in the footer called Footer Menu."

When we build our own theme in Phase 2, we will write this code ourselves. For now Astra handles it.

---

Part 1 — Creating Your First Menu

Go to Appearance → Menus

You will land on this screen:

+----------------------------------------------------------+
|  Edit Menus          Manage Locations                    |
|----------------------------------------------------------|
|                                                          |
|  It seems you don't have any menus yet.                  |
|  Why not create one?                                     |
|                                                          |
|  Menu Name:  [                    ]  [ Create Menu ]     |
|                                                          |
+----------------------------------------------------------+

Step 1 — Name Your Menu

In the Menu Name field type:

Primary Menu

Click Create Menu.

The page will refresh and now you see the full menu editor:

+-------------------------+  +--------------------------------+
|  Add menu items         |  |  Menu Structure                |
|-------------------------|  |--------------------------------|
|  Pages          [ ▼ ]   |  |  Menu Name: Primary Menu       |
|  Posts          [ ▼ ]   |  |                                |
|  Custom Links   [ ▼ ]   |  |  [drag items here]             |
|  Categories     [ ▼ ]   |  |                                |
|                         |  |  Menu Settings                 |
|                         |  |  [ ] Auto add pages            |
|                         |  |                                |
|                         |  |  Display location:             |
|                         |  |  [✓] Primary Menu              |
|                         |  |  [ ] Footer Menu               |
|                         |  |                                |
|                         |  |  [ Save Menu ]                 |
+-------------------------+  +--------------------------------+

---

Part 2 — Adding Items to the Menu

On the left side you see different sources you can pull items from. Let us go through each.

---

Source 1 — Pages

Click the Pages box to expand it:

Pages                              [ ▼ ]
-------------------------------------------
Most Recent    |    View All    |    Search
-------------------------------------------
[ ] Home
[ ] Movies
[ ] Series
[ ] About
[ ] Contact

                        [ Add to Menu ]

You see two tabs — Most Recent shows your latest pages. View All shows every page. Search lets you find a specific one.

Check these boxes:

[✓] Home
[✓] Movies
[✓] Series
[✓] About
[✓] Contact

Click Add to Menu.

These pages now appear in the Menu Structure panel on the right:

Menu Structure
-----------------
Home          [Page ▼]
Movies        [Page ▼]
Series        [Page ▼]
About         [Page ▼]
Contact       [Page ▼]

---

Source 2 — Posts

Click the Posts box to expand it:

Posts                              [ ▼ ]
-------------------------------------------
Most Recent    |    View All    |    Search
-------------------------------------------
[ ] Top 10 Action Movies of 2024
[ ] New Releases This Month
[ ] Best Thriller Series

                        [ Add to Menu ]

You can add individual blog posts as menu items. For StreamVault we will not add posts to the primary menu — but this is useful if you have a featured article you want highlighted.

---

Source 3 — Custom Links

Click Custom Links to expand:

Custom Links                       [ ▼ ]
-------------------------------------------
URL:        [ https://             ]
Link Text:  [                      ]

                        [ Add to Menu ]

This lets you add any URL — internal or external. Useful for:

Linking to an external social media page:
  URL:       https://twitter.com/streamvault
  Link Text: Follow Us on Twitter

Linking to a section on the same page:
  URL:       #featured-movies
  Link Text: Featured Movies

Linking to a filtered URL:
  URL:       /movies/?genre=action
  Link Text: Action Movies

---

Source 4 — Categories

Click Categories to expand:

Categories                         [ ▼ ]
-------------------------------------------
Most Recent    |    View All    |    Search
-------------------------------------------
[ ] Entertainment
[ ] Movie Reviews
[ ] Series Reviews
[ ] News
[ ] Recommendations

                        [ Add to Menu ]

Adding a category links directly to that category's archive page — all posts in that category listed together.

---

Part 3 — Organizing the Menu Structure

After adding your pages, look at the Menu Structure panel:

Menu Structure
-----------------
Home          [Page ▼]
Movies        [Page ▼]
Series        [Page ▼]
About         [Page ▼]
Contact       [Page ▼]

Reordering Items

Simply drag and drop items to reorder them. Grab any item and drag it up or down.

Before:                    After:
Home                       Home
Movies                     Movies
Series          →          Series
About                      About Us
Contact                    Contact

---

Creating Dropdown Submenus

This is where it gets interesting. You can create a dropdown menu by indenting items.

To indent an item — drag it slightly to the right under another item:

Home
Movies
  └── Action          ← indented under Movies = dropdown item
  └── Drama           ← indented under Movies = dropdown item
  └── Comedy          ← indented under Movies = dropdown item
Series
About
Contact

To do this:

1. First add categories (Action, Drama, Comedy) to the menu from the Categories panel
2. Then drag them slightly to the right under "Movies"
3. They become dropdown items under Movies

Now on the frontend, hovering over "Movies" reveals a dropdown with Action, Drama, Comedy.

You can go even deeper — three levels:

Movies
  └── By Genre
        └── Action      ← sub-sub-menu
        └── Drama       ← sub-sub-menu

However — most themes only support 2 levels of dropdowns. Going deeper often breaks styling.

---

Part 4 — Menu Item Settings

Click the arrow on any menu item to expand its individual settings:

▼ Home                                          Page ▼
------------------------------------------------
Navigation Label:     Home
Title Attribute:      
Open link in a new tab: [ ]
CSS Classes (optional):  
Link Relationship (XFN):  
Description:          

[ Remove ]  [ Cancel ]

Let us go through each field:

Navigation Label

This is the text that appears in the menu. It does not have to match the page title.

Page title:        "About StreamVault Platform"
Navigation Label:  "About"          ← shorter, cleaner

Title Attribute

This is the HTML title attribute — appears as a tooltip when you hover over the link. Mostly used for accessibility.

Title Attribute: "Learn more about StreamVault"

Open Link in a New Tab

When checked, clicking this menu item opens the link in a new browser tab (target="_blank").

Use this for:
- External links (social media, partner sites)
- PDF downloads
- Links that take users away from your site

Do NOT use this for internal navigation — it is bad UX to open your own pages in new tabs.

CSS Classes

Add custom CSS class names to this specific menu item. Useful for styling one item differently.

CSS Classes: nav-cta-button

Then in your CSS:

.nav-cta-button a {
    background: #e50914;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
}

This makes one menu item look like a button — like a "Sign Up" or "Watch Now" CTA.

Description

Some themes display a short description under the menu item label. Most themes do not show this by default.

---

Part 5 — Menu Settings

At the bottom of the Menu Structure panel:

Menu Settings
--------------
Auto add pages:
[ ] Automatically add new top-level pages to this menu

Display location:
[✓] Primary Menu (Header)
[ ] Footer Menu

Auto Add Pages

When checked — every new Page you create is automatically added to this menu.

Should you enable this?   →   NO

You want full control over what appears in your menu. Auto-adding pages means every page you create (Privacy Policy, Thank You page, temporary pages) appears in your navigation automatically. Always leave this unchecked.

Display Location

This is where you assign your menu to a location. Check the location where you want this menu to appear.

[✓] Primary Menu  →  This menu appears in the header
[ ] Footer Menu   →  This menu does not appear in footer

---

Part 6 — Saving the Menu

Click Save Menu (blue button, bottom right of Menu Structure panel).

You will see a confirmation:

✓ Menu saved.

Now visit your site frontend — https://streamvault.local — and you should see your navigation menu in the header with Home, Movies, Series, About, Contact.

---

Part 7 — Creating a Footer Menu

Now let us create a second menu for the footer.

Go to Appearance → Menus again.

At the top, click the link that says "create a new menu":

Edit your menu below, or create a new menu.

Or look for a dropdown that says:

Select a menu to edit:  [ Primary Menu ▼ ]  [ Select ]
                        or create a new menu.

Click "create a new menu".

Menu Name:  [ Footer Menu ]   [ Create Menu ]

Type Footer Menu and click Create Menu.

Now add items — for a footer menu we typically add legal and secondary pages:

From Pages, add:
[✓] About
[✓] Contact
[✓] Privacy Policy
[✓] Terms of Use

Click Add to Menu.

In Menu Settings at the bottom:

Display location:
[ ] Primary Menu
[✓] Footer Menu     ← check this one

Click Save Menu.

---

Part 8 — Manage Locations Tab

Click the "Manage Locations" tab at the top:

Manage Locations
-----------------
Theme Location          Assigned Menu
-------------------------------------------
Primary Menu            Primary Menu    [ ▼ ]
Footer Menu             Footer Menu     [ ▼ ]
Mobile Menu             -- Select --    [ ▼ ]

This screen gives you a bird's eye view of all available locations and which menu is assigned to each. You can change assignments from this screen too without going into each individual menu.

If a location shows "-- Select --" it means nothing is assigned there — that area of your site has no menu.

Click Save Changes after making any changes here.

---

Part 9 — Why Menu is Not Showing on Frontend

This is the most common issue. Here is a complete checklist:

Problem 1: Menu not created
Fix: Go to Appearance → Menus → Create a menu

Problem 2: Menu created but no items added
Fix: Add pages/posts/links to the menu and save

Problem 3: Menu not assigned to any location
Fix: In Menu Settings check a Display Location and save

Problem 4: Theme has no registered locations
Fix: Use a theme that registers locations (Astra does this)
     OR register locations yourself in functions.php

Problem 5: Theme location exists but menu not assigned
Fix: Go to Manage Locations tab → assign your menu

Problem 6: Menu assigned but theme does not call wp_nav_menu()
Fix: Theme template file must call wp_nav_menu() — we handle
     this when building our own theme in Phase 2

---

Part 10 — Sidebar Menu

Astra also supports a sidebar/widget area. To add a menu in the sidebar:

Go to Appearance → Widgets

Find the sidebar widget area. Click + to add a block.

Search for "Navigation Menu" widget:

Navigation Menu Widget
-----------------------
Title:      Browse Genres
Menu:       [ Genre Menu ▼ ]

First create a "Genre Menu" from Appearance → Menus:

Genre Menu items (add from Categories):
- Action
- Drama
- Comedy
- Thriller
- Horror
- Sci-Fi
- Romance

Assign this menu to the Navigation Menu widget in the sidebar. Now your sidebar shows a list of genre links.

---

Part 11 — Menus via the Customizer

You can also manage menus through the live preview Customizer:

Go to Appearance → Customize → Menus

Customize → Menus
-----------------
▼ Primary Menu
  Items: Home, Movies, Series, About, Contact
  Location: Primary Menu

▼ Footer Menu
  Items: About, Contact, Privacy Policy
  Location: Footer Menu

[ + Add a Menu ]

The advantage here is you see live preview of how the menu looks as you make changes.

---

Part 12 — Screen Options (Show Hidden Fields)

By default WordPress hides some menu item fields. To reveal them:

Click "Screen Options" tab at the very top right of the page:

Screen Options                              ▲
--------------------------------------------
Show advanced menu properties:
[✓] Link Target       ← "Open in new tab" checkbox
[✓] Title Attribute   ← tooltip text
[✓] CSS Classes       ← custom class names
[✓] Link Relationship ← XFN relationship
[✓] Description       ← item description

Check all of these. Now when you expand any menu item you will see all available fields.

---

Part 3 — Widgets

What Are Widgets?

Widgets are small, self-contained blocks of content or functionality that you place in widget areas registered by your theme.

Common widget areas:

• Main Sidebar
• Footer Column 1, 2, 3
• Before Footer Banner

Common widgets:

• Search box
• Recent Posts
• Categories list
• Tag Cloud
• Custom HTML
• Archives
• Calendar

---

Accessing Widgets

Go to Appearance → Widgets

+------------------------+   +---------------------------+
|  Available Widgets     |   |  Main Sidebar             |
|------------------------|   |---------------------------|
|  Archives              |   |  Search                   |
|  Audio                 |   |  [Search widget expanded] |
|  Calendar              |   |                           |
|  Categories            |   |  Recent Posts             |
|  Custom HTML           |   |  [Recent Posts expanded]  |
|  Gallery               |   |                           |
|  Image                 |   |  Categories               |
|  Latest Comments       |   |  [Categories expanded]    |
|  Latest Posts          |   |                           |
|  Navigation Menu       |   +---------------------------+
|  Pages                 |
|  RSS                   |   +---------------------------+
|  Search                |   |  Footer Area              |
|  Tag Cloud             |   |---------------------------|
|  Text                  |   |  + Add block              |
|  Video                 |   +---------------------------+
+------------------------+

---

Adding a Widget

Click the + button inside a widget area to add a widget. Search for the widget type you want.

Or in the older classic widgets interface — drag a widget from the left panel into a widget area on the right.

---

Widget Settings

Each widget has its own settings. For example the Recent Posts widget:

Recent Posts
--------------
Title:              Latest Posts
Number of posts:    5
Display post date:  [✓]

The Categories widget:

Categories
--------------
Title:         Browse by Category
Display as:    [✓] dropdown  [ ] list
Show count:    [✓]
Show hierarchy:[✓]

The Custom HTML widget:

Custom HTML
--------------
Title:   Follow Us

Content:
<div class="social-links">
  <a href="#">Facebook</a>
  <a href="#">Twitter</a>
  <a href="#">Instagram</a>
</div>

---

Widgets vs Menus vs Blocks

This confuses beginners so let us clarify:

	Menus	Widgets	Blocks
Purpose	Navigation links	Sidebar/footer content	Post/page content
Location	Header, footer nav	Sidebars, footer areas	Inside post editor
Created in	Appearance → Menus	Appearance → Widgets	Block Editor

---

Legacy Widgets vs Block Widgets

WordPress now uses the Block Editor for widgets too (since WordPress 5.8). So widgets are now added as blocks inside widget areas.

If you prefer the old drag-and-drop widget interface, install the Classic Widgets plugin.

For this course we will work with block-based widgets since that is the current standard.

---

Hands On — Set Up Widgets for StreamVault

Add these widgets to the Main Sidebar widget area:

Widget 1: Search
  Title: Search Movies

Widget 2: Categories
  Title: Browse by Category
  Show count: Yes
  Show hierarchy: Yes

Widget 3: Latest Posts
  Title: Latest News
  Number of posts: 5
  Show date: Yes

Widget 4: Custom HTML
  Title: About StreamVault
  Content:
  <p>StreamVault is your ultimate destination
  for movies and web series online.</p>

---

Registering Widget Areas in Your Theme

Later in Phase 2, you will register widget areas in functions.php:

function streamvault_widgets_init() {
    register_sidebar([
        'name'          => 'Main Sidebar',
        'id'            => 'sidebar-main',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ]);

    register_sidebar([
        'name'          => 'Footer Column 1',
        'id'            => 'footer-1',
        'before_widget' => '<div class="footer-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="footer-widget-title">',
        'after_title'   => '</h4>',
    ]);

    register_sidebar([
        'name'          => 'Footer Column 2',
        'id'            => 'footer-2',
        'before_widget' => '<div class="footer-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="footer-widget-title">',
        'after_title'   => '</h4>',
    ]);
}
add_action('widgets_init', 'streamvault_widgets_init');

And display them in your template files:

if (is_active_sidebar('sidebar-main')) {
    dynamic_sidebar('sidebar-main');
}

We will implement this properly in Phase 2.

---

Summary

Media Library:

• Every uploaded file is stored in wp-content/uploads/YEAR/MONTH/
• WordPress auto-generates multiple image sizes on upload
• Always fill in Alt Text for every image
• Media files are tracked in wp_posts with post_type = 'attachment'

Menus:

• Menus are created in admin and assigned to theme-registered locations
• Items can be pages, posts, categories, tags, or custom links
• Indent items to create dropdown submenus
• A theme must register menu locations in functions.php using register_nav_menus()
• Menu system has 3 parts — Locations (set by theme), Menus (you create), Assignment (you connect them).
• A menu will never show on the site unless it is assigned to a location.
• Items can come from Pages, Posts, Categories, Tags, or Custom Links.
• Indent items to create dropdown submenus.
• Each menu item has — Navigation Label, Title Attribute, Open in New Tab, CSS Classes, Description.
• Auto add pages — always keep this unchecked.
• Manage Locations tab — assign menus to locations in one place.
• Sidebar menus are added via Appearance → Widgets → Navigation Menu widget.
• Screen Options (top right) reveals hidden fields like CSS Classes and Link Target.
• If menu is not showing — check: created ✓, items added ✓, assigned to location ✓, theme supports location ✓.

Widgets:

• Widgets are placed inside widget areas registered by your theme
• Common widgets — Search, Recent Posts, Categories, Custom HTML
• Widget areas are registered in functions.php using register_sidebar()
• WordPress now uses block-based widgets since version 5.8

Phase 1 — Module 1.7: Posts, Pages, Categories & Tags

Overview

In this module we go hands-on. We will create actual content in StreamVault — posts, pages, categories, and tags. This is not just clicking around — understanding how WordPress structures content is critical because everything in theme development and plugin development is built around this content model.

---

Posts — The Content Backbone

What Exactly is a Post?

In WordPress, a "post" is the base content object. Everything stored in the wp_posts table is technically a "post" — blog posts, pages, navigation menus, custom post types, even revisions. They all share the same database table with a post_type column differentiating them.

wp_posts table
├── post_type = 'post'       → Blog posts
├── post_type = 'page'       → Pages
├── post_type = 'movie'      → Custom post type (we create later)
├── post_type = 'nav_menu_item' → Menu items
├── post_type = 'revision'   → Auto-saved revisions
└── post_type = 'attachment' → Media library items

This is why understanding posts is foundational — when you later work with movies, series, episodes — they are all posts under the hood with a custom post_type.

---

Creating Your First Post

Go to Posts → Add New

You will see the Block Editor. Let us create a sample blog post for StreamVault:

Title:   Top 10 Movies to Watch This Weekend

Content blocks:
[Paragraph] StreamVault brings you the best selection...
[Heading]   Action Movies
[Paragraph] Here are our top picks for action lovers...
[Heading]   Drama Movies
[Paragraph] If you prefer something more emotional...

---

Post Settings — Right Sidebar

On the right sidebar under the Post tab:

Status & Visibility

Visibility:    Public / Private / Password Protected
Publish:       Immediately / Schedule for later
Stick to top:  [ ] Stick this post to the front page
Pending review:[ ] Flag this post for review

Visibility options:

• Public — everyone can see it
• Private — only admins and editors can see it
• Password Protected — visitors need a password

Stick to front page — pins this post to always appear first in your blog feed regardless of date.

Permalink

URL Slug:  top-10-movies-to-watch-this-weekend
View Post: https://streamvault.local/top-10-movies-to-watch-this-weekend/

The slug is auto-generated from the title. You can edit it manually. Keep slugs:

• All lowercase
• Hyphens instead of spaces
• Short and descriptive
• No special characters

Categories

[ ] Uncategorized   ← default
[ ] Movie Reviews
[ ] News
[ ] Recommendations

+ Add New Category

Every post must have at least one category. If you do not assign one, WordPress uses "Uncategorized" automatically.

Tags

[ Tag input field ]

Add: action, weekend, recommendations

Suggested tags: movies, streaming, watch

Tags are flat (no hierarchy) and optional. Use them for specific keywords.

Featured Image

[ Set featured image ]

Click this, upload an image or select from media library. This becomes the post thumbnail — shown in blog listings, social sharing previews, and wherever the_post_thumbnail() is called in your theme.

Excerpt

[ Write an excerpt (optional) ]

A short manual summary of the post. If you leave it empty, WordPress auto-generates one from the first 55 words of your content. Used in blog listings with the_excerpt().

---

Post Statuses

A post can have these statuses:

Status	Meaning
Draft	Saved but not visible to public
Pending	Written by author, waiting for editor approval
Published	Live and visible to public
Scheduled	Will publish automatically at a future date/time
Private	Published but visible to admins/editors only
Trash	Deleted, kept for 30 days before permanent deletion

---

Hands On — Create These Posts

Create the following posts for StreamVault:

Post 1:
  Title:    Top 10 Action Movies of 2024
  Category: Movie Reviews
  Tags:     action, 2024, top-10
  Status:   Published

Post 2:
  Title:    New Releases This Month on StreamVault
  Category: News
  Tags:     new-releases, streaming
  Status:   Published

Post 3:
  Title:    Best Thriller Series to Binge Watch
  Category: Recommendations
  Tags:     thriller, series, binge-watch
  Status:   Draft

---

Categories — Hierarchical Organization

What Are Categories?

Categories are the primary way to organize posts. They are hierarchical — meaning you can have parent categories and child categories.

Entertainment          ← Parent category
├── Movie Reviews      ← Child category
├── Series Reviews     ← Child category
└── News               ← Child category
    ├── Platform News  ← Grandchild category
    └── Industry News  ← Grandchild category

Every post must have at least one category. A post can have multiple categories.

---

Managing Categories

Go to Posts → Categories

+--------------------------------------------------+
|  Add New Category                                |
|--------------------------------------------------|
|  Name:         Movie Reviews                     |
|  Slug:         movie-reviews                     |
|  Parent:       Entertainment  ▼                  |
|  Description:  Reviews of latest movies          |
|                                                  |
|  [ Add New Category ]                            |
+--------------------------------------------------+

Existing Categories:
Name                Slug              Posts
Uncategorized       uncategorized     0
Entertainment       entertainment     0
Movie Reviews       movie-reviews     2
News                news              1
Recommendations     recommendations   1

Fields explained:

Field	Purpose
Name	Display name shown on frontend
Slug	URL-friendly version — /category/movie-reviews/
Parent	Makes this a child of another category
Description	Optional, some themes display this on archive pages

---

Hands On — Create These Categories

Category 1:
  Name:   Entertainment
  Slug:   entertainment
  Parent: None

Category 2:
  Name:   Movie Reviews
  Slug:   movie-reviews
  Parent: Entertainment

Category 3:
  Name:   Series Reviews
  Slug:   series-reviews
  Parent: Entertainment

Category 4:
  Name:   News
  Slug:   news
  Parent: None

Category 5:
  Name:   Recommendations
  Slug:   recommendations
  Parent: None

---

Category Archive URLs

Once categories exist, WordPress automatically creates archive pages for them:

https://streamvault.local/category/entertainment/
https://streamvault.local/category/movie-reviews/
https://streamvault.local/category/news/

These pages list all posts belonging to that category. The template that renders these pages is archive.php (or category.php — we cover this in Theme Development).

---

Tags — Flat Keywords

What Are Tags?

Tags are flat keywords — no hierarchy, no required assignment. They describe specific details about a post that categories do not cover.

A post about "Inception" might have:
  Category: Movie Reviews
  Tags:     christopher-nolan, sci-fi, mind-bending, 2010, leonardo-dicaprio

Think of categories as broad topics and tags as specific descriptors.

---

Categories vs Tags — The Key Difference

	Categories	Tags
Hierarchy	Yes (parent/child)	No (all flat)
Required	Yes (at least one)	No (optional)
Purpose	Broad topics	Specific keywords
Example	"Movie Reviews"	"christopher-nolan"
URL	/category/movie-reviews/	/tag/christopher-nolan/

---

Managing Tags

Go to Posts → Tags

+------------------------------------------+
|  Add New Tag                             |
|------------------------------------------|
|  Name:         christopher-nolan         |
|  Slug:         christopher-nolan         |
|  Description:  Films directed by...      |
|                                          |
|  [ Add New Tag ]                         |
+------------------------------------------+

Tags can also be created inline while writing a post — just type in the tag field and press Enter.

---

Tag Archive URLs

Just like categories, tags get automatic archive pages:

https://streamvault.local/tag/christopher-nolan/
https://streamvault.local/tag/sci-fi/
https://streamvault.local/tag/2024/

---

Pages — Static Content

What Are Pages?

Pages are for static, timeless content that does not belong in the blog feed.

StreamVault pages we will need:
├── Home           ← Homepage (static)
├── Movies         ← Browse all movies
├── Series         ← Browse all series
├── About          ← About StreamVault
├── Contact        ← Contact form
├── Privacy Policy ← Legal page
└── Terms of Use   ← Legal page

---

Creating a Page

Go to Pages → Add New

The editor looks identical to the post editor. The difference is in the right sidebar — Pages do not have Categories or Tags. Instead they have:

Page Attributes
├── Parent Page:  [ No parent ▼ ]   ← For hierarchy
└── Order:        [ 0 ]             ← Manual sort order

---

Page Hierarchy

Pages can be nested — a child page's URL includes the parent:

Parent:  /about/
Child:   /about/team/
Child:   /about/careers/

---

Hands On — Create These Pages

Page 1:
  Title:  Home
  Slug:   home
  Leave content empty for now

Page 2:
  Title:  Movies
  Slug:   movies
  Content: Browse our complete movie collection.

Page 3:
  Title:  Series
  Slug:   series
  Content: Explore all web series available on StreamVault.

Page 4:
  Title:  About
  Slug:   about
  Content: StreamVault is your ultimate streaming destination.

Page 5:
  Title:  Contact
  Slug:   contact
  Content: Get in touch with us.

---

Set a Static Homepage

Now that we have a Home page:

Go to Settings → Reading

Your homepage displays:
  ○ Your latest posts
  ● A static page

Homepage:   [ Home    ▼ ]
Posts page: [ -- ▼ ]

Select "A static page" and choose "Home" as the homepage. Save changes.

Now https://streamvault.local/ shows your Home page instead of the blog feed.

---

The Difference in Database

Understanding how posts and pages differ in the database helps you later when writing WP_Query:

-- Blog posts
SELECT * FROM sv_posts WHERE post_type = 'post' AND post_status = 'publish';

-- Pages
SELECT * FROM sv_posts WHERE post_type = 'page' AND post_status = 'publish';

-- All content
SELECT ID, post_title, post_type, post_status FROM sv_posts;

Both live in the same wp_posts table — the post_type column is the only difference.

---

Quick Edit

In the Posts or Pages list screen, hovering over any item reveals a Quick Edit option. This lets you change title, slug, date, categories, tags, and status without opening the full editor.

Title     │ Quick Edit │ Trash │ View

Very useful for bulk changes.

---

Bulk Actions

On the Posts list screen, you can select multiple posts and apply bulk actions:

Bulk Actions ▼  [ Apply ]

Options:
- Edit
- Move to Trash

Bulk Edit lets you change category, tags, author, status, and comment settings for multiple posts at once.

---

Summary

• Posts are time-based content — they have categories, tags, dates, and appear in the blog feed.
• Pages are static content — hierarchical, no categories/tags, do not appear in blog feed.
• Both posts and pages live in the wp_posts table — differentiated by the post_type column.
• Categories are hierarchical and required on posts. Tags are flat and optional.
• Set Settings → Reading → Static Page to show a custom homepage instead of the blog feed.
• Post statuses — Draft, Pending, Published, Scheduled, Private, Trash.
• Featured image, excerpt, and permalink are set per post in the right sidebar.