Campus Map on Front-End | LearnWebCode

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Become a WordPress Developer: Unlocking Power With Code

Intro

2024 Roadmap & Intro (5:18)
Welcome To The Course (10:00)

Getting Started

What Is A Dev Environment? (13:34)
First Taste of PHP (16:31)

First Coding Steps: PHP

Creating a New Theme (12:04)
PHP Functions (14:52)
PHP Arrays (12:28)

WordPress Specific PHP

The Famous "Loop" in WordPress (14:30)
Header & Footer (18:33)
Optional: If You Want To Skip To One of the Final Chapters In The Course
Convert Static HTML Template into WordPress (Part 1) (3:29)
Convert Static HTML Template into WordPress (Part 2) (18:03)

Pages

Interior Page Template (17:52)
Parent & Children Pages (16:58)
To Echo or Not To Echo (9:01)
Menu of Child Page Links (19:57)
A Few Quick Edits / Improvements (9:21)
Navigation Menus (15:38)
Navigation Menus (Continued) (5:06)

Building the Blog Section

Blog Listing Page (index.php vs front-page.php) (19:58)
Blog Continued (13:14)
Blog Archives (archive.php) (12:09)
Custom Queries (19:58)
Blog: Few Quick Edits & Improvements (6:31)

Events Post Type

Custom Post Types (17:49)
Displaying Custom Post Types (19:48)
Quick Timeout: Misc Updates (14:23)
Custom Fields (19:09)
Ordering (Sorting) Custom Queries (14:09)
Manipulating Default URL Based Queries (17:51)
Past Events Page (Custom Query Pagination) (18:31)

Programs Post Type

Creating Relationships Between Content (18:40)
Displaying Relationships (Front-End) (19:58)
Quick Program Edits (8:50)

Professors Post Type

Quick Note About The Next Lesson
Professors Post Type (19:12)
Featured Image (Post Thumbnail) (19:06)
Featured Image Sizes & Cropping (9:15)
Page Banner Dynamic Background Image (15:12)

Cleaner Code (Less Duplication)

Note About PHP Warning In The Next Lesson
Reduce Duplicate Code - Create Our Own Function (19:50)
Solution To "Undefined array key" Warnings
Quick Fix For Page Banner Function
Using Our "pageBanner" Function (10:54)
Reduce Duplication - "get_template_part()" (11:28)

JavaScript Preparation

Getting Our Computer & Project Ready for JavaScript (16:06)
Important Note About The Next Lesson
Optional: The Finished Product Of This Course: All In One Import File (13:30)

Campus Post Type

Note About Google Maps JavaScript API
Campus Post Type (19:46)
Campus Map on Front-End (18:51)
Campuses Continued (19:53)
Final Campus Details (4:35)

Live Search (UI JavaScript)

Live Search (9:53)
Quick Note About The Next Lesson
Open and Close Search Overlay (18:16)
Preventing the Text Field Suggestions Pop-up
Keyboard Events in JavaScript (19:38)
Managing Time in JavaScript (15:32)
Waiting / Loading Spinner Icon (19:58)

WordPress REST API (AJAX)

Quick Note About The Next Lesson
Load WP Content with JS (17:50)
Generate HTML Based on JSON (19:58)
Conditional Logic Within Template Literal (17:43)
Quick Misc Edits (10:51)
Synchronous vs Asynchronous (Part 1) (11:46)
Synchronous vs Asynchronous (Part 2) (10:11)

Customizing The REST API

REST API: Add New Custom Field (15:50)
REST API: Add New Custom Route (URL) (16:37)
Create Your Own Raw JSON Data (14:10)
WP_Query and Keyword Searching (8:25)
Working With Multiple Post Types (10:40)

Combining Front-End & Back-End

3 Column Layout for Search Overlay (19:58)
Custom Layout & JSON based on Post Type (19:33)
Quick Note About The Next Lesson
Search Logic That's Aware of Relationships (16:02)
Search Logic That's Aware of Relationships (Part 2) (19:46)
Completing Our Search Overlay (14:25)
jQuery Free Live Search (6:51)

