-1

TBH this is my first time doing as adding a custom jquery in a wordpress and i read like about 10-20 articles about it already and more i guess but there still something missing, so i did it like this, and please mention what Im doing wrong, and the jquery im adding is found here.

Here is the snippet of what i want,

<div class="container">
            <ul id="menu">
                <li>
                    <a>
                        <i class="icon_about"></i>
                        <span class="title">About</span>
                        <span class="description">Learn about us and our services</span>
                    </a>
                </li>
            </ul>
</div>

And here is the code I added into function.php in the wordpress theme,

function my_custom_function() { wp_enqueue_script( 'jquery' );

wp_enqueue_style( 'style', get_template_directory_uri() . '/javascript/css/style.css' );

wp_register_script( 'jquery', get_template_directory_uri() .  '/javascript/jquery-1.4.2.min.js', array( 'jquery' ), false, true );

wp_enqueue_script('jquery'); } add_action( 'wp_enqueue_scripts', 'my_custom_function' );

I added this too in the header.php as I saw in the sample index.php of the slider its on the head so i assume it is needed,

<script type="text/javascript">
        $(function() {
            $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-15px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'-10px'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-95px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'50px'
                        }, 400);
                }
            );
        });
   </script>

And this php snippet is where im getting my menu's,

<?php wp_nav_menu('menu=header_menu&container=false'); ?>

from all of this, i just wanted to know if what im doing wrong and now what i needed to do next, pretty much a newbie here in this jquery integration, just did this today. And in my mind the thing im missing too is in the last php code where i need to include the id="menu" but thats the thing too, how do i add it.

And BTW has anyone successfully implemented the Fresh Slide Out please help me, even though im just learning I still need to successfully implement it to go to other jquery and try them out.

0

In addition to @Wyck's answer, since you asked if you are doing anything wrong, I'd suggest that it is usually more correct to register and enqueue your scripts as you've already done with some scripts in my_custom_function, than it is to write scripts directly into the header.

That is, put this code:

    $(function() {
        $('#menu > li').hover(
            function () {
                var $this = $(this);
                $('a',$this).stop(true,true).animate({
                        'bottom':'-15px'
                    }, 300);
                $('i',$this).stop(true,true).animate({
                        'top':'-10px'
                    }, 400);
            },
            function () {
                var $this = $(this);
                $('a',$this).stop(true,true).animate({
                        'bottom':'-95px'
                    }, 300);
                $('i',$this).stop(true,true).animate({
                        'top':'50px'
                    }, 400);
            }
        );
    });

...in a .js file and enqueue it like you did with the flex-script.

If you register and enqueue correctly you can save yourself some effort. For example:

function my_custom_function() {
        wp_enqueue_script( 'jquery' );

        wp_enqueue_style( 'style', get_template_directory_uri() . '/javascript/css/style.css' );

        wp_enqueue_script( 'flex-script', get_template_directory_uri() .  '/javascript/jquery-1.4.2.min.js', array( 'jquery' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_function' );

You don't need that wp_enqueue_script( 'jquery' );. jQuery is listed as a dependency of your flex-script. It will load automatically. You can do the same with your flex-script and your additional code.

function my_custom_function() {

        wp_enqueue_style( 'style', get_template_directory_uri() . '/javascript/css/style.css' );

        wp_register_script( 'flex-script', get_template_directory_uri() .  '/javascript/flex-script-name.js', array( 'jquery' ), false, true );

        wp_register_script( 'my-flex-code', get_template_directory_uri() .  '/javascript/my-flex-code-name.js', array( 'flex-script' ), false, true );

        wp_enqueue_script('my-flex-code');
}
add_action( 'wp_enqueue_scripts', 'my_custom_function' );

That last line -- wp_enqueue_script('my-flex-code'); -- should enqueue all of the dependent scripts.

I noticed that you registered flex-script as an old version of jQuery-- /javascript/jquery-1.4.2.min.js. I assume that is a mistake. you should not be using old jQuery, much less loading the Core jQuery and also another jQuery. That is bound to cause trouble.

As far as including id="menu", I am not sure where your Javascript needs that ID to be but I am fairly sure that Wyck is on the right track.

The following should do what you want:

wp_nav_menu(
  array(
    'container_class' => 'container',
    'menu_id' => 'menu'
  )
);

That should, and does, generate what should do what you want if and only if your description of what you need is correct:

<div class="container">
        <ul id="menu" class="menu">
  • Hey I'm not Milo:) – Wyck Sep 15 '13 at 23:03
  • Many, many apologies!! I'll fix that. – s_ha_dum Sep 15 '13 at 23:06
  • @s_ha_dum : I have done the integration of the jquery into wordpress until that, but what im missing now is the if the id="menu" that is inside the <ul> and the <div id="container"> , i dont really know how to make them. – rockStar Sep 16 '13 at 12:37
  • You did get (probably) functioning Javascript but you also asked "what im doing wrong". I told you. – s_ha_dum Sep 16 '13 at 14:08
  • @s_ha_dum: i think Im going to surrender, it seems i cant possible add the stinking jquery :( and thanx very much for the time and help – rockStar Sep 16 '13 at 16:29
1

As you can see on the Codex page: http://codex.wordpress.org/Function_Reference/wp_nav_menu, wp_nav_menu takes a number of parameters including one for the id.

'menu_class'      => 'my-menu',
'menu_id'         => 'menu',
  • 'menu' => 'header_menu', 'menu_id' => 'container', 'items_wrap' => '<ul id="menu"><li><span class="title">%3$s</span></li></ul>' I did like this but still i couldnt have a result the same as my snippet. Need help if you dont mind – rockStar Sep 15 '13 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.