WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Apr 26 2011

Genesis Navigation Shortcode: Insert the Nav or Menu Bar into Facebook Tabs Post

Now, creating Facebook tabs using Facebook Tab Manager (see previous post), only allowed me to create "pages." However, I wanted a menu system for my Facebook tabs to be controlled within my WordPress site, so instead of creating a template for Facebook Tab Manager that included a navigation system that connected all my Facebook Tabs, I created a navigation shortcode for users to insert their desired navigation menu, created in WordPress's custom menus and have further control. Since Facebook Tabs Posts are their own custom post type, creating a menu system for them is quite easy.

How the Genesis Nav Shortcode Works

To use the code, insert [genesis_nav] into your post. It takes a few different arguments:

  • container_class: adds a custom class to the wrap class
  • menu: the menu that is desired; accepts (matching in order) id, slug, name
  • custom_class: adds a custom class to the menu system, pulls superfish option from Genesis theme settings

The default output code is:
[php]
<div id="nav"><div class="wrap">WP_NAV_MENU</div></div>
[/php]

Sample:
[genesis_nav menu=39 custom_class='fun']

Code/Download

You can download the code [download id="7"], insert into your child theme folder, and include the following in your functions.php file.
[php]require_once(STYLESHEETPATH.'/genesis_nav_shortcode.php');[/php]

Or, here's the entire code that can be added to functions.php.
[php]
<?php
//nav shortcode
add_shortcode('genesis_nav', 'genesis_nav_shortcode');
function genesis_nav_shortcode( $atts ) {
$menu_setting = genesis_get_option('nav_superfish') ? 'nav superfish' : 'nav';
$defaults = array(
'container' => '',
'container_class' => '',
'menu' => '',
'menu_class'=> $menu_setting,
'custom_class'=>'',
'echo'=>0
);

$atts = shortcode_atts( $defaults, $atts );
$classes = $menu_setting;
$classes .= ' '. $atts['custom_class'];
$nav = wp_nav_menu(array(
'container' => $atts['container'],
'menu' => $atts['menu'],
'menu_class' => $classes,
'echo' => $atts['echo']
));

echo '<div id="nav"><div class="wrap'.$atts['container_class'].'">' . $nav . '</div></div>';
}
?>
[/php]

Written by Travis Smith · Categorized: Genesis, Tutorials

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. FreestyleMD says

    October 30, 2013 at 8:10 am

    Hi Travis,
    I found your shortcode a week or two ago and it was just what I was looking for to use on one of my websites to use a list of pages in another page. However, today, I decided to improve the page I was using it on and added a second menu after a line of explanation, but the two menus appeared first before any of my post text.
    By an almost miraculous co-incidence I discovered that it you ‘return’ the output rather than using ‘echo’ everything happens in the right order .

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in