Menu icon Foundation

Designer | Austin, TX

I'm pretty new to all of this development stuff.

My Posts

No Content

My Comments

fourhexagons commented on Ole Fredrik Lie's post over 5 years

Oh wow, this is great. Thank you for responding so quickly and for incorporating it into the project!

I had initially leaned away from that solution (http://wordpress.stackexchange.com/questions/10118/add-class-to-specific-link-in-custom-menu/36491#36491) because I was under the impression that the <a> rel attribute should not be used with custom values, i.e. http://stackoverflow.com/questions/5272713/the-rel-attribute.

If this is the case, my alternative solution is to remove the rel="button" part of the function so that it only writes class="button". Not sure if this is desirable, but thought I would share.

Again, many thanks Ole!

fourhexagons commented on Ole Fredrik Lie's post over 5 years

Hi Ole,

Thank you for putting together such a great starter theme. Your commitment and attention to the project is really appreciated.

I'm new to Wordpress and PHP and trying to understand how to best put a button in the top bar à la the top bar of this site:

<li class="has-form">
  <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
</li>

My research seems to point toward the walker class and wp_nav_menu. I've seen a number of custom walkers such as this one: http://foundation.zurb.com/forum/posts/438-enabling-foundation-5-nav-with-wordpress-menus and of course this one, which appears to be what you used in FoundationPress: https://gist.github.com/awshout/3943026.

So far, I've successfully registered a new menu for my button in navigation.php called "Top Bar CTA":

register_nav_menus(array(
    'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
    'top-bar-r' => 'Right Top Bar',
    'top-bar-cta' => 'Top Bar CTA', //  ***My CTA button menu***
    'mobile-off-canvas' => 'Mobile'
));

And my next addition to navigation.php may or may not be correct:

/**
 * Top Bar CTA
 */
function foundationPress_top_bar_cta() {
    wp_nav_menu(array( 
        'container' => false,                           // remove nav container
        'container_class' => '',                        // class of container
        'menu' => '',                                   // menu name
        'menu_class' => 'top-bar-menu right',           // adding custom nav class
        'theme_location' => 'top-bar-cta',              // where it's located in the theme
        'before' => '',                                 // before each link <a> 
        'after' => '',                                  // after each link </a>
        'link_before' => '',                            // before each link text
        'link_after' => '',                             // after each link text
        'fallback_cb' => false,                         // fallback function (see below)
        'walker' => new top_bar_walker()
    ));
}

Assuming that the above is all fine, my primary blocker is that I haven't figured out how to alter menu-walker.php so that the class "button" is added to the anchor inside of the list item which is given the class "has-form".

Would you mind demonstrating how to do this, or if my approach is off, demonstrating how to best incorporate a button in the top bar nav with FoundationPress?

Much gratitude,
Bryan

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Ole Fredrik Lie's post over 5 years

Oh wow, this is great. Thank you for responding so quickly and for incorporating it into the project!

I had initially leaned away from that solution (http://wordpress.stackexchange.com/questions/10118/add-class-to-specific-link-in-custom-menu/36491#36491) because I was under the impression that the <a> rel attribute should not be used with custom values, i.e. http://stackoverflow.com/questions/5272713/the-rel-attribute.

If this is the case, my alternative solution is to remove the rel="button" part of the function so that it only writes class="button". Not sure if this is desirable, but thought I would share.

Again, many thanks Ole!

You commented on Ole Fredrik Lie's post over 5 years

Hi Ole,

Thank you for putting together such a great starter theme. Your commitment and attention to the project is really appreciated.

I'm new to Wordpress and PHP and trying to understand how to best put a button in the top bar à la the top bar of this site:

<li class="has-form">
  <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
</li>

My research seems to point toward the walker class and wp_nav_menu. I've seen a number of custom walkers such as this one: http://foundation.zurb.com/forum/posts/438-enabling-foundation-5-nav-with-wordpress-menus and of course this one, which appears to be what you used in FoundationPress: https://gist.github.com/awshout/3943026.

So far, I've successfully registered a new menu for my button in navigation.php called "Top Bar CTA":

register_nav_menus(array(
    'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
    'top-bar-r' => 'Right Top Bar',
    'top-bar-cta' => 'Top Bar CTA', //  ***My CTA button menu***
    'mobile-off-canvas' => 'Mobile'
));

And my next addition to navigation.php may or may not be correct:

/**
 * Top Bar CTA
 */
function foundationPress_top_bar_cta() {
    wp_nav_menu(array( 
        'container' => false,                           // remove nav container
        'container_class' => '',                        // class of container
        'menu' => '',                                   // menu name
        'menu_class' => 'top-bar-menu right',           // adding custom nav class
        'theme_location' => 'top-bar-cta',              // where it's located in the theme
        'before' => '',                                 // before each link <a> 
        'after' => '',                                  // after each link </a>
        'link_before' => '',                            // before each link text
        'link_after' => '',                             // after each link text
        'fallback_cb' => false,                         // fallback function (see below)
        'walker' => new top_bar_walker()
    ));
}

Assuming that the above is all fine, my primary blocker is that I haven't figured out how to alter menu-walker.php so that the class "button" is added to the anchor inside of the list item which is given the class "has-form".

Would you mind demonstrating how to do this, or if my approach is off, demonstrating how to best incorporate a button in the top bar nav with FoundationPress?

Much gratitude,
Bryan

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content