How to Add Custom CSS/Js to Just One Page in Wordpress

How to add custom css/js to just one page in WordPress?

When you will add the page from the WordPress back end, using Pages->Add new from the menu, you have to give a title and using that title (also possible using slug and id) you can check is_page('page title here') and then can add JavaScript and css files, like

add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
function addcssAndScripts()
{
    if ( is_page('page-title') )
    {
        wp_enqueue_script( 'your_script' );
        wp_enqueue_style( 'your-style' );
    }
}

paste this code in your functions.php and check wp_enqueue_style and wp_enqueue_script for better understanding of these functions and usage, also is_page and wp_enqueue_scripts if needed.

Custom CSS and JS for each page on Wordpress

You can create different headers, different footers and totally different style and JS files and include them just wherever you need it. You can create templates for each page if they look different.

In your theme directory, create an empty php page , page-home.php.

In the beginning of the page, write the following:

<?php
/**
 * Template Name: My Custom Home Pgae
 */

 get_header();
?>

Then write all your code in HTML / PHP

In the end, include footer like this:

<?php get_footer(); ?>

Now go to your wordpress dashboard and click on Pages. Add a new page and on the right hand side, (near the publish button), you will see an option to assign page a template. You will see "Test" there because you assigned that template name to your page-home.php

Assign you page that template and your page will reflect the code you assigned.

For CSS, you can even get rid of entire style.css

You can create a file or folder to keep your css files in your theme folder and include it in the header.php file that comes with wordpress.

Custom CSS per page in Wordpress

Another option is simply replacing

<body>

with

<body <?php body_class(); ?>>

Then you can target it it via css as follows:

body.page-id-2, body.parent-pageid-2 { background-color: red; }

Where the ID is the ID of the page/parent-page you are targeting. This will keep your template clear of logic, and allow you the same customization options your current method is using.

Adding custom stylesheet for different WordPress pages

Try this

<?php 
    function my_styles_method() {

        if (is_page_template('front-page.php')==TRUE){  
        // Register the style like this for a theme:  
        wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/marquee.css');  

        // enqueue the stule  
        wp_enqueue_style( 'my-custom-style' );  

        }

        //enter code here
        // Register the style like this for a theme:  
        if (is_page_template('our-story.php')==TRUE) {
        wp_register_style( 'my-custom-style', get_template_directory_uri().'/includes/main.css');  

        // enqueue the stule  
        wp_enqueue_style( 'my-custom-style' );
        }

    add_action( 'wp_enqueue_scripts', 'my_styles_method' ); 

    ?>

// if (is_page_template('front-page.php'==TRUE) should be if (is_page_template('our-story.php')==TRUE)

Wordpress custom CSS for specific page not loading

You have to add <?php body_class(); ?> inside your opening body tag then you have to inspect the page and check the body tag for your .page-id-** class and then write CSS as per the class you get in the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
    <?php
    wp_head();
    ?>
  </head>
  <body <?php body_class(); ?> >
    <div class="change_colour">Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
  </body>
</html>

How to Add Custom CSS/Js to Just One Page in Wordpress