Search code examples
phpjquerywordpresswoocommercewoocommerce-theming

Enqueue JS and jQuery to head of specific wordpress pages


I'm looking to add jQuery function to the head of specific pages on WordPress. It's to allow accordions to be closed after being opened.

I only require to use it on -> WooCommerce Single Product pages, FAQ page and Contact us page.

  • Page Slugs = ('faqs','contact')
  • is_singular('product') for Single Product Page

Action added to functions.php - It saves successfully but doesn't work. Not sure what I've done wrong.

function my_closeaccordionscript() {
    if( is_page( array( 'faqs','contact') ) ){
        wp_enqueue_script( 'toggle-script', '/assets/js/accordiontoggle.js', array(), '1.0.0', true );
    }
    if(is_singular('product')){
        wp_enqueue_script( 'toggle-script', '/assets/js/accordiontoggle.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_closeaccordionscript' );

This is the file content of 'accordiontoggle.js' which is saved in child theme directory... wp-content/themes/child-theme/assets/js/accordiontoggle.js

EDIT:

The answer was to use get_theme_file_uri()

{wp_enqueue_script( 'script-name', get_theme_file_uri('/assets/js/accordiontoggle.js'), array(jquery), '1.0.0', true );}

Solution

  • Stack member Ruvee provided great assistance with this problem, but his answer / comments seem to have disappeared.

    We tried various things, but I finally got it to work by adding get_theme_file_uri()to the file source.

    {wp_enqueue_script( 'script-name', get_theme_file_uri('/assets/js/accordiontoggle.js'), array(jquery), '1.0.0', true );}