Web Courses Academy Blog

How to make a WordPress theme – Part 10

Author: Carl Heaton

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.

Sharing is caring

Now that our front page template we called Home Page is complete, it is time to style the rest of the pages. Let us start with the About and Services pages. Although we can create new templates for these pages by copying our existing page-home.php template and renaming the new templates page-about.php and page-services.php, should we really do it when they are not different than our Home Page template? As you see, the only difference between them and our Home Page (page-home.php) template is in the actual content of the pages.

If you visit our About page now, you will see that it still displays the sidebar. This is because it uses the default page.php template whenever you don’t specify a custom template to use with that particular page or you don’t have a custom template such as page-about.php that contains the page’s slug (“about”). If you wish to learn more about the page hierarchy, you can examine the WordPress template hierarchy.

Now edit the About page in your WordPress dashboard and replace its content with the content of our original page design:

[code language=”html” 1=”true”]

“<h1>About me</h1>

<p>The reason I want to learn web design is so I can manage my own companies site.

I want to be able to understand HTML/CSS and make changes to our site without needing to email the web designer.</p>

<a class="cta" href="/simple-portfolio/contact">Hire me I’m cheap</a>

<h2>QUALIFICATIONS</h2>

<p class="text-left">Enthusiastically synergize reliable manufactured products with interdependent e-business. Compellingly productivate sustainable niches before cooperative opportunities. Seamlessly coordinate long-term high-impact information via magnetic technology. Proactively customize functional scenarios through performance based systems. Professionally productize wireless strategic theme areas after bleeding-edge web services.</p>

<h2>EXPERIENCE</h2>

<h2>HOBBIES</h2>

<p class="text-left">Telling bad jokes.</p>”

[/code]

Then set the template to “Home Page” and add the pet.jpg image from the 10.jpg folder as a featured image for the page. Save and refresh the page. You should see this:

As you may have already noted, we already have a lot of styles in place because we are using our page-home.php template, but we still need to add more, as well as make some other changes. Additionally, we uploaded the about-microphone.jpg file just before the “Qualifications” heading and floated it to the left with the built-in WordPress class “alignleft”. Note that when you upload the image, the link to your file will differ from mine so you will need to replace it by uploading the image yourself from the “Add Media” button of your page. We also placed some headings, paragraphs and classes into the body of our template so that we can style different elements differently. Save the page and copy the following styles into content.css. If you remember, this is the stylesheet for our page-home.php template.

[code language=”css” 1=”true”]

.entry-content h2 {

font-size: 24px;

font-size: 2.4rem;

font-family: "Times New Roman", Times, serif;

font-weight: normal;

color: #3b6a26;

text-transform: uppercase;

line-height: 24px;

clear: none;

}

.text-left {

text-align: left;

}

[/code]

Here we are establishing the necessary font size, font family and color of our h2 headings just as we did with the h1 heading previously. Next we are applying the class of text-left to certain paragraphs to align the text to the left and preserve the center alignment of the first paragraph.

If you wish to further refine your template for mobile devices, I suggest you add the following styles just below the styles we already added:

[code language=”css” 1=”true”]

@media screen and (max-width: 37.5em) {

.entry-content .cta {

width: 100%;

margin: 0 auto;

padding: 10px 0;

}

.entry-content img {

margin-bottom: 20px;

}

[/code]

This improves the look of our button at mobile screen width and adds a bottom margin of 20px below the image we just inserted.

Let us look at what we’ve accomplished so far:

Our template is almost complete but it looks like Underscores is adding a comment section below it and since we don’t have such a section in our original design, we have to remove it. Open the page-home.php template and comment the following lines of code:

Save the template, go to the page.php template, find the same lines of code and comment them as well. After you do this, refresh the About page and you should see the following result:

Now the comment section is gone as well, and our template looks just the way we want it.

Let us now do exactly the same with the Services page. Edit the page in your WP dashboard and replace its content with:

[code language=”html” 1=”true”]

“<h1>SERVICES / WHAT I’VE LEARNT</h1>

<p class="paddingbottom">After learning web design with Web Courses Bangkok I started putting everything into practice.

My code is always clean, easy to read using web standards. My Design is fun yet simple. So why not hire me!</p>

<h2>MY DESIGN INGREDIENTS</h2>

<ul>

<li>Effective Site Planning – creating sitemaps and wireframes so that know exaclty how many pages I will have and where all the content fits.</li>

<li>Awesome HTML – I know how to write clean and readable code that is great for search engines.</li>

<li>Clean Simple Design – My designs help users know where they are, what you do and what to do next .</li>

<li>Web Standard Code – I create all my HTML/CSS code to the W3C web standards guidelines. That way I know my websites are fast loading, good for SEO and accessibility.</li>

</ul>

<h2>THE RECIEPE</h2>

<ol>

<li>Planning – add sitemap and wireframes</li>

<li>Design – bringing Photoshop to a gentle boil</li>

<li>Development – semantically arranging your elements</li>

<li>Going Live – serving your website to the world</li>

</ol>”

[/code]

As you can see, we are aligning the services-iphone.jpg to the right in this page by using the “alignright” class. You should upload the image from the 10.img folder, instead of copying the anchor tag from the code above. Also, don’t forget to set the featured image to services-featured-image.jpg and the page template to “Home Page”.

And since we already added nearly all the styles we need for this page, we will only need to add the following lines in the content.css stylesheet:

[code language=”css” 1=”true”]

ul, ol {

margin: 0;

}

.paddingbottom {

padding-bottom: 40px;

}

[/code]

Here we are just overriding some default margins in Underscores and setting a bottom padding of 40px to use in our first paragraph. It only creates space between the paragraph and the rest of the content. The result looks like this: