Databases
StackOverflow2013
Postsdbo
POReplace navigation with bootstrap navbar in wordpress
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReplace navigation with bootstrap navbar in wordpress
    text
    copied!<p>Just for the sake of testing I'm using the twentythirteen theme. I followed the steps in <a href="http://wp.tutsplus.com/tutorials/theme-development/how-to-integrate-bootstrap-navbar-into-wordpress-theme/" rel="nofollow">this tutorial</a> but the toggle in mobile view is broken. Here's what I did:</p> <p>I went to <a href="http://getbootstrap.com/customize/" rel="nofollow">http://getbootstrap.com/customize/</a> and checked:</p> <ul> <li><strong>Navbar</strong> under LESS files </li> <li><strong>collapse</strong> under jQuery plugins because of what it says <a href="http://getbootstrap.com/components/#navbar-default" rel="nofollow">here</a> (Plugin dependency)</li> </ul> <p>Downloaded the file.</p> <p>Unzipped the file and</p> <ul> <li><p>placed <code>bootstrap.css</code> and <code>bootstrap.min.css</code> in <em>twentythirteen/css/</em></p></li> <li><p>Placed <code>bootstrap.js</code> and <code>bootstrap.min.js</code> in <em>twentythirteen/css/</em></p></li> <li><p>Placed <a href="https://github.com/twittem/wp-bootstrap-navwalker/blob/master/wp_bootstrap_navwalker.php" rel="nofollow">this file</a> in <em>twentythirteen</em> as per tutorial suggestion</p></li> </ul> <p>Changed <code>&lt;nav&gt;</code> contents <code>header.php</code> from this: </p> <pre><code>&lt;div id="navbar" class="navbar"&gt; &lt;nav id="site-navigation" class="navigation main-navigation" role="navigation"&gt; &lt;h3 class="menu-toggle"&gt;&lt;?php _e( 'Menu', 'twentythirteen' ); ?&gt;&lt;/h3&gt; &lt;a class="screen-reader-text skip-link" href="#content" title="&lt;?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?&gt;"&gt;&lt;?php _e( 'Skip to content', 'twentythirteen' ); ?&gt;&lt;/a&gt; &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary', 'menu_class' =&gt; 'nav-menu' ) ); ?&gt; &lt;?php get_search_form(); ?&gt; &lt;/nav&gt;&lt;!-- #site-navigation --&gt; &lt;/div&gt;&lt;!-- #navbar --&gt; </code></pre> <p>to this:</p> <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt; &lt;!-- Brand and toggle get grouped for better mobile display --&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt; &lt;/div&gt; &lt;!-- Collect the nav links, forms, and other content for toggling --&gt; &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;?php /* Primary navigation */ wp_nav_menu( array( 'menu' =&gt; 'main_navigation', 'depth' =&gt; 2, 'container' =&gt; false, 'menu_class' =&gt; 'navbar', //Process nav menu using our custom nav walker 'walker' =&gt; new wp_bootstrap_navwalker()) ); ?&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; </code></pre> <p>and added the following to the beginning of <code>functions.php</code>:</p> <pre><code>/* Bootstrap navigation setup */ add_action( 'after_setup_theme', 'wpt_setup' ); if ( ! function_exists( 'wpt_setup' ) ): function wpt_setup() { register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) ); } endif; function wpt_register_js() { wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min'); } add_action( 'init', 'wpt_register_js' ); function wpt_register_css() { wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' ); } add_action( 'wp_enqueue_scripts', 'wpt_register_css' ); require_once('wp_bootstrap_navwalker.php'); </code></pre> <p>Loaded the page in xampp and the navigation is broken :(</p> <p>What am I doing wrong? Do I have to change something in the code?</p> <p><strong>EDIT:</strong> Don't know if I'm doing something right but I changed the <code>menu</code> and <code>menu class</code> values (main_navigation is the name I gave to my menu in the dashboard). It still doesn't work, tough.</p> <pre><code>wp_nav_menu( array( 'menu' =&gt; 'main_navigation', 'depth' =&gt; 2, 'container' =&gt; false, 'menu_class' =&gt; 'navbar', //Process nav menu using our custom nav walker 'walker' =&gt; new wp_bootstrap_navwalker()) </code></pre> <p>See the problem in action: <a href="https://dl.dropboxusercontent.com/u/13823768/broken%20navbar.mp4" rel="nofollow">broken navbar</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload