How can I write specific CSS for a specific page in word press?-CodePudding

I want to make differently stylized pages by wordpress.

I tried the Simple Custom CSS plugin. But it didn't work.

CodePudding user response：

Use the "is_page()" function to check the page ID or slug and only enqueue the CSS on the specific page.

<?php
/*
Plugin Name: My Custom CSS
Description: This plugin adds custom CSS to specific pages
Version: 1.0
Author: Your Name
*/

function my_custom_css() {
    if (is_page('about-us')) {
        wp_enqueue_style( 'my-custom-css', plugin_dir_url( __FILE__ ) . 'my-custom-css.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_css' );

CodePudding user response：

Option1: WordPress automatically adds a unique class to the <body> tag of each page, so you can target that class in your CSS. You can use the body_class() function to output the class in your theme's HTML, then use that class to target the specific page in your CSS.

Option2: If you're using a custom page template, WordPress will also add a class to the <body> tag that corresponds to the template name. You can use that class to target the specific page in your CSS.

Option3: WordPress also adds a class to the <body> tag that corresponds to the page ID. You can use that class to target the specific page in your CSS.