Part 1 — Themes
What is a Theme?
A theme controls the visual appearance of your WordPress site. It determines:
- Layout of every page
- Typography, colors, spacing
- How posts, pages, archives look
- Header and footer structure
- Navigation placement
A theme should only control appearance — it should never add permanent functionality. If a theme adds functionality (contact forms, custom post types, sliders) and you switch themes, that functionality disappears. That is bad practice.
Theme → controls HOW things look
Plugin → controls WHAT things do
Types of Themes
1. Classic Themes
- Use PHP template files
- Have functions.php, header.php, footer.php etc.
- Support Menus and Widgets the traditional way
- What we will build in Phase 2
2. Block Themes (FSE — Full Site Editing)
- Use HTML template files with block markup
- Edited via Site Editor (Appearance → Editor)
- No classic Menus/Widgets panel
- Twenty Twenty-Three, Twenty Twenty-Four are block themes
- More modern but complex for beginners
3. Child Themes
- Built on top of a parent theme
- Inherits all parent styles and functionality
- You only override what you want to change
- Safe from parent theme updates
For this course we build a Classic Theme from scratch.
Installing a Theme — 3 Methods
Method 1 — From WordPress.org Repository (Free Themes)
Go to Appearance → Themes → Add New
+--------------------------------------------------+
| Add Themes |
|--------------------------------------------------|
| Search themes... [ ] [🔍] |
| |
| Featured Popular Latest Favorites Filter |
|--------------------------------------------------|
| [Astra] [OceanWP] [GeneratePress] [Neve] |
+--------------------------------------------------+
Search for a theme → hover over it → click Install → click Activate.
Method 2 — Upload ZIP File (Premium Themes)
When you buy a premium theme from ThemeForest, Elegant Themes, etc. — you get a ZIP file.
Go to Appearance → Themes → Add New → Upload Theme
+------------------------------------------+
| Upload Theme |
|------------------------------------------|
| If you have a theme in a .zip format, |
| you may install it by uploading it here.|
| |
| [ Choose File ] no file selected |
| |
| [ Install Now ] |
+------------------------------------------+
Choose the ZIP file → Install Now → Activate.
Method 3 — Manual Upload via FTP/File Manager
For developers — copy the theme folder directly into:
wp-content/themes/your-theme-name/
Then go to Appearance → Themes and activate it from there.
This is how we will activate our custom StreamVault theme in Phase 2.
Theme Best Practices
✓ Always use a child theme if modifying an existing theme
✓ Never edit theme files directly from Appearance → Theme Editor
✓ Test themes on staging before applying to production
✓ Check theme last updated date — outdated themes are security risks
✓ Check ratings and active installations before installing
✓ A theme should never add permanent functionality
✗ Never install themes from unknown sources (pirated themes contain malware)
✗ Never have more than 2-3 themes installed (inactive themes are security risks)
Deleting Unused Themes
Go to Appearance → Themes → click on an inactive theme → click Delete (bottom right corner of the popup).
Always delete themes you are not using. Even inactive themes can have vulnerabilities that get exploited.
Keep:
✓ Your active theme
✓ One default WordPress theme (as fallback)
Delete:
✗ Every other inactive theme
Part 2 — Plugins
What is a Plugin?
A plugin adds or extends functionality to WordPress without modifying core files. Plugins use the hooks system (Actions & Filters) to plug into WordPress at specific points.
Examples:
- Contact Form 7 → adds contact forms
- WooCommerce → adds e-commerce
- Yoast SEO → adds SEO tools
- WP Super Cache → adds caching
- Akismet → adds spam protection
A plugin can be:
Single file: wp-content/plugins/hello.php
Folder based: wp-content/plugins/woocommerce/woocommerce.php
Installing a Plugin — 3 Methods
Method 1 — From WordPress.org Repository
Go to Plugins → Add New
+--------------------------------------------------+
| Add Plugins |
|--------------------------------------------------|
| Search plugins... [ ] [🔍] |
| |
| Featured Popular Recommended Favorites |
|--------------------------------------------------|
| [Contact Form 7] [Yoast SEO] [WooCommerce] |
+--------------------------------------------------+
Search → Install Now → Activate.
Method 2 — Upload ZIP File
Go to Plugins → Add New → Upload Plugin
Same as theme upload — choose ZIP → Install → Activate.
Method 3 — Manual via FTP
Copy plugin folder to:
wp-content/plugins/your-plugin-name/
Then go to Plugins → Installed Plugins and activate it.
Plugin States — Active vs Inactive
Installed + Active → Running, affecting your site
Installed + Inactive → Not running, but files still on server
Not installed → Does not exist
An inactive plugin does nothing — its code does not run at all. But its files still sit on your server taking up space and potentially having security vulnerabilities.
Plugins Screen — Reading It Correctly
Go to Plugins → Installed Plugins
+----------------------------------------------------------------+
| All(3) Active(1) Inactive(2) Update Available(1) |
|----------------------------------------------------------------|
| [ ] Plugin Name Description |
|----------------------------------------------------------------|
| [✓] Akismet Anti-Spam Akismet checks your comments... |
| Activate | Edit | Delete |
| |
| [ ] Hello Dolly This is not just a plugin... |
| Deactivate | Edit | Delete |
| |
| [ ] WP Super Cache Very fast caching plugin... |
| Deactivate | Edit | Delete Update Available ⚠️ |
+----------------------------------------------------------------+
Each plugin row shows:
- Plugin name and description
- Author and version
- Action links — Activate/Deactivate, Edit, Delete
- Update notice if a new version is available
Activating & Deactivating
Activate — click "Activate" under the plugin name. The plugin starts running immediately.
Deactivate — click "Deactivate". Plugin stops running but files remain. Use this when:
- Troubleshooting a site issue (deactivate one by one to find the problem)
- Temporarily disabling a feature
- Before deleting a plugin
Delete — first deactivate, then delete. This removes all plugin files. Some plugins also remove their database tables on deletion if they have an uninstall hook.
Auto Updates for Plugins
In the Plugins list, you can enable auto-updates per plugin:
Akismet Anti-Spam | Enable auto-updates
Hello Dolly | Enable auto-updates
Click "Enable auto-updates" for security plugins like Akismet. Be careful with auto-updates for complex plugins like WooCommerce — updates can sometimes break things and should be tested first.
Must-Have Plugins for Development
Install these right now for StreamVault development:
1. Query Monitor
Go to Plugins → Add New → search "Query Monitor" → Install → Activate.
What it does:
- Shows all database queries on every page load
- Shows which hooks fired and in what order
- Shows PHP errors and warnings
- Shows template file being used
- Shows HTTP API calls
- Shows memory usage and page load time
After activating — visit your site frontend. You will see a black admin bar at the top with Query Monitor data. Click on it to expand.
This is your most important debugging tool throughout this course.
2. Classic Editor (Optional)
Go to Plugins → Add New → search "Classic Editor" → Install → Activate.
What it does:
- Replaces the Block Editor (Gutenberg) with the old TinyMCE editor
- Simpler interface for content writing
- Better compatibility with older plugins
This is optional — use it if you find the Block Editor confusing. We will learn the Block Editor properly in Phase 9.
3. Advanced Custom Fields (ACF)
Go to Plugins → Add New → search "Advanced Custom Fields" → Install → Activate.
What it does:
- Adds a UI for creating custom fields (post meta)
- Much easier than writing meta box code manually
- We use this in Phase 4 for movie details
(release year, rating, trailer URL, etc.)
4. Regenerate Thumbnails
Go to Plugins → Add New → search "Regenerate Thumbnails" → Install → Activate.
What it does:
- When you change image sizes in Settings → Media
or add new custom image sizes in functions.php,
old uploaded images do not get the new sizes
- This plugin regenerates all image sizes for
every image in your Media Library
- We will use this after setting up custom image
sizes for StreamVault in Phase 2
Plugin Conflicts
Sometimes two plugins conflict with each other — they both try to do the same thing or their code interferes.
How to identify a plugin conflict:
Step 1: Something breaks on your site
Step 2: Go to Plugins → Installed Plugins
Step 3: Deactivate ALL plugins
Step 4: Check if the problem is fixed
Step 5: If yes — reactivate plugins ONE BY ONE
Step 6: After each activation, check if problem returns
Step 7: The plugin that causes the problem to return is the culprit
Plugin Best Practices
✓ Only install plugins from wordpress.org or trusted developers
✓ Check last updated date — avoid plugins not updated in 2+ years
✓ Check active installations and ratings before installing
✓ Read the reviews — look for recent negative reviews about bugs
✓ Always test plugin updates on staging before applying to production
✓ Delete plugins you are not using — do not just deactivate
✓ Keep all plugins updated — outdated plugins are the #1 cause
of WordPress hacks
✗ Never install nulled (pirated) plugins — they contain malware
✗ Do not install too many plugins — each plugin adds overhead
✗ Never install two plugins that do the same thing
How Many Plugins is Too Many?
There is no hard rule — it depends on plugin quality. A well-coded plugin with 1 database query is better than a poorly coded plugin with 50 queries.
General guideline:
Under 10 plugins → Great
10 to 20 plugins → Fine if they are all necessary
20 to 30 plugins → Getting heavy, audit regularly
30+ plugins → Likely has redundancy, clean up
Use Query Monitor to check how many database queries each page load is making. Under 20 queries is ideal.
Hands On — Plugin Setup for StreamVault
Install and activate these plugins right now:
1. Query Monitor → debugging tool
2. Advanced Custom Fields → custom fields UI
3. Regenerate Thumbnails → image size management
After installing all three — go to your site frontend and look at the Query Monitor bar at the top. Click on "Queries" to see all database queries WordPress is making on the homepage.
Part 3 — Theme vs Plugin — When to Use Which
This is a common confusion for beginners:
Use a THEME for:
✓ Page layout and structure
✓ Typography and colors
✓ Header, footer, sidebar design
✓ Template files for different content types
✓ CSS and frontend JavaScript
Use a PLUGIN for:
✓ Contact forms
✓ Custom post types (if they should survive theme switching)
✓ E-commerce functionality
✓ SEO tools
✓ Caching
✓ Security features
✓ Any feature that should work regardless of which theme is active
The golden rule:
If the feature should still work when you switch themes → Plugin
If the feature is purely visual/layout → Theme
For StreamVault:
Theme handles: → how movies are displayed, layout, design
Plugin handles: → watchlist feature, star ratings, custom notifications
Summary
- Themes control appearance. Plugins add functionality. Never mix them.
- Three ways to install themes/plugins — WordPress.org repo, ZIP upload, manual FTP.
- Always delete unused themes and plugins — do not just deactivate.
- Inactive plugins do not run but their files still pose security risks.
- Never install nulled/pirated themes or plugins — they always contain malware.
- Install Query Monitor immediately on every development site.
- Install Advanced Custom Fields for StreamVault — we use it in Phase 4.
- Plugin conflicts are diagnosed by deactivating all plugins then reactivating one by one.
- The golden rule — if a feature should survive theme switching, it belongs in a plugin.