Select Page
Web Design II
Class 07: WordPress Theme Setup

Topics

  • Themes
  • Basic PHP
  • Templates
  • Functions
  • Week 07 Custom Theme Site (theme setup) Lab

Welcome to class 007

Themes

Theme Explanation:

WordPress is a CMS (content management system) and the theme dictates how that content is to be displayed. It is meant to control the visual aspects (design) of the site and not functionality, although typically some is included as well. Plug-ins are meant to add functionality specifically.

Theme Contents:

A theme is a collection of files with specific formatting that work together to form the presentation of the site.

Theme files can be categorized:
  • Templates
    • These are the shells of the displayed pages. Similar to HTML layouts for different pages.
  • Design
    • Things concerned with the overall design like CSS and some JavaScript.
  • Function
    • More complex behaviors of the theme that directs operations.
A theme contains:
  • Required
    • index.php
      • The fallback template for all pages. The basic formatting.
    • style.css
      • The general design document like in a hard-coded site.
  • Typical
    • header.php
      • The partial template for the heading of the page that is called at the top of each page.
    • footer.php
      • The partial template for the footer of each page called at the bottom.
    • functions.php
      • Contains all the PHP functions that add functionality. Some call it the plug-in of the theme (though you shouldn’t call it that).
    • page.php
      • The template for your the pages of your site (go figure!).
    • screenshot.jpg (1200 x 900)
      • An image that represents the theme inside WordPress.
  • Others
    • Many others are often included. Templates for other pages such as posts, 404, search, etc. Other design documents like CSS, JavaScript to apply design, animation, responsive elements etc. Php documents to incorporate more complex function.

Basic PHP

PHP (hypertext preprocessor):

PHP is an open-source scripting language that is executed by the server. It allows you to write dynamic functions inline with HTML. PHP is used to write the most basic WordPress site as well as the something as complex as Facebook.

Syntax:

PHP is an OOP (object oriented programming) language. This means it may contain variables, loops, functions, etc. like other robust programming. It will run somewhat like JavasScript.

Let’s look at some basic examples:

Start/End:

A PHP document normaly contains html. As such you, must have tags much like HTML that so that it is apparent when code should be read as PHP.

<?php Example ?>
<?php echo "<h1>Check out PHP</h1>"; ?>
<p>written alongside HTML</p>
<?php echo "<h2>and back into PHP</h2>"; ?>

Variables:

The variables in PHP are simple to create. They do not need to be explicitly declared.

$
variable names should start with this symbol
=
the assignment
” “
the value assigned to the variable should be in quotes
Variable Example
<?php
  $name = "Cone";
  $age = "37";
?>

Conditional Statements:

These test a comparison and will proceed with instructions based on it being true or false.

if
initial condition and state “if”
()
test if statement inside parenthesis is true
{}
complete code inside brackets
else
if the statement in the parenthesis is not true
{}
complete code inside brackets
If/Else Condition Example
<?php
  $t = date("H");

  if ($t < "20") {
    echo "Have a good day!";
  } else {
    echo "Have a good night!";
  }
?>
If/Else/Endif Condition Example
<?php
  $a = 4;
  if($a < 5):
    echo "Less than five";
  else:
    echo "Greater than five";
  endif;
?>

PHP may also use an “if():” “/endif;” structure. It works the same as the traditional method but uses a different syntax.

Loops

Runs code for as long as a tested condition is true. The while loop is used extensively in WordPress PHP.

While
initial condition and state “while”
()
test if statement inside parenthesis is true
{}
repeatedly complete code inside brackets “while” the condition is true
Loop (while) Example
<?php
  $x = 1;

  while($x <= 5) {
    echo "The number is: $x <br>";
    $x++;
  }
?>

Functions

A function is a block of code that may be run whenever it is called.

function
keyword stating it is function, followed by the function name
()
parameters that will contain any variables sent to the function. These are called arguments when the function is called
{}
code contained inside the function that is run when called are placed inside the brackets
Function Example
<?php
  function writeMsg() {
    echo "Hello world!";
  }

  writeMsg(); // call the function
