example-wordpress-menu-walker

KO | EN

gitlite — search

#javascript #python #hacktoberfest #go #android #rust #deep-learning #docker #macos #java #nodejs #awesome #cli #openai

example-wordpress-menu-walker

(★ 9)

A base template to demo a basic WP menu-walker in action. Solves the problem of tying in the menu created in WP with a responsive navigation capable of showing dropdown submenus.

example-wordpress-menu-walker 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Example WordPress Menu-Walker
A base template to demo a basic WP menu-walker in action.  This is not production code, for learning only.  Solves the problem of tying in the menu created in WP with a responsive navigation capable of showing dropdown boxes.
## Dependencies
- WordPress
- Bootstrap
- JQuery
## Notes
In order to get this working in your own WordPress project, please follow the following steps.

Add the bootstrap menu walker code into the root of your theme.  This is the file called *wp_bootstrap_navwalker.php*.

Include the file into your theme's *functions.php* by using coding the following line:
```php
require_once('wp_bootstrap_navwalker.php');
```
In the area where you want the menu to show up in in your theme, most likely somewhere in *header.php*, put the following code:
```html
<nav class="navbar navbar-default" role="navigation">

  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

</div>

<div class=" navbar-collapse navbar-ex1-collapse collapse">
    <?php
      /* Primary navigation */
        wp_nav_menu( array(
            'menu'              => 'main-menu',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-ex1-collapse',
            'container_id'      => 'navbar-ex1-collapse',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
  </div>
</nav>
```
Feel free to uncomment some of the code that is commented for some surprise features!  Lastly, this menu requires JQuery and Bootstrap, so for the sake of simplicity for demo purposes, we'll pull these in from a CDN.  Add the following near the end of your theme, most likely *footer.php*.
```html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
```

## Screenshots
Desktop:

![Desktop](https://github.com/sarn1/example-wordpress-menu-walker/blob/master/doc/desktop.png)

Mobile:

![Mobile](https://github.com/sarn1/example-wordpress-menu-walker/blob/master/doc/mobile.png)

Menu in WP Admin:

![WP Menu Admin](https://github.com/sarn1/example-wordpress-menu-walker/blob/master/doc/menu.png)

example-wordpress-menu-walker

example-wordpress-menu-walker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

example-wordpress-menu-walker

example-wordpress-menu-walker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README