Linking external JS and CSS files in WordPress

2 Views

I am new to WordPress framework. May I know how I can link an external CSS and JS file to my WordPress page? I have created a new page, but I would like to link a CSS and JS file to it.

Is creating a new template or plugin a solution? I am totally new to this.

Post Views: 2

Related posts

Leave a Reply

7 comments

  1. I know this thread is a little dated but perhaps someone else might find it useful.

    The proper way to include external CSS and JS files would be to use the wp_enqueue_style method and using the esc_url_raw on the source parameter.

    For example to include t a google font into your theme you would od the following: 

    wp_enqueue_style( 'twentytwelve-googlefonts', esc_url_raw( 'http://fonts.googleapis.com/css?family=Titillium+Web:600,300,200' ), array(), null );

  2. Depends if you want to add your CSS or JS conditionnaly. If you want them to be included in all files, just use the functions.php page of your theme folder, and add : 

                function your_scripts() {
                    wp_register_script('yourscriptname', '/PATH/TO/YOUR/SCRIPT.js', false);
                    // This registers your script with a name so you can call it to enqueue it
                    wp_enqueue_script( 'yourscriptname' );
                    // enqueuing your script ensures it will be inserted in the propoer place in the header section
            }
            add_action('wp_enqueue_scripts', 'your_scripts');
            // This hook executes the enqueuing of your script at the proper moment.

    For the stylesheet, proceed this way :

                function your_css() {
                wp_register_style( 'nameofyourCSSsheet', '/PATH/TO/YOUR/STYLESHEET.css' );
                wp_enqueue_style( 'nameofyourCSSsheet' );
            }
            add_action( 'wp_enqueue_scripts', 'your_css' );
            // same hook is used to enqueue CSS sheets

  3. Use the “Insert Header and Footer” wordpress plug-in. It does all the job for you! Just paste what should be in your into the header section of the plug-in.

  4. You can add files to your current theme. Add css-files to header (header.php in your theme folder). And add js-files to footer (footer.php in your theme folder). Theme folder can be found in path wp-content/themes/

  5. You can modify header.php file of your theme to include external JS and CSS files. Header.php is located in wp-content>themes>currently active theme>header.php.

    Open it in an editor and include a link to external or files between <head></head> tag.

  6. You don’t need to create a plugin or a new template to link to a file within an existing WordPress theme.

    As suggested if you open up your themes header.php and before the closing tag you can insert a link to the file location.

    Your CSS file will generally reside within your theme folder:
    wp-content/themes/your_theme/style.css

    You can call the stylesheet using the following WordPress function:

    Take a look at the following WordPress Codex section for info:
    http://codex.wordpress.org/Function_Reference/bloginfo

  7. You don’t need to purchase any plugin, just open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don’t need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.

    add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' );
    function radliv_child_enqueue_styles() {
    wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' );
} ;