cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution
Highlighted
New

Using Javascript and CSS with wordpress html

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.

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Helper IV
Helper IV
Solution

Re: Using Javascript and CSS with wordpress html

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.

View solution in original post

Highlighted
New
Solution

Re: Using Javascript and CSS with wordpress html

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.

 

 

View solution in original post

2 REPLIES 2
Highlighted
Helper IV
Helper IV
Solution

Re: Using Javascript and CSS with wordpress html

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.

View solution in original post

Highlighted
New
Solution

Re: Using Javascript and CSS with wordpress html

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.

 

 

View solution in original post