Jquery Static Menu to WordPress Menu

4 Views

Just a few days ago I got a great script which basically allows the menu items at my static site to shrink and expand depending on how many list items there was in the menu. Now I’ve started work on converting the site to a WordPress installation and I’m having problems getting it to work because I’m not familiar with Javascript.

It won’t run the script, just the basic WordPress PHP.

Read More

This is the script: 

$(document).ready(function() {      
  li_count = $('#main-navigation li').length;
  div_size = $('#main-navigation').width();
  new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
  $('#main-navigation li').css('font-size', new_li_font_size);
  $('#main-navigation li').css('width', new_li_width);
  console.debug(new_li_size);
});

This is my previous nav: 

<nav id="main-navigation">
<ul>
    <li><a href="index.html">Hjem</a></li>
    <li><a href="butikker-single.html">Butikker</a></li>
    <li><a href="kampanjer.html">Kampanjer</a></li>
    <li><a href="#">Åpningstider</a></li>
    <li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->

This is my current nav: 

<nav id="main-navigation" role="navigation">
            <ul>
                <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
            </ul>
        </nav><!-- END #main-navigation -->

I’ve been looking at the script and I think it could have something to do with the fact that there is no more li-tags in the php, but I might be wrong, considering I have no experience with jQuery. Is anyone able to help me out? 🙂

Just in case, here’s the implementation of jQuery which I put in my head: 

<?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/menu.js"></script>

Michael

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. To add a script in WordPress you can use wp_enqueue_script in your functions.php file

    function load_menu_js() {
    wp_enqueue_script(
        'menu_js',
        get_template_directory_uri() . '/js/menu.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'load_menu_js');

    Above code will add the script in the head section of your page and you don’t need to use <script> to add your menu.jstag manually and this is the recommended way.

    Also you should use

    (function ($) {
    $(document).ready(function() {      
        // code goes here
    });
})(jQuery);

    Remove the script tag after the wp_head() you’ve used to load your menu.js file and also change the following code

    <nav id="main-navigation" role="navigation">
        <ul>
            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
        </ul>
</nav>

    to (wp_nav_menu() generates an ul filled with li tags)

    <nav id="main-navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>

    Also remember nav is an html5 tag, not supported in older browsers, you can use <div id="main-navigation"></div> instead.