Home › Forums › Legacy Support › Support queries › Styling issues › add JS and CSS function.php
- This topic has 5 replies, 3 voices, and was last updated 5 years, 3 months ago by logan.
-
AuthorPosts
-
August 13, 2019 at 2:04 pm #222228jpcabrera1234Participant
unfortunately I see that they do not leave some options for the modification of the styles and animations, restricted and only the code you modify it, on the creator of the page that is included in the theme, very simple also with errors that do not allow to modify the styles, and It only works with Elementor (restricted for styles) and only modification in css in the theme customization.
I want to add CSS and JS files in function.php.
Could you help me how to add the files?
I will also give a return: Give the activation of Elementor Pro,since for the quantity, for employability, ease for future people who buy their subject and also for those who are active.
I hope you take it into account
Thank you
August 14, 2019 at 8:32 am #222283DianaParticipant@jpcabrera1234, I didn't understood your question correctly what you are trying to achieve. But to add your custom js you can use this hook: wp_footer for CSS use this action hook: wp_head On these action hooks you can execute your function. You can add the code in the wplms customizer plugin as well.August 16, 2019 at 2:49 pm #222666jpcabrera1234Participantroute to access, you give me information, I search and the files are not found, please show me how to do itAugust 17, 2019 at 1:05 pm #222729loganMemberHello, instead of functions.php, add your codes in the customizer plugin that's a blank plugin and safe to use. please find this in wp-admin > Plugins > Editor > WPLMS customizer plugin > wplms-customizer.php.August 23, 2019 at 12:38 pm #223425jpcabrera1234Participant/wp-content/plugins/wplms-customizer/wplms-customizer.php I added this code in the previous path, the script code appears with the path on the web (ctrl + u), but when editing the file (new.js) the execution block I want does not appear, in the Function.php too file the file script appears, but the same thing happens the file does not run. I need to run several scripts different, in the wplms footer section, I add the code and code run correctly but I need to separate them. could you help me Thank you code add function.php and wplms-customizer.php add_action("wp_enqueue_scripts", "dcms_insertar_js"); function dcms_insertar_js(){ wp_register_script('miscript', get_stylesheet_directory_uri(). '/assets/js/new.js', array('jquery'), '1', true );August 24, 2019 at 7:28 am #223468loganMemberHello,wp_enqueue_scripts
Action Hook:WordPress provides various names (or place holders) that can be used to inject callback functionswithin WordPress core's execution lifecycle. These are called action and filter hooks.
wp_enqueue_scripts
is a WordPress action hook.Note: It's not
wp_enqueue_script
, it's plural:wp_enqueue_scripts
.With this hook, we add script or style on the correct time of WP core execution. It doesn't add any style or script itself, it simply injects our custom callback function so that WordPress may execute it on the right time. So the CODE is like:
function custom_script_style_adding_function() { // CODE for adding styles / scripts } add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );Functions for enqueuing scripts & styles:
Since generally we add both scripts and styles in HTML
tag, WordPress doesn't need separate action hooks to define when to add them, however, as scripts and styles have different HTML syntax, WordPress needs separate functions to actually add them to HTML CODE. For scripts, the function is
wp_enqueue_script()
and for styles, the function iswp_enqueue_style()
(notice the use of singular words in these function names).So when we use these functions to add our scripts and styles, the final CODE becomes something like:
function custom_script_style_adding_function() { wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' ); wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' ); Enqueue scripts & styles in separate functions:Any hook can be used to attach multiple callback functions. So we may use the
// this function only adds scripts function custom_script_adding_function() { wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' ); } add_action( 'wp_enqueue_scripts', 'custom_script_adding_function' ); // this function only adds styles function custom_style_adding_function() { wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'custom_style_adding_function' );wp_enqueue_scripts
action hook to attach different custom functions for adding scripts and styles as well, like below:This is essentially the same thing, the only difference is, here we are using separate custom functions to add scripts and styles. So other than the separation of CODE for styles and scripts, there is not much difference between this approach and the other approach above.
Further Reading:
There are other script & style related functions in WordPress that are useful for different scenario. For example, check the Related functions in the codex to know about other similar functions for scripts and styles in WordPress. This developer doc. also have some useful information.
-
AuthorPosts
- The topic ‘add JS and CSS function.php’ is closed to new replies.