Today I learned an invaluable lesson in moving a static HTML site into WordPress. My first thought was to get the current site into a template page. This was the right call in the end but it wasn’t quite so simple.
The first thing I tried was just pasting the HTML directly into a template file and naming it with standard WordPress template conventions. I named it page-home.php and so far things were going as they should. I then created a page in the WP dashboard and named it “Home” so that it would pick up and match with the templated page I just created. Lastly, I put all the required files for the site in the appropriate directory within the WordPress theme folder so that things would work seamlessly.
When I tried viewing the page, I noticed a slight problem. None of the visual assets were loading. It was literally just HTML with no styling applied. This is where things got a little bit messy. I rummaged around Chrome’s developer tools and noticed that the URL path it was looking for things wasn’t actually in the theme folder, but the root directory of the WordPress install itself. I copied everything into the root directory of WordPress and magically, everything was working as it should.
- Template file goes in the theme with the HTML copied in.
- Resources (CSS, JS, images, etc.) go into the root of the wordpress install.
There is one slight proviso worth mentioning when it comes to creating this kind of a front page. It acts and exists outside of the WordPress package despite being for all intents and purposes built-in. The correct way to do this would be to rebuild the static HTML to accept the WordPress understood elements like the header and footer, in order to really make it seamless in the future. For our purposes, this was really unnecessary, but I would strongly recommend rebuilding your front page in WordPress if you have the time, or if you don’t need very fine control of a certain page.