Sometimes you need to put scripts on a specific page in WordPress. Frameworks
like Genesis have boxes where you
can add header or footer scripts. Most don’t, though. Here is how to load
scripts on specific pages in WordPress with the wp_enqueue_scripts hook.
In functions.php in your theme folder, you’ll need to add an action for the
wp_enqueue_scripts hook. This will be a function pointing to the script.
I’m using get_stylesheet_directory_uri() to link to the script. This means if
your theme’s main style.css is in
“example.com/wp_content/themes/twentysixteen/style.css”, your script should be
in “example.com/wp_content/themes/twentysixteen/js/script.js”.
Pick one the the scenerios below and add the code to your functions.php file
in your theme. Make a backup of it first in case you mess something up.
This will work for the whole site:
function hello_script() { wp_register_script(
'hello-script', get_stylesheet_directory_uri() . '/js/hello-script.js' );
wp_enqueue_script( 'hello-script' ); } add_action( 'wp_enqueue_scripts',
'welcome_page_script' ); This will work for just a specific page. Switch “052” with your page ID. Here is how you find the page ID.
function about_page_script() { if ( is_page('052') ) {
wp_register_script( 'about-script', get_stylesheet_directory_uri() .
'/js/about-script.js' ); wp_enqueue_script( 'about-script' ); } } add_action(
'wp_enqueue_scripts', 'about_page_script' ); If you have one of those fancy themes that generates a front page that you edit in the Customizer but it doesn’t have a page ID, but you only want it to display on the front page, don’t fret. WordPress has a is_front_page function:
function front_page_script() { if ( is_front_page() ) {
wp_register_script( 'front-page-script', get_stylesheet_directory_uri() .
'/js/front-page-script.js' ); wp_enqueue_script( 'front-page-script' ); } }
add_action( 'wp_enqueue_scripts', 'front_page_script' ); 