CODEWITHSUNDEEP
phpjavascriptjquerywordpressmenu
michaelw90
michaelw90

Reputation: 533

Jquery Static Menu to Wordpress Menu

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.

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

Upvotes: 2

Views: 235

Answers (1)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 1

Related Questions