what is the correct way of using relative paths in wordpress theme development?

Question

I am writing a some code for wordpress theme development that I plan on reusing for future themes (maybe even uploading to github). it consist of a few dozen files and some javascript and css files as well.

the only commitment I am willing to make for the future is that all my files will be placed in the same directory, where will this directory be placed inside the theme directory is unknown.

how should I go about enqueuing files (wp_enqueue_style, wp_enqueue_script functions) if I don't know the files absolute path (get_template_directory_uri . '')?

also I hope that instead of having a dozen lines of include\\require, I can write one include file that will include the rest of the files by their relative paths.

Answer 1

A simple solution, (not necessarily the most proper way) if you're needing the path within the theme index file could be something like so:

 <?php
        $TEMPLATE_PATH = get_template_directory_uri(); 
        $TEMPLATE_PATH = parse_url($TEMPLATE_PATH, PHP_URL_PATH);
      ?>

You'd then be able to use the $TEMPLATE_PATH as a relative path like so:

<link href="<?php echo $TEMPLATE_PATH; ?>/favicon.ico" rel="shortcut icon" type="image/x-icon"/>

this would be output like the following:

<link href="/wp-content/themes/ThemesName/favicon.ico" rel="shortcut icon" type="image/x-icon"/>

Hope someone finds this useful.

Answer 2

There are two main WP functions to use to find the relative paths within a theme:

get_template_directory()

get_template_directory_uri()

You could create a theme subdirectory called 'reusable' or something appropriate, which is a top level subdirectory. Furthermore, let's say your set of files are as follows:

mytheme/reusable/loader.php
mytheme/reusable/include-me.php
mytheme/reusable/include-another.php
mytheme/reusable/js/reuse.js
mytheme/reusable/css/reuse.css

loader.php:

<?php
// add as many files as you want to this array
$include_paths = array(
    'reusable/include-me.php',
    'reusable/include-another.php',
);
// loop through the paths and include them if they exist
$template_directory = trailingslashit(get_template_directory());
foreach( $include_paths as $path ) {
    $complete_path = $template_directory . $path;
    if( file_exists( $complete_path ) ) {
        include($complete_path);
    }
}
// function to enqueue js and css
function reusable_enqueue_scripts() {
    $template_directory_uri = get_template_directory_uri();
    wp_enqueue_style( 'reusable-style', $template_directory_uri . '/css/reuse.css');
    wp_enqueue_script( 'reusable-js', $template_directory_uri . '/js/reuse.js');
}
// add function to enqueue action hook
add_action( 'wp_enqueue_scripts', 'reusable_enqueue_scripts' );

Then in your theme's functions.php file:

$reusable = trailingslashit(get_template_directory()).'reusable/loader.php';
include($reusable);

There's also a very useful WP function called get_template_part() that you can look into , might change how you're thinking about a solution.

Answer 3

您可以从WP函数下面检索主题目录URI，然后可以将文件名与相应的文件夹名一起传递。

get_template_directory_uri()

Answer 4

I ended up using dirname(__FILE__) to determine loader.php location, and substracting get_template_directory() out of it to get the relative path of my code inside the theme directory like this: $MY_PATH = str_replace(realpath(get_template_directory()),"",dirname(__FILE__)));

end result load.php:

$MY_PATH =  str_replace(realpath(get_template_directory()),"",dirname(__FILE__)));

require_once('file1.php');
require_once('file2.php');
require_once('file3.php');

function my_scripts() {
    $mypath = $GLOBALS['MY_PATH'];
    wp_enqueue_style( 'my-style', $template_directory_uri . $mypath . '/style.css');
    wp_enqueue_script( 'my-js', $template_directory_uri . $mypath . '/script.js');
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

now I can change my code directory location without editing the code in loader.php.