?>

Calling Functions

You may create your own function and call it like the example above. However, there are functions built-in to WordPress PHP that you will utilize often.

PHP is a loosely written language. This means that the syntax is often not strict. You will often see code that does the same thing written differently from one document to another. Be aware that you cannot mix syntaxes generally.

Wordpress Functions Examples
<?php
//writes to the browser
echo "<p>here is something written</p>";
//loads the content of a page
the_content();
//loads the stylesheet in the root folder
wp_enqueue_style('main_styles', get_stylesheet_uri());
?>

There are a ton of built-in functions you can call, too many to list here. Notice that they start with a letter or number, no caps necessary, use ‘_’ in the name as oppose to camel-case, and don’t necessarily use ‘()’ arguments when called. 

Templates

Templates:

Put simply, templates are the shell of the page design that the user of the theme will place their content into. There are a lot of templates you can create for your site but they are not required. They follow a template heirarchy.

In the template heirarchy index.php is the fallback template but you can see you create more and more specific templates for different layouts.

index.php:

The index.php is the fallback template for all posts (pages). As such this is the first php document to make.

<?php
the open tag to enter PHP mode
wp_head();
is a hook for WordPress to enter any function that is entered in the head of the page
if ( have_posts() ) :
tells the next block code to run if there is a post (or page)
while ( have_posts() ) : the post();
will run the following block of code as long as there are posts (or pages)
the_title();
writes the title of the page into the browser
the_content();
writes the content of the page into the browser
endwhile;
where the while loop block ends
endif;
where the if statement block ends
wp_footer();
is a hook for WordPress to enter any function that is entered in the footer of the page
?>
closing tag of PHP
index.php
<?php 

wp_head();

if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        the_title(); 
        the_content();
    endwhile; 
endif; 

wp_footer(); 

?>

This is the most fundamental code to be written in the index.php. It may be more robust.

This code uses “The Loop” inside it. This is a famous loop used often inside WordPress.

Functions

Functions:

The functions of the theme control the behavior of the content and generally add features.

functions.php:

This is the primary document that loads in various documents and features of the site.

<?php
the open tag to enter PHP mode
function my_files() {
a function we created that we will be able to call in a later line of code in this document
wp_enqueue_style(‘main_styles’, get_stylesheet_uri());
load a stylesheet at the main directory where the main stylesheet exist
wp_enqueue_style(‘my_responsive_style’, get_template_directory_uri() . ‘/css/responsiveStyle.css’);}
load the responsiveStyle.css sheet in the css folder in the theme directory
add_action(‘wp_enqueue_scripts’, ‘my_files’);
this is the “hook” of the function. It tells it to run when WordPress loads the scripts
?>
closing tag of PHP
functions.php
<?php

function my_files() {
    wp_enqueue_style('main_styles', get_stylesheet_uri());
    wp_enqueue_style('my_responsive_style', get_template_directory_uri() . '/css/responsiveStyle.css');
}

add_action('wp_enqueue_scripts', 'my_files');

?>

This will load the main stylesheet as well as a secondary one that contains the responsive code we created earlier

style.css
/*
Theme Name: MyTheme
Theme URI: https://teachmecone.flywheelsites.com
Author: cone
Author URI: https://teachmecone.flywheelsites.com
Description: A super simple theme
Version: 1.0
*/

A comment with the above content should be placed inside the style.css document. Later various CSS rules will be added to properly format  the design of the theme.

Class 07 Custom Theme Site (theme setup) Lab

Custom Theme Site (theme setup) Lab

In this lab you will develop the bones of your custom theme. HTML, CSS, JavaScript, and PHP will be produced.

You will be graded on the following:
  • Lab Requirements
    • Techniques and processes covered in the instructional material is followed and implemented.
  • Creativity & Craftsmanship
    • Excellent design choices, novel & appealing, and solid clean caliber work.
Resources:
Assignment Video Tutorials
You may watch these tutorial videos below to help you complete your assignment.

Lab Tutorial Slideshow

This tutorial will review WordPress as well as setup a site to apply our future custom theme to.

Lab Introduction
Custom Theme Site (theme setup) Lab
PlayPlay
Introduction

In this lab we will create the "bones" of a theme. The basics of it is relatively simple but we will be using PHP to write our code. This is much more complex than HTML and CSS. However it follows most of the same rules as JavaScript so it won't feel entirely foreign (hopefully). When we are done your theme will officially be functioning.
Click on the > to start

You may use what you created in the last lab .

Theme File Creation
Theme File Creation
Custom Theme Site (theme setup) Lab
PlayPlay
Instructions
  1. The theme is a collection of files and folders that work together. A such, a theme's file/folder structure must be designed in a specific manner.
  2. You will need to make a root folder for your theme. In Local, right-click on the site name and select Show Folder. The folder will appear.
  3. Navigate to yourSiteName/app/public/wp-content/themes. You should see the other themes available to your site (twentytwentyone, twentytwenty, etc.). Create a new folder and name it "yourLastNameTheme." All of your theme files and folder will be placed inside this.
  4. Open Visual Studio Code. Drag your newly created folder into the window to load the folder location. It will appear in a left panel.
  5. Press the New File button to create a new file. Save this document as style.css.
  6. Press the New File button again. This time save the document as index.php.
  7. The absolute required theme files have been created.
Microsoft Visual Studio Code window
Theme Folder

You can see the file path in the image above

Style.css Heading
Style.css Heading
Custom Theme Site (theme setup) Lab
PlayPlay
CSS Code

/*
Theme Name: YourLastNameTheme
Author: YourFullNameHere
Description: A super simple theme created in web design II
Version: 1.0
*/
Instructions
  1. A heading must be entered in the stylesheet of the theme. This gives information about the theme name, author, version, and other information.
  2. Open the style.css file. Enter the following:
       /*
       Theme Name: YourLastNameTheme
       Theme URI: YourThemeWebsite
       Author: YourFullNameHere
       Author URI: YourWebsiteProfile
       Description: A super simple custom theme created in web design II
       Version: 1.0
       */
  3. Other information may also be included in the heading. You can view the documentation here to learn what other items may be included.

Cone styling head

Index.php
Index.php
Custom Theme Site (theme setup) Lab
PlayPlay
PHP Code

<?php
date_default_timezone_set("America/New_York");
$currentTime = date("H");

if($currentTime > 18){
    $greetingTxt = "Good Evening!";}

else if($currentTime > 12){
    $greetingTxt = "Good Afternoon!";}

else if($currentTime > 0){
    $greetingTxt = "Good Morning!";}
else {
    $greetingTxt = "Welcome!";}

echo "<h1>" . $greetingTxt . "</h1>";
?>

<h3>PHP can contain HTML code!</h3>
<p>Isn't that neat? I mean maybe not neat. Not even cool. But it definitely is a thing.</p>
Instructions
  1. Wordpress uses template files for the design of your posts. You may make different templates for different types of posts. The fallback template for all post types is index.php. Therefore we will create this file first.
  2. Open the index.php file to begin creating your main template.
  3. Try entering some HTML such as:
       <h2>PHP can contain HTML code!</h2>
       <p>Isn't that neat? I mean maybe not neat. Not even cool. But it definitely is a thing.</p>
    In Wordpress you should be able to preview what you wrote.
  4. Let's try entering some PHP code into our PHP document (go figure). Enter:
       <?php
       date_default_timezone_set("America/New_York");
       $currentTime = date("H");
       if($currentTime > 18){
          $greetingTxt = "Good Evening!";}
       else if($currentTime > 12){
          $greetingTxt = "Good Afternoon!";}
       else if($currentTime > 0){
          $greetingTxt = "Good Morning!";}
       else {
          $greetingTxt = "Welcome!";}

       echo "<h1>" . $greetingTxt . "</h1>";
       ?>
  5. As you can see you may write basic HTML code for basic formatting as well as PHP for more dynamic behavior.
  6. You will probably feel a little overwhelmed with PHP when you start out (and even after). There are loads of resources online. One good resource on PHP is on w3schools.com.
