0

I want to use a couple of custom css files for a page template in a child theme, but looking dev tools, I see that they are not being requested on page load. The header for the page-mp3-downloader looks like:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset=utf-8>
    <title>Music Downloader App</title>
    <!-- =================  CSS Files  ================-->
    <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <?php wp_head() ?>
</head>

and the functions.php file is:

<?php
/* This enqueues the Parent style.css file for this child theme */
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

/*=============  Code Added by Me ======================================- */

/* Code to enqueue(load) the custom.css file for sgt. peppers page */
function wpb_adding_styles() {
    if (is_page_template('page-sgt_peppers.php')) {
       wp_register_style('custom-style', get_stylesheet_directory_uri() . '/custom.css');
       wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom.css');
    }

    /* Load style sheets for MP3 Downloader page if  page requested */
    if (is_page('page-mp3-downloader.php')) {
       wp_register_style('custom-style', get_stylesheet_directory_uri() . '/css/reset-mp3.css');
       wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/reset-mp3.css');
       wp_register_style('custom-style', get_stylesheet_directory_uri() . '/css/main-mp3.css');
       wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/main-mp3.css');
   }

}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');

The css file for page-sgt_peppers.php loads fine in the child-theme root. But I tried both in the root and in /css/ for page-mp3-downloader but custom css files never get requested. I've read over WP codex on enqueueing but don't see what I'm missing. Here is my directory structure child-theme. Any help appreciated.

Update: Got css file to load by using:

/* Load style sheets for MP3 Downloader page if  page requested */
    if (is_page('mp3-downloader')) {
        wp_enqueue_style('wpsx-reset-mp3-style');
        wp_enqueue_style('wpsx-main-mp3-style');
    }

Am I right in assuming because mp3-downloader was not constructed from a template but just a file I modified from page.php that is_page() is the conditional tag to use?

  • Do you still have a template comment header in the page-sgt_pepper? e.g <?php /* Template Name: Example Template */ ?> If so that is probably why the first if statement works. The reason your updated code is working (is_page('mp3-downloader')) is because the argument you are passing to is_page() now matches the slug of the page you are targeting(as aposed to the file name.) See the doc for it here – DaveLak Jun 8 '17 at 20:09
1

A few points:

First:

You are using is_page_template() on the "'page-sgt_peppers.php" enqueue then you use is_page() for "page-mp3-downloader.php".

You should use is_page_template() for both.

Second:

You are using wp_register_style() incorrectly. From the codex:

A safe way to register a CSS style file for later use with wp_enqueue_style().

Note the "later use" part. The register script function allows you to call wp_enqueue_style($handle); later on instead of listing paths and dependency over and over. You do not have to register them at all but it is good practice so I am keeping it in my suggested fix below.

You should also register them with unique handles. Codex:

$handle (string) (required)Name of the stylesheet (which should be unique as it is used to identify the script in the whole system).

That said you can try the following:

<?php

/* This enqueues the Parent style.css file for this child theme */
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
                      get_stylesheet_directory_uri() . '/style.css',
                      array( $parent_style ),
                      wp_get_theme()->get('Version')
    );

    /*Register styles for later use*/
    wp_register_style('wpsx-custom-style', get_stylesheet_directory_uri() . '/custom.css');
    wp_register_style('wpsx-reset-mp3-style', get_stylesheet_directory_uri() . '/css/reset-mp3.css');
    wp_register_style('wpsx-main-mp3-style', get_stylesheet_directory_uri() . '/css/main-mp3.css');



}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

/*=============  Code Added by Me ======================================- */

/* Code to enqueue(load) the custom.css file for sgt. peppers page */
function wpb_adding_styles() {
    if (is_page_template('page-sgt_peppers.php')) {
        wp_enqueue_style('wpsx-custom-style');
    }

    /* Load style sheets for MP3 Downloader page if  page requested */
    if (is_page_template('page-mp3-downloader.php')) {
        wp_enqueue_style('wpsx-reset-mp3-style');
        wp_enqueue_style('wpsx-main-mp3-style');
    }

}

add_action('wp_enqueue_scripts', 'wpb_adding_styles');
  • I'm sorry but now I get neither css files for either page loading. I see you left out the paths.Are they needed. Also I should point out that these pages are not from templates but page.php files that I modified. – Alan Jun 8 '17 at 17:10
  • update: I was wrong sg-peppers loads ok but mp3-downloader still not requesting css files. – Alan Jun 8 '17 at 17:26
  • Yes thanks. I am a little confused because sgt-peppers was constructed using a template and then later in experimenting with custom pages I added page- to name and removed template from admin page but is_page_template still works for that page. I guess maybe something in database is not right. – Alan Jun 8 '17 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.