Custom template page - ar-to/WordPress-Theme GitHub Wiki

Here I will create a custome template page as a landing page. First create a new file. I called mine landing-template.php and add this code to the top

<?php //Template Name: Landing Page ?>

Then copy the index.php code and paste it inside this new file. Because I want to create a landing page with a full width hero image I created a custom header-{name}.php partial called header-landing.php and placed it in the same directory as the rest. Now I add the function to call this new file by replacing the `get_header()`` with

<?php get_header('landing'); ?>

Or if I decide to put my partials in a folder to better organize and keep the main directory clean then I create a folder called partials and use get_template_part( $slug, $name );

<?php get_template_part( 'partials/header', 'landing' ); ?>

I then copy the code from header.php into header-landing.php and make a few basic changes to check that its taking. I removed the site title and tagline and also have the chance to change the nav class to make it transparent and on top of the hero image if I choose to. The full code fore header-landing.php is

<!DOCTYPE html>
<html lang="en" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); //display charset ?>" />
<meta name="author" content="ariel" />
<meta name="description" content="Basic theme for wordpress.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); //displays blog title from settings>general ?></title>
<?php wp_head();?> <!--allows plugins api hooks & function.php scripts to work-->
</head>
<body <?php body_class(); //classes can be added conditionally for different templates?>>

<div class="container">
  <div class="row">
    <nav class="site-nav">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    </nav>
  </div>
</div>

Now back on the landing-template.php I added the code for adding and styling the feature image above and outside the loop since I want it to take up the entire header area. Also I will copy this code above and outside the container class since in Bootstrap it centers the div with equal margin in the browser and also because I want this image to take up the entire width of the browser. I also added the_title() hyperlink inside the div for the feature image to see it inside the hero image. The complete code for landing-template.php is

<?php //Template Name: Landing Page ?>
<?php get_header('landing'); ?>
<!--site title and tagline-->

<!--//feature image hero-->
            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
        <div id="post" class="feature-image-landing" style="background-image: url('<?php echo $thumb['0'];?>');">
        <p class="test-class">text demo</p>
        <h2><a href="<?php the_permalink(); //returns url of current post ?>"><?php the_title(); //shows post title ?></a></h2>
        </div>

<div class="container">
  <div class="row">
    
    <div class="col-md-12">
<!--//feature image-->
          <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
        <div id="post" class="feature-image-landing" style="background-image: url('<?php echo $thumb['0'];?>');">
        <p class="test-class">text demo</p>
        </div>
    </div>
    <div class="col-md-12">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <!--Markup... Display post content-->
          <h2><a href="<?php the_permalink(); //returns url of current post ?>"><?php the_title(); //shows post title ?></a></h2>
          <?php the_content(); //add the post content ?>
      <?php endwhile; ?>
      <nav>
      <ul class="pager">
      <li><?php next_posts_link( '&laquo; Previous' ); ?></li>
      <li><?php previous_posts_link( 'Next &raquo;' ); ?></li>
      </ul>
      </nav>
      <?php endif; ?>
    </div>
  </div>
</div>
<?php get_footer(); ?>

I left the image repeat as a full browser with and inside a container to help see the difference. Now to make the hero image take up the entire viewport height it add these styles to the css file

.feature-image-landing{
  height: 100vh;
  background-position: center;
  background-size: cover;
}
⚠️ **GitHub.com Fallback** ⚠️