It is time to style the front page template you previously created and add the large featured image we have in our design just below the main menu.
If you examine this template, you will see that it makes a call to the content-page.php template through this line of code:
[code language=”php” 1=”true”]
<?php get_template_part( ‘template-parts/content’, ‘page’ ); ?>
[/code]
It means that we will have to work with this template as well. Open it, as this is where we will place our featured image.
The way we visualize featured images in our page or post templates is through the the_post_thumbnail() function. Make an empty line just below the opening article tag and enter the following line of code:
[code language=”php” 1=”true”]
<?php echo the_post_thumbnail( ‘large-thumb’ ); ?>
[/code]
As you see, we are using the large-thumb featured image, the width of which we previously specified in functions.php – 960px. This is the full width of our template and that’s exactly what we need here.
Let us now edit our front page and set a featured image.
Click on the “Set featured image” link, then on the “Media Library” link and choose a file that’s larger than 960px. There are several such images coming with the Theme Unit Test Data we previously imported into our site and you can choose any of these as long as it is wider than 960px. Although, we already have an image, which is exactly the size we need, we want our theme to be able to work with images of different sizes so that other people can easily customize their templates.
I’ve chosen a much larger featured image (1600 × 1200). Make your choice too and hit the “Update” button. You should see something similar to:
We have done it. Our theme has automatically scaled down a much larger image to the dimensions we set with the add_image_size() function in functions.php. However, if we upload an image smaller than the width of our template, an image with width of less than 960px, it won’t be centered in our content. To center it, we need to add additional markup around it and apply styles.
Ideally, we would also want this featured image-related markup to print only when we have a featured image in our page. This means we would also need to wrap the markup into a conditional statement.
Replace
[code language=”php” 1=”true”]
<?php get_template_part( ‘template-parts/content’, ‘page’ ); ?>
[/code]
with
[code language=”php” 1=”true”]
<?php
if (has_post_thumbnail()) {
echo ‘<div class="large-thumbnail clear">’;
echo the_post_thumbnail( ‘large-thumb’ );
echo ‘</div>’;
}
?>
[/code]
As you see, we are adding two classes to the new div – one to target the featured image and the other one to properly clear the div.
The only thing left with the large featured image is to center it in our content when its width is below the page width. This is accomplished with a simple rule I’ll place in our new content.css stylesheet and it looks like this:
[code language=”css” 1=”true”]
/* Featured Image */
.large-thumbnail img {
display: block;
margin: 0 auto;
}
[/code]
Just add it to the stylesheet and save the template. After reloading the front page, your featured image should be centered just like on the screenshot below:
Now our large featured image is just the size we want it and it is centered within our content. Additionally, we only print the markup we just added when the user actually sets a featured image in this template.
The final thing to do is to swap this random image with the image of our original design (home.jpg). I’ve added it to the 8.jpg folder so that you can upload it to your site and set it as a featured image anytime you want.
Immediately after the main content area, we have a heading, some body text, a button and a large picture at the bottom of the page, just above the footer.
The first thing we would like to do here is to remove the title of the page from printing in the entry-header section of our template. Edit the content-page.php template and remove the following lines of code:
[code language=”php” 1=”true”]
<header class="entry-header">
<?php the_title( ‘<h1 class="entry-title">’, ‘</h1>’ ); ?>
</header><!– .entry-header –>
[/code]
Save your work and refresh the page in the browser. The “Home” title should be gone.
Now enter the following lines of text into “text” tab of your “Home” page in the WordPress dashboard:
[code language=”html” 1=”true”]
<h1>I AM LEARNING WEB DESIGN</h1>
<p>I am currently learning how to build websites and while I may lack in experience I make up with knowledge.
Here is my first website built from scratch in HTML5 and CSS3. I hope you like it and you can:</p>
<a href="/simple-portfolio/services" class="cta">Hire me I’m cheap</a>
[/code]
Below the link, add the portfolio.jpg image by uploading it from the 8.img folder. Ensure you are inserting the image at its full width and height and not at some custom width and height the WordPress proposes. Update the “Home” page in your WordPress dashboard and refresh the front page of your site. The result should look exactly like this:
As you see, we have all the elements we need in our page, although we haven’t stilled them yet, and if you click on the “Hire me I’m cheap” button, you are directly taken to the Services page. Don’t worry that the Services page looks different and loads the sidebar we previously removed from our custom front page template. The reason for this is because the rest of the pages still use the default page.php template. We are going to style these pages later in the course.
If your link isn’t working properly, perhaps you haven’t changed your permalink structure yet. Go to Settings -> Permalinks in your Dashboard, choose “Post name” in the “Common Settings” section and click on “Save Changes”.
Now edit your “Services” page and check whether your page slug is indeed “services”. If it is not, change it accordingly.
Update the page and click on the link we added to the “Home” page. It should work properly and take you to the “Services” page.
Now it is time to style the content we just added. Open the content.css stylesheet. If you remember, this is the stylesheet we linked to our “Home Page” template.
Create a new “Content” section in the stylesheet and apply the following styles for our entry-content area, our h1 heading and the paragraph below it:
[code language=”css” 1=”true”]
/*Content*/
.entry-content {
padding: 30px;
overflow: auto;
line-height: 24px;
line-height: 2.4rem;
}
.entry-content h1 {
font-size: 36px;
font-size: 3.6rem;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
color: #3b6a26;
text-transform: uppercase;
line-height: 40px;
}
p {
display: block;
text-align: center;
color: #5e6d66;
}
[/code]
If you are familiar with CSS, these styles are self-explanatory, but if you are not, we are just applying the necessary fonts, colors and text sizes to both the h1 and p elements in our template and centering our content. We are also applying a 30px padding to the entire entry-content div and establishing the line-height property for inline elements – the lines of text in our original design.
Find the following element in your “Elements” section of style.css and either remove or comment it:
[code language=”css” 1=”true”]
*,
*:before,
*:after {
box-sizing: inherit;
}
[/code]
It only interferes with our styles.
Next, we will style the link to the services pages we worked with previously. Enter the following styles into the “Content” section of content.css:
[code language=”css” 1=”true”]
.entry-content .cta {
margin: 30px auto 60px auto;
text-align: center;
color: white;
padding: 10px 60px;
background: #7bc144;
text-decoration: none;
display: block;
width: 160px;
}
[/code]
The last thing that we would like to do in the content area of our template is to center the image horizontally. We can do that by editing the “Home” page and changing the alignment class of the image we previously inserted into it. Just change the class from alignnone to aligncenter if you haven’t already done it while adding the image with the WordPress media importer.
Having completed all these steps, we have finally styled our main content area and made it look exactly as it does in our design.
The only thing left for us to do about this template is to complete the footer. That’s next!
Here is a list of all the other parts: part 1, part 2, part 3, part 4, part 5, part 6, part 7, part 9, part 10, part 11, part 12, part 13, part 14
