Using HTML Template for Home Page: Part I

Home page template: index.php

The website we have worked on in the previous lessons has no style or design. From this lesson onward, we will make it appealing to the eyes and add WordPress functionality along the way.

We will be using a template to get started, instead of creating a website from scratch. The template contains HTML, CSS and JS files along with images. The file index.html contains the template for the homepage of our website whereas the file interior.html is the template for all the other pages in our website. This is static HTML meaning that it does not have any WordPress functionality yet. The assets folder contains the CSS style sheets and images while JavaScript files used in the template can be found in the src folder. The build folder contains the compiled JavaScript and CSS code. The template is provided as a downloadable ZIP file:

If you download these files to your system and view index.html in the web browser, you will notice that the links and buttons do not work. We will use the code from index.html and add WordPress functionality to it to dynamically pull in posts and pages from our website.

Our theme contains images, CSS and JavaScript code which we need to copy to the Excellence theme folder of our site.

See the Locating website files on the machine section to navigate to the Excellence theme folder.

Copy the assets, src, and build folders to the Excellence theme folder. Now our theme can access the style sheets, images and ...