Add JavaScript to a Custom Template Pages

  • ezombie

    (@ezombie)


    12 years, 7 months ago

    So I’m trying to add JavaScript to a custom template. I’ve gotten the JavaScript to work perfectly on a static site. However, I’m transitioning the static site into wordpress, to simplify adding pages to the menus.

    Any way I have the JavaScript file linked in the template header like this:

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>https://www.ortnergraphics.com/compressed.js"></script>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>

<link href="https://www.ortnergraphics.com/Logos.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead-portfolio" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

<div id="headerContainerLayouts">
<div id="Portfoliologo"><a href="https://www.ortnergraphics.com"><img src="http://ortnergraphics.com/ortnergraphics/wp-content/uploads/2013/10/og-logo-ko.png" alt="Ortner Graphics Logo" border="0" onmouseover="this.src='http://ortnergraphics.com/ortnergraphics/wp-content/uploads/2013/10/og-logo-hover.png'" onmouseout="this.src='http://ortnergraphics.com/ortnergraphics/wp-content/uploads/2013/10/og-logo-ko.png'" /></a></div>
</div><!-- Close Header Container --> 

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->

	<div id="main" class="wrapper">

    Now on my static site, I have some functions (I think that’s what they are anyway, sorry I’m a really lousy developer that’s why I’m using WordPress) that are supposed to go just above the bottom of the </body> tag.

    So I have it set up like so:

    <?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
	</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">
		<div class="site-info">

		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->
<div id="footertextcontainer">
    <p class="textfooterparagraph"><a href="https://www.OrtnerGraphics.com/index.html" rel="nofollow">Home</a> • <a href="https://www.OrtnerGraphics.com/Logos.html" target="_self" rel="nofollow">Logos</a> • <a href="https://www.OrtnerGraphics.com/layouts.html" target="_self" rel="nofollow">Layouts</a> • <a href="https://www.OrtnerGraphics.com/illustrations.html" target="_self" rel="nofollow">Illustrations</a> • <a href="https://www.OrtnerGraphics.com/promotional-items.html" target="_self" rel="nofollow">Promotional Items</a> • <a href="https://www.OrtnerGraphics.com/site-design.html" target="_self" rel="nofollow">Site Design</a> • <a href="flash-banners.html" target="_self" rel="nofollow">Flash Banners</a> • <a href="https://www.ortnergraphics.com/stock-photography/" target="_self" rel="nofollow">Stock Photography</a> • <a href="services.html" target="_self" rel="nofollow">Services</a> • <a href="https://www.OrtnerGraphics.com/designofthetimes/" target="_self" rel="nofollow">Blog</a> • <a href="https://www.OrtnerGraphics.com/resume.html" target="_self" rel="nofollow">Resume</a> • <a href="https://www.OrtnerGraphics.com/services/historical-documentation-writing.html" target="_self">Civil War Articles</a> • <a href="https://www.ortnergraphics.com/contact.html" target="_self" rel="nofollow">Contact</a> • <a href="sitemap.xml" title="sitemap" target="_new">Sitemap</a></p>
  <p class="textfooterparagraph"> ©2006-2013 All images, designs, logos, photographs or text presented on
OrtnerGraphics.com are the sole property of their respective owner or Eric Ortner. All rights reserved. <br/>
    Use of any image without prior consent from Eric Ortner or the artwork's owner is strictly prohibited.</p>
  </div>

<?php wp_footer(); ?>

<script type="text/javascript">
	$('slideshow').style.display='none';
	$('wrapper').style.display='block';
	var slideshow=new TINY.slideshow("slideshow");
	window.onload=function(){
		slideshow.auto=false;
		slideshow.speed=5;
		slideshow.link="linkhover";
		slideshow.info="information";
		slideshow.thumbs="slider";
		slideshow.left="slideleft";
		slideshow.right="slideright";
		slideshow.scrollSpeed=4;
		slideshow.spacing=5;
		slideshow.active="#fff";
		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
	}
</script>

</body>
</html>

    So when I set it up this way, not only does the JavaScript not function, but the page content completely disappears. Can somebody tell me what I’m doing wrong?

The topic ‘Add JavaScript to a Custom Template Pages’ is closed to new replies.