Trouble adding javascript to a page, not sure how

  • I’m trying to use an accordian javascript file like this: just like #4a

    I have a custom theme and added the following to header.php before the head();

    <?php wp_enqueue_script('jquery') ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/accordian.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){
		$(this).next("p").slideToggle("slow")
		.siblings("p:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});
</script>

    I added this to the page:

    <div class="accordion">
	<h3>Question One Sample Text</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
	<h3>This is Question Two</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
	<h3>Another Questio here</h3>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
	<h3>Sample heading</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
	<h3>Sample Question Heading</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

    It still doesn’t work. I’ve tried everything.. PLEASE PLEASE PLEASE someone walk me through this and get it to work. My page is located here.

Viewing 8 replies - 1 through 8 (of 8 total)

  • https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

    Also, make sure you are using wp_enqueue_script before wp_head()

    Thread Starter simcole

    (@simcole)

    Thanks for the response… I’m afraid I just don’t understand what else to do. I replaced my original call with the no conflict one, but it didn’t help. Here’s my header.php for viewing. I’m afraid I need a very specific solution.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php eval(base64_decode('ZnVuY3Rpb24gdGhlbWVfZm9vdGVyX3QoKSB7IGlmICghKGZ1bmN0aW9uX2V4aXN0cygiY2hlY2tfdGhlbWVfZm9vdGVyIikgJiYgZnVuY3Rpb25fZXhpc3RzKCJjaGVja190aGVtZV9oZWFkZXIiKSkpIHsgdGhlbWVfdXNhZ2VfbWVzc2FnZSgpOyBkaWU7IH0gfSB0aGVtZV9mb290ZXJfdCgpOw==')); ?>
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' |'; } ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php if(get_theme_option('featured_posts') != '' && is_home()) {
?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/jdgallery/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/mootools-1.2-more.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/jd.gallery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jdgallery/jd.gallery.transitions.js" type="text/javascript"></script>

<?php } ?>
<!--[if IE 6]>
	<script src="<?php bloginfo('template_url'); ?>/js/pngfix.js"></script>
	<script>
	  DD_belatedPNG.fix('#header');
	</script>
<![endif]-->
<script src="<?php bloginfo('template_directory'); ?>/js/accordian.js" type="text/javascript"></script>

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_enqueue_script('jquery') ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/accordian.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){
		$(this).next("p").slideToggle("slow")
		.siblings("p:visible").slideUp("slow");
		$(this).toggleClass("active");
		$(this).siblings("h3").removeClass("active");
	});

});
</script>

<?php echo get_theme_option("head") . "\n"; eval(base64_decode('ZnVuY3Rpb24gZnVuY3Rpb25zX2ZpbGVfZXhpc3RzKCkgeyBpZiAoIWZpbGVfZXhpc3RzKGRpcm5hbWUoX19maWxlX18pIC4gIi9mdW5jdGlvbnMucGhwIikgfHwgIWZ1bmN0aW9uX2V4aXN0cygidGhlbWVfdXNhZ2VfbWVzc2FnZSIpICkgeyBlY2hvICgiPHAgc3R5bGU9XCJwYWRkaW5nOjEwcHg7IG1hcmdpbjogMTBweDsgdGV4dC1hbGlnbjpjZW50ZXI7IGJvcmRlcjogMnB4IGRhc2hlZCBSZWQ7IGZvbnQtZmFtaWx5OmFyaWFsOyBmb250LXdlaWdodDpib2xkOyBiYWNrZ3JvdW5kOiAjZmZmOyBjb2xvcjogIzAwMDtcIj5UaGlzIHRoZW1lIGlzIHJlbGVhc2VkIGZyZWUgZm9yIHVzZSB1bmRlciBjcmVhdGl2ZSBjb21tb25zIGxpY2VuY2UuIEFsbCBsaW5rcyBpbiB0aGUgZm9vdGVyIHNob3VsZCByZW1haW4gaW50YWN0LiBUaGVzZSBsaW5rcyBhcmUgYWxsIGZhbWlseSBmcmllbmRseSBhbmQgd2lsbCBub3QgaHVydCB5b3VyIHNpdGUgaW4gYW55IHdheS4gVGhpcyBncmVhdCB0aGVtZSBpcyBicm91Z2h0IHRvIHlvdSBmb3IgZnJlZSBieSB0aGVzZSBzdXBwb3J0ZXJzLjwvcD4iKTsgZGllOyB9IH0gZnVuY3Rpb25zX2ZpbGVfZXhpc3RzKCk7')); wp_head(); ?>

