Langara Outlines

WMDD4840 Outline (2018)

WMADD 4835 Content Management Systems
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941
Days & Times:
Spring 2018
Fridays: 1230-520
(Spring term runs Jan 02-April 09)
Office Hours:
Monday 10:00-12:00

SKIP to Class Content

This class will cover Content Management Systems, specifically WordPress.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • install a Content Management System (CMS) framework on a production web server
  • configure a local testing environment with the same CMS
  • evaluate, install and configure appropriate CMS themes, modules, widgets, and plugins
  • create content, media, menu structures & content types
  • create and restore data and system backups
  • identify and implement appropriate security and anti-spam measures (user accounts, permissions, patches, etc.)
  • customize themes
  • write basic themes

Textbook / Reference Material

There is no textbook for this course: we will use primarily online sources:

Lynda.com Videos
Installing and Running WordPress: MAMP  (mac & windows )
Installing and Running WordPress: WAMP ( windows )
WordPress: Essential Training
WordPress: Building Themes From Scratch Using Underscores
WordPress: Developing Secure Sites

WordPress References
The WordPress Codex

WordPress Cheat Sheets
WP Mega Cheat Sheet
WP Developer Super Cheat Sheet

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assessments
Main Assignment: Theme Project 30%
Quizzes 15%
Lab Exercises 15%
Midterm 20%
Final 20%

Final Assignment Description (Revised March 2017)

Note, also, that dates listed can change in response to class progress. 

Week 1: Jan 05 ( Intro to Content Management )

  • CMS vs Static Sites / WordPress.com vs WordPress.org models
  • Setup of Local Testing Environment: MAMP
  • WP Dashboard
  • WP Editing Area
  • Media / Galleries
  • Embeds
  • Posts
  • Permalinks

Weekly Videos

Resources

Lab Exercise

Week 2: Jan 12 ( Basic Content Types )

  • Posts vs Pages
  • Categories & Tags
  • Excerpts
  • Settings / Customizer
  • Menus
  • Site Backup

Lab Exercise

Weekly Videos

Week 3: Jan 19 ( Themes & Plugins)

  • A range of themes for business, portfolios, etc
  • JetPack
  • Common plugins

Lab Exercise

Weekly Videos

Week 4: Jan 26 ( Users / Comments / Security )

  • Test Number 1
  • User roles
  • Comments / Anti-Spam Measures
  • Other comment systems
  • Security pt 1

Lab Exercise

Weekly Videos

Week 5: Feb 02 ( Backup / Restoration / Duplication)

  • A Range of Backup Options
  • Backup Automation
  • Site Transfer
  • Site Restoration
  • Security pt 2
  • Recovering from a hack

Resource

Weekly Videos

Week 6: Feb 09 (Midterm )

Week 7: Feb 16 ( Reading Week )

  • No classes this week.

Week 8: Feb 23  ( WP Theme Development 1 )

  • The Loop
  • Basic Template Tags
  • The WordPress Template Hierarchy

Resources

Week 9: Mar 02 ( WP Theme Development 2: _s )

  • Underscores
  • functions.php
  • theme support
  • menus
  • scripts
  • fonts

Weekly Videos

Resources

Week 10: Mar 09 ( WP Theme Development 3: Code Reuse )

  • get_template_part()
  • wp conditions
  • underscores SASS

Week 11: Mar 16 ( WP Theme Development 4 )

Week 12: Mar 23 ( Work Day )

Resources

EXAM PREP / FINAL ASSIGNMENT PREP:

The following six-part exercise will help you prepare for the exam and the final assignment.

Week 13: Mar 30: Good Friday

  • College closed

Week 14: April 06: Final Exam

  • Exam will involve theme writing using _s.

 

 

Standard
Langara Outlines

WMDD4835 Outline (2018)

 

WMADD 4835 HTML / CSS 2
Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941
Days & Times:
Spring 2018
Wednesdays: 230-720
(Spring term runs Jan 02-April 09)
Office Hours
Monday 10:00-12:00

SKIP to Class Content

This class will cover HTML & CSS design and development, continuing on from the HTML / CSS 1 course of last semester. It will share an assignment with WMDD4840 (Content Management Systems).

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab. A portion of your class mark will be for completion of these exercises.

