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_poststable withpost_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:
- First add categories (Action, Drama, Comedy) to the menu from the Categories panel
- Then drag them slightly to the right under "Movies"
- 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_postswithpost_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.phpusingregister_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.phpusingregister_sidebar() - WordPress now uses block-based widgets since version 5.8
No comments:
Post a Comment