adding js files and css files to wordpress

Question

I am new to wordpress.. I have installed my theme named 'hare'. Now I want to add some javascripts files as well as css files into the index.php page. But I am not finding the desired output.

following is the code i have written..

    <?php get_header(); ?>
    // Some content
    <?php get_footer(); ?>
<!-- JQuery libs
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- js jQuery wait for images Plugin ====================== -->
<script src="<?php bloginfo(template_directory ); ?>/javascripts/jquery.waitforimages.js"></script>
<!-- js jQuery flexslider Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.flexslider-min.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.cycle.all.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.fullscreen-min.js"></script>
<!-- js jQuery jcarousellite Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jcarousellite_1.0.1.min.js"></script>

<!-- js Fancybox Plugin ================================= -->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/jquery.fancybox.css">
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/jquery.fancybox.pack.js"></script>
<!--fancybox helpers-->

<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.css"/>
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.js"></script>
<!-- js jQuery qtip plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<!-- toTop ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/goToTop.js"></script>
<!-- js jQuery my own functions ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/functions.js"></script>


<!-- <script src="javascripts/jquery.tweet.js"></script> -->

<!-- JS twitter scripts ================================== -->
<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/EnvatoWebDesign.json?callback=twitterCallback2&amp;count=5"></script>

    <!-- End Document
    ================================================== -->
    </body>

    </html>

Is my this way is correct?? If not then please correct me..

Thank you in advance

Can you show one line and how it is not working as you want it to? Is it pointing to the wrong path, or is something else going wrong? — Pekka
– Pekka, Commented Jan 11, 2013 at 14:33
@RichardAtHome : sorry I wanedt to tag php but instead i tagged Cakephp — rupareliab
– rupareliab, Commented Jan 11, 2013 at 14:43
Your question is linked as an example on a bad question! Gratz! meta.stackexchange.com/questions/163404/… — Oscar Apeland
– Oscar Apeland, Commented Jan 11, 2013 at 15:07

joshleecreates · Accepted Answer · 2013-12-11 01:16:41Z

In your comments you may be referring to these guidelines from yahoo. There are, however a few caveats to this rule. Most importantly, Google Analytics prefers it's snippet be placed within the <head> section and won't allow you to use Analytics for Webmaster Tools authentication unless the snippet is in head.

More importantly, you don't want to include your JS and CSS files directly in your theme templates like this. It works, but it is very un-WordPress-y.

The "correct" way to include additional scripts and styles in a WordPress theme is to use the wp_enqueue_script() and wp_enqueue_style() functions within a hook in functions.php, like so:

function my_custom_styles_function() {
wp_enqueue_style( 'my-style', get_stylesheet_directory() . DS . 'javascript' . DS . 'my-plugin' . DS . 'my-plugin-style.css', array(), '1.0' );
    ...
}
add_action('wp_enqueue_scripts', 'my_custom_styles_function');

WordPress actually has jQuery included by default, although without the $ shortcut established. You can use WordPress's jQuery and start all of your custom scripts with jQuery(...); instead of $(...); but this can cause problems for some plugins. If you want to include your own version of jquery, you should first use wp_dequeue_style() to dequeue the "built-in" jQuery.

Finally, if you do want to include you scripts in the footer, the wp_enqueue_script() function has a flag, $in_footer to defer particular scripts to the footer.

Carlos E. Guillen · Accepted Answer · 2014-01-28 15:45:10Z

The answer provide by @qccreative is the right one. You should include all the js/css files you need to your page using the functions.php file that you must have within your theme. if you dont have it just create one and make a function for import your files just like the answer above.

you can even manage in what page you want to load your scripts.

also this is the safest way WP provide for including scripts in an organized way.

this hook that wordpress provide WP_ENQUEQUE_SCRIPTS its a function that will add the scripts within your action to the site.

heres another example:

function load_javascript_files(){

      wp_register_script( 'jquery-accordion', get_template_directory_uri() . '/js/jquery.accordion.js', array('jquery'),true );
      wp_enqueue_script('jquery-accordion'); 
  }

 add_action('wp_enqueue_scripts', 'load_javascript_files');

Good luck buddy

Mark · Accepted Answer · 2013-01-11 20:02:23Z

0

From the code you have put you would create a header.php file in your themes folder and include the JS in there. An example would be like follows:

    `<!DOCTYPE html>
    <html>
    <head>
    <title><?php bloginfo( 'name' ); ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="<?php bloginfo( 'template_url' ); ?>/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="<?php bloginfo( 'template_url' ); ?>/jQuery-validate.js" type="text/javascript"></script>

<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style.css" type="text/css" />            
<?php wp_head(); ?>
</head>
<body>

answered Jan 11, 2013 at 20:02

Mark

6791 gold badge7 silver badges21 bronze badges

2 Comments

rupareliab Over a year ago

thnq for help but I have read somewhere that including js and css files will increase the speed of loading any page so I have included those files at the bottom..Is this true?? and yes my problem is solved which I have asked here..

Mark Over a year ago

So I have read yes, as all the other page content is loaded before the qujery if you load them in the footer.

Pankaj Kanani · Accepted Answer · 2018-01-04 19:53:14Z

0

/**
 * Proper way to enqueue scripts and styles.
 */

    function custom_links() {
        wp_enqueue_style( 'style-name', get_stylesheet_uri() );
        wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'custom_links' );

If you need to linked your CSS file than you can use wp_enqueue_style and if you need to linked JavaScript than you can use wp_enqueue_script.

wp_enqueue_scripts this is work on frontend side of wordpress.

admin_enqueue_scripts this is works on backend side of wordpress.

I hope it's help to all people.

answered Jan 4, 2018 at 19:53

Pankaj Kanani

1379 bronze badges

Collectives™ on Stack Overflow

adding js files and css files to wordpress

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related