Hi,

I'm having a problem adding javascripts to PHP. I'm trying to create a theme for Wordpress.

I've read that the HTML way for adding js is a bad idea for PHP.

 

But after reading a lot of tutorials I still don't get it... Could someone tell me what I'm missing here?

 

This is my Functions.php

<?php
add_theme_support( 'wp_enqueue_scripts', 'menu' );

function menu(){

wp_register_script( 'menu', get_template_directory_uri() . '/js/menujs/jquery.js', array('jquery'), '1.0', true );
wp_register_script( 'menu', get_template_directory_uri() . '/js/menujs/jquery-easing-1.3.pack.js', array('jquery'), '1.0', true );
wp_register_script( 'menu', get_template_directory_uri() . '/js/menujs/jquery-easing-compatibility.1.2.pack.js', array('jquery'), '1.0', true );
wp_register_script( 'menu', get_template_directory_uri() . '/js/menujs/jquery.easing.min.js', array('jquery'), '1.0', true );
}
?>

I wanted to add it to the Header.php

<?php menu(); ?>

I thought this was the right way to add them..

 

I also tried

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery.easing.min.js"></script>

Added this to the Header.php

 

I might be just stupid, but I hope someone could explain this to me..

 

Thanks in advance!

try this

<?php

add_theme_support( 'wp_enqueue_scripts', 'menu' );


function menu(){

    wp_register_script( 'menu1', get_template_directory_uri().'/js/menujs/jquery.js', array('jquery'), '1.0', true );

    wp_register_script( 'menu2', get_template_directory_uri().'/js/menujs/jquery-easing-1.3.pack.js', array('jquery'), '1.0', true );

    wp_register_script( 'menu3', get_template_directory_uri().'/js/menujs/jquery-easing-compatibility.1.2.pack.js', array('jquery'), '1.0', true );

    wp_register_script( 'menu4', get_template_directory_uri().'/js/menujs/jquery.easing.min.js', array('jquery'), '1.0', true );

}

?>

Edited October 18, 201312 yr by D4Y0

You have to enqueue the script, too. Here is an example:

 

<?php
add_theme_support( 'wp_enqueue_scripts', 'menu' );
add_action('init', 'menu'); 

function menu(){
wp_register_script( 'menu', get_template_directory_uri() . '/js/menujs/jquery.js', array('jquery'), '1.0', true );
wp_enqueue_script( 'menu'); 
}
?>

 

here is a link for you: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/

D4Y0, tried it but still no effect.

 

Also I've added wp_enqueue_script and add_action but no results.. Read the link and I have no idea where it goes wrong.

I started to question the javascript itself so I checked it with HTML, and it's working normal.

 

There are no Errors or what so ever, is there something I might forget to check?

This is my Header.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> <?php wp_title(); ?> </title>

<link href="style.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"" type="text/css"" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menujs/jquery.easing.min.js"></script>

<script type="text/javascript" src="js/menujs/jquery.js"></script>
<script type="text/javascript" src="js/menujs/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/menujs/jquery-easing-compatibility.1.2.pack.js"></script>

<?php menu(); ?>
 
</head>

<body>


<div id="header"> 
	<div class="jimgMenu">
 	 <ul>
 	   <li class="landscapes"><a href="#">test</a></li>
 	   <li class="people"><a href="#">test2</a></li>
 	   <li class="nature"><a href="#">test3</a></li>
 	   <li class="abstract"><a href="#">test4</a></li>
 	   <li class="urban"><a href="http://localhost/test-2/">test5</a></li>
 	 </ul>
    </div>
</div>


</body>
</html>

I've let everything in it, thought that one must work..

 

Here is my functions.php:

<?php
 add_theme_support( 'wp_enqueue_scripts', 'menu' );
  add_action( 'wp_enqueue_scripts', 'menu' );  
 function menu() 
 {
 wp_register_script( 'menu', get_template_directory_uri(). '/js/menujs/jquery.js' );  
 wp_register_script( 'menu', get_template_directory_uri(). '/js/menujs/jquery-easing-1.3.pack.js' ); 
 wp_register_script( 'menu', get_template_directory_uri(). '/js/menujs/jquery-easing-compatibility.1.2.pack.js' ); 
 wp_register_script( 'menu', get_template_directory_uri(). '/js/menujs/jquery.easing.min.js' ); 
 wp_enqueue_script( 'menu'); 
 }
?>

I've tried a lot of possibilities but no reaction on the page at all.

 

If I load the script in the header.php, I don't have to call it in index.php as well right ?

 

I've got a idea that it's such a small thing, that annoys me the most

im no WP expert just reading up on the functions the first varable in wp_register_script has to be unique so try this

<?php

 add_theme_support( 'wp_enqueue_scripts', 'menu' );

  add_action( 'wp_enqueue_scripts', 'menu' );  

 function menu() 

 {

 wp_register_script('menu1', get_template_directory_uri().'/js/menujs/jquery.js');  

 wp_enqueue_script('menu1'); 

 wp_register_script('menu2', get_template_directory_uri().'/js/menujs/jquery-easing-1.3.pack.js'); 

 wp_enqueue_script('menu2'); 

 wp_register_script('menu3', get_template_directory_uri().'/js/menujs/jquery-easing-compatibility.1.2.pack.js'); 

 wp_enqueue_script('menu3'); 

 wp_register_script('menu4', get_template_directory_uri().'/js/menujs/jquery.easing.min.js'); 

 wp_enqueue_script('menu4'); 

 }

?>

Tried that, but no results..

The below should work for you:

 

<?php
add_action('wp_enqueue_scripts', 'menu');
function menu(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('menu2', get_template_directory_uri().'/js/menujs/jquery-easing-1.3.pack.js', array('jquery'));
    wp_enqueue_script('menu3', get_template_directory_uri().'/js/menujs/jquery-easing-compatibility.1.2.pack.js', array('jquery')); 
    wp_enqueue_script('menu4', get_template_directory_uri().'/js/menujs/jquery.easing.min.js', array('jquery'));
}
?>

Still not working unfortunately...

best way to learn how to add javascript in wp is to download an existing wp theme with menu and study its code

 

also have a look at this link on how to build wp themes

 

 

 

u r doing things wrong

Edited October 22, 201312 yr by sash_oo7

It's solved, there was a problem with loading the jquery or something. I've checked the jquery with Firebug and it showed me a HTML code instead of the js itself.

For people that come across a simulary problem, check everything with alert('$message');
If I did this from the start, I would have solved it so much faster.

 

Thanks for the help and comments though!