Ex04: Building a Custom WordPress Theme — Part 1: Converting an HTML file into PHP templates

Part 1: Converting an HTML file into PHP templates.

Background

Templates, along with style.css, are the essential components of a WordPress theme. Template files are made up of HTML, PHP code, and WordPress Template Tags, and are used to generate the pages requested by viewers. Once assembled, the template and content pulled from the database are delivered to the browser as HTML and CSS.

The complete list of template files recognized by WordPress can be found at codex.wordpress.org.

View “Anatomy of a WordPress Theme” from Yoast.

Important Theme Files:

Style Sheet: Required
style.css: The main stylesheet. This must be included with your Theme, and it must contain the information header for your Theme.; Template Files
index.php: The main template. If your Theme provides its own templates, index.php must be present.; The following files, if present in your theme, will replace index.php when necessary:
comments.php: The comments template.
front-page.php: This template, if present, will be used as your static landing page.
home.php: The home page (Blog Posts Index) template, which is the front page by default. If you use a static front page this is the template for the page with the latest posts.
single.php: The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
page.php: The page template. Used when an individual Page is queried.; Note: To have WordPress reveal what specific template page is being used to display a page, install the Show Current Template plugin.

Custom Template Files

You can create custom template files for any page. For example, if you wish to have an inside page with a sidebar and one without, you can create page.php to be the default (with a sidebar), but then duplicate that page, name it something like page-noside.php and remove the sidebar.

Custom template pages must include the Template Name, commented out as shown below, within the opening php function. The name that you choose will show up as an available template under “Page Attributes” in the WordPress dashboard.

<?php /* Template Name: CustomPageT1 */ ?>

PHP Calls to Join template parts together

The following template files are typically included together using PHP calls in any of the template files above:

footer.php
header.php
sidebar.php

PHP calls look like this:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Fix Hard Coded Links to Images

In many instances, WordPress uses Template Tags instead of hardcoded HTML so that pages can be assembled dynamically as needed.

For example, instead of embedding an image by linking to an images folder like this:

 <img src="images/banner.png" alt="banner" />

the href would look like this:

<img src="<?php echo get_template_directory_uri(); ?>/images/banner.png" alt="banner" />

Instructions

DOWNLOAD the Ex04 Resource Files.zip archive and expand into “ex04-template-files” folder. (On a Mac, if your browser does not automatically expand the .zip archive, double-click on it to extract the folder. On Windows, select the downloaded .zip archive and click the Extract button at the top of the File Explorer window.) You will upload this theme folder to wp-content/themes later in this exercise.

ADD TEMPLATE IDENTIFIER CODE TO CSS FILE
Open style.css in Atom and add the following lines starting at line 1 so that WordPress can identify it as a theme:

/* Theme Name: ex04theme 
Author: The UB ART 320 Class 
Author URI: http://ubwp.buffalo.edu/art320/ 
Description: This is a theme created for Exercise 4. 
Version: 1.0 */

SPLIT INDEX.HTML INTO SEPARATE TEMPLATE PIECES—header, index, sidebar, footer
- Open index.html in Atom. Copy lines 1 through 21 (from the DOCTYPE declaration through to the closing header tag) and paste into a new document titled header.php.
- In index.html, copy lines 22 through around 25 (from the opening main tag through the closing main tag) to a new doc named index.php.
- Copy lines 26 through 29 (the aside element) into a new file named sidebar.php.
- Copy lines 30 through 33 into a new file named footer.php.
INSERT THE TEMPLATE TAGS (PHP Calls) to join all template parts together when index.php loads
In index.php, copy this PHP call to a new line at the very top of the file:
```
<?php get_header(); ?>
```
Copy these PHP calls to a new line after the closing <main> tag:
```
<?php get_sidebar(); ?> 
<?php get_footer(); ?> 
```
INSERT ADDITIONAL TEMPLATE TAGS to add special WP code in the <head> and <footer> areas
WordPress requires the loading of wp_head and wp_footer code in order to use certain scripts and plugins.
In header.php, copy and paste this PHP call before the closing HEAD tag:
```
<?php wp_head(); ?>
```
Copy and paste this PHP call before the closing BODY tag:
```
<?php wp_footer(); ?>
```
INSERT PHP CODE to Dynamically Place the TITLE of your site and each page in the browser tab
Copy and paste this PHP replacing the title line in the HEAD section:
```
<title><?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
```
INSERT PHP CODE to allow WordPress to find your STYLESHEET
In header.php, the link to style.css must be reformatted so the style sheet can be found within the active theme directory dynamically by WordPress. Replace
```
<link href="style.css" rel="stylesheet">
```
with
```
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet" />
```
INSERT PHP CODE to have WordPress generate a Unique Class for every page of your site. Use this class to create custom CSS for uniquely styled common elements on different pages. The php must be placed within the opening <body> tag. You may replace the <body> tag with the line below:
<body <?php body_class(); ?>>
UPLOAD YOUR THEME TO YOUR WORDPRESS INSTALLATION
(Optionally) Delete the file index.html from the theme folder, and upload your entire theme folder to your installation of wp-content/themes. Login to your Pantheon WordPress installation by adding /wp-admin to your site address. Activate your new theme.
ADJUST CSS to BEHAVE PROPERLY IN THE WORDPRESS ENVIRONMENT
You may find that some of your CSS rules do not apply to the appropriate selectors, since WordPress will likely have introduced new classes and IDs to elements in your layouts. Use your browser’s develoepr tools to examine elements and discover the selectors that WordPress may have added. Construct new rules incorporating those selectors as necessary.

> Continue to Part 2