One-page navigation made easy

Beaver Builder
1

First: after one day of playing around with it, I think you guys really nailed it with the Beaver Builder Plugin! Finally a page builder that is suitable to use on a client website :slight_smile:

I have a question concerning one-page navigation menus:

Untill now I have been using ACF’s flexible content fields to (kind of) accomplish a way to build pages with different content blocks (sections), which I also used for One-Page sites. To simplify the making of a one-page navigation menu, I used an extra custom field for each section that I made, which I then used to dynamically build a list of menu items (easy, since you don’t need to use the WordPress Menu system at all).

Assuming you have a Flexible Content Field called sections, and a custom field called ‘section-title’, you can do something like this:


<?php while(have_rows('sections')) : ?>
<?php the_row(); ?>
<li class="menu-<?php echo sanitize_title(get_sub_field('section-title')); ?>"><a href="#<?php echo sanitize_title(get_sub_field('section-title')); ?>"><?php echo get_sub_field('section-title'); ?></a></li>
<?php endwhile; ?>

Would there be a way to do something similar with the rows on a Builder page?

2

Hey Tibor,

Thanks for the kind words! Have you seen our docs on “Smooth Scrolling”? That may be what you want to build a 1 page site. Let me know if that works!

http://forum.wpbeaverbuilder.com/knowledge-base/smooth-scrolling-buttons-icons-and-links/

Justin

3

Hi Justin,

Thanks for the quick response!

I do use the ID-field on rows and then use those for the links in my WP menu. What I’m looking for is a way to loop through all ID-fields that are in use in the different rows on a page, so I can construct my menu dynamically with code (like in my example above), instead of having to manually set up a WP menu for that specific page.

I am not a hardcore dev, so I hope I explain my approach in an understandable way: I guess I need to first get all the rows on a page, then for each row the value of the id-field in the css_selectors array (which is the CSS ID field). If that is not empty -> use it to construct my menu-item link.

Anyway…It’s not that important, but I still hope this makes any sense :slight_smile:

4

Hi Tibor,

I see what you’re trying to do now. I haven’t tested this, but you could try doing this…

<?php
	
if ( FLBuilderModel::is_builder_enabled() ) {
	
    	$rows = FLBuilderModel::get_nodes( 'row' );

    foreach ( $rows as $row ) {
        if ( ! empty( $row->settings->id ) ) {
	           // We have an ID!
        }
    }
}

Let me know if you have any questions!

Justin

5

Thanks a million! This works :slight_smile:

6

Tibor and Justin:
I would like to test this but don’t understand where to put Justin’s PHP from #10605. For edge-to-edge pages, I use a custom template with .beaver-page custom class.

Do I put PHP in the page template? or in functions.php?

And for one-page navigation menu, #my-unique-id in the WP Menu link URL?

7

Hi Kelly,

You only need Justin’s code if you dynamically want to add a one-page navigation menu; if you’re using the WP Menu (as your last question suggests), filling in #your-unique-id in the link URL field indeed will do the trick.

8

Thanks.

Does Justin’s code go in functions.php? Or the page template?

9

That code would go in a page template but it’s not complete. It’s just an example and still needs the actual menu implementation. Maybe Tibor can send over what he ends up putting together.

10

Sure!
I’m using a static front page on which the page builder is active.
In my theme’s header.php I have the following code for my navigation:

<nav class="collapse navbar-collapse navbar-nav" role="navigation">
  <ul class="nav navbar-nav">
    <?php drl_dynamic_one_page_nav(); ?>
  </ul>
</nav>

The function is in functions.php:

function drl_dynamic_one_page_nav() {
  if ( is_front_page() && FLBuilderModel::is_builder_enabled() ) {

    $rows = FLBuilderModel::get_nodes( 'row' );
    foreach ( $rows as $row ) {
      if ( ! empty( $row->settings->id ) ) {

        $css_id = $row->settings->id;
        $menu_item = str_replace("-"," ", $css_id); ?>

        <li class="menu-<?php echo sanitize_title($menu_item); ?>"><a href="#<?php echo sanitize_title($menu_item); ?>"><?php echo $menu_item; ?></a></li>
<?php }
    }
  } else { //Optional: show a custom wp menu if on a 'normal' page
    if (has_nav_menu('primary_navigation')) :
      wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
    endif;
  }
}

Where the ‘else’ statement assumes your theme has a Theme location called ‘Primary Navigation’.

Now if you give each row an ID in the Advanced -> CSS field section and your menu items will appear accordingly.

You also may want to use some jQuery for smooth scrolling and adding an “active” state to the menu items.

11

Tibor:
Thanks very much! Fingers crossed … :slight_smile:

12

Don’t hesitate to ask for more :wink: