Creating a Mega Menu using the WordPress 6.5 - Deep dive into the power of the Interactivity API
Вставка
- Опубліковано 4 лип 2024
- In this video, we dive into the exciting world of WordPress 6.5's Interactivity API and explore its potential by creating a dynamic mega menu from scratch. The inspiration for this video came from Nick Diego's concept, which I stumbled upon on Twitter.
Throughout the video, I'll guide you through each step of the process, breaking down complex concepts into digestible segments.
By the end of this video, you'll have a deep understanding of how to leverage the WordPress 6.5 Interactivity API to create dynamic mega menus that captivate your website visitors.
Stay tuned, subscribe and like the video!
Twitter Post “Nick Diego”:
/ 1760288390342496718
Post about it from Nick:
nickdiego.com/experimenting-w...
Github repo “Nick Diego”:
github.com/ndiego/mega-menu-b...
Github repo:
github.com/ArneDeBelser/mega-...
00:00 Introduction
00:43 Showcasing end result (example)
04:05 Run command to scaffold block
04:38 Edit block.json
06:28 Add custom menu template part
07:37 Fix typo registering custom menu template part
08:34 Explanation how WordPress block development works
09:16 Explain Edit.js
10:19 Install icon library
10:26 Setup all attributes and variables in Edit.js
11:20 Run watcher with “npm start”
11:34 Explain site URL
11:57 Fix site URL, should be function
12:15 Write Edit.js boilerplate
14:40 Explain and add InspectorControls
16:46 Create rendered div in Edit.js
17:29 Add all the “.scss” (css) files
17:54 Configure index.js - this is the JavaScript entry file
18:22 Create render.php
22:01 Creating state in View.js
23:05 Add “actions” and explain how the menu opens and closes
25:28 Add callback “initMenus”
25:43 Outro
#WordPress,#WebDevelopment,#InteractivityAPI,#MegaMenu,#WebsiteDesign,#Tutorial,#DeveloperTips,#WebDesign,#Coding,#OpenSource,#WordPressDevelopment,#UserExperience,#FrontendDevelopment,#JavaScript,#CMS,#TechTutorial,#Programming,#WebDevelopmentTips,#DigitalMarketing,#OnlineLearning
Great video! please keep uploading
Thank you! Will do!
Thanks. I'm new to Wordpress and wondering if php is the only way to create dynamic plugins/themes, such as a portfolio and megamenu. I'm familiar with Javascript, GSAP and React. Can I use JS instead of PHP?
To my knowledge, PHP remains essential for the backend. While JavaScript has gained prominence in the WordPress realm in recent years, especially with the emergence of the Full Site Editor and Block Editor, PHP remains indispensable for developing comprehensive themes or plugins. The foundational hook/filter system in WordPress is deeply rooted in PHP. While JS plays a crucial role in certain aspects, such as editing, it doesn't seem feasible to exclusively rely on it.
Others, please correct me if I'm wrong.
Thanks!
ini keren sekali❤❤❤
I had to translate this to understand, but thank you !