Support » Developing with WordPress » Navigation bar/Theme development

  • Hi everyone!
    I hope this is the right place for this kind of questions. In case it is not, I apologize in advance.
    Anyway, I am developing my own wordpress theme from scratch and I am having troubles with the navigation bar. I already registered the navigation menu into the ‘functions.php’ file and then called the ‘wp_nav_menu()’ into the ‘header.php’ file. Everything works well but, I would like to add a logo link into this navigation bar. So what’s the best way to do that?
    I was writing a function into ‘functions.php’:

    function initialize_nav_bar() {
        echo "<script type='text/javascript'>";
        echo "document.getElementsByClassName('menu-top-menu-container');";
        echo "navbar = document.getElementsByClassName('menu-top-menu-container');";
        echo "logo = document.createElement('a');";
        echo "logo.setAttribute('id', 'logo');";
        $homepath = "<?php bloginfo('template_directory'); ?>/index.php";
        echo "logo.setAttribute('href', '$homepath');";
        echo "</script>";

    I’m not sure this is the right way to do that. Do you have any suggestions?
    Thank you so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • is there a specific reason that you are not using the built-in navbar and just editing that to fit your needs?

    Moderator bcworkz


    You could stay with JS, but it’s not ideal. It forces the browser to reflow the page’s DOM after page load. Couldn’t you add the element to your header template just before you call wp_nav_menu() and style it and the nav bar with CSS to all appear as one element? You could even wrap the logo link and the nav bar in an overall div container so it appears as one block.

    If you really want it to be within the menu ul structure, hook the ‘wp_nav_menu_items’ filter and add your logo link menu item’s HTML to the top of the list with array_unshift().

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Navigation bar/Theme development’ is closed to new replies.