Week Nine (MGDP2060)

This article lists topics for Week Nine of Web Design and Development III (MGDP2060).

To do for this week:

• Get started on your custom theme. (See notes below.)
• You have until the end of the semester to complete this project.
• Screenshots:
  • http://karljones.com/karljones.com/images/wiki/oct-29/

Anecdote summary and followup

Summary: Avoid the Yay-Oops cycle

• "Yay! Success!" followed by "Oops, another bug!", in a vicious Yay-Oops cycle.

Moral of the story #1: Manage expectations

• This is a management skill, necessary for managers, useful for anyone.

Followup:

• Everything is cool, my client is happy.

Moral of the story #2: Problem solving calls for predicting the future

Technology involves a lot of problem solving, and it typically involves new problems, requiring knowledge and skills which you do not yet have.

Perhaps you can acquire the knowledge, acquire the skills, and solve the problem.

• Or, failing that, perhaps you can find a workaround -- an alternate solution -- sometimes, the solution you were looking for in the first place.

Ask yourself such questions as:

• Can I solve this problem?
• What do I not know? and, Can I learn what I do not know, in a timely manner?

These are preliminary questions regarding your relationship to the problem. And these questions are predictions, or guesses, or estimates.

You are predicting the future:

• I believe I can learn the knowledge, acquire the skills, solve the problem.
• It will take me from X units to Y units of time/money/energy.
• I base my estimates -- my guesses -- my predictions about the future -- on:
  • Past experience: I have solved similar problems before.
  • Intuition: it's a feeling, I just know I can do this.

WordPress localhost

Review Wordpress and localhost.

WordPress custom themes

Each theme is a "custom" theme, in the sense that someone made that theme.

Themes that ship with WordPress are not usually referred to as "custom", nor are theme that you download from the WordPress theme library.

A "child theme" is a kind of custom theme, based on another theme (the "parent theme"). Any theme can be a parent theme, there is nothing special about a parent theme, the parent theme does not change or do anything.

The usual meaning of "custom theme" is a theme you built yourself, from scratch.

Custom theme structure

All themes have these basics:

• Theme folder
• style.css
• index.php

Themes usually have these files as well:

• header.php
• footer.php

Your theme folder goes inside this folder:

wp-content/themes/

The individual files -- style.css, index.php, and others -- go inside you theme folder.

style.css

Every theme must have a file named style.css in the theme folder.

style.css is a style sheet, and it can (and often does) contain CSS rules, although this is not required.

However, style.css is not used like a normal external style sheet.

style.css is used by WordPress to determine that this theme folder actually is a theme folder. That is, WordPress reads the contents of style.css, on the server.

Your style.css file must contain a comment like this (usually at the top of the file):

/*
Theme Name: YOUR THEME NAME HERE

Put CSS rules below this CSS comment
*/

Where the example says "YOUR THEME NAME HERE", make up a unique name for your theme.

Pick a name based on yourself, your project, your client, etc.

Pick a name that is similar to the theme folder name.

The theme name will appear in the Themes list, in the Appearance section of the WordPress admin control panel.

You can add CSS rules here in style.css, and it is common to do so. But this is not required -- there are other (sometimes more convenient) ways to add style rules.

index.php

index.php is a template -- a PHP page, within a theme, which tells WordPress how to display data, and what data to display.

The very simplest (but not very useful) index.php can contain simply the HTML and CSS for a single home page.

A better approach is to put some of the HTML in header.php, and some in footer.php

Then use the include() function in index.php, like this:

<?php include ("header.php"); ?>

<h1>Test page</h1>
<p>Contents of index.php go here, Lorem Ipsum ...</p>

<?php include ("footer.php"); ?>

header.php

Here is a simple header:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>

Note the blocks of PHP code, for example inside the title element:

        <title><?php wp_title(); ?></title>

Source: Document Head (header.php)

Revised header.php

Here is a revised version of header.php. It uses CSS in a traditional-web-design, non-WordPress way.

This is a hack to get started. In coming exercises, we will learn how to work with CSS the WordPress way.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
        <link href="/path/to/your/stylesheet.css" rel="stylesheet" />
        <style>
           /* Internal styles here, convenient hack to get started quick */
        </style>
    </head>

footer.php

The footer file typically contains something like this:

     <p>Footer information -- copyright, legal notice, key links, etc.</p>
   </body>
</html>

Links

See:

• https://codex.wordpress.org/Site_Design_and_Layout
• https://codex.wordpress.org/Theme_Development
• https://codex.wordpress.org/Stepping_Into_Templates
• https://codex.wordpress.org/Designing_Headers
• https://codex.wordpress.org/Finding_Your_CSS_Styles
• https://codex.wordpress.org/Custom_Post_Types

Bootstrap starter theme:

• https://getbootstrap.com/examples/starter-template/

Exercise

Work on your Custom Theme. Create:

• Folder for your theme
• styles.css
• index.php
• header.php
• footer.php

You will continue to build up your theme over the next several class sessions.

See also

• Web Design and Development III (MGDP2060)