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