Difference between revisions of "Week Nine (MGDP2060)"
Karl Jones (Talk | contribs) (→header.php) |
Karl Jones (Talk | contribs) (→style.css) |
||
| Line 72: | Line 72: | ||
=== style.css === | === style.css === | ||
| − | ... | + | Every theme must have a file named <code>style.css</code> in the theme folder. |
| + | |||
| + | <code>style.css</code> is a style sheet, and it can (and often does) contain CSS rules, although this is not required. | ||
| + | |||
| + | However, <code>style.css</code> is not used like a normal external style sheet. | ||
| + | |||
| + | <code>style.css</code> is used by WordPress to determine that this theme folder actually is a theme folder. That is, WordPress reads the contents of <code>style.css</code>, on the server. | ||
| + | |||
| + | Your <code>style.css</code> file must contain a comment like this (usually at the top of the file): | ||
| + | |||
| + | <pre> | ||
| + | /* | ||
| + | Theme Name: YOUR THEME NAME HERE | ||
| + | |||
| + | Put CSS rules below this CSS comment | ||
| + | */ | ||
| + | </pre> | ||
| + | |||
| + | 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. | ||
=== index.php === | === index.php === | ||
Revision as of 06:03, 30 October 2015
This article lists topics for Week Nine of Web Design and Development III (MGDP2060).
Contents
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
Theme folder
- Folder must have unique folder name
- Folder must appear here:
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.
index.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)
...
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:
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.
