Back to Community
Home / Community / Plugin → Simple custom css and js

How to Conditionally Load CSS and JS on Specific Pages with Simple Custom CSS and JS

18 threads Sep 16, 2025 Plugin → Simple custom css and js

Content

A common challenge for WordPress users is managing where custom code is executed. By default, the free version of the Simple Custom CSS and JS plugin loads all CSS and JS code on every page of a website. This can lead to performance issues, styling conflicts, or scripts running where they aren't needed.

This guide explains the built-in limitations of the plugin and provides practical, code-based solutions for controlling where your customizations appear.

Why Code Loads on Every Page

The core functionality of the Simple Custom CSS and JS free version is designed for simplicity. It adds your custom code to the site's header or footer globally. There is no built-in user interface for selecting specific pages, posts, or archives. This is a deliberate design choice by the plugin's developers.

Common Solutions for Conditional Loading

While you cannot natively prevent a code snippet from loading in the free version, you can use techniques within the code itself to control its execution. Here are the most effective methods.

1. Use CSS Selectors to Target Specific Pages

WordPress automatically adds specific CSS classes to the <body> tag, which you can use to scope your CSS rules. This method does not prevent the CSS file from loading, but it ensures the styles only apply where intended.

Example: Styling only the homepage
WordPress adds the class .home to the body on the homepage. You can prefix your styles with this selector.

body.home h1 {
    color: #ff0000;
    font-size: 2.5em;
}

Other useful body classes:

  • .page-id-123 (Targets a specific page with ID 123)
  • .postid-456 (Targets a specific post with ID 456)
  • .category-news (Targets a category archive page for 'news')
  • .single-post (Targets all single blog posts)

2. Use JavaScript Conditions to Target Specific Pages

You can wrap your JavaScript code in a conditional statement that checks for the existence of a specific element, class, or the page's URL before running.

Example: Running JS only on a specific page
This code checks if an element with the ID page-id-123 exists on the page before executing.

if (document.getElementById('page-id-123')) {
    // Your JavaScript code goes here
    console.log('This code only runs on the page with the element #page-id-123');
}

Example: Using jQuery to check for a body class
If your theme loads jQuery, you can use it for more complex checks.

if (jQuery('body.page-id-123').length) {
    // Your jQuery/JavaScript code goes here
}

3. Add Code Directly to a Page or Post

An alternative to using the plugin for page-specific code is to add it directly into the WordPress editor. This method completely bypasses the need for conditional logic.

  1. Edit the page or post where you want the code to appear.
  2. In the Classic Editor, switch to the Text tab.
  3. In the Gutenberg (Block) Editor, add a Custom HTML block.
  4. Paste your code directly. Remember to wrap JavaScript in <script> tags and CSS in <style> tags.

Important Note: This is a standard WordPress feature. The Simple Custom CSS and JS plugin is not required for this to work, and the code will remain even if the plugin is deactivated.

What You Cannot Do in the Free Version

It's important to understand the plugin's limitations to avoid frustration.

  • No PHP Execution: The plugin cannot execute PHP code. It is strictly for CSS, JS, and HTML. Attempting to add PHP code will not work, as this is a security-conscious decision by the Simple Custom CSS and JS team.
  • No Native Conditional Logic UI: The free version lacks a point-and-click interface to select where code loads. The solutions above are workarounds using the code itself.
  • No Shortcodes: The ability to output code via a shortcode (e.g., [custom-code id='5']) is a feature reserved for the Pro version.

When to Consider Other Options

If the code-based workarounds are not sufficient for your needs, you have a few paths forward:

  • Explore the Pro Version: The Simple Custom CSS and JS Pro version offers built-in features for conditional loading, including URL rules and shortcodes.
  • Use a Different Plugin: For adding PHP code snippets, a dedicated plugin like 'Code Snippets' is a more appropriate and secure tool.
  • Hire a Developer: For complex customization of how and when codes are enqueued, consulting a WordPress developer is the recommended approach.

By understanding these methods and limitations, you can effectively control your custom CSS and JS, ensuring they run only where needed and keep your site running smoothly.

Related Support Threads Support