🛠 How to load a script and styles only on the WordPress homepage

You added a heavy slider across the entire site just for one animation on the homepage? Dozens of unnecessary kilobytes load on every page: internal posts, contacts, the sitemap. Visitors wait, and Google lowers your Core Web Vitals scores.

The problem is not plugins or the theme. The problem is that WordPress does not distinguish between pages when registering scripts by default. A single wp_enqueue_script line in functions.php, and the file loads everywhere: the homepage, the admin panel, and the login page.

Below are three working methods to enqueue scripts and styles strictly for the homepage. No optimization plugins. Just PHP and conditional WordPress tags.

💡 Quick overview:

• Identify your homepage type: static page or latest posts, because the conditional tag depends on it
• Use is_front_page() for a static homepage and is_home() for the blog page
• Place the code in your child theme's functions.php or via the Code Snippets plugin
• Verify through DevTools → Network that scripts do not load on internal pages

Step 1. Identify your homepage type

WordPress distinguishes two concepts: Front Page, what the visitor sees at the site's root URL, and Posts Page, the page that displays blog posts. They can be the same (homepage = post feed) or different (homepage = static page, while the blog lives at a separate URL).

Open the admin panel: Settings → Reading. In the "Your homepage displays" section:

• "Your latest posts": the homepage and blog page are the same. In code, use is_home() or is_front_page(); both will return true.
• "A static page" with a selected homepage: use is_front_page(). Here is_home() will return true only on the blog page (if one is assigned separately).

If you are unsure, go with is_front_page(). It is more reliable because it fires on the homepage regardless of the setting.

Step 2. Enqueue the script only for the homepage

The code goes in your child theme's functions.php file. If you do not have a child theme, use the Code Snippets plugin (step 5): editing the parent theme's functions.php will be overwritten on the next update.

The example below enqueues a JavaScript file in the footer only when the visitor is on the homepage:

1
/**
2
 * Enqueues a custom script only on the front page.
3
 * Hook location: child theme's functions.php or Code Snippets.
4
 */
5
add_action('wp_enqueue_scripts', function () {
6
    if (! is_front_page()) {
7
        return;
8
    }
9
 
10
    wp_enqueue_script(
11
        'my-frontpage-script',                         // handle — unique name
12
        get_template_directory_uri() . '/js/frontpage.js', // path to file
13
        array(),                                       // dependencies (jquery, etc.)
14
        '1.0.0',                                       // version for cache busting
15
        true                                           // true = in footer, false = in head
16
    );
17
});

Here is what happens. The wp_enqueue_scripts hook is the correct place to register front-end scripts (not init, not wp_head). is_front_page() checks that we are on the homepage. The wp_enqueue_script function adds the file to the queue, and WordPress itself inserts the <script> tag in the footer, before the closing </body>.

Note: get_template_directory_uri() returns the URL of the parent theme folder. If the file is in the child theme, replace it with get_stylesheet_directory_uri().

Step 3. Enqueue styles the same way

For a CSS file the logic is identical: conditional tag + wp_enqueue_style. The code goes into the same function as the scripts; a separate hook is not needed.

1
if (is_front_page()) {
2
    wp_enqueue_style(
3
        'my-frontpage-styles',
4
        get_template_directory_uri() . '/css/frontpage.css',
5
        array(),
6
        '1.0.0'
7
    );
8
}

The fifth parameter of wp_enqueue_style is the media type. It defaults to 'all'. If the styles are only for screens wider than 768px, specify 'screen and (min-width: 768px)'.

Combine scripts and styles in a single function. This way you avoid redundant checks:

1
add_action('wp_enqueue_scripts', function () {
2
    if (! is_front_page()) {
3
        return;
4
    }
5
 
6
    wp_enqueue_script(
7
        'my-frontpage-script',
8
        get_template_directory_uri() . '/js/frontpage.js',
9
        array(),
10
        '1.0.0',
11
        true
12
    );
13
 
14
    wp_enqueue_style(
15
        'my-frontpage-styles',
16
        get_template_directory_uri() . '/css/frontpage.css',
17
        array(),
18
        '1.0.0'
19
    );
20
});

An early return at the top of the function is cleaner than nested if blocks. The code is longer, but it reads faster.

Step 4. Special case: homepage and blog page

