Using Javascript and CSS with wordpress html

[KM0000]

I am a newbie to WP and web design. I use wordpress to build my site. How do I use external javascript and CSS files in combination with main html code to execute everything on the client-side?

Specifically: Where do I upload (in my Godaddy file manager space) JS and CSS code in an external file? Can I just create a new directory under public_html?

The reason for external files is I don't want to include the code in the main page of the website. I want to CALL the files from the local server and execute it on the browser. Also: I prefer not to enter the CSS code in the "Customize" section of the header. I want everything stored completely separately and then call it in within the main html when needed on a specific page.

Any experts here who can guide me on how to use the godaddy links to execute everything on my web page? Thanks.

[MithunRaj · Accepted solution]

Here’s how it goes:

1. Get your CSS or Javascript File ready or if it’s a remote source, get the link ready.
2.  Create a child theme
3.  Add the following code in functions.php

<?php

function add_theme_codes() {

 wp_enqueue_style( ‘style’, get_stylesheet_directory_uri().’/myexternalcode.css’, ‘all’);

}

add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );

?>

With this code, you’re creating a new action for your style sheet and calling it from the child-theme directory.  Let’s say you have a “custom.css” file that needs to be added to your website.

Add that file in wp-content/themes/childtheme through FTP, and then create a functions.php file. Then, add the code above and change the ‘/myexternalcode.css’ to ‘custom.css’ or whatever your file name is. Lastly, you have to add your functions.php.

Here is another example, if you don’t have a file but a remote source needs to be added:

<?php

function add_theme_codes() {

 wp_enqueue_style( ‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’, ‘all’);

}

add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );

?>

In the example above, we didn’t use get_stylesheet_directory_uri() because the source file is remote. Also, you can call different files from your server by using links like the ones above.

[MithunRaj · Accepted solution]

Here’s how it goes:

1. Get your CSS or Javascript File ready or if it’s a remote source, get the link ready.
2.  Create a child theme
3.  Add the following code in functions.php

<?php

function add_theme_codes() {

 wp_enqueue_style( ‘style’, get_stylesheet_directory_uri().’/myexternalcode.css’, ‘all’);

}

add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );

?>

With this code, you’re creating a new action for your style sheet and calling it from the child-theme directory.  Let’s say you have a “custom.css” file that needs to be added to your website.

Add that file in wp-content/themes/childtheme through FTP, and then create a functions.php file. Then, add the code above and change the ‘/myexternalcode.css’ to ‘custom.css’ or whatever your file name is. Lastly, you have to add your functions.php.

Here is another example, if you don’t have a file but a remote source needs to be added:

<?php

function add_theme_codes() {

 wp_enqueue_style( ‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’, ‘all’);

}

add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );

?>

In the example above, we didn’t use get_stylesheet_directory_uri() because the source file is remote. Also, you can call different files from your server by using links like the ones above.

[KM0000 · Accepted solution]

MithunRaj: Thank you for your reply. I appreciate your help. I will try my best to follow the instructions in your post to see if I can pull this off. I am a newbie. So I have to experiment with the code and see if it produces desired results. Any ways, I will give it a shot. Thanks for the tips.