Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Markus Mönch
Markus Mönch
16,383 Points

How to create this type of menu in WordPress?

HI,

If you look at this site, and look at the menu, how is that supposed to be in the code?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points

Let's ask the guy who made it. Aurelian Spodarec

I will say looking at the code, there is a scroll event that is adding classes to change the menus appearance.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I don't know how to do it either :D

The only thing I know is on how to make one menu, without breaks, like this one.

<?php
                $args = array(

                   'menu_class' => 'header__navigation__list',
                   'walker'     =>  new Bem_Menu_Walker(),
                   'container' => 'false'
                );
                wp_nav_menu( $args );
            ?>

Though on how to make a menu like that one, which the HTML looks like this

 <div class="c-mainNavigationPanel--menusWrapper">
            <nav class="c-mainNavigationPanel--menuAccount">
                <ul class="l-mainMenu">
                    <li class="l-mainMenu--item c-mainNavigationPanel__item btn--join"><a href="join.html">Join</a></li>
                    <li class="l-mainMenu--item c-mainNavigationPanel__item" ><a href="language.html">English</a></li>
                </ul>
            </nav>

            <nav class="c-mainNavigationPanel--menuContainer">
                <ul class="l-mainMenu">
                    <li class="l-mainMenu c-mainNavigationPanel__item--active"><a href="index.html">App</a></li>
                    <li class="l-mainMenu c-mainNavigationPanel__item"><a href="blog.html">Blog</a></li>
                    <li class="l-mainMenu c-mainNavigationPanel__item"><a href="faq.html">FAQ</a></li>
                    <li class="l-mainMenu c-mainNavigationPanel__item"><a href="contact.html">Contact</a></li>
                    <li class="l-mainMenu c-mainNavigationPanel__item is-desktop-hide"><a href="join.html">Join</a></li>
                    <li class="l-mainMenu c-mainNavigationPanel__item is-desktop-hide"><a href="languages.html">English</a></li>
                </ul>
            </nav>
            </div>

So there is also a menuAccount with the same Join and ENglish, which is in the menuCOntainer.

I have no idea how to make a menu like this to work in WP.

Kevin Korte
Kevin Korte
28,149 Points

Good point, I didn't realize it wasn't wordpress. You'd be right, a new Walker class should be used to create the desired html markup.

You could also probably modify the html that wordpress gives, you, but while more difficult to start, I think a Walker class is the better option here.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Could you lead me on how should I do this? Because I'm not too sure :D I'm not too experienced in WP. I never did any different menu than the default one.

In CSS here as you can see, or HTML, yeah, I'm getting more experience in that, and you know it lol

So, how is that I should do this with Walker? I'm not really sure how this supposed to look in the code.

Kevin Korte
Kevin Korte
28,149 Points

Sorry, not really. I haven't done much with Walker classes in a long time, and I no longer build wordpress sites. I just know what they can do, and are intended for. If i remember there was some extensive documentation about Walker classes on the official codex.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Wow. Really? I know you're a human now. Usually you knew everything : D I suppose you just have a very very strong foundation , and now you're just specializing in few directions.

Okay, I'll try to see. Thank you :)

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Ahh xd I can't see a damn thing about this menu. Think I might just live WP atm.

Think it's better to learn PHP.. so I can do whatever and it can serve me in the long term run, instead of jumping to WP when I need to and trying to do stuff who knows what lol whithout putting in time to properly learn WP : p I don't know.

Need to learn more in depth PHP in general and JS, but think I live JS for now, I can somewhat do what I want in most cases with JS.