Note: the final exam will take place in the last class session—not in the exam period as officially scheduled. This will allow you to spend additional time on the final assignment, which will be due during the exam period.

  • Final Exam: April 04
  • Final Assignment Due Date: April 13

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Use efficient HTML & CSS coding methods
  • Use CSS transitions & animations
  • Use JavaScript libraries such as jQuery
  • Use frameworks like Bootstrap
  • Use CSS Preprocessors
  • Rapidly prototype designs and code
  • Critique the code and designs of peers
  • Respond professionally to critiques of their code and designs
  • Use emerging methods of layout and interaction, while ensuring successful fallback for older devices and browsers

Textbook / Reference Material

We will use primarily online sources in the course. A few general ones are listed here. More specific ones are listed along with each week of course material.

A Good Online Guide To HMTL & CSS:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://websitesetup.org/html5-cheat-sheet/

 

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assessments
Main Assignment 30%
Quizzes 10%
Lab Exercises 20%
Midterm 20%
Final Exam 20%

Main Assignment Description

Note, also, that dates listed are approximate: topics may take more or less time in response to class progress.

Week 1: Jan 03 ( Advanced Selectors )

Links

Week 2: Jan 10 ( CSS Flexbox 1)

  • Flexbox Froggy
  • Flexbox for Menus & Forms
  • The so-called Holy Grail Layout

Links

Week 3: Jan 17 ( CSS Flexbox 2)

  • Full layouts with Flex
  • Midterm WP Theme (not midterm test…)
  • Redunzl
  • Feature Queries

Links

Week 4: Jan 24 ( CSS Grid Module 1)

  • Grid Theory & Syntax
  • Flex vs Grid / Flex & Grid
  • Feature Queries / Modernizr
  • Fallback Approaches

Links

Week 5: Jan 31 ( CSS Grid Module 2)

  • Advanced Layouts

Links

Week 5: Feb 07 ( Transforms, Transitions, Animation)

  • Menus Galore
  • JS for transitions & animation
  • Maintaining Accessibility

Links

Week 6: Feb 14 ( Reading Week )

  • No classes this week, so you can study for next week’s midterm…

Week 7: Feb 21 ( Midterm / Responsible Responsive Design )

  • Exam will be a 2 – 3 hour layout exercise.
  • Second part of the class will deal with ways to deal with Image Sizes in a world of high-density screens.

Week 9: Feb 28 ( jQuery)

  • Selectors-based syntax
  • Traversal
  • DOM Manipulation

Links

Week 10: Mar 07 ( Preprocessing: SASS)

  • Variables
  • Partials
  • Mixins

Links

Week 11: Mar 14 ( Build Tools: Gulp)

Links

Week 12: March 21 ( Bootstrap)

  • The pros of front-end frameworks
  • The cons of front-end frameworks

Links

Week 13: Mar 28 ( Exam Prep / Work Day)

Week 14: April 04 ( Final Exam, in class. )

  • Exam will again be a 2 – 3 hour layout exercise.
Standard
Langara Outlines

WMDD4815 Outline (2018)

 

WMADD 4815 HTML / CSS 1
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A248
604.323.5941
Days & Times:
Spring 2018
Mondays: 230 – 720
(Spring term runs Jan 02-April 09)
Office Hour
Friday 930-1030

SKIP to Class Content

This class will cover HTML & CSS design and development, and serve as a prerequisite for the HTML / CSS 2 and Content Management Systems courses next semester.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Understand HTML document structure & semantics. Produce economical and validated code.
  • Build complex layouts with fluid css grids.
  • Integrate media into designs. Use code-based methods when possible to conserve bandwidth, maintain resolution, and future-proof the design.
  • Choose appropriate graphics formats.
  • Use media queries to make designs adapt to device properties and capabilities.
  • Use progressive enhancement, designing for modern devices, while ensuring successful fallback to less capable devices and browsers

Textbook / Reference Material

There is no textbook for this class. We will use primarily online sources in the course.

Required reading for some of the early classes is found in
MarkSheet.io: A Free HTML/CSS Tutorial

Lynda.com Videos
Other topics are well-covered by Lynda.com videos.

How to login to Lynda.com using your Langara ID.

HTML Essential Training
CSS Fundamentals
Making Sense of the CSS Box Model
Learning Atom
Coding Faster With Emmet
Creating Optimized Web Graphics
CSS Selectors

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://websitesetup.org/html5-cheat-sheet/

A Free Online HMTL & CSS Textbook:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assignments & Assessments
Assignment 1: Resumé 15%
Assignment 2: Magazine Mockup 20%
Major Lab Exercises 15%
Quizzes 15%
Midterm 15%
Final Exam 20%

Assignment Descriptions

Week 1: Jan 08 ( HTML Basics )

HTML Semantics / ATOM  Intro
h1-h6, p, ul, li, a, img
sftp
html validation

Lab / Class Files

Links

Resources

Required Reading

Required Viewing

Week 2: Jan 15 ( HTML Sectioning / CSS Typography 1)

HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure,
The CSS Box Model
CSS Validation
Sublime Efficiencies Review

Links

Lab Exercises

Required Viewing

Required Reading

Next Week 8:30am: Our First Test

  • HTML: h1, h2, h3, h4, img, header, nav, article, a, ul, li, paths
  • CSS: how to specify fonts, css inheritance, box model, classes
  • SUBLIME TEXT: multiple cursors, tag wrap, split into lines

Week 3: Jan 22 ( Graphic Design & Typographic Principles )

Test Number 1
Alignment, Contrast, Proximity, Repetition, Readability

Lab Exercises

  • To be determined

Required Viewing

Tools: Color Theory Links & Palette Generators

  • Color Palette Generators & Color Theory Links

Week 4: Jan 25 ( Traditional CSS Layout Techniques )

Floats, Clears, Clearfix, Display Properties

Lab Exercises

Week 5: Feb 01 ( Responsive Web Design 1 )

Four Pillars of Responsive Web Design 
CSS Grids
Mobile First

Lab Exercise

Resources

Week 5: Feb 08 ( Responsive Web Design 2 )

Test Number Two
Thinking inside and outside the grid.

Lab Exercise

First Assignment ( resumé ) due by Monday, Feb 13 at 9am.

Week 7: Feb 15  ( READING WEEK )

No classes this week. College closed Monday, but open other days.

Week 8: Feb 22 ( Midterm / Self-Made Grids )

For the midterm, you will be given a layout to build within two hours.

The remaining time will be devoted to the learning how to make our own grids.

Class Exercise

Week 9: March 01 ( Graphics & Emmet )

File formats & usage,
Background Images,
CSS Gradients
Scalable Vector Graphics (SVG)
Icon Fonts

Smart & efficient authoring

Lab Exercise

Resources

Week 10: March 08

Forms / Tables

Final Exam Practice Exercise:
Build this layout. Make your own grid.

Week 11: March 15

Media
Video / Sound

Week 12: March 22

Work Day

Week 13: March 29: Final Exam Prep

Magazine Assignment Due. Please review this checklist before you stop working on it.

The exam will be like the midterm: you will be given a layout to build within a time period.

Files for Practice Exam: NYT MockUp

 

 

 

 

Standard
Tools & Generators

Build Tools: Gulp Set Up

The idea behind build tools is to automate as much as possible the mundane and repetitive tasks in the production of software (such as a website).

Such tasks can include things like:

  • compiling SASS or LESS files into CSS on save
  • compressing images
  • reloading pages in browsers on save
  • adding vendor prefixes to CSS
  • linting (code checking) of JS, CSS, HTML, etc
  • minifying and concatenating JS files
  • uploading files to a test server
  • etc

The build tool I am going to focus on in this exercise is called gulp.js.

How to Set up Gulp on Your Own Computer

Gulp is built on Node.js and npm (node package manager), so to make gulp-based workflows on your own computer (ie not a lab one), you need to get both installed on your system.

You can get Node.js here.  Instructions for installing gulp on your own computer are available here.

How to Set up Gulp in a Langara Lab

In the B014 and A247 labs, Node.js is already installed. However, the gulp instructions in the link above will not work, because you do not, as a student, have admin permissions on a lab computer, and npm (node package manager) is installed in an area of the computer you are not allowed to write to.

However, by changing the npm default directory to one that you do have write permissions for, we can make it work.

