search

adamslowe / responsive-accessible-alpine-menu

9 stars 1 forks source link

Pinegrow Required? #1

Closed djmtype closed 7 months ago

djmtype commented 7 months ago

Does this require Pinegrow to use? Otherwise, it seems to be missing an important file if I'm not mistaken: inc/wp_smart_navwalker.php

adamslowe commented 7 months ago

This project was built to create a menu with Alpine and Pinegrow, so it will take a bit of tweaking if you want to use it for something different. The file you mention is one of the helper files that Pinegrow generates when you export the file. It extends the Walker_Nav_Menu class to make it read the attributes Pinegrow sets with its Nav Menu WordPress Smart Action.

https://forum.pinegrow.com/t/wordpress-menu-with-submenu-dropdown/6753

djmtype commented 7 months ago

Hey @adamslowe thanks for reaching out!

I was planning to try this out with a Wordpress theme. Correct me if I'm wrong, but it seems the wp_smart_navwalker.php file is missing from this repo as it's being referenced here: https://github.com/adamslowe/responsive-accessible-alpine-menu/blob/main/functions.php#L186

But, it's not in here: https://github.com/adamslowe/responsive-accessible-alpine-menu/tree/main/inc

I also don't know if wp_pg_helpers.php is critical to making just the menu function properly, but that seems to be missing as well.

adamslowe commented 7 months ago

There is no mistake. These are source files for a Pinegrow project, not something that can be directly used on a website. When you open this directory in Pinegrow and export it for WordPress, all the correct files will be there.

The video that this repo is for shows how to use it to create a WP menu using Pinegrow. This link takes you to the 1:18:49 mark that walks you through it. https://www.youtube.com/watch?v=t4ph7z3aLMk&t=5297s

You can download a free trial of Pinegrow from https://pinegrow.com/.

adamslowe commented 7 months ago

I have removed all but the source images, HTML, and CSS files to eliminate any confusion. Any additional files needed to use this as part of a WordPress theme can be created manually or generated programmatically using the Pinegrow web editor.

djmtype commented 7 months ago

@adamslowe from the start, I should've just asked, "Can you please share the wp_smart_navwalker.php file?"

In any case, having the extra WP files in your repo wasn't confusing at all. In fact, they provided some context should you want to integrate this into any classic/hybrid WP theme.

Yes, after seeing the functions.php file and inc directory, (formerly part of this repo), I assumed the wp_smart_navwalker.php file would also be included since it was referenced. If there was any confusion, that was all.

This seems to be generated internally by Pinegrow, then?

Therefore, in order to see a result similar to your rendered HTML file, using a classic WP theme, a custom Walker Nav would need to be configured. The markup would include the appropriate ARIA attributes, an added button element placed next to the parent items for triggering the submenu, and the AlpineJS markup for client-side interactivity, custom classes, etc.

adamslowe commented 7 months ago

Got it. And while the code in the nav walker is open source, there may be some things that get dynamically generated depending on what you set in the Pinegrow action. (I could be wrong about this since I've never compared the file from project to project)