Search⌘ K
AI Features
Home
Courses
WordPress—A Complete Guide

Using HTML Template for the Home Page: Part II

Explore how to customize your WordPress homepage by integrating an HTML template. Learn to replace default post loops with custom HTML, adjust image paths using WordPress functions, and properly enqueue JavaScript files to enable interactive elements like slideshows and counters.

We'll cover the following...

Homepage content

Right now, the homepage of our site shows the list of most recent posts. If we look at the template file index.html, we can see banner area and counters below the header and a two column layout showing the blog posts and events which is followed by a slideshow.

We have already copied the <header> and <footer> sections from index.html. Now we will copy everything below the closing </header> tag up till the opening <footer> tag.

The index.php file powers the homepage of the website. The file is reproduced below:

<?php
get_header();
while(have_posts()){
    the_post();?>
    <h1><a href="<?php the_permalink();?>"><?php the_title() ?></a></h1>
    <p><?php the_content() ?></p>
    <br/><hr/><br/>
<?php 
}
get_footer();
?>
index.php file

We want to keep the get_header() and get_footer() methods that load the header and footer for the page but we don’t want to display the while loop for blog posts. Instead, we will paste the HTML code copied from index.html and paste it in ...