Non-JS Fallback Traditional Search

Traditional WordPress Searching (19:01)
Traditional WordPress Searching (Part 2) (19:58)

User Roles and Permissions

User Roles and Permissions (19:58)
Open Registration (19:59)
Open Registration (Part 2) (11:48)

User Generated Content

"My Notes" Feature (19:59)
"My Notes" Front-end Part 1 (7:31)
"My Notes" Front-end Part 2 (14:55)
Quick Note About The Next Lesson
Delete Posts with the REST API (17:51)
Edit / Update Posts with the REST API (18:30)
Creating New Notes (14:52)
Creating New Notes (Part 2) (8:48)
Note Permissions and Security (Part 1) (19:58)
Note Permissions and Security (Part 2) (19:59)
Per-User Post Limit (19:56)
Quick Note About CSS
jQuery Free My Notes (6:13)

Like or "Heart" Count for Professors

Let Users "Like" Content (Part 1) (19:31)
Let Users "Like" Content (Part 2) (12:54)
Creating Custom POST and DELETE Endpoints (14:13)
Programmatically Create a Post (19:17)
Enforce Limit of One Like Per User / Teacher Combo (17:28)
Don't Forget About The "isset" Solution
Completing the LikeBox (19:45)
Reminder To Use "isset" In Our LikeBox HTML Output
jQuery Free LikeBox (2:18)

Going Live: Deploying Our WordPress Site

Going Live With Our Website (4:04)
The Different Web Hosts & Plans To Consider (12:37)
Installing WordPress On Our Live Site (9:07)
Migrate Local WP Site To Live Site (11:46)
Getting Started With GIt (14:10)
How To Log Into Our Live Site With SSH (10:43)
Turn Live Site Into Git Host (Bare Repo) (17:57)
Passwordless SSH Login (12:16)

Extra Credit Challenges & Topics

Note About Making The Slideshow Dynamic
Challenge: Make Homepage Slideshow Dynamic (9:31)
What Is WP-CLI? (6:13)

Plugin Development: PHP

Introduction to Plugin Development (13:35)
Let's Create Our First Plugin (10:39)
Adding a Settings Page For Our Plugin (14:59)
Settings API (Saving Settings Data) (19:51)
Finishing Our Settings Form (19:58)
Actually Counting the Words, Characters, and Read Time (19:56)
Translations / Localization (For PHP) (19:43)
Admin Sub-Menu (15:59)
Custom Admin Menu Icon (17:05)
Solution To Undefined Array Key Message In Next Lesson
Alternative: Manually Handling Admin Form Submit (15:23)
Finishing Word Filter Plugin (18:03)

Plugin Development: Blocks, Gutenberg & React

Introduction to JavaScript Plugin Development (19:44)
Introduction to JSX (19:46)
Block Type Attributes (19:59)
Let's Discuss the Output of Our Block (Part 1) (11:52)
Let's Discuss the Output of Our Block (Part 2) (10:07)

Plugin: Multiple Choice Block Type (React)

Quick Note About Loading Block Asset Files
Starting Our Multiple Choice Block Type (18:25)
Styling Our Block (11:25)
Event Handling & Updating Block Attributes (19:59)
Focus New Field For Immediate Typing
Setting Up The Correct Answer (19:52)
If You're Using a Block Theme: Load Your JS In The Footer
How To Use React on The Front-End of WordPress (18:51)
Passing Block Data From PHP Into JavaScript / React (12:25)
Letting Users Click On (Guess) An Answer (15:15)
Attention To Detail (14:36)
A Note About Animations / Transitions in React
Let Admin Choose Background Color of Block (15:06)
Block Text Alignment & Block Preview (8:30)
Using The "block.json" File (17:27)

Plugin: Featured Professor