The Loop
The Loop
Custom Theme Site (theme setup) Lab
PlayPlay
PHP Code

<?php 

wp_head();

if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        the_title(); 
        the_content();
    endwhile; 
endif; 

wp_footer(); 

?>
Instructions
  1. In Wordpress "The Loop" is a code snippet that is used constantly when writing themes and other content. It cycles through content in order to display or alter it in some way. Currently our index.php template file is just displaying what we wrote and not any of the content we created inside of Wordpress. We will use the loop to insert our content.
  2. Remove the code we created in the previous page (that was just some practice).
  3. Enter the following:
       <?php

       wp_head();

       if ( have_posts() ) :
          while ( have_posts() ) : the_post();
             the_title();
             the_content();
          endwhile;
       endif;

       wp_footer();

       ?>
  4. This is the most basic necessary code to load in the title and content of the page. You may preview the the page in Wordpress and you should see your what you created now.
Functions.php
Functions.php
Custom Theme Site (theme setup) Lab
PlayPlay
PHP Code

<?php

function my_files() {
    wp_enqueue_style('main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'my_files');

?>
Instructions
  1. Technically the theme has the bare necessities but it is not very robust. For instance, even though we have created the style.css document with the heading it doesn't actually function as a stylesheet currently. In order to add more function we must create the functions.php document (what a twist).
  2. Press the New File button. Save the file as functions.php.
  3. Enter:
       <?php

       function my_files() {
       wp_enqueue_style('main_styles', get_stylesheet_uri());
       }
       add_action('wp_enqueue_scripts', 'my_files');

       ?>
    in the functions.php document.
  4. This will load the style.css stylesheet when Wordpress loads scripts. Now any CSS rules you create in the stylesheet will be applied.
  5. More functions will be added to this document later but this is a good start.
Screenshot.jpg
Screenshot.jpg
Custom Theme Site (theme setup) Lab
PlayPlay
Theme area in Wordpress Dashboard
Instructions
  1. You have the basic documents necessary for the theme to operate. If you look at your theme in the Appearance>Themes area you will see there is no image for your theme. This is a pretty simple addition.
  2. Normally you would want to take a screen capture of your site as the image but we haven't really done much to take a screenshot of. Instead we will just make a simple logo.
  3. In Photopea, Photoshop, or whatever your favorite editor is create an image that is 1200 by 900 pixels (width x height). Design a logo to represent your site.
  4. Save your final image as screenshot.jpg in the theme root folder.
  5. If you refresh your window in the theme area of Wordpress you should see your image with your theme name.
screenshot.jpg
Final Review and Submission
Final Review and Submission
Custom Theme Site (theme setup) Lab
PlayPlay
Instructions
  1. You may view your while working on it but also from the Local interface by pressing the View Site button at the top right of the program. When you are happy with it, it is time to export it out.
  2. In Local right-click on the site name in the list on the left. In the popup choose Export. Don't enter anything in the window. Press Export. In the popup choose where you want to export and export.
  3. Now, log into Blackboard (Here) and click on this course. Inside the course, select Week 07, then the Class 07: Custom Theme Site (theme setup) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
style.css

/*
Theme Name: YourLastNameTheme
Author: YourFullNameHere
Description: A super simple theme created in web design II
Version: 1.0
*/
index.php

<?php 

wp_head();

if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        the_title(); 
        the_content();
    endwhile; 
endif; 

wp_footer(); 

?>
functions.php

<?php

function my_files() {
    wp_enqueue_style('main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'my_files');

?>
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

You have officially created a Wordpress theme! This lab was all about just setting it up. Obviously it is not the most advanced or even attractive theme thus far. In the next lab we will delve deeper into PHP and the theme.

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
 

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Submit Class 07 Custom Theme Site (theme setup) Lab on Blackboard