Feature Page Template

So as mentioned in my previous post, a client wants a template with specific styling.

Designed for pages with a featured image in a 3:2 ratio (such as 300 width by 200 height).

This styling included an image (intended to be a logo) layered over the top left of the featured image.

I was also asked to place the header on the bottom left of the image with a curved black background behind the text.

Creating The Template

First you’ll want to copy the “Page-templates” file from the Understrap parent theme.

Next rename the template you use (in my case “fullwidthpage”) to “featurepage”.

Then delete all templates within your copy of the file except “featurepage”.

Now add the “Page-templates” file to your child theme.

Voila you have a new page template to work with.

Styling in Loop Templates

Now you can change the look of the content in the “loop-templates/content-page.php” template (import from Understrap if your child theme doesn’t contain this file and template).

This code places the Feature Page headers into the same container as the logo image and the header.

It also hides the header on the front page (just comment that out if you don’t do that).

	<!-- 	Feature Page Styling -->
	<?php
	if(is_page_template( 'page-templates/featurepage.php' )) {
		?>
		<div id="container" style="position: relative; width: 100%;">
			<?php echo get_the_post_thumbnail( $post->ID, 'full' ); ?>
			
			<div id="innerdiv1" style="z-index: 2; position: absolute; text-align: left; color: white;">
				<img src="https://davidstockdalescrapcode.co.uk/wp-content/uploads/2020/09/cropped-D-Logo.jpg" 
					 alt="" style="" class="feature-logo"/>
				
			</div>
			
			
			<div id="innerdiv2" style="z-index: 3; position: absolute; text-align: left; color: white;">
				<header class="entry-header">
					<div class="box1">
						<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
					</div>

				</header>
			</div>
		</div>
<!-- 	End Feature Page Styling -->
	
	
		<?php
	} else {
		 ?>
		<header class="entry-header">

			<?php if(!is_front_page()) {
				the_title( '<h1 class="entry-title">', '</h1>' ); 
			} ?>

		</header>
	
		<?php echo get_the_post_thumbnail( $post->ID, 'full' ); ?>
	
	<?php
	}
?>

Then you simply style the template using the following Additional CSS:

/**
 * Quick and dirty centering 
 * of featured image in
 * container.
 */
article>div> img.wp-post-image {
	min-width: 100%;
}

/**
 * Styles the contents of
 * the custom html
 * used to overlay
 * text onto images.
 */
#innerdiv1 {
	width: 100%;
	top: 0%;
}
.feature-logo {
	margin-left:5%!important; 
	width: 20%;
	height: 20%;
}
#innerdiv2 {
	bottom:0%;
	margin-left:5%!important;
}
#innerdiv2  h1 {
	font-size: 2.5em;
}

/**
 * Styles the entry title
 * header on the feature
 * page template.
 */
body.page-template-featurepage h1.entry-title {
	background-color:black!important;
	border-radius: 15px 15px 0px 0px;
	padding-left:10px;
	padding-right:10px;
	text-transform:unset;
	margin-top:0px!important;
	margin-bottom:0px!important;
}

/**
 * Reduces the size of the 
 * header on devices with
 * certain sized screens.
 */
@media only screen and (max-width: 1199px) {
	#innerdiv2  h1 {
		font-size: 1.5em;
	}
}
@media only screen and (max-width: 385px) {
	#innerdiv2  h1 {
		font-size: 0.9em;
	}
}

And you should have a feature page template selectable when editing a page in Understrap.