add JS and CSS function.php

Home Forums Legacy Support Support queries Styling issues add JS and CSS function.php

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #222228
    jpcabrera1234
    Participant

    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

    #222283
    Diana
    Participant
    @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.
    #222666
    jpcabrera1234
    Participant
    route to access, you give me information, I search and the files are not found, please show me how to do it
    #222729
    logan
    Member
    Hello, 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.
    #223425
    jpcabrera1234
    Participant
    /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 );
    #223468
    logan
    Member
    Hello,

    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 is wp_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 wp_enqueue_scriptsaction hook to attach different custom functions for adding scripts and styles as well, like below:

    // 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' );

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘add JS and CSS function.php’ is closed to new replies.