wp enqueue style on about us page

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Method 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

Method 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

wp enqueue style on about us page

wp enqueue style on about us page

wp enqueue style on about us page

wp enqueue style on about us page

wp enqueue style on about us page

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply