So I have the following structure in my theme:

Themes/
- theme-name/
-- functions.php
-- style.css
-- page-directories.php

For some reason, I'm unable to link the style.css to be included for my page-directories.php file.

Here is what I have inside the functions.php:

function register_directories_style() {
    wp_register_style('style', get_template_directory_uri(), [], 1);
    wp_enqueue_style('style');
}
add_action( 'wp_enqueue_scripts', 'register_directories_style');

Here is what's inside my page-directories.php file:

<?php

/* Template Name: Directories */

?>

<!-- All CDN Scripts to be converted later -->
<link href="//maxcdn.bootstrapcdn/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery/jquery-1.11.1.min.js"></script>
<link href=".4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>

<!-- The actual panel -->
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default panel-table">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col col-xs-6">
                            <h3 class="panel-title">Panel Heading</h3>
                        </div>
                        <div class="col col-xs-6 text-right">
                            <button type="button" class="btn btn-sm btn-primary btn-create">Create New</button>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered table-list">
                        <thead>
                        <tr>
                            <th><em class="fa fa-cog"></em></th>
                            <th class="hidden-xs">ID</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td align="center">
                                <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                            </td>
                            <td class="hidden-xs">1</td>
                            <td>John Doe</td>
                            <td>[email protected]</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

I have the template selected on the page, but for some reason the style.css stylesheet won't apply to the page.

Also, how would I be able to select a stylesheet inside a folder such as css/directories.css?

So I have the following structure in my theme:

Themes/
- theme-name/
-- functions.php
-- style.css
-- page-directories.php

For some reason, I'm unable to link the style.css to be included for my page-directories.php file.

Here is what I have inside the functions.php:

function register_directories_style() {
    wp_register_style('style', get_template_directory_uri(), [], 1);
    wp_enqueue_style('style');
}
add_action( 'wp_enqueue_scripts', 'register_directories_style');

Here is what's inside my page-directories.php file:

<?php

/* Template Name: Directories */

?>

<!-- All CDN Scripts to be converted later -->
<link href="//maxcdn.bootstrapcdn/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery/jquery-1.11.1.min.js"></script>
<link href="https://cdnjs.cloudflare/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>

<!-- The actual panel -->
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default panel-table">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col col-xs-6">
                            <h3 class="panel-title">Panel Heading</h3>
                        </div>
                        <div class="col col-xs-6 text-right">
                            <button type="button" class="btn btn-sm btn-primary btn-create">Create New</button>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered table-list">
                        <thead>
                        <tr>
                            <th><em class="fa fa-cog"></em></th>
                            <th class="hidden-xs">ID</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td align="center">
                                <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                                <a class="btn btn-danger"><em class="fa fa-trash"></em></a>
                            </td>
                            <td class="hidden-xs">1</td>
                            <td>John Doe</td>
                            <td>[email protected]</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

I have the template selected on the page, but for some reason the style.css stylesheet won't apply to the page.

Also, how would I be able to select a stylesheet inside a folder such as css/directories.css?

• theme-development
• themes
• wp-enqueue-style

3 Answers 3

get_template_directory_uri() just returns the directory of the current theme, not the link to the actual stylesheet.

In functions.php try:

function register_directories_style() {
    wp_register_style('style', get_template_directory_uri().'/style.css', [], 1);
    wp_enqueue_style('style');
}
add_action( 'wp_enqueue_scripts', 'register_directories_style');

if you wanted to select a different stylesheet, you just updated the $src arguement. e.g.

function register_directories_style() {
    wp_register_style('directory_style', get_template_directory_uri().'/css/directories.css', [], 1);
    wp_enqueue_style('directory_style');
}
add_action( 'wp_enqueue_scripts', 'register_directories_style');

1 - This is what the wp_enqueue_style and wp_register_style functions take as arguments:

($handle:string, $src:string, $deps:array, $ver:string|boolean|null, $media:string );

So you can use the following code to enqueue your main style (don't forget to add the header comment section in you style.css):

function register_directories_style() {
    wp_enqueue_style("stylesheet", get_stylesheet_uri(), null, "1.0.0", "all");
}
add_action( 'wp_enqueue_scripts', 'register_directories_style');

2 - the style.css stylesheet won't apply to the Directories page you have to add the following function in your template header <?php wp_head() ?>

Part of the problem you're experiencing is the way you're adding extra scripts to your directories template. You should be enqueuing all of them. And you don't need to manually add jQuery because WordPress already loads it. Try set-up instead, with the scripts that require jQuery you just add it as a dependency like in the last enqueue line where we include bootstrap.js and then add the array('jquery').

function register_directories_style() {
    wp_enqueue_style( 'directories', get_template_directory_uri(), array(), '1' );
    wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn/bootstrap/3.3.0/css/bootstrap.min.css', array(), '3.3.0' );
    wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css', array(), '4.4.0' );
    wp_enqueue_script( 'bootstrap', '//maxcdn.bootstrapcdn/bootstrap/3.3.0/js/bootstrap.min.js', array('jquery'), '3.3.0', true );
}
add_action( 'wp_enqueue_scripts', 'register_directories_style' );