To do that, follow these steps exactly. The bolded parts are what you will type. DO NOT COPY AND PASTE FROM THIS PAGE (the quotation marks will be wrong).

  1. Open Terminal (command-space, then type terminal)
  2. Make a directory for global installations (the period makes it “invisible”)
    mkdir ~/.npm-global
  3. Configure npm to use the new directory path:
    npm config set prefix ‘~/.npm-global’
  4. Open or create a ~/.profile file:
    nano ~/.profile
  5. Add this line to the .profile file you are editing:
    export PATH=~/.npm-global/bin:$PATH
  6. Exit nano by pressing control-o to save, then command-x to exit
  7. Update your system variables:
    source ~/.profile

source: https://docs.npmjs.com/getting-started/fixing-npm-permissions

 

npmjs Intro to Gulp

The wikipedia page on gulp is nice and concise : https://en.wikipedia.org/wiki/Gulp.js

Smashing Magazine article on Gulp

 

Standard
CSS, HTML, JavaScript, Tools & Generators

ATOM Packages

A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality.

Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so students don’t feel compelled to buy Sublime Text. But there are a few features of Sublime that I miss in Atom. Fortunately, a number of packages allow me to add those features.

To install a package in Atom, do the following:

  • Bring up the Command Palette (command-shift-p on Mac, control-shift-p on Windows or Linux)
  • Type install and then select Install Packages And Themes
  • Search for the package you want to install
  • When you find one, press the INSTALL button

Here are some of the packages I always install:

  • Emmet: a brilliant, and essential, HTML/CSS macro utility.
    And here’s the official Emmet documentation and the excellent cheatsheet.
    Emmet practice exercise 1 | answer key | Emmet practice exercise 2
  • Open in Browser / Open in Browsers. There are number of packages that make testing the page in the browser quicker.
  • Col0r-Picker: command-shift-c (mac) or control-alt-c (win/linux) brings up a color picker
  • Atom-Live-Server: for testing dynamically generated pages
  • Atom-Beautify: for tidying up html, css, javascript, php, etc.
  • Auto-Update-Packages: does what you think it would do
  • Wrap in Tag: this replicates Sublime Text’s wrap in tag command. Which is really useful.
  • Linter: linters provide error messages. ( You will need to install language-specific linters in addition to this “base” linter )
  • Linkter-htmlhint: this provides HTML error messages on save (look at the bottom of the editor. Click for error panel.)
  • Linter-CSSLint: this provides CSS error messages on save (look at the bottom of the editor. Click for error panel.)
  • Linter-jshint: for JavaScript hinting on save (look at the bottom of the editor. Click for error panel.)
  • Pigments: A CSS color viewer. It adds a background color to all your color declarations. It even understands SASS variables and color-changing functions.

That’s just a few of the available useful packages.

Note, also, that most packages also have settings that can be configured from the Preferences / Settings menu.

 

Standard
WordPress

WordPress Security 2017

Reading the following articles will give you a good introduction to WordPress security:

YOAST: WP Security in a Few Easy Steps:
https://yoast.com/wordpress-security/#wpsecuritykeys

WP-CONFIG Security Keys ( WP Beginner )
http://www.wpbeginner.com/beginners-guide/what-why-and-hows-of-wordpress-security-keys/

HOW TO REMOVE GOOGLE BLACKLIST WARNING ( Succuri )
https://sucuri.net/guides/how-to-remove-google-blacklist-warning

CODEX: HARDENING WORDPRESS
https://codex.wordpress.org/Hardening_WordPress

ULTIMATE GUIDE TO WORDPRESS SECURITY (wpmudev)
https://premium.wpmudev.org/blog/ultimate-guide-wordpress-security/?utm_expid=3606929-108.O6f5ypXuTg-XPCV9sY1yrw.0&utm_referrer=https%3A%2F%2Fwww.google.ca%2F

Standard
WordPress

WordPress Theme and Plugin Configuration Exercise #8324

In this exercise, you will download and configure a free WordPress theme, and some plugins. You are welcome to use the Internet or your notes.

 

First, please download this sample duplicator package and install it in your MAMP testing environment. Make sure to add yourself as a new ADMIN user in this process.

The content is approximately 12 posts, with feature images and summaries. Each post has a youtube video right at the beginning.

Then, download and install the following.

  • the Ryan theme
  • the Ninja Forms plugin
  • the Yet Another Related Posts plugin (YARPP)

If you are at Langara College, don’t forget that we have to install themes and plugins manually, owing to network restrictions.

You may not install any other plugins.

You job is to make the site look like the one at this url.

A lot, but not all, of what you will do will take place in the theme customizer.

Front Page

The front page is NOT a static page.

Use the theme customizer to enable the slider. The images are included in the Duplicator package you have already installed: reuse feature images from three articles. For the text that appears on those images, use the names and the quotes that are on the live site.

Because the images are black and white, make the changes (visible in the live site or in the image below) to make the text in the slider more legible.

Billie Holiday Text Design

Use the theme customizer to set up the three featured content areas that are underneath the slider. Use the same icons and text as in the live site (or the screenshot below). Do not link the featured content to anything (we don’t have any pages to link them to at this point).

Featured Content Design

If the front page is not showing article summaries instead of the long articles, make sure that it does.

Menus

Make the menus in the header area like they are on the live site.

Posts

Change the publication date of all posts to be within the last year. Remove any tags that are not explicitly music-related.

Another User

Make another user with Editor access level. Give that author the name Walter White and the email walterwhite@kevinmc.ca.

Assign all posts to this user.

At the end of every post (in single view), make sure that the author bio and gravatar is displayed: “Walter White is a very enthusiastic jazz fan and chemist.”  It will look similar to the one below:

The Favicon

Included with the files you downloaded to start this exercise is a PNG file. Upload it and make it work as the favicon on the site (visible in in the browser tab in Chrome, for example).

Working Favicon

Related Posts

Using YARPP, make the site display up to three related posts at the end of each article when it is viewed in single mode (ie when we’re on a post page, not an index or archive). The title of that section, set via the plugin, will be You might also like…

Related Posts

Set YARPP to say “So sorry: no related articles” if no related posts are returned.

Body Text

Change all paragraph type to the typical georgia font stack.

The Sidebar in Posts Full Views

When we see a post in full view, make sure there is a sidebar with only Search, Recent Posts, Categories, and Archives, in that order. 

Single View

Contact Form

Using the Ninja Forms plugin, make a Contact page. Make sure you that the CONTACT link in the header goes to that page.

 

BONUS MARKS

For a 25% bonus mark, figure out how to get that contact form to show up at the bottom of every page in the site.

For another 25% bonus mark, figure out how to make the videos not show related posts when they finish playing.

Remember that you may NOT install any other plugins than the two used in the exercise.

 

Hand It In

When you are done, make a Duplicator package of your site. Put the installer and the zip archive in a folder with your name + midterm in the name, then hand it into studentshare (PUBL 1232, if you are a PUBLISHING student).

Make sure that you are in CHROME when you are making the DUPLICATOR package: Safari will automatically unpack a ZIP when you download it, thereby making it unusable.

 

 

 

 

 

Standard
WordPress Templates

WordPress Bare Bones Theming Exercise: Common Template Tags

When we ended part 1 of this exercise, we saw a bunch of posts output to the screen.

Now inspect that page and make sure that the entire HTML skeleton is being output. In other words, make sure that the HTML HEAD is output at the top and that the closing tags are at the bottom of the document.

In this part of the exercise, we are going to edit our template files in order to grab more information from the site database and output it in appropriate places in the page generation process.

Header.php

First, let’s edit header.php.

We’ll begin by making the title of all pages show the name of the page, followed by the name of the site. In a few classes from now, we will cover a better but more complicated way to do this, but we’re aiming for simplicity here in order to get used to a number of WordPress theming idioms.

In between the TITLE tags, add a call to the wp_title function and the bloginfo function:

<title>
<?php wp_title(' | ', true, 'right'); bloginfo('name'); ?>
</title>

There are three lines in the above snippet. Lines 1 and 3 are HTML; line 2 is PHP, so we need to include the opening and closing tags for PHP there. We will do a lot of this jumping in and out of PHP to make themes. In the order the three lines appear here:
we start the title, dynamically retrieve information from the database, then close the title.

Because we will do this process differently in a few classes, I don’t want to spend too much time on it, but in a nutshell, the wp_title() function is retrieving the title of the page, while bloginfo(‘name’) is returning the name of the site. With wp_title, the first parameter we pass to it is the separator that will appear between the site title and the page title ( | ). The second parameter determines whether the function displays the site name or just returns it (for use in further programming). The third parameter controls whether the site name appears to the right or to the left: it’s better on the right, so that the page name is completely visibile in a browser tab.

The bloginfo function can retrieve a lot of information from the Settings and User Profile areas of the dashboard. For more information on the parameters you can include in the function, consult the WordPress developer site page on bloginfo.

Test your site. The site name should now be the page title (again, this is not ideal, of course, because all page titles will be the same. But it’s OK for now.)

Now let’s add the site name and site description to a header area in the header.php file. After the opening BODY tag and before the opening .page-content DIV, add the following:

<header>  	
<h1 class="site-title"><?php bloginfo('name')?></h1>
<div class="site-description"><?php bloginfo('description'); ?></div>
</header>

Here we see another parameter (description) we can pass to the bloginfo function. Test your site: you should now see the name and description output to the page, wrapped in semantically appropriate tags.

Finally, let’s add something very useful to the opening of the BODY tag:

<body <?php body_class(); ?>

Test your page. Now either Inspect the page, or view the Page Source. Notice all the classes that are now on the body tag? When we go to different parts of the site, those classes will change. They will reflect what part of the site your are on.

This will be invaluable when we write the CSS for the site.

Footer.php

Now we’ll edit footer.php.

In between the opening and closing footer tags, insert the following:

   <small>Copyright &copy; 2012-<?php echo date('Y'); ?> <?php bloginfo('name'); ?></small>

What are we doing here? Dynamically inserting the year, so that our copyright notice will always start with the year our site (theoretically) started and continuing into the present year. Then we again retrieve the name of the site. The reason we have two separate PHP operations here is that I wanted to have a space between the year and the site name (not the only way to do it, but it works…).

So why don’t we hard code the site name and descriptions in the above? We could, but if we changed either in the WordPress dashboard, we would then need to change the theme files.

Major Edits: Index.php

We learn in HTML classes that a file called index.html will load automatically when our URL ends at its parent directory.

The index.php file in WordPress can work like that, but it actually does more. Specifically, it is an all-purpose kind of file. It might generate the home page. It might generate all of them. It might not generate any (if there are more-specific template files in the theme). This is determined by the WordPress template hierarchy. We will examine the hierarchy more shortly. At this point, though, index.php will be generating all of our content regardless of where we are on the site..

Here’s our index.php starting point again:

<?php
    get_header();
    if ( have_posts() ) : while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    get_footer(); 

To this, add the_title, the_post_thumbnail, the_author, the_category, the_tags, and the_date WordPress functions:

<?php
    get_header();
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    	
    	the_title();
    	the_author();
    	the_date();
    	the_post_thumbnail();

        the_content();
        the_category();
        the_tags();

    endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    get_footer(); 

Test the page. Eureka! Tons of information pulled from the database with very little effort. Each post now has seven distinct pieces of content we can use in our page.

Is it pretty yet? No.

Do have a way to make it pretty? Yes.

It’s called HTML and CSS.

Each of these functions can be looked up in the WordPress codex or developer area. It’s as simple as googling them.

the_category()

To start, let’s google the_category(). The first page that comes up in the search results is probably to the WordPress codex. Reading that page, we learn that category links are placed in an HTML LIST by default. Looking at our generated page confirms that.

However, if we pass a separator character to the function, the post’s categories will be separated by that character (put on a single line rather than being put into a list). So amend the call to display the category as follows:

 the_category(' ');

Here we use a space, but we could use commas, bullets, special characters, etc.

If we test the page, we will see that the Category is still a link, but it is no longer marked up as a list.

Go into the Dashboard and edit the first post in the posts area. Put it into another category. Now, when you test the page, you will see both categories, separated by a space.

the_tags()

Similarly, we will google the_tags().

IF we go to the WordPress Codex page link that is returned by google, we will learn that the_tags() can take three parameters as arguments: $before, $separator, and $after.

To demonstrate what these do, change the_tags in your index.php template file to the following, adding two of those parameters separated by a comma:

the_tags('Posted in ', ' | ' );

