wp enqueue style on about us page

Question

On functions.php I have the following which works on the homepage :

function load_page_styles() {
    if (is_front_page()) {

        wp_register_style('home', get_template_directory_uri() . '/css/home.css', array(), 1, 'all');
        wp_enqueue_style('home');

        wp_register_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), 1, 'all');
        wp_enqueue_style('font-awesome');

    } else if (is_page( 'about')) {

        wp_register_style('about', get_template_directory_uri() . '/css/about.css', array(), 1, 'all');
        wp_enqueue_style('about');

    }
}

add_action( 'wp_enqueue_scripts', 'load_page_styles' );

It is working fine at it showing the css file in /wp-content/themes/roots-restaurant

<link rel="stylesheet" id="home-css" href="http://localhost:8000/wp-content/themes/roots-restaurant/css/home.css?ver=1" type="text/css" media="all">

But on about us page it does not work. It shows the path as the following, which is wrong as it is targeting the wp-admin folder:

<link rel="stylesheet" id="about-css" href="http://localhost:8000/wp-admin/css/about.min.css?ver=5.4.2" type="text/css" media="all">

About Us template is in the following:

/wp-content/themes/roots-restaurant/template-about.php

Could you help me with this.

Ronny

Answer 1

Do not use "about" as handle as it seems to be not unique and used by WordPress itself. I don't see the list of style handles is documented somewhere. Anyway, use something unique like 'rejaur-about':

<?php
function load_page_styles() {
    if ( is_front_page() ) {

        // enqueue front page styles

    } elseif ( is_page('about') ) {

        wp_enqueue_style(
            'rejaur-about', // the problem was the handle
            get_template_directory_uri() . '/css/about.css',
            array(),
            1,
            'all'
        );

    }
}

add_action( 'wp_enqueue_scripts', 'load_page_styles' );

In this particular setting the styles don't need to be registered before enqueuing them.

Off-topic: be careful with else if and elseif.

Answer 2

Update Your condition to
is_page_template( 'about.php' ) for details visit WP Official documentation
https://developer.wordpress.org/reference/functions/is_page/
https://developer.wordpress.org/reference/functions/is_page_template/#comment-497

Answer 3

it's shoud be working - example :

1 - index page view

2 - index sourse

3 - target page - no custom template for it

4 - target page sourse

5 - functions.php