{"id":52,"date":"2020-04-30T11:13:04","date_gmt":"2020-04-30T11:13:04","guid":{"rendered":"https:\/\/codexcoach.com\/?p=52"},"modified":"2022-12-28T09:33:15","modified_gmt":"2022-12-28T09:33:15","slug":"how-to-include-javascript-css-in-wordpress","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/how-to-include-javascript-css-in-wordpress\/","title":{"rendered":"How to Include JavaScript & CSS in WordPress"},"content":{"rendered":"\n

When we are customizing any wordpress theme using child theme at some time we need to enqueue any external CSS or JavaScript in site. In this case we can best way to include css and JavaScript in functions.php<\/strong> file. We can enqueue the JavaScript or CSS using wp_enqueue_script()<\/strong> or wp_enqueue_style()<\/strong> functions.<\/p>\n\n\n\n

CSS<\/h2>\n\n\n\n

You can enqueue your css in functions.php<\/strong> file using wp_enqueue_style()<\/code> function.<\/p>\n\n\n\n

<?php\n wp_enqueue_style( $handle, $src, $deps, $ver, $media );\n?><\/code><\/pre><\/div>\n\n\n\n
You can include these parameters:<\/p>\n\n\n\n
    \n
  • $handle<\/strong> is simply the name of the stylesheet.<\/li>\n\n\n\n
  • $src<\/strong> is where it is located. The rest of the parameters are optional.<\/li>\n\n\n\n
  • $deps<\/strong> refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.<\/li>\n\n\n\n
  • $ver<\/strong> sets the version number.<\/li>\n\n\n\n
  • $media<\/strong> can specify which type of media to load this stylesheet in, such as \u2018all\u2019, \u2018screen\u2019, \u2018print\u2019 or \u2018handheld.\u2019<\/li>\n<\/ul>\n\n\n\n
    If you want to include custom-style.css<\/strong> file in folder css<\/strong> in your child theme directory. You can write below in functions.php<\/strong> file.<\/p>\n\n\n\n
    <?php\n  wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '\/css\/custom-style.css',false,'1.5','all');\n?><\/code><\/pre><\/div>\n\n\n\n
    JavaScript<\/h2>\n\n\n\n
    You must load Javascript file using wp_enqueue_script()<\/code> function. Syntax of wp_enqueue_script()<\/code> is same like to using wp_enqueue_script()<\/code>.<\/p>\n\n\n\n
    <?php\n  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);\n?><\/code><\/pre><\/div>\n\n\n\n
      \n
    • $handle<\/strong> is the name for the script.<\/li>\n\n\n\n
    • $src<\/strong> defines where the script is located.<\/li>\n\n\n\n
    • $deps<\/strong> is an array that can handle any script that your new script depends on, such as jQuery.<\/li>\n\n\n\n
    • $ver<\/strong> lets you list a version number.<\/li>\n\n\n\n
    • $in_footer<\/strong> is a boolean parameter (true\/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.<\/li>\n<\/ul>\n\n\n\n
      You should enqueue custom.js<\/strong> like this in your child theme:<\/p>\n\n\n\n
      <?php\n  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '\/js\/custom.js', array ( 'jquery' ), 1.1, true);\n?><\/code><\/pre><\/div>\n\n\n\n
      Combining Enqueue Example<\/h2>\n\n\n\n
      The best way to combine all css and javascript in a single function using wp_enqueue_scripts<\/strong> WordPress action. It will look like below example. Put below code in functions.php<\/strong> file and move .css and .js file into “js” and “css” folder of child theme.<\/p>\n\n\n\n
      <?php\nadd_action( 'wp_enqueue_scripts', 'cxc_enqueue_my_styles_scripts' );\n\nfunction cxc_enqueue_my_styles_scripts() {\n\n\t\/* Enqueue google font & bootstrap css *\/\n\twp_enqueue_style( 'font-maven-css', 'https:\/\/fonts.googleapis.com\/css?family=Maven+Pro:400,500,700' );\n\twp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '\/css\/bootstrap.css' );\n\n\t\/* Enqueue bootstrap & custom script *\/\n\twp_enqueue_script( 'bootstrap-script', get_stylesheet_directory_uri() . '\/js\/bootstrap.min.js', array('jquery'), '1.0.0', true );\n\twp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '\/js\/custom.js', array('jquery'), '1.0.0', true );\n\n\t\/* Localize a registered custom-script with Ajax URL for a JavaScript variable. *\/\n\twp_localize_script( 'custom-script', 'myAjax', array( 'ajaxurl' => admin_url('admin-ajax.php') ) );\n}\n?><\/code><\/pre><\/div>\n\n\n\n
      Load CSS File on WordPress Admin<\/h2>\n\n\n\n
      Sometime you want to load CSS and JavaScript in all admin pages for any customization. You can do that using admin_enqueue_scripts<\/strong> action. You can enqueue script and style using below code.<\/p>\n\n\n\n
      <?php\nadd_action( 'admin_enqueue_scripts', 'cxc_enqueue_my_styles_scripts_in_admin' );\n\n  function cxc_enqueue_my_styles_scripts_in_admin() {\n    wp_enqueue_style( 'custom-admin-css', get_stylesheet_directory_uri() . '\/css\/custom-admin-style.css' );\n    wp_enqueue_script( 'custom-admin-script', get_stylesheet_directory_uri() . '\/js\/custom-admin.js', array('jquery'), '1.0.0', true );\n}\n?><\/code><\/pre><\/div>\n\n\n\n
      Load CSS File from Plugin on WordPress Admin<\/h2>\n\n\n\n
      <?php\nadd_action( 'admin_enqueue_scripts', 'cxc_enqueue_my_styles_scripts_in_admin_from_plugin' );\n\nfunction cxc_enqueue_my_styles_scripts_in_admin_from_plugin() {\n\twp_enqueue_style( 'custom-admin-css', plugins_url('custom-admin-style.css', __FILE__) );\n}\n?><\/code><\/pre><\/div>\n
      <\/div>","protected":false},"excerpt":{"rendered":"
      When we are customizing any wordpress theme using child theme at some time we need to enqueue any external CSS or JavaScript in site. In this case we can best way to include css and JavaScript in functions.php file. We can enqueue the JavaScript or CSS using wp_enqueue_script() or wp_enqueue_style() functions. CSS You can enqueue […]<\/p>\n","protected":false},"author":1,"featured_media":1103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aib_schema_json_ld":""},"categories":[10,6,7,12],"tags":[],"_links":{"self":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/52"}],"collection":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":6,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":1973,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/52\/revisions\/1973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/1103"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}