WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Apr 27 2011

WordPress Facebook 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 Facebook Nav Shortcode Works

To use the code, insert [fb_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: already includes the nav class, adds a custom class to the menu system

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

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

Code

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

Or, here's the entire code that can be added to functions.php.
[php]
<?php
//nav shortcode
add_shortcode('fb_nav', 'fb_nav_shortcode');
function fb_nav_shortcode( $atts ) {
$defaults = array(
'container' => '',
'container_class' => '',
'menu' => '',
'menu_class'=> 'nav',
'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: 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.

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