Where to put media files when adding custom template to a theme?

admin管理员组

文章数量:1133918

Goal

I need to use a legacy html static page for the homepage of a newly installed wp website. I used this answer, the second method, to add a template to my theme and to set the settings > reading parameter to use this template for the homepage.

Question

My html, revamped in a a php file is now on /wp-content/themes/CURRENT-THEME/home.php but I have static files that goes with this page (css, js and images), where should I upload it ?

More context

To further describe the used method, I copy here what I did, it's an extract from the original comment:

• Add a home.php (yes, PHP file) to your active theme directory: /wp-content/themes/CURRENT-THEME/home.php.
• Place the following "Page Template Header" code in that file (leave a note to your future self/fellow devs that say where the file is so it's less confusing):

<?php
    /*
     * Template Name: My HTML Homepage
     */
?>
<!-- This page is generated outside of WP by: /wp-content/themes/CURRENT-THEME/home.php -->
<!-- Your HTML Code Here –>

• Add a new Page with Pages > Add New with a recognizable name, such as "My HTML Homepage"
• On the right hand side, in the Template selector, choose "My HTML Homepage" as the template.
• In Settings > Reading change "Your Homepage Displays:" to "A Static Page", and pick the "My HTML Homepage" page you just added.

Goal

I need to use a legacy html static page for the homepage of a newly installed wp website. I used this answer, the second method, to add a template to my theme and to set the settings > reading parameter to use this template for the homepage.

Question

My html, revamped in a a php file is now on /wp-content/themes/CURRENT-THEME/home.php but I have static files that goes with this page (css, js and images), where should I upload it ?

More context

To further describe the used method, I copy here what I did, it's an extract from the original comment:

• Add a home.php (yes, PHP file) to your active theme directory: /wp-content/themes/CURRENT-THEME/home.php.
• Place the following "Page Template Header" code in that file (leave a note to your future self/fellow devs that say where the file is so it's less confusing):

<?php
    /*
     * Template Name: My HTML Homepage
     */
?>
<!-- This page is generated outside of WP by: /wp-content/themes/CURRENT-THEME/home.php -->
<!-- Your HTML Code Here –>

• Add a new Page with Pages > Add New with a recognizable name, such as "My HTML Homepage"
• On the right hand side, in the Template selector, choose "My HTML Homepage" as the template.
• In Settings > Reading change "Your Homepage Displays:" to "A Static Page", and pick the "My HTML Homepage" page you just added.

• page-template

Share Improve this question edited Oct 12, 2023 at 13:49 AxZxP asked Oct 12, 2023 at 13:47 AxZxPAxZxP 2333 bronze badges 1

• note that WordPress will already use home.php so everything after step 1 is completely optional and not necessary. People tend to suggest turning it into a page template and assigning it to a page so that they can then store post meta and use page builders to construct it, which isn't what you want from the sounds of it – Tom J Nowell ♦ Commented Oct 12, 2023 at 13:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I used this answer, the second method, to add a template to my theme and to set the settings > reading parameter to use this template for the homepage.

Creating and filling home.php was the only necessary step. You did not need to create a page, put a PHP comment at the top of home.php to turn it into a page template, go into settings etc etc. You can create a homepage template by creating a home.php and no other steps, that's the entire process from beginning to end.

The reason you might turn the homepage template into a page template, then create a page and assign it is because some people use page builder plugins, and those need a page to save their information to.

Another reason you might add the page template header but not create a page is if you want to create a second but separate page and reuse the homepage template.

Also take a look at frontpage.php and the difference, especially if you plan to use the settings that were mentioned. The "front page" is the first page of your main post archive, which for most sites is also the homepage out of the box.

I have static files that goes with this page (css, js and images), where should I upload it ?

Inside your theme, but there is no canonical correct location for them. It's entirely up to you. For example some people put their images in an images subfolder. Some people have an assets folder with a css subfolder. Some people use SCSS/SASS/PostCSS and build that into a big CSS bundle in a build folder, etc.

All that matters is how you load it, and that WordPress is aware of the CSS/JS files.

So place the files anywhere you want inside your themes folder. To reference them and get their URLs, do not hardcode them, instead use these two functions:

• get_template_directory_uri() will return the path of your theme/parent theme. e.g. <?php echo get_template_directory_uri(); ?>/style.css will print out the absolute URL of your themes style.css
• get_stylesheet_directory_uri() is similar but will return the path to the current active theme. This usually means your theme, but if a child theme is active it will be the child theme and these two functions return different values.

For CSS and JS

It will be tempting to hardcode script and style tags referencing your CSS, don't do that!

Instead, use the enqueuing system, and if ( is_home() ) {. This way you keep compatibility with plugins, get control over the order WP prints out scripts, and can update the version strings it uses.

Further Reading

• https://developer.wordpress.org/reference/functions/is_home/
• https://developer.wordpress.org/reference/functions/wp_enqueue_style/
• https://developer.wordpress.org/reference/functions/wp_enqueue_script/
• https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/
• https://developer.wordpress.org/reference/functions/get_template_directory_uri/

An Aside: Block Templates

Modern WP block themes use .html files in a templates folder as a starting point. If your legacy static HTML templates HTML tags conform to standard post HTML, aka there are no script tags, no iframes etc, then you could put the whole thing in a custom HTML block, then extract parts out piece by piece. This would even allow you to upload your images from the site editor with a point and click GUI, even replace parts with WordPress blocks that the end user can modify, and apply design rules.

Keep in mind this isn't a way to put arbitrary HTML of any kind in there, and these files do not have HTML head or body tags, you can't put link tags etc either, it's limited to the subset of allowed HTML tags that posts and pages can contain.

本文标签： Where to put media files when adding custom template to a theme