Starting Our Featured Professor Plugin (14:23)
Loading a List of Professors (13:09)
Displaying Professor Info (19:58)
Professor Preview in Editor (Part 1) (5:22)
Professor Preview in Editor (Part 2) (19:22)
Control Post Meta With Block Type (19:57)
Add Related Posts to Professor Detail Page (12:06)
Translations / Localization (For JavaScript) (11:29)

Plugin Development: Custom SQL Database Table

Understanding The Pros and Cons of the "Post" Paradigm (19:59)
Creating Our Own Custom Table (19:42)
Querying Our Table (16:06)
Building Dynamic Queries (Part 1) (10:56)
Quick Note About PHP Arrays
PHP Warnings In The Next Lesson
Building Dynamic Queries (Part 2) (17:34)
Reminder Of PHP Warning Solution
Create Pet From Front-End (11:34)
Delete Pet From Front-End (9:40)
Converting Plugin To Be a Block Type Plugin Instead

Block Themes & Full Site Editing

Note About 2024 Block Best Practices
What Is Full Site Editing? (10:10)
Important Note: theme.json File Needed
Creating A Block Theme (19:58)
Where Should We Begin With Block Themes? (10:39)
Custom Banner Block (Part 1) (4:39)
Custom Banner Block (Part 2) (18:54)
Check For "isset" in Your Functions File
Making Our Block Editable (10:15)
Generic Heading Block (12:14)
Finishing Generic Heading Block (18:49)
What Is "theme.json" In A Block Theme? (Part 1) (2:51)
What Is "theme.json" In A Block Theme? (Part 2) (19:35)
How To Disable Most Typography & Color Choices
Custom Button Block (Part 1) (5:01)
Custom Button Block (Part 2) (19:11)
Color Picker For Button Block (Part 1) (11:06)
Color Picker For Button Block (Part 2) (14:10)
Quick Note About Link Chooser Popover
Our PHP Render Approach (18:50)
User Uploaded Background Images (Part 1) (10:15)
About Undefined Array Key Warnings
User Uploaded Background Images (Part 2) (14:16)
Reminder To Use "isset" In Our "banner.php" File
Quick Details: Banner Block (9:08)
Events And Blogs Area (Part 1) (6:25)
Events And Blogs Area (Part 2) (14:38)
Header & Footer Blocks (12:45)
Slideshow Block (Part 1) (16:55)
Quick Note About isset()
Slideshow Block (Part 2) (11:19)
Templates (Part 1) (8:30)
Quick Note About empty()
Templates (Part 2) (12:21)
Note About The Next Several Lessons (6:11)
Single Page & Post Templates (18:40)
Don't Forget About Singular Content In Block Themes
Remaining Templates (14:40)
Reminder To Use "isset" In Our "singleprofessor.php" File
Only Allow Certain Block Types In Certain Editor Environments (7:52)
Quick Note About Custom Templates In The Next Lesson
Creating A "Blank" Template For Landing Pages (6:05)

Keeping Blocks Organized (Modern 2024 Approach)

The "Official" WordPress Block Dev Setup (5:34)
How To Setup Multiple Blocks (16:45)
Practice Makes Perfect (13:18)
Our Banner Block (18:46)
Slide & Slideshow Blocks (14:59)
Finishing Up (16:00)
Workflow Task Cleanup In package.json (5:55)

The Interactivity API

What Is The Interactivity API? (6:10)
Creating Our Interactive Block (19:13)
What Is Context In The Interactivity API? (14:12)
Rendering HTML With The Interactivity API (13:28)
Automatically Convert PHP Data Into JS Data (19:58)
Show Congrats & Sorry Based on Context (16:27)
Callbacks In The Interactivity API (9:08)
When To Use State Instead of Context (17:11)

Final Chapter

Challenge: Have an Update Plan in Place (Security) (8:12)
Challenge: Query Vars (12:47)
Finale: JavaScript Next Steps (6:06)

Teach online with

Campus Map on Front-End

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock