Make Every Post Background Red in WordPress

Want to make every post background red in WordPress? This snippet does it without editing theme files or opening the Site Editor. It assumes “every post” means every single blog post (post type post). When someone opens a post, the whole page background turns red. Pages, archives and the home page keep the colours your theme gives them.

The CSS is only added on post views and only after the colour has been checked. You can change the red with a filter later, so you never need to touch the function itself. It works with classic themes and block themes.

The snippet

Put this in a small plugin, an mu-plugin (wp-content/mu-plugins/dpc-red-post-background.php) or your theme’s functions.php.

<?php
/**
 * Plugin Name: DPC Red Post Background
 * Description: Gives every single blog post a red page background.
 */

add_action( 'wp_enqueue_scripts', 'dpc_red_post_background' );

function dpc_red_post_background(): void {
	if ( ! is_singular( 'post' ) ) {
		return;
	}

	// Only a valid hex colour gets through, so a bad filter value cannot inject CSS.
	$color = sanitize_hex_color( (string) apply_filters( 'dpc_post_background_color', '#ff0000' ) );
	if ( ! $color ) {
		return;
	}

	wp_register_style( 'dpc-post-background', false, array(), null );
	wp_enqueue_style( 'dpc-post-background' );
	wp_add_inline_style( 'dpc-post-background', "body.single-post { background-color: {$color}; }" );
}

How it works

• is_singular( 'post' ) is true only when a single blog post is shown. On any other view the function returns early and adds nothing.
• WordPress adds the single-post class to <body> on those views, in both classic and block themes. The selector body.single-post is more specific than the plain body rule that themes and theme.json produce, so the red wins.
• wp_register_style() with false as the source creates an empty stylesheet handle. wp_add_inline_style() then prints the rule in a <style> tag in the head. No extra file is loaded.
• sanitize_hex_color() accepts only #rgb or #rrggbb. If a filter returns anything else, nothing is printed.

Customise it

• A different red: add_filter( 'dpc_post_background_color', fn() => '#b71c1c' );
• Pages and custom post types too: change is_singular( 'post' ) to is_singular() for every singular view, or pass an array such as is_singular( array( 'post', 'dpc_project' ) ). Then change the selector to body.single, body.page or to the matching single-{post_type} class.
• Only some posts: add a check before the CSS is added, for example has_category( 'news' ). That turns only posts in that category red.
• Adding a body class from PHP and styling it works the same way. Add WooCommerce Product Category Class to Body shows that technique.

Gotchas

• Sections with their own background stay as they are. Many block themes put a Group with a background colour around the content or header. That Group still paints over the body. If you see a white panel on red, inspect it and add its class to the selector, for example body.single-post .wp-site-blocks.
• Contrast. Dark text on #ff0000 is hard to read. Use a darker red, or also set color: #fff; in the same rule.
• Caching. If a page cache or CSS optimiser plugin is active, clear it after you add the snippet.
• The editor stays white. This is front-end CSS only, so the block editor canvas does not turn red. That is usually what you want while writing.

Prefer not to edit functions.php? Scripts Organizer lets you keep a PHP hook or CSS snippet like this inside WordPress and apply it with conditions.

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You’ll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

Leave this field empty

Email address Subscribe