Two Navbars Under the Header

Hi everyone,

I created this layout in my Beans child theme. This was more of a "proof of concept"project, but I got to quite like the layout, and would like to use it in my theme. It has a One-Page menu on the left, and the Site menu, ( or Primary menu ) on the right.

I will describe below how I went about it, hoping to get some feedback about how it could be done in a more efficient way.

Any input will be appreciated. 🙂

This is what I did :

To start, in my Beans child theme, I included the UIkit components :

add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' );

function beans_child_enqueue_uikit_assets() {

    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

    // TO IMPORT THE CORE AND ADD-ON UI KIT COMPONENTS

    beans_uikit_enqueue_components( array( 'flex', 'animation', 'contrast', 'overlay', 'thumbnail', 'modal', 'scrollspy', 'smooth-scroll' ) );

    beans_uikit_enqueue_components( array( 'lightbox', 'slider', 'slideshow', 'accordion', 'slideshow-fx', 'sticky', 'tooltip'  ), 'add-ons' );

}

I included a whole bunch there, just for testing purposes.

Then I registered a bunch of new menus , in functions.php .

// REGISTERING A BUNCH OF NEW MENUS

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
  register_nav_menus(
    array(
      'social-menu' => __( 'Social Menu' ),
      'one-page-menu' => __( 'One Page Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}

One of them is the 'One Page Menu', which shows up In the WP admin after this step.

Then, I added the new menu to above the 'Main' , in Beans Child theme :

beans_add_smart_action( 'beans_main_before_markup', 'ym_onepage_menu' );

function ym_onepage_menu() {

    if ( has_nav_menu( 'one-page-menu' ) ) {

        echo beans_open_markup( 'ym_onepage_bar', 'div', array( 'class' => 'ym-onepage-bar' ) );

            wp_nav_menu( array(
                'menu' => 'One Page Menu',
                'menu_class' => 'uk-container uk-container-center',
                'container' => 'div',
                'container_class' => 'ym-custom-onepage',
                'theme_location' => 'one-page-menu',
                'beans_type' => 'navbar'
            ) );

        echo beans_close_markup( 'ym_onepage_bar', 'div' );

    }

}

The reason that I used beans_main_before_markup is because if I placed both menus using beans_header_after_markup, then the "One Page Menu" didn't work properly.

In WP admin, I created a new Menu and called it "OnePager Menu 01", or something like that, and assigned it to "One Page Menu" option which now shows as one of the 'Theme Location' options. The menu consists of several custom links, which I called "Yellow", "Blue", "Green" and "Orange", which correspond to the sections on the page. Each link has a URL to point to an id of a section, like #yellow, etc.

Then, I went to edit the page that I assigned to the front page of the site, called "FRONT" and added the divs or sections manually, in the content, assigning an id to each, like id="yellow", id="green", etc. That's the part that I call cheating.

One last thing left to do, was to assign the UIkit components needed, to power the new menu's 'fancy' functionality, like sticky, smooth-scrolling, etc. And that's where I got stuck.

With Jochen's help, as you can see in this thread, I got that to work too. Here's the code, in functions.php

add_action( 'beans_before_load_document', 'custom_modify_child_theme');

function custom_modify_child_theme() {

    beans_add_attribute( "example_primary_menu", "data-uk-sticky", "{ animation: 'uk-animation-slide-top', showup:true }" );

    beans_add_attribute( "beans_menu_navbar_one-page-menu", "data-uk-sticky", "{ animation: 'uk-animation-slide-top', showup:true }" );

    beans_add_attribute( "beans_menu_navbar_one-page-menu", "data-uk-scrollspy-nav", "{closest: 'li', smoothscroll: {offset: 10}}" );

    beans_add_attribute( "beans_site", "id", "top" );

}

I also added the id of top to the overall site container beans_site, to add a link in the One Page menu , which takes the visitor back to the top of the page.

After some basic styling, my Front page now looks like this. This is still a very rough layout, but the One-Page menu actually works quite nicely.

It smooth-scrolls to the page sections, highlights the active link and stays sticky on top of the page ( showing up only on scroll-up ).

I know that this can be improved, and a page template would be the next ( BIG ) challenge. If there is anyone else interested to have this going, I could use any help 🙂

Cheers,

Yuna M.

A question, if I may. This is a one-page template, correct? How did you add the anchor attributes to the content elements for Jumplinks? Manually, or a function to get ID?

Hey J.C.

To answer your question: I cheated 😉 .

Well, sort of. I think the 'right' way would be to create a page template file and then incorporate some fields, like text fields and text area fields, etc, and that's what I'm planning to do next.

A new 'beast to tame' . BANZAIIII !!! 🙂

But to just test how I would get a one-pager to work, with the menu that highlights the active link, sticks to the top on scroll-up and disappears on scroll down, AND jumps smoothly to the sections down the page, I sort of 'cheated', for a starter 🙂 .

I went to edit the page that I assigned to the front page of the site, called 'FRONT' and added the divs or sections manually, in the content, assigning an id to each, like id="yellow" , id="green", etc. THAT's the part that I call cheating.

After some basic styling, my Front page now looks like this. The screenshot captured a zoomed-out page, to show several (colored) sections.

I know that this can be improved, and a page template would be the next ( BIG ) challenge.

At first I just wanted to get the 'One-Pager' menu to show up and work properly, but then I realized that this is actually a very useful layout, from the site's usability point of view.

Having a 'One pager menu' on the left, in different color than the Site Menu, on the right, provides a simple way to find the page's sections and for visitors to know at all time - where they are on the page.

I find that many websites leave the visitors 'hanging' and don't provide a way to know where one is and how to get back to where one was.
It was an accidental discovery, but I like it very much, and I think I will base my next theme on this navigation layout.

Cheers,

Yuna M.

Bloody hell. I'm at a loss for words. Are you working this on a local server, or some cloud IDE / Github?

Hey J.C.,

It's a test site on a local XAMPP

Alright, I was curious, but back on topic! Remarkble. This as a navigation system, in a nutshell you're providing a solution for something which is usually done in a very specialised and segregated manners:

TOC Site section navigation Jumplinks

I strikes me that not only can I see how this would add a lot to a theme, but as a beans plugin I can think of somethings as well (well within the realm of magic though, way beyond me).

I see what you mean with cheating though 🙂 I must confess, I've done similar things while learning to handle beans (I still do, easier for proof-of-concepts). I'm thinking that other approaches might be the use of custom fields (admit_init), alternatively using quite a bunch of beans inserted markup?

I'd love to help, seeing where it can lead - unfortunately I'm not a developer (far from - see and weep), so I'm hoping others can also see the lightbulbs go on.

Seriously though, as a mechanism for a one-page template this is neat.

Hey J.C.,

I'm glad you see the potential here. As I said, it was an accidental discovery, but it got me really excited, since it solved a number of issues that I always found lacking, on pretty much every WP theme, out there 'in the wild'.

I really hope some other, more experienced developers would 'chip in'.

P.S. Thank you for providing the link to your GitHub page. I'll definitely have a peek inside. 🙂 .

Now that you mention it, maybe a plugin would be a better approach. I haven't thought about it that way. My first thought was to have a page template that would have the 'One Page' layout, with fields, as you say.

Cheers,

Yuna M.

It isn't just an area of human functionality, there's also direct application use. On one hand you have something of a general experience/perception challenge which this can tackle with. On the other hand, you have what is known as exposure potential (I hesitate to use the word "market").

People often forget that many websites don't just exist to be dazzled, seduced, guided or generally informed. Quite often they also provide much deeper functionality, tied to consumptive behaviour / informational requirements. Problem is, there's very little thought that goes into that, other than for general approaches.

We had a similar challenge a while back. One of our agencies provides businesses with regulatory information on commercial activities. It's not something one can capture in a step based form, or simply pull in consultancy for, in their sector they get hands-on with what they need to know. As a result, they have a lot of upkeep with information (exchange & processing). To make a long story short: deep textual content. Very often one hears exclamations like "wiki" and "docs" as a solution, but those only provide structure. Which is important, but not nearly half of it. I can think of quite a few more low / generic level situations as well.

Where it comes to the one-pager concept, that is a neat little thing which could not only be of use for beans "as is" (feature project), but it's also which could help in pulling in more attention. It's the kind of thing which gets a lot of use, there's a lot of people who spend either a lot of time on customisations or a lot of money on third party services. C.V./Profiles, landing pages, announcements - I'm sure the abstract is clear. As a readily customisable page template (whether or not in a specialised optimised / trimmed down child theme) it's something which can seduce adoption on a very low level - which is a wider level than specialised custom development.

And yes, you only need to look once at marketplaces, commercial and free, to see what's out there lacking in these kinds of things. It may have been an accident, but I can understand the excitement.

Hi Yuna,

I think your approach is good and you could indeed move it into a page template as explained in this reply.

Regarding the sections, you are correct to think that adding all the HTML in the editor isn't the absolute ideal, especially if it was for a client. As you mentioned, one good way would be to add metabox and fields. Another way would be to add indented pages for each sections and loop through it in your template page.

The metabox/fields approach allows you to really create custom page templates with the content organized according to your frontend and it probably be the best one to learn as once you master it, you can pretty much build anything for you and clients.

If you are interested, I can maybe put a mini example together.

Cheers,

Hi Thierry,

Yes, please, a little example of how to set up basic metabox/fields in a custom page template - would be really great. That would get me going in the right direction.

Thank you.

YunaM

+1 for the example

Alright guys, I am going to be on a business trip next week so it might a bit difficult for me to do it before but I will try my best, otherwise it will be the following week 🙂

Hey Thierry,

Please don't burden yourself too much. Really.

This is not in any way urgent. I will try to figure it out from the available documentation, and then compare with what you come up with, when you get to it.

It's amazing how much you give of your time and knowledge here.

I also have a sense that we're all participating in a history-making community, for which you are a driving force.

When there is so much open sharing, a qualitatively new something emerges ...

Have a great trip 🙂

Yuna

Ah Yuna, thanks for your kind words. I am really happy to share my knowledge and help people who are willing to learn.

It is also rewarding for me to see this community growing and people using Beans and realizing how efficient (and a bit addictive) it is 🙂

Hey Thierry,

A few of us are still hoping to see that small example we talked about.

It would be great to have it as a part of documentation.

Cheers 🙂

YunaM

Hey Yuna,

I came back from my business trip yesterday so I didn't really get a chance to get down to it. Come to think of it, I did previously put an example together in this reply where I show how to add an hero block using Beans fields?

Here is another reply in which I explain how Beans Fields API can be used and its limitation at the moment. Is there anything which isn't clear for which you would like me to put an example together?

If you are looking for more advance fields and an alternative to AFC, I recently came accross Carbon Fields which looks quite good (I haven't looked into it deeply).

The logic is always the same no matter what feilds API you use. Create fields in the back end, then retrieve it and use it to build your front end.

Thanks,

Hey Thierry,

Thanks for your reply.
You are totally right, all of these subjects have been covered in previous discussions. But when you offered to put a short example together, I thought you had some OTHER 'tricks up your sleeve', so to speak, so I got really interested. 🙂

All is good.

Cheers,

Yuna M.

Hey Yuna,

There are a zillion different examples for which experience (tricks up our sleeves) comes into play. If you have a specific layout you are struggling with or wondering how it could be improved, feel free to share it and I will happily take a look and give my feedback.

Have fun,