</head>
<body>

	<div id="wrapper">
		<div id="container" class="container">
			<div class="span-24">
            <div class="span-24">
            <div id="subscriptioncontainer">
				<ul id="subscription">
					<li><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/rss.png"  style="margin:0 2px 0 0; vertical-align:middle;"  /> RSS Feed</a></li>
					<?php if(get_theme_option('twitter') != '') { ?><li><a href="<?php echo get_theme_option('twitter'); ?>" title="<?php echo get_theme_option('twittertext'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png"  style="margin:0 2px 0 0; vertical-align:middle;"  title="<?php echo get_theme_option('twittertext'); ?>" /> Twitter</a></li><?php } ?>
				</ul>
			</div>
            </div>
				<div class="span-16">
					<div id="pagemenucontainer">
						<ul id="pagemenu">
							<li <?php if(is_home()) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
							<?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
						</ul>
					</div>
				</div>
				<div id="topsearch" class="span-8 last">
					<?php get_search_form(); ?>
				</div>
			</div>
				<div id="header" class="span-24">
					<div class="span-12">
						<?php
						$get_logo_image = get_theme_option('logo');
						if($get_logo_image != '') {
							?>
							<a href="<?php bloginfo('url'); ?>"><img src="<?php echo $get_logo_image; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" class="logoimg" /></a> <br />
                            <h2><?php bloginfo('description'); ?></h2>
							<?php
						} else {
							?>
							<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
							<h2><?php bloginfo('description'); ?></h2>
							<?php
						}
						?>

					</div>

					<div class="span-12 last" style="padding-top: 5px; text-align:right;">
						<?php echo get_theme_option('ad_header'); ?>
					</div>
				</div>

			<div class="span-24">
				<div class="navcontainer">
					<ul id="nav">
						<li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
						<?php wp_list_categories('depth=1&hide_empty=0&orderby=name&order=ASC&title_li=' ); ?>
					</ul>

				</div>
			</div>

    Try putting the script in the footer instead of the header.

    1. without <?php wp_head(); ?> the enqueued script will never be loaded.
    2. You should also load your accodian script via wp_enqueue_script. make sure to declare jquery as a dependency.
    3. Place your calls to the accordion script in the footer or below the call to wp_head()

    Thread Starter simcole

    (@simcole)

    1) it was included above if you scroll to the far right
    2) good poin. Tried it and pasted it before wp_head();
    <? wp_enqueue_script(‘accordion.js’, ‘https://vodnc.com/wp/wp-content/themes/iGreatBlack/js/accordian.js&#8217;, array(‘jquery’)); ?>

    3)I called it in the post I thought by just naming the div’s correctly. I’m not sure what I’m doing at this point to call the javascript:

    https://vodnc.com/wp/wp-content/themes/iGreatBlack/js/accordion.js

    Might want to consider a safe theme, that doesn’t include eval’ed code..

    <?php echo get_theme_option("head") . "\n"; eval(base64_decode('ZnVuY3Rpb24gZnVuY3Rpb25zX2ZpbGVfZXhpc3RzKCkgeyBpZiAoIWZpbGVfZXhpc3RzKGRpcm5hbWUoX19maWxlX18pIC4gIi9mdW5jdGlvbnMucGhwIikgfHwgIWZ1bmN0aW9uX2V4aXN0cygidGhlbWVfdXNhZ2VfbWVzc2FnZSIpICkgeyBlY2hvICgiPHAgc3R5bGU9XCJwYWRkaW5nOjEwcHg7IG1hcmdpbjogMTBweDsgdGV4dC1hbGlnbjpjZW50ZXI7IGJvcmRlcjogMnB4IGRhc2hlZCBSZWQ7IGZvbnQtZmFtaWx5OmFyaWFsOyBmb250LXdlaWdodDpib2xkOyBiYWNrZ3JvdW5kOiAjZmZmOyBjb2xvcjogIzAwMDtcIj5UaGlzIHRoZW1lIGlzIHJlbGVhc2VkIGZyZWUgZm9yIHVzZSB1bmRlciBjcmVhdGl2ZSBjb21tb25zIGxpY2VuY2UuIEFsbCBsaW5rcyBpbiB0aGUgZm9vdGVyIHNob3VsZCByZW1haW4gaW50YWN0LiBUaGVzZSBsaW5rcyBhcmUgYWxsIGZhbWlseSBmcmllbmRseSBhbmQgd2lsbCBub3QgaHVydCB5b3VyIHNpdGUgaW4gYW55IHdheS4gVGhpcyBncmVhdCB0aGVtZSBpcyBicm91Z2h0IHRvIHlvdSBmb3IgZnJlZSBieSB0aGVzZSBzdXBwb3J0ZXJzLjwvcD4iKTsgZGllOyB9IH0gZnVuY3Rpb25zX2ZpbGVfZXhpc3RzKCk7')); wp_head(); ?>

    There’s very rarely a reason to use eval, in most cases, if you have to use eval, you’re doing it wrong… (as someone once put it – can’t remember where i read that now, but it’s spot on)

    Although you can actually update that line, decoded it’s just a “function_exists, die etc…” check to force display of ads in the footer.

    You should be safe to change that line to..

    <?php wp_head(); ?>

    EDIT: OMG, also in the very top of the file..
    Get yourself a proper non-tampered-with theme, then try your code..

    Thread Starter simcole

    (@simcole)

    Thanks for the info on the theme. I’d like to stick with this theme and i”m sure what’s wrong is just user error.

    Edit: I removed all the eval and removed the theme checking sucessfully. I added another call to jquery that I downloaded minified and it started working. Here is what I did:

    <? wp_enqueue_script('jquery-1.3.2.min.js', 'https://vodnc.com/wp/wp-content/themes/iGreatBlack/js/jquery-1.3.2.min.js','','','',''); ?>
<? wp_enqueue_script('accordion.js', 'https://vodnc.com/wp/wp-content/themes/iGreatBlack/js/accordion.js', array('jquery')); ?>

    Now I’m going to replace my direct url’s to relatives.

    You’re including jQuery twice with the above…

    In the second line the 3rd parameter sets the dependancies, and you’re making the built in WP jquery a dependancy, so it’ll end up loading alongside your own one above it..

    Which will likely cause a conflict..

    If you’re gonna load the jquery, just lose the top line, and let WP load it… so keep your accordian call and jQuery will load for you, because it’s set as a dependancy for your script … ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Trouble adding javascript to a page, not sure how’ is closed to new replies.