A developer guide to adding CSS for one singular WordPress item in IM Base by matching its post slug.

Overview

IM Base can optionally load a stylesheet for an individual singular WordPress item. Place the file at assets/css/singular/{slug}.css, using the item’s post slug as the filename. This loader is intended for page-specific styling and applies to individual Pages, Posts, and public custom post type entries.

The stylesheet is requested only when the matching CSS file exists in the theme. If no matching file is present, IM Base does not request a stylesheet. Non-singular views, such as archives, search results, and post indexes, are outside the scope of this loader.

assets/css/singular/{slug}.css

File Location and Naming

For a singular view, the loader gets the queried object and continues only when it is a WP_Post. It reads that object’s post_name and sanitizes it as a filename; it does not derive the stylesheet name from the page URL.

The resulting filename maps directly to the theme’s assets/css/singular directory. For example, a post_name of company maps to assets/css/singular/company.css. The stylesheet is loaded only when that file exists.

$post = get_queried_object();
$slug = sanitize_file_name($post->post_name);
$relative_path = "/assets/css/singular/{$slug}.css";

Supported Singular Content

The is_singular() check applies to individual Pages, Posts, and public custom post type items such as News entries. It does not apply to archives, indexes, or other non-singular views.

The stylesheet name comes from the individual item’s post slug, not its content type or template. For example, a News entry with the slug release-notes uses assets/css/singular/release-notes.css; news is the post type, while release-notes identifies the specific item.

• Pages displayed as individual singular items
• Posts displayed as individual singular items
• Custom post type entries displayed as individual singular items

Static Front Page

A static front page assigned to a WordPress Page remains a singular view. IM Base uses that Page object’s post_name for the stylesheet filename, so a Page with the slug home loads assets/css/singular/home.css when the file exists.

This mapping applies to the front Page itself, not to the separate posts page. The posts page is a post index and is outside the singular CSS loader.

assets/css/singular/home.css

Loading Behavior and Order

On singular content, IM Base checks whether assets/css/singular/{slug}.css exists for the queried post slug. If the file is absent, no stylesheet is enqueued. When it exists, the theme registers it with the imb-singular-{slug} handle and uses the file’s modification time from filemtime() as its version.

The loader runs on wp_enqueue_scripts at priority 30. Its dependencies include the standard responsive stylesheet handles and any queued creator-defined styles, placing the singular stylesheet after those assets in the dependency order.

wp_enqueue_style(
    'imb-singular-' . sanitize_key($slug),
    get_theme_file_uri($relative_path),
    array_values(array_unique($dependencies)),
    (string) filemtime($file_path)
);

Limitations and Non-singular Views

The page-specific CSS loader applies only to singular content. It does not load a matching stylesheet for the posts index, other post indexes, archives, category or tag views, search results, author archives, or date archives. These views can still be styled by the theme’s standard CSS and by creator-defined CSS.

The loader uses the queried post’s post_name as the filename rather than its full hierarchical URL. Consequently, singular items with the same post_name under different hierarchical paths use the same stylesheet in assets/css/singular/{slug}.css.

• Posts page and other post indexes
• Post type, category, tag, author, and date archives
• Search results

Examples

For a Page with the slug company, use assets/css/singular/company.css. For a Post with the slug wordpress-theme-guide, use assets/css/singular/wordpress-theme-guide.css. These mappings use the content item’s slug, not its template name or URL structure.

A static front Page with the slug home uses assets/css/singular/home.css. A News custom post entry with the slug release-notes uses assets/css/singular/release-notes.css. Each file is a direct CSS stylesheet; it is not an SCSS entry point. The stylesheet is loaded only when the corresponding CSS file exists.

Page slug: company
assets/css/singular/company.css

Post slug: wordpress-theme-guide
assets/css/singular/wordpress-theme-guide.css

Static front Page slug: home
assets/css/singular/home.css

News item slug: release-notes
assets/css/singular/release-notes.css