If Settings → Reading is set to "Your latest posts," is_front_page() and is_home() work identically. But if the homepage is a static page and the blog lives at /blog/, you need a dual check.

To enqueue a script ONLY on the blog page (not on the static homepage), use is_home():

1
if (is_home()) {
2
    // Code will only run on the posts page
3
}

To enqueue on BOTH the homepage AND the blog page, combine them:

1
if (is_front_page() || is_home()) {
2
    // Code will run on both "home" pages
3
}

For the full list of conditional tags, see the official WordPress documentation. There you will also find is_page (page by slug), is_single (single post), is_category (category archive), and dozens of other checks for granular control over loading.

Step 5. Without editing functions.php: the Code Snippets plugin

If you prefer not to touch theme files, install the free Code Snippets plugin from the WordPress.org directory. It adds a Snippets → Add New section in the admin panel: paste your code, choose to run it "on the front end," and save. The effect is the same as functions.php, but the code survives a theme switch.

Another advantage of Code Snippets: if you make a syntax error, the plugin catches the fatal error and lets you roll back the change. When editing functions.php through the admin panel, a single missing bracket takes down the entire site. Always make a full backup before editing theme files.

Verifying the result

Open your site, press F12 → the Network tab, and refresh the page. In the request list, find your script (frontpage.js or whatever you named it). Now navigate to any internal page and refresh; the script should not appear in the list.

If the script still loads everywhere, check the following:

• Is the hook definitely wp_enqueue_scripts and not init? init fires before the page context is determined, so conditional tags may return incorrect results.
• Is the file in the child theme's functions.php? The parent theme may have overridden the hook.
• Is an optimization plugin caching? Clear it.

⁉️🤔 Frequently asked questions

How does is_front_page() differ from is_home()?

is_front_page() returns true on the site's homepage under ANY setting, whether it displays the latest posts or a static page. is_home() returns true only on the blog posts page. If Settings → Reading is set to "Your latest posts," both tags return true. If the homepage is a static page, is_home() fires only on /blog/ (if one is assigned).

Why does my code in functions.php not work?

Three most common reasons. First: using the init hook instead of wp_enqueue_scripts, because conditional tags are not yet defined at init. Second: the parent theme's functions.php was overwritten by an update; always use a child theme or Code Snippets. Third: the file path is wrong. get_template_directory_uri() points to the parent theme folder, while get_stylesheet_directory_uri() points to the child theme folder. Verify by echoing the value and opening the URL in a browser.

Can I enqueue a script on several specific pages?

Yes. Replace is_front_page() with is_page(array('about', 'contact')), and the script will load on pages with the slugs about and contact. Or use is_single('post-slug') for a specific post. The full list of conditional tags is at developer.wordpress.org.

What is the difference between get_template_directory_uri() and get_stylesheet_directory_uri()?

The first returns the URL of the parent theme folder; the second returns the URL of the child theme folder. If you are working in a child theme and the file is stored there, use get_stylesheet_directory_uri(). If the file is in the parent theme (or you only have one theme, with no child), use get_template_directory_uri(). A wrong path is the number one reason a script fails to load.

Should I use $_SERVER['REQUEST_URI'] for the check?

No. $_SERVER['REQUEST_URI'] breaks on query parameters: /?utm_source=twitter no longer equals /. On top of that, some hosts include the full path with the subdirectory in REQUEST_URI. WordPress conditional tags are more reliable and work out of the box.

Takeaways: three lines that improve load speed

In practice, most sites only need a single is_front_page() and a couple of wp_enqueue_script/wp_enqueue_style calls.

Conditional script loading is not a micro-optimization. A single "heavy" slider plugin weighing 300 KB, enqueued site-wide for one homepage animation, adds half a second to the load time of every internal page. Multiply that by your visitor count, and you get lost search rankings.

The rule is simple: a file loads where it is used. For the homepage, is_front_page(). For the blog, is_home(). For a specific page, is_page('slug').

• If you have a static homepage, use is_front_page() and keep it simple.
• If the homepage is the latest posts feed, either tag will work.
• If scripts and styles repeat across several pages, extract the conditions into an array and check with in_array().

Start with an audit: open DevTools → Coverage (three dots in Network → More tools → Coverage), refresh the page, and see how many kilobytes of JS and CSS go unused. The number will surprise you. What conditional loading technique do you use? Share it in the comments.