Or, if you want to get adventurous, slip in some HTML to the_tags() function.

the_tags('<ul><li>','</li><li>','</li></ul>');

That will output your tags in an unordered list. The first parameter comes before the outputting of the tags: it opens the list and then starts the first list item. The next parameter, the separator, comes first between tag1 and tag2 and then between each tag thereafter: so it closes the first list item and opens the next one (and so on). Finally the last parameter comes after the last tag: it closes both the final LI and the UL itself.

Standard
WordPress Templates

WordPress Bare Bones Theming Exercise

This exercise will demonstrate a number of important WordPress features, including

  • the WordPress template hierarchy
  • common template tags
  • the loop
  • conditions in WordPress
  • get_template_part

We will take a simplified approach, in order to get the broadest sense of how WordPress themes work and not get bogged down in too many details.

Some Sample Content

First of all, please download this zip archive. When you unpack the ZIP file, you will find a Duplicator installer and archive combination, and a single screenshot file.

Copy the installer and the archive from inside the DuplicatorPackage folder into your MAMP htdocs folder. Put them in a folder called iwillmakeatheme.

Then start up MAMP and make a new database called iwillmakeatheme.

Go to the root level of your local server (localhost:8888 on Mac), click the iwillmakeatheme folder and then run the Duplicator installer.

As part of the installation process (step two or three), create a new ADMIN account with your name as the user and password (for ease of recollection. This is just a lab exercise, so we are not worried about a site being hacked here).

Once you get through the Duplicator site installation, go to the front of your site. Viewing the content in the twentysixteen theme (the only theme included in this Duplicator package), you will see that you have a bunch of posts, mostly with lorem ipsum text, but with feature images, different authors, tags, categories, etc.

Theme Content

Create Your Theme

Inside the wp-content/themes folder inside your iwillmakeatheme installation, create a new folder. Name it iwillmakeatheme.

A basic WordPress theme requires only two or, arguably, three files.

The first of these must be called style.css(note that the name is not plural).

Inside that file add the following at the top, including the comment tags:


/*
Theme Name: I Will Make A Theme
Author: your name...
Description: A theme I am building to learn about theme building.
*/

Make Some Basic Template Files

One of the main reasons for the existence of Content Management Systems like WordPress is that they cut down on a lot of repetition. 

For example, the header and footer of most websites often don’t change at all. So, make three new files: 

  • header.php
  • footer.php
  • index.php

Inside header.php, add the following:


<?php ?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>
  </head>
  <body>
  <div class="page-content">

Inside footer.php, add the following

<?php ?>

</div> <!-- end .page-content -->
<footer>
  <small>Site by insert-your-name</small>
</footer>
</body>
</html>

Apart for the opening PHP tag in each file, what’s clear if you look at them is that the two files together make a complete HTML document.

In other words, some of the tags that are started in the header file (html, body, .page-content) are not closed until the footer file.

The Index Template File and Our First WordPress Loop

Now make another template file called index.php

Inside that file, add the following:

<?php
    get_header();
    if ( have_posts() ) : while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    get_footer(); 

This is obviously a more complex file than the previous ones we’ve made, but what’s happening here is that when the user goes to a page that uses the index.php file (a process determined by the wordpress template hiearchy), the server starts building an html page to send to the user’s browser.

  • The first instruction in this template file ( get_header(); )is to put the contents of the header.php file into the html file being created.
  • The last instruction ( get_footer(); ) is to put the contents of the footer.php file into the html file being created.
  • Between the header and the footer in this template file is the most important code in a WordPress template: the loop.
  • The loop firsts asks the database: do we have posts? What comes next depends on the answer.
  • If we do have posts, the next code starts outputting them until there are no more left.
  • If we don’t have posts, the message “Sorry, no posts matched your criteria” is output to the file.

Make sure all your files are saved. Now activate your theme (in the Dashboard: Appearance > Themes).

Go to the front page of your site. You will see either a blank page, an error message, or a bunch of posts (with no images, authors, categories, etc yet, but that’s coming).

If you are not seeing a bunch of posts, check that all your files are saved, that they have the correct names and extensions, and that the syntax is exactly the same as shown above.

If you do see posts, congratulations: you’re ready for part two of this exercise: common template tags.

Standard