Implement a custom built menu from Bootstrap 3

  • harry_034

    (@harry_034)


    11 years, 5 months ago

    Hi.

    I’m having trouble setting up my menu in a theme I’ve just built. I have read numerous articles, all telling me to do it in a slightly different way, but to no avail. Here is what I have done thus far:

    I’ve referenced the menu in the functions.php file like this:

    function register_my_menu() {
  register_nav_menu('sideMenu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );

    I’ve referenced it in the pages that I need it to show like this:
    <?php wp_nav_menu( array( 'theme_location' => 'sideMenu' ) ); ?>

    I have my css referenced for the site which includes the menu styling in style.css.
    However, when I come to create the menu in WP, it is not picking up any of the styling.

    You can see the site here:
    http://www.kaitlin-howard.co.uk/wordpress/

    How can I get it to pick up the CSS styling?

    Thanks for any advice.

Viewing 15 replies - 1 through 15 (of 15 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    Your menu’s HTML structure doesn’t have any of the CSS classes that Bootstrap uses to display menus. Depending on what specifically you’re trying to accomplish, you may be able to use some of the extra arguments for wp_nav_menu(), or you may need to write some custom functions to add the appropriate classes.

    Thread Starter harry_034

    (@harry_034)

    11 years, 5 months ago

    Hi stephen, I’m not sure I understand. I feel as though this hasn’t actually picked up my bootstrap menu. It’s not showing my fonts, just the grey colour for the idle and rollover states. The ‘sideMenu’ is my php file with the actual menu in it and the above code in the functions has allowed me to see a “menu” in the appearance section of my dashboard, but when I started adding pages in my dashboard I expected it to pick up the styling. I’m really not sure what I’ve done wrong here. Can you explain the process in what you need to do when creating your own menu??

    Many thanks for your help on this.

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    The reason your menu looks like it does is because you have no CSS rules that specifically target the menu, so the menu looks like the rest of the site. You need to either write some CSS rules to specifically target the menu, or if you want to use Bootstrap’s menus, you need to write some custom functions to modify the HTML output of wp_nav_menu() so the appropriate Boostrap classes are added.

    If you’d like to know how to specifically target the menu using CSS, I suggest getting a web inspecting tool like Firebug and learning how to use it. This is a good first step: http://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

    Thread Starter harry_034

    (@harry_034)

    11 years, 5 months ago

    Hi Stephen.

    Well I already have the menu built where I’ve amended some of the Bootstrap classes so how do I “write some custom functions to modify the HTML output of wp_nav_menu() so the appropriate Boostrap classes are added“??

    Thanks again.

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    In your original post, you said you read “numerous articles”, but nothing worked. Can you link to one of these articles so we can see exactly what code you tried? There are a lot of resources on the Internet about integrating Bootstrap menus with WordPress, and you could also try a plugin: https://ww.wp.xz.cn/plugins/search.php?q=bootstrap+menu&sort=

    Thread Starter harry_034

    (@harry_034)

    11 years, 5 months ago

    Hi yes I took instruction from this wordpress codex article here:

    http://codex.ww.wp.xz.cn/Navigation_Menus

    My sideMenu.php file is the actual menu in bootstrap HTML.

    Thanks!

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    Sorry I missed your reply. Can you post the contents of sideMenu.php to Pastebin and post the link here?

    Thread Starter harry_034

    (@harry_034)

    11 years, 5 months ago

    Here you go:
    http://pastebin.com/KgB9Az6i

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    Okay, I understand what’s going on. What you’re trying to do won’t work because WordPress uses it’s own built-in function to build the HTML structure of the navigation menu unless you explicitly tell it to use a custom walker object. WordPress isn’t even looking at sideMenu.php.

    This is the first Google result that I found, and it has some good information on what you’ll need to do: https://github.com/twittem/wp-bootstrap-navwalker You could also try downloading an existing WordPress theme that uses Bootstrap and looking at the code it uses, or trying one of the plugins I linked to earlier: https://ww.wp.xz.cn/plugins/search.php?q=bootstrap+menu&sort=

    Thread Starter harry_034

    (@harry_034)

    11 years, 5 months ago

    Hi thanks for this. Hope you’ve had a good New Year! I’ve tried the navwalker multiple times but it keeps making my site disappear?? The web page is just blank when I try and preview my changes plus the wp-login.php page is blank too. The problem seems to be when I include this line of code from the tutorial because without it, the structure is there, but the content isn’t:

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

    stephencottontail

    (@stephencottontail)

    11 years, 5 months ago

    Is wp_bootstrap_navwalker.php in the same folder as functions.php? If not, you’ll have to modify that line to point to the correct location. Can you temporarily enable debugging and see if any error messages appear?

    Thread Starter harry_034

    (@harry_034)

    11 years, 4 months ago

    No it’s pointing to the right place. What I’ve done is to create a theme folder called kh_theme and it sits in there with all the other php files.

    The snippet of code I’m using is

    require_once(‘wp_bootstrap_navwalker.php’);

    I’ve used other articles that show me how to display the menu in its current form (ie sideMenu.php) but this method will not allow me assign new pages to it, which I understand. My issue is that I’m following the article you suggested to the letter but that there is something within a previous tutorial that I have done that is preventing the navwalker from working properly and unfortunately I don’t know enough about php and wordpress to rectify it. Is there a possibility that you could take a look at my files and at least get the menu working? I don’t know if you freelance at all for this kind of thing or how much your rates are??

    stephencottontail

    (@stephencottontail)

    11 years, 4 months ago

    Thanks, but no. This forum is not for paid work. I’d suggest posting at http://jobs.wordpress.net/.

    I can still try to assist you here, if you’d like.

    Thread Starter harry_034

    (@harry_034)

    11 years, 3 months ago

    Hi, thanks for the offer of further assistance. I ran an error report and you’re right, it can’t find the navwalker php file for some reason. It is sitting in the same directory as the functions.php file. The report is as follows:

    [11-Feb-2015 18:02:48] PHP Warning:  require_once(wp_bootstrap_navwalker.php) [<a href='function.require-once'>function.require-once</a>]: failed to open stream: No such file or directory in /home2/mharris1/public_html/kaitlin-howard.co.uk/wordpress/wp-content/themes/kh_theme/functions.php on line 22
[11-Feb-2015 18:02:48] PHP Fatal error:  require_once() [<a href='function.require'>function.require</a>]: Failed opening required 'wp_bootstrap_navwalker.php' (include_path='.:/usr/lib64/php:/usr/share/pear') in /home2/mharris1/public_html/kaitlin-howard.co.uk/wordpress/wp-content/themes/kh_theme/functions.php on line 22
[11-Feb-2015 18:02:50] PHP Warning:  require_once(wp_bootstrap_navwalker.php) [<a href='function.require-once'>function.require-once</a>]: failed to open stream: No such file or directory in /home2/mharris1/public_html/kaitlin-howard.co.uk/wordpress/wp-content/themes/kh_theme/functions.php on line 22
[11-Feb-2015 18:02:50] PHP Fatal error:  require_once() [<a href='function.require'>function.require</a>]: Failed opening required 'wp_bootstrap_navwalker.php' (include_path='.:/usr/lib64/php:/usr/share/pear') in /home2/mharris1/public_html/kaitlin-howard.co.uk/wordpress/wp-content/themes/kh_theme/functions.php on line 22

    I am stumped!

    Thread Starter harry_034

    (@harry_034)

    11 years, 3 months ago

    Ok sorry, ignore that last post. I’ve found what the issue was and I can’t believe I kept missing it! The file name had underscores but the code was referencing dashes instead. So stupid!

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Implement a custom built menu from Bootstrap 3’ is closed to new replies.