Code Monkey home page Code Monkey logo

wp-bootstrap-navwalker's Introduction

wp-bootstrap-navwalker

A custom WordPress nav walker class to implement the Twitter Bootstrap 2.3.2 (https://github.com/twitter/bootstrap/) navigation style in a custom theme using the WordPress built in menu manager.

Extras

NOTE

This is a utility class that is intended to format your WordPress theme menu with the correct syntax and classes to utilize the Twitter Bootstrap dropdown navigation, and does not include the required Bootstrap JS files. You will have to include them manually.

Installation

Place wp_bootstrap_navwalker.php in your WordPress theme folder /wp-content/your-theme/

Open your WordPress themes functions.php file /wp-content/your-theme/functions.php and add the following code:

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

Usage

Update your wp_nav_menu() function to use the new walker by adding a "walker" item to the wp_nav_menu array.

<?php 
	wp_nav_menu( array(
		'menu'		 => 'top_menu',
		'depth'		 => 2,
		'container'	 => false,
		'menu_class' => 'nav',
		'fallback_cb' => 'wp_page_menu',
		//Process nav menu using our custom nav walker
		'walker' => new wp_bootstrap_navwalker())
	);
?>

Your menu will now be formatted with the correct syntax and classes to implement Twitter Bootstrap dropdown navigation.

To change your menu style add Bootstrap nav class names to the menu_class declaration.

<?php 
	wp_nav_menu( array(
		'menu'		 => 'side_menu',
		'depth'		 => 1,
		'container'	 => false,
		'menu_class' => 'nav nav-tabs nav-stacked',
		'fallback_cb' => 'wp_page_menu',
		//Process nav menu using our custom nav walker
		'walker' => new wp_bootstrap_navwalker())
	);
?>

Review options in the Bootstrap docs for more information on nav classes http://twitter.github.com/bootstrap/components.html#navs

Extras

Extras

This script included the ability to add Bootstrap dividers and Nav Headers to your menus through the WordPress menu UI.

######Icons To add an Icon to your link simple place the full Glyphicon class name in the links Title Attribute field and the class will do the rest.

######Dividers Simply add a Link menu item with a URL of # and a Link Text of divider (case-insensitive so ‘divider’ or ‘Divider’ will both work ) and the class will do the rest.

Divider Example

######Navigation Headers Adding a navigation header is very similar, add a new link with a URL of # and a Link Text of nav-header (it matches the Bootstrap CSS class so it's easy to remember). When the item is added use the Title Attribute field to set your header text and the class will do the rest.

Header Example

Changelog

1.4.1:

  • Updated class & file names from twitter_bootstrap_nav_walker to wp_bootstrap_navwalker match repository.
  • Licence now GPL-2.0+ to match WordPress.
  • Added a copy of the GPL-2.0+ Licence.
  • Added additional code comments to explain how the extras are processed.

1.4:

  • Added support Glyphicons

1.3:

  • Added support for nav-header's (Thank you @nerdworker for the suggestion)

1.2.2:

  • Fixed double </li> issue on divider rows (thanks to @wzub for submitting the issue)

1.2.1:

  • Updated caret output logic for Bootstrap 2.2 CSS changes.

1.2:

  • Updated the class to work for all Bootstrap menu types. nav-tabs, nav-pills, nav-stacked, nav-list, navbar and dropdowns are all supported.
  • Added ability to add dividers to dropdown menus by adding a menu item with the label of “divider” (case-insensitive)
  • Added support for multiple dropdown levels (thanks to a Pull Requests from @jmz)
  • Moved dropdown-toggle class declaration from parent <li> to <a> to match Bootstraps official documentation

1.1:

  • Added WordPress Core refrence comments to help understand what functions are overridden
  • Fixed double class declaration on dropdown parents
  • Moved dropdown class declaration from a to parent li

1.0:

  • Initial Commit

wp-bootstrap-navwalker's People

Contributors

planbrewski avatar mafuba avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.