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.
Solved! Go to Solution.
Here’s how it goes:
<?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: 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.
Here’s how it goes:
<?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: 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.