Header and Footer Template Parts - Module 2-2 - Building a WordPress Classic Theme with Pinegrow

Creating headers and footers is sometimes the most complicated part of any theme. Here, we work on a simple responsive menu using Pinegrow Interactions (GSAP), then we make use of the customizer and widget areas to create a configurable footer.
📝Note: Creating an accessible menu is a major hassle. For an excellent solution that is both configurable and accessible, I suggest Max Mega Menu (linked below). I've also linked to a 1.5-hour tutorial on creating an accessible menu using Alpine.js. It's a doozy!
🧰 Resources:
• Course Playlist: • Building a WordPress C...
• Course info and resources on GitHub: github.com/adamslowe/pinegrow...
• Download the course files: github.com/adamslowe/pinegrow...
• Max Mega Menu: www.megamenu.com/
• Creating a Responsible and Accessible Navigation Menu in Pinegrow with Alpine.js: • Building Responsive an...
🧭Course Navigation
• Module 1 - Prerequisite Information and Project Setup
• Module 2 - Creating the Theme Templates
2-1 - The Index Template
2-2 - Header and Footer Template Parts (You are here!)
2-3 - Page, Post, and 404 Templates
• Module 3 - Custom Post Types and Custom Blocks
• Module 4 - Using JavaScript libraries, making back-to-top buttons, using custom code, and more.
🌐 My Websites:
• adamlowe.io
• peakperformancedigital.com
✅ Connect with Me:
• Facebook: / peakperformancedigital
• LinkedIn: / adasmshawnlowe
• CZcams: / @adamloweio
• Twitter: / @adamslowe
⚙️Tools I Use:
• WordPress.org: wordpress.org/
• Pinegrow Website Editor: pinegrow.com/
⌚ Timestamps:
00:00 - Intro
00:26 - About navigation menus
01:04 - Site Logo
02:46 - A simple menu
05:48 - Mobile Menu with Pinegrow Interactions
11:20 - The Footer
11:56 - Customizer fields and sections
13:11 - Alternate site logo
16:18 - Configurable Copyright Line
17:27 - Social Icons
21:19 - Widget Area for Contact Information
📝Note: I'm not affiliated with Pinegrow in any way. I'm just a happy, paying customer who wants to see the product continue to grow and thrive, and to help build a more active community around it.

[@dhebard1]

Another great video! Do you have a video showing how to make a mobile menu in Pinegrow without using Interactions? I do not have Interactions. Thanks again for posting these.

[@AdamLoweIO]

I do, but you aren't going to like it :)
Building Responsive and Accessible Navigation Menus with Alpine.js
czcams.com/video/t4ph7z3aLMk/video.html
Navigation menus are the bane of my existence and just about every product struggles with them. That's why I typically recommend that people just use Max Mega Menu. The free version has tons of features, is easy to use, and most of all is accessible. The pro version is relatively inexpensive and adds even more great features.
www.megamenu.com/

[@chanstr4186]

nice videos, nice course. Unfortunately I don't have interactions so I'll have to look for a different solution to open the mobile menu. For having something so basic such as mobile menu opener, I would expect the good guys at pinegrow to have a less sluggish solution.

[@AdamLoweIO]

That makes sense. I actually use Alpine.js for my menu interactions and I have a video showing how it’s done. I’m on my mobile and with my family at the moment, so I can’t find the exact video or timestamp. Just look for a VERY long video that I made about building a menu. There should be a timestamp about 3/4 through where I set up the logic.

[@chanstr4186]

@@AdamLoweIO oh that's cool! Found the video and I'll take a look. Love your intro ("..one of the things that you either copy from someone or do it wrong!..") 🙂

[@magehdinc]

Awesome video. I tried running the animation and nothing happened. I wonder if Pinegrow made an update.

[@AdamLoweIO]

I just double checked and it's still working. Have you tried opening up the "final" project where I've already attached the animations? Also, in you are trying to test it inside the Pinegrow editor, be sure you have the "enable clicks" icon enabled. It's the little hand/finder icon in the top menu bar next to the code button.

[@magehdinc]

@@AdamLoweIO I discovered the issue. Pinegrow didn't add the necessary files when interaction was activated. Thanks for responding btw