WordPress PART 3a: Start Customizing WP Themes: The Basics

This is Part 3 in my ongoing series for absolute beginner WordPress developers. If you are reading this because you finished Part 1 and Part 2, you now have a nice foundation to start making themes with WordPress.

In this tutorial I hope to give you the right tools to start customizing any WordPress theme. Along the way I will also show you some more advanced techniques, like using slider plugins and creating widget areas anywhere. So, bare with me. It turned out to be a really, really long tutorial, so I’ve sliced it into two separate parts 🙂

What You Will be Learning in Part 3a:

  1. How to Create a Child Theme,
  2. How to Create a Full Width Page Template
  3. How to Create Pages and Menus
  4. How to Use Google Fonts in a Child Theme

Before We Start:

Remember to activate your server first, and also to switch off any other MySQL services that you may have running. Log in to your WordPress Admin.

We currently have only one site on our multisite network. In Part 4 we will create a new site on our network, but for now we only need this one site. Go and look at your site, by clicking on it’s name next to the little house icon in the top toolbar. It should look something like this:

What you are looking at is the default 2016 theme. All new WordPress installations, created this year, will have this theme installed and activated by default. When you go to My Sites->Network Admin->Themes you will see that besides Twenty Sixteen, your fresh WordPress installation also comes with the 2014 and 2015 themes pre-installed. But, let’s focus on Twenty Sixteen. We will call it our parent theme, since it is the theme we are going to customize, by creating a child theme for it.

Let’s Make a Child Theme

What is a child theme and why do you need such a thing? A child theme inherits all it’s functionality and styles from its parent theme. It essentially starts out as an identical clone of its parent.

If you were to start hacking away at the parent theme and making changes directly to it, all your changes would be lost when the theme gets updated. Your child theme with its customizations will always remain safe. ALWAYS start by creating a child theme when you are customizing a theme. It will save you many headaches, tears and expletives. Also, if you decide that you do not like the changes you can simply deactivate the child theme and revert to its parent.

Go to your System Tray, click on the green icon and go to www->wordpress->wp-content->themes. You will see the folders for twentyfourteen, twentyfifteen and twentysixteen. Our child needs its own folder, so create one and name the theme whatever you’d like(without spaces in the name). It is customary to name the child theme, parentname-child, so I will call mine twentysixteen-child.

Every WordPress theme needs 2 files at minimum: style.css and functions.php. So, fire up you favourite text editor and create the following:

twentysixteen-child/style.css
/*
 Theme Name:   Twenty Sixteen Child Theme
 Description:  A child theme of the Twenty Sixteen default WordPress theme
 Author:       Your Name Here
 Template:     twentysixteen
 Version:      1.0.0
*/

These details are all we need for this exercise. More information is needed if you plan on publishing your theme to the WordPress directory. I will show you those when we start creating our own themes. For now this is all we need.

twentysixteen-child/functions.php
<?php
	add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

	function enqueue_parent_styles() {
   		wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
	}

The code above ensures that your child theme inherits the parent’s styles.

Now go to Your Site Name->Dashboard->Appearance->Themes and you should see:

You will see that your child theme is the only one without an image. I will show you how to fix that at the end of this exercise. Go ahead and click the Activate button. Congratulations! You have successfully created a child theme and activated it. If you go look at your site now, it will of course, look no different than the Twenty Sixteen theme. We have only just started.

How to Create a Full-Width Home Page

Most modern websites have a full width home page. It is a look I like for my WordPress sites. Plus, it gives me the chance to teach you how to create your own page templates.

I am going to create a bare bones full width page template, meaning without the sidebar and blog posts on the home page. It will look a little ugly at first, but I’m going to be leaving some space for us to add the other stuff I want to teach you how to use. Below is the what the finished product will look like, to give you an idea of what we are working toward. It’s obviously not great design, but that’s not our aim for this tutorial 🙂 :

The first thing to do, is to create a new folder for page templates inside your twentysixteen-child folder. So go to www->wordpress->wp-content->themes->twentysixteen-child and create a folder called page-templates.

Go to www->wordpress->wp-content->themes->twentysixteen find its page.php file. Copy the contents of that file and in your text editor and make it look like this:

twentysixteen-child/page-templates/full-width.php
<?php 
/* Template Name: Custom Full Width */ 

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		
	</main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

What have I done here?

I have given the template a name, which is very important. I have kept the call for the header get_header(); as well as the footer get_footer();. I have taken out the loop which displays blog posts in the content-area as well as the call for the sidebar get_sidebar();. So our page will have the header, the footer and a large empty content-area, for now. Call it full-width.php and save it inside the page-templates folder you just created inside your theme.

Let’s look at what we have done so far. Go to My Sites->Network Admin->Themes. Click on the Edit link below you child theme. This will take you to the Editor, which currently should look like this:

Note: The Editor is where we will make most of our changes. You can also reach it by going to My Sites->Network Admin->Dashboard->Themes

How to Create Pages and Menus

We want to activate our new page template, but where will our blog posts go? We need to create a page for it first. So, go to Your Site Name->Dashboard->Pages->Add New.

In the Enter title here input area, create a page name for your posts page. I called mine Blog. Then click on the blue Publish button on the right-hand side. That is all for now.

At the top of the page, click on Add New. In the title area create a page called Home. Then: in the Page Attributes block on the right-hand side, you will see a dropdown under Template. Select our Custom Full Width and then press Publish. See the image below:

Now we have two pages, but no way of navigating between them. Time to create a menu. Go to Appearance->Menus in the Dashboard Menu on the left.

In the Menu Name input area give your menu a name. I called mine main-menu. Then press the blue Create Menu button. In the Pages block, tick our two pages and click Add to Menu. Under Menu Settings also tick Auto add pages, which means all pages you create in future will be added to the menu and Primary Menu which is the theme’s main menu. Save your menu.

There is one thing left to do: Go to Your Site Name->Visit Site. Once you are on your home page, click the Customize link in the top toolbar. The menu below should pop up.

Click on Static Front Page. Choose A static page. Then in the dropdown under Front Page select Home and under Posts page select Blog. Click the blue Save & Publish button at the top. See the image below:

Success! We have a menu!

Note: One other thing. You may have noticed that you have a Sample Page under Pages. It is a completely unnecessary thing which we will not be using and can be deleted. Go to Your Site Name->Dashboard->Pages->All Pages. Below the sample page you will see Trash in red letters. Click on that.

How to use Google Fonts in a Child Theme:

I have chosen two Google Fonts for this exercise. For all headings and links, I will use Merriweather and for the paragraphs I will use Open Sans.

The links to all stylesheets and fonts go into header.php. Copy ALL of the contents of Twenty Sixteen’s header.php to your text editor and add the two lines below to the head. Then save it to your child theme folder as header.php

twentysixteen-child/header.php
<?php
/**
 * The template for displaying the header
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Add the two lines below -->
	<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>
	<?php wp_head(); ?>
</head>

twentysixteen-child/style.css

Below are some styles for our site. I have created a Table of Contents. You will see that all WordPress themes have one. It is important to keep your stylesheet organized, since they can become thousands of lines long. I have added the font-families for headings and paragraphs and I have also removed the body’s black background. The content area is currently 70% wide and floated to the left with a margin of -100% right. I would like it 100% wide and not floated. I do not want to change these styles for all the content areas of all future pages, so I use its unique id selector #primary. We will change more styles later.


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Typography
# Elements
# Layout
# Forms
# Navigation
	## Links
	## Menus
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
# Media
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography
---------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, a {
	font-family: 'Merriweather', serif;
	text-transform: uppercase;
}

p {
	font-family: 'Open Sans', sans-serif;
}

/*--------------------------------------------------------------
# Elements
---------------------------------------------------------------*/

body {
    background: none;
}


/*--------------------------------------------------------------
# Layout
---------------------------------------------------------------*/

#primary {
    float: none;
    margin-right: 0;
    width: 100%;
}

Adding Media to WordPress

Since we are going to be creating a slider in the next part, I created 5 quick images for our use. They are some famous quotes that I quickly made into 5 poster images, mainly because I was not in the mood to search for public domain images and these took 10 minutes to make. You can download them from here. In that download, you will also find other resources that we will be using in Part3b. You may use or change them in any way you like, I make no claim to them.

Once you have your images, go to My Sites->Your Site Name->Dashboard->Media->Add New:

Here you can either drag and drop the images from your computer, or select them from their directory. That’s all for this part. Look out for the next part, coming really soon!

What You Will be Learning in Part 3b:

  1. How to Install Your First Plugin
  2. How to Create a Full Width Responsive Slider
  3. How to Create a Widget Area Anywhere with PHP
  4. How to Create a Widget Area with Plugins
  5. How to Change the CSS Styles of a Child Theme

Until then,

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *