Proper usage of javascript in developing a website using wordpress -
i'm not sure seems problem.. i've used get_template_directory(); , bloginfo(); properly.. working are.. problem is.. javascript isn't working.. i'm not sure if have add get_template_directory_uri every javascript calls. appreciated
header.php
<head> <title>blank</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='http://fonts.googleapis.com/css?family=mr+de+haviland|yanone+kaffeesatz:400,700|open+sans:400italic,400,700,600' rel='stylesheet' type='text/css' /> <!-- inluding styles --> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css" media="screen" /> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" media="screen" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/mosaic.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/prettyphoto.css" type="text/css" media="screen" /> <?php wp_head(); ?> </head> <body> <!-- top part --> <div id="banner-bg"> <div class="container"> <div class="logo"> <a href="index.html" title="emporium"><a href="index.html" title="one excelsia"><img src="<?php echo get_template_directory_uri(); ?>/img/oneexcelsiafinal.png" alt="unix logo" name="logo" width="960" height="538" id="logo" class="img-responsive"/></a></a> </div> <!-- end logo --> </div> <!-- end container --> </div> <!-- end topcontainer --> <!-- mennu --> <div id="menucontainer"> <div class="container"> <div class="row"> <div id="mainmenu" class="col-md-6 col-xs-12"> <ul class="sf-menu hidden-xs"> <li><a href="index.html" id="visited">home</a> <ul> <li><a href="index1.html">piecemaker</a></li> </ul> </li> <li><a href="about.html">about</a> <ul> <li><a href="services.html">services</a></li> </ul> </li> <li><a href="portfolio.html">portfolio</a> <ul> <li><a href="portfolio.html">portfolio 3 columns</a></li> <li><a href="portfolio.html">circle portfolio</a></li> <li><a href="portfolio.html">project detail page</a></li> <li><a href="gallery.html">gallery</a></li> </ul> </li> <li><a href="blog.html">blog</a> <ul> <li><a href="singleblog.html">single blog post</a></li> </ul> </li> <li><a href="index.html">features</a> <ul> <li><a href="index.html">columns</a></li> <li><a href="index.html">price table</a></li> </ul> </li> <li><a href="index.html">contact</a></li> </ul> </div> <!-- end mainmenu --> <div id="socialscontainer" class="col-md-6 hidden-xs"> <div class="effect1 fl hidden-xs"> <a href="#" id="hovereffect1">socialize</a> </div> <ul class="socials fr"> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/socials/twitter.png" class="poshytip" title="twitter" alt="" /></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/socials/facebook.png" class="poshytip" title="facebook" alt="" /></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/socials/dribbble.png" class="poshytip" title="dribbble" alt="" /></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/socials/google%20plus.png" class="poshytip" title="forrst" alt="" /></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/socials/deviant.png" class="poshytip" title="deviantart" alt="" /></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/socials/deviant.png" class="poshytip" title="kiko" alt="" /></a></li> </ul> </div> <!-- end socials --> <!-- end container --> </div> </div> </div> footer.php <div class="blankseparator2"><!-- --></div> <!-- end bottompart --> <!-- end main --> <!-- footer --> <div id="footercontainer"> <div class="container"> <div id="footer" class="row"> <div class="col-md-4 col-xs-12"> <h3>one excelsia </h3> <p>online staffing & internet marketing</p> <p>executive assistants, internet marketing staff, web developers & designers</p> </div> <!-- end onethird --> <div class="col-md-4 col-xs-12"> <div id="flickrcontainer"> <h3>flickr gallery</h3> <ul class="list-unstyled"> <li><img src="img/flickr1.png" alt=""/> </li> <li><img src="img/flickr2.png" alt=""/> </li> <li><img src="img/flickr3.png" alt=""/> </li> </ul> </div> <!-- end flickrcontainer --> </div> <!-- end one-third --> <div class="col-md-4 col-xs-12"> <div id="twitter"> <h3>latest tweets</h3> <div id="tweets"></div> </div> <!-- end twitter --> </div> <!-- end one-third lastcol --> </div> <!-- end fotter --> </div> <!-- end container --> </div> <!-- end footercontainer --> <!-- bottom --> <!-- footer copyright container --> <div id="footercopyrightcontainer"> <div class="container"> <p class="fl">© copyright 2012 "emporium" <a href="http://www.anarieldesign.com/">anariel design</a>. rights reserved.</p> <a class="totop" href="#top"><img src="img/totop.png" class="poshytip" title="back top" alt=""/></a> </div> <!-- end container --> </div> <!-- end footercopyrightcontainer --> <!-- end bottom --> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js"></script> <script src="js/holder.js"></script> <!-- inluding scripts --> <!-- include jquery --> <!-- include main functions --> <script src="js/functions.js" type="text/javascript"></script> <!-- tooltip --> <script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script> <!-- mosaic jquery --> <script type="text/javascript" src="js/mosaic.1.0.1.js"></script> <!-- tweets --> <script type='text/javascript' src='js/jquery.tweetable.js'></script> <!-- lettering --> <script type="text/javascript" src="js/jquery.lettering.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.hoverwords.js"></script> <!-- piecemaker --> <script type="text/javascript" src='scripts/swfobject/swfobject.js'></script> <!-- nivo slider --> <script src="js/jquery.nivo.slider.js" type="text/javascript"></script> <!-- include superfish --> <script src="js/superfish.js" type="text/javascript"></script> <!-- include prettyphoto --> <script src="js/jquery.prettyphoto.js" type="text/javascript"></script> <?php wp_footer(); ?> </body> </html>
your javascript files not included should :
<script src="<?php echo get_template_directory_uri(); ?>/js/functions.js" type="text/javascript"></script> like have used include css files.
the proper way include css , js file is, create following function in functions.php file:
function include897_script_style(){ // styles wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/mosaic.css' ); // scripts wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/functions.js', array(), '1.0.0', true ); } add_action('wp_enqueue_scripts', 'include897_script_style'); for more information take on wp_enqueue_script()
Comments
Post a Comment