Create WordPress Front Page

We are going to do some refactoring, that means we will copy index.php codes into front-page.php, but why. let’s see why.

  • Create a file called front-page.php

  • Copy all the content to front-page.php from index.php

  • Now the question is that, why we need to copy those? because we will crate post list into index.php


Create post list into index.php

  • This list we will take from the html called html-template > post-archive.html

  • Create file content-thumb.php into template-parts directory, the paste the below codes

<div class="card mb-3">
    <div class="row">
        <div class="col-2 text-center">
            <?php if (get_the_post_thumbnail_url()) : ?>
                <img height="200" width="200" class="img-thumbnail"  src="<?php echo get_the_post_thumbnail_url(); ?>" alt="image">
            <?php else: ?>
                <img height="200" width="200" class="img-thumbnail"  src="<?php echo get_template_directory_uri() . "/assets/images/no-image.png"; ?>" alt="image">
            <?php endif; ?>
        </div>
        <div class="col-10">
            <div class="card-body">
                <a href="<?php the_permalink() ?>">
                    <?php the_title('<h5 class="card-title">', '</h5>'); ?>
                </a>
                <div class="card-text">
                    <?php the_excerpt() ?>
                </div>
            </div>
        </div>
    </div>
</div>

  • Now copy the below codes into the index.php

<?php get_header() ?>

<main class="container">

    <?php if (is_search()): ?>
        <h1>Search Results</h1>
    <?php endif; ?>

    <div class="row">
        <div class="col-10">
            <?php
            if ( have_posts() ) :
                while ( have_posts() ) : the_post();
                    get_template_part("template-parts/content", "thumb");
                endwhile;
            endif;
            ?>
            <?php the_posts_pagination(); ?>
        </div>

        <div class="col-md-2">
            <div id="right-sidebar" class="sidebar">
                <?php dynamic_sidebar( 'h2wp-right-sidebar' ); ?>
            </div>
        </div>
    </div>
</main>



<?php get_footer() ?>

  • Here we also added codes for search result

    <?php if (is_search()): ?>
        <h1>Search Results</h1>
    <?php endif; ?>
Share