skip to Main Content

i enqueue wp files for fontawesome and main.js
but fontawesome shows 403 error and main.js returns 404 error although both files exists in server
and it works on local host
but not on server
below is functions.php

function banking_files(){ 
     //css
     wp_enqueue_style('google-fonts','https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap');
     wp_enqueue_style('google-fonts2','https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;800&display=swap');
     wp_enqueue_style('google-fonts2','https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');
     //wp_enqueue_style('bootstrap',get_stylesheet_uri().'/assets/css/bootstrap.css',array(),'4.0','all');
     wp_enqueue_style('bootstrap',get_template_directory_uri().'/assets/css/bootstrap.css',array(),'4.0','all');
     wp_enqueue_style('font-awesome','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
     wp_enqueue_style('slick-theme','https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css');
     wp_enqueue_style('slick-css','https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css');
     wp_enqueue_style('custom',get_template_directory_uri().'/assets/css/style.css',array(),microtime(),'all');
     wp_enqueue_style('banking_main_styles',get_stylesheet_uri(),array(),microtime());

     //js
     wp_enqueue_script('jquery');
     wp_enqueue_script('boot-popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js');
     wp_enqueue_script('boot-js','https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
     wp_enqueue_script('fontawesome-js','https://kit.fontawesome.com/a076d05399.js');
     wp_enqueue_script('slick-js','https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js');
     wp_enqueue_script('main-js',get_template_directory_uri().'./assets/js/main.js',array(),microtime(),true);
         
 } 
 add_action('wp_enqueue_scripts','banking_files');

error screenshot in console

enter image description here

any help will be appreciated ..thanks

2

Answers


  1. The request for fontawesome returns a 403 because for whatever reason fontawesome won’t accept requests from the server your website is hosted on. Status 403 means forbidden. Copy it, save it locally and reference that instead.

    Your main-js returns a 404 because you’re trying to use a relative path, which wp_enqueue_script doesn’t like.

    get_template_directory_uri().'/assets/js/main.js' is the correct way to retrieve the path, omitting the extra period.

    Login or Signup to reply.
  2. If I’m not mistaking, any fontawesome hosted outside the fontawsome (eg: cloudfare) website in non-official. You have to go through the proper request from the start section on their website https://fontawesome.com/start. Any non-official hosting is prone to problem (eg: legal action, termination of service)

    The 4.7 version isn’t the youngest, we’re now at 5.15.3 public and 6.0.0 pro.

    It seems you’re trying to load 2 different version and are doing it so without specifying any crossorigin attributes crossorigin="anonymous", which is apparently required.

    1. Remove all fontawesome related scritps and style.
    2. Go through the proper channel https://fontawesome.com/start and get your CDN from there.
    3. Enqueue it with specifying a crossorigin="anonymous" attribute. (see the following snippet).
    4. As icons are usually part of the front line, above the fold, it’s a good idea to preload/prefetch them. (see the following snippet).
    5. Setup a local fallback, if the CDN isn’t available. (see the following snippet).

    Everything has been tested and is working locally and online.

    <?php
    add_action( 'wp_enqueue_scripts', 'wpso66883439' );
    
    if ( ! function_exists( 'wpso66883439' ) ) {
    
        function wpso66883439() {
    
            if ( ! is_admin() ) {
    
                /**
                 * Register then enqueue font_awesome_js.
                 * @link https://developer.wordpress.org/reference/functions/wp_register_script/
                 * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
                 * 
                 * Check if CDN's url is valid, if not return fallback.
                 * @link https://www.php.net/manual/en/function.fopen.php
                 * 
                 * Add rel='preload prefetch' <link> and required attributes to font_awesome_js.
                 * Filters the HTML link tag of an enqueued style & add required attributes.
                 * @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
                 */
                $url_font_awesome_js = 'https://kit.fontawesome.com/13234810930.js'; //... your CDN's url goes here
                $ver_font_awesome_js = '5.15.3'; //... script current version goes here
                $hnd_font_awesome_js = 'font_awesome_js'; /... script handle
    
                if ( false !== @fopen( $url_font_awesome_js, 'r' ) ) { //... test CDN and continue if success
                    wp_register_script( $hnd_font_awesome_js, $url_font_awesome_js, array(), $ver_font_awesome_js, true ); //... register via CDN
                } else { //... fallback to local if CDN's fail
                    wp_register_script( $hnd_font_awesome_js, trailingslashit( get_template_directory_uri() ) . 'assets/js/13234810930.js', array(), $ver_font_awesome_js, true ); //... register via local hosting
                };
    
                wp_enqueue_script( $hnd_font_awesome_js ); //... enqueue font_awesome_js
                
                add_filter( 'script_loader_tag', 'data_font_awesome_js', 10, 3 );
                if ( ! function_exists( 'data_font_awesome_js' ) ) {
                    function data_font_awesome_js( $tag, $handle, $src ) { //... here we catch the <script> tag before it's loaded and we make some changes to it, add the crossorigin="anonymous" and the rel='preload prefetch' <link>
                        if ( 'font_awesome_js' === $handle ) {
                            $tag = str_replace(
                                array(
                                    "<script", 
                                    "></script>", 
                                ),
                                array(
                                    "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' crossorigin='anonymous' /><script", 
                                    " crossorigin='anonymous'></script>",
                                ),
                                $tag
                            );
                        };
                        return $tag;
                    };
                };
            };
        };
    };
    ?>
    

    Current script is bogus. Request CDN’s script @ https://fontawesome.com/start.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search