Teaching WordPress Themes from Scratch

Here’s the challenge for the class:

  • Create a repo on Github.
  • Create a WordPress theme from scratch.

During the six hour lesson files, such as:

  • functions.php
  • header.php
  • footer.php
  • style.css
  • index.php

was presented one by one. The students had to create their own version of a WordPress theme on Github.

As far as I could see there were five – six groupings in the class.Some students were able to create a WordPress theme, like:

Some groups, however, found that the task was too difficult. I asked them, what was difficult, and got very honest feedback, like:

  • “We don’t understand the purpose of PHP.”
  • “Why can’t I see my localhost site online?”

On Github I could see, that some students didn’t understand the concept of includes. So there was some truth in the utterance: “We don’t know what PHP is“. In fact the problem was deeper than that.

Some 2nd semester students did not understand the basic structure of a HTML document. It was clear that at least some of them did not know which tags belonged to the head section, or the body section.

When I reviewed the code from some groups, it was clear, that thy didn’t understand the concept of includes, like get_header() og get_footer(). The idea of partials was not understood, so the basic contruction of the WordPress theme was not understood at all.

One or two students tried to develop the theme on say the desktop folder. Of course this approach wasn’t a success. I tried to help them moving the files to /wp-content/themes/

I asked the students to share code and work together on Github. They used Gitkraken as a GUI. Some groups could do it. Other groups did not get the concept at all. However most groups were able to share and edit code in a previous lesson.

Before you attempt to develop WordPress themes in the classroom make sure that the students have a basic understanding of concepts such as the structure of a HTML document.

Also I have an eery feeling, that at least some students need a better understanding of:

  • Operative systems.
  • The difference between own files and files online.
  • Where the files are (the concept of directories)
  • That the ../htdocs folder has other functions than say the Desktop on a localhost
  • What Xampp, Mamp or similar does.

Now here is the real didactic challenge. If the problem is a poor understanding of operative systems, localhost servers and PHP that’s where we have to put the efforts in the classroom.

So it was agreed, that the class should be divided in two large groups:

  • Basic code understanding
  • WP theme developers

Observations: 2nd Semester Multimedia Design

Observations from a 2nd semeter class working on a magazine case. The class installed WordPress on localhosts a week before. During this class the students were introduced to themes and child themes. In the weeks to come the class will tweak a theme to suit a visual identity.

Issues for students on Mac-laptops

Before the teacher entered a student had a frustating problem. She had installed WordPress on a localhost environment via MAMP. But in the class she could not see the WP (WordPress) website. There was a message, like:

“No database connection.”

But it worked all right last week, she said. Noone really could say why such things happen. But I tried to help her. Checked the usual suspects, such as the settings in content.php, file and folder permissions. That kind of stuff. Nothing worked.

In the end she had to reinstall MAMP. She reinstalled MAMP, only to find more or less the same error. For some reason MAMP used port 8888 ( http://localhost:8888 ). The wordpress install seemed ok.

I suspected a missing database, but the link to PhpMyAdmin was missing in the MAMP admin panel. Actually she had to enter the link to:

http://localhost:8888/phpmyadmin

This url gave her access to the database.

Here we could see, that the wordpress database was missing. She created the database, and edited the wp-config.php file. Now she was able to reinstall WP again.

But then she could not upload pictures. Neither could 3 – 5 other students. I told them to give read-write permissions to the wp-content folder.

A typical usecase

This is a typical usecase, when we teach WordPress to students. The students on Windows systems don’t have such challenges ( apart from the occational blue screen of death, and related matters ). But the students on Mac systems, they’re in for a harder time.

During a break the interaction teacher told me, that such problems are common. A Mac is cool, but the security issues with file and folder permissions are stumbling blocks.

Roughly one third of the class used Mac laptops. So we know that they will experience issues.

The Magazine Case

Before the class the students worked on a magazine case. They had to imitate the style and fonts of several printed magazines. The HTML and CSS had to validate. And the teacher gave feed back to the groups.

The teacher asked the groups where they were in this process. Most of the groups had worked with logos, and the importance of visual identity was discussed. He (re)introduced an interesting tool:

“Use identifont to check whether your font is ok. Check whether your WP is still running, after the install last time.”

And told, that some fonts may cost money, but there are also free fonts available. E.g. you don’t have to pay for a font like Copperplate, since it’s a standard font in most browsers. Anyway: use fallbacks.

Theme and Child Theme

Then the teacher gave an introduction to themes. Twenty Seventeen was installed on the fly. The class was introduced to the costumize tools in the theme.

The students experimented with additional CSS. Most of them were able to hack small tweaks here. Some of them used developer toolbars, or the inspect element in Chrome or Firefox.

It seemed to me that the styling was a challenge. How are the elements styled? Some used the inspect element tool in the browsers. But often their CSS-rules were “overruled” by the theme settings. So they had to find tweaks.

They also tried to change the background and header images. Again some students experienced write-permission problems. Yes, they used a Mac-laptop. And the cure was the same as above.

During a short break the teacher told me, that such issues are common, when the students show up with a Mac. It’s hard for them to figure out, where things are, and stuff like folder permissions are big issues here.

The class was ready for the next level: child themes. The teacher wanted to demonstrate what a child theme is. He asked everybody to close the laptop lid, and listen. Unfortunately that was the moment when the projector decided to crash. There was nothing but a blue screen.

The teacher returned to the old virtues, and drew the file structure on the wall. Perhaps that was a lucky punch, because the file structure became very clear in that wat. Then he explained:

  • the content of style.css
  • how to add the stylesheet from the “mother theme” in functions.php.

The class worked for a while. Then it was time for lunch. Everyone walked to the canteen.

Thanks to

Project Impact

How many times have my Tweeps and blog posts been read? It is impossible to know such a thing. On the other hand, it is possible to follow statistics on Twitter and on my web server.

Here’s a quick and dirty status over the media impact of the research project “What You Should Know About WordPress”. If we add the tweeps and the visitors at my website, there are around 9171 visits or reads.

It’s easy to follow the statistics on Twitter. On research-wordpress.dk I have counted visitors. After all: there’s a good chance that they are human.

Projekt impact    
Tweets: 7 (only relevant tweeps counted) 1365 impressions
Website: 89 posts 7806 visitors
MDU 60 persons
Slack ( not counted )
make.wordpress.org ( not counted )

REST API (last attempt before the weekend)

REST API: content via Ajax
REST API: content via Ajax

Before the weekend I just had to try to grap content from my webpage via AJAX. The code is still a bit crude, but work it does. With a little tweak here and there it will be possible to show “New Posts” or “… more from the category X” and similar stuff.

A few external scripts seem to be blocked by my client.

REST API

REST API
An answer from the REST API. It’s a Json object, that was send to a Linux terminal via curl ( it’s a tool to transfer data from or to a server).

“WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings.” (Source: WordPress’ text about the API).

One of the great news in WordPress 4.7 is the REST API. Now it is possible to exchange data in the form of Json Objects.

Let’s try out the REST API in a simple terminal. In bash try this:

curl http://research-wordpress.dk/wp-json/wp/v2/categories

Perhaps the result above seems like gibberish to the uninitiated. But if we use a Json parser online, you’ll get a human readable result.

The Json object unfolded. You can see one category.
The Json object unfolded. You can see one category.

If you’re eyes are in top condition, you can see:

  • name: “Book Review”
  • description: “As a researcher I read a lot of books … etc.”

So a standard WordPress installation is able to exchange data between a behemoth of platforms, such as apps on mobile devices, and any kind of code that’s able to process Json, such as:

  • Ajax
  • Python
  • Bash
  • PHP
  • Ruby
  • Nodejs
  • etc.

The possibilities are virtually endless. REST API marks a huge step foreward.

Read more: REST API Reference.

24 Hours On WordPress

The last 24 hours or more I have been on WordPress. A template part has been made. In the evening, and night I participated in WordPress Slack. Today the categories were organized in the entire site.

The Aquarelle template part

In Web Developer 258:50 pp. there’s a lovely tutorial on a watercolorlike animation for a web page. I just had to try it out. Here’s the result ( as allways it’s a rough draft, but it was fun to make it ). Functions.php needed a few additional scripts. The partial held the markup, and the javascript. Now the Aquarelle partial may be used on a costum page or similar.

The theme_review meeting

In the evening I participated in two Slack sessions. The first one was the theme review group. Nine or ten active developers participated during the one hour long session. A question was asked:

  • Should we allow iframes?

A heated debate followed. There were utterances, somewhat like:

“I hate iframes …”

More than often there was no argumentation at all, at least from a philosophical point of view. Hating a phenomena is a pathetic argument. Literally speaking! After a while I could see, that these theme reviewers had a point.

Who knows what kind of stuff such iframes link to?

The iframe is not allowed if you want to publish a WordPress theme on the WP repos. So the debate was perhaps just for the hell of it. In the end there was a referendum. Should WP whitelist some urls, like YouTube. The answer was no.

I entered the group because a point on the agenda was a mentor solution for new theme reviewers.

Training

An hour later or so the training group met. The climate was very cosy. The participants suggested new learning modules. Talked about the intended target group: not students but teachers.

I suggested a module on Coding Best Practises. And guess what. I became the first editor. One of the sysops made me editor on the spot. And so the module will come to life wery soon.

Later on one of the group officials helped med to activate an editor account. Now I can edit the text(s). And even look foreward to give some help here and there, if I can. I felt at home and among human beings. So training was a very good experience.

Installing WordPress in a Second Semester Class

Differences between operative systems is a major challenge when you teach WordPress. Experiences from a real life classroom session in a second semester multimedia designer class.

Yesterday I introduced WP to a second semester class. So these notes are based on my own reflections after the session.

First a strategic overview:

The class used XAMPP as a local development environment during their first semester. 32 students were present. 22 had a Windows PC.  10 students or so used a Mac. That is: as far as I remember.

I had a PC, but decided to demonstrate the installation on a system with Windows 10.

In XAMPP a database was created. We used PhpMyAdmin. All created a database named wordpress with utf8. So far so good.

Then the class downloaded the latest version of WordPress, from WordPress.org > latest. That was the easy part. No problems whatsoever here. They unzipped the files to ../htdocs/wordpress/..

In theory they had to edit these lines in wp-config.php:

/** MySQL database username */
define('DB_USER', 'root');

/** MySQL database password */
define('DB_PASSWORD', ' ');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

Here the differences between the operative systems proved a major challenge.

  • Most students had WP up and running with no problems.
  • Around five Windows users had problems with XAMPP. The cure was: reinstall.
Mac challenges

So far so good. But the Macs was the real problem. They had to use a password. But: what is the password?

A workaround was used: give a password to root. That was a bad idea. Don’t do it at home, please. XAMPP worked all right, but now the users could not enter PhpMyAdmin from the administration panel!

A better workaround was this: create a new user for the database wordpress and grant all privileges to that user.

Didactic challenge

As a teacher it’s allways a challenge, when 1/3 of a class has to do one type of work – while 2/3 of the class is waiting. To this add some 5-6 students, where XAMPP crashed half a year ago or so. While these studens were fighting with XAMPP-related challenges the ones with WordPress up and running grew impatient.

That’s natural I guess.

Introducing WordPress features

Most of the systems were up and running around 10:30. However a few still had problems, so they were advised follow introductions to posts, pages, menus, themes etc. from 10:30 – 11:30.

During that session, they also tried to personalize the theme with costumize.

Themes and child themes

After lunch I gave an introduction to themes. First I introduced the “sandwich” concept of:

I had developed a minimum viable skeleton theme with as little markup as I felt possible. So I demonstrated:

During this part of the class I downloaded the zip from git and instlled the petj-mvp theme on the fly from a downloaded zip.

I hope that this demo gave an idea of the inner workings of a theme. But skeleton themes are ugly. The last part was an introduction to Twenty Seventeen.

We made a child theme. As far as I could see most of the students had no problems making a child theme of Twenty Seventeen. I demonstrated how to change the footer.php in the child theme:

  • Copy footer.php to the child theme folder.
  • Add a h1 tag (or similar) and add a message.
The last session

So most of the class had WordPress up and running. But still 4-5 students had problems. I decided to focus on these students, and let the rest of the class prepare for the next day .. that is somewhere else.

I had to go through the computers, and look at strange XAMPP problems. Some installations refused to work even though everything seemed fine.

As a workaround these students installed WordPress via Bitnami. This installation works like a charm. But I knew that the files are saved in another location.

C:\xampp\apps\wordpress\htdocs

On a Mac the files are in a similar folder, but of course in:

/Applications/XAMPP/apps/wordpress/htdocs/

Again the Mac users had to unlock the folders in order to upload images etc.

14:20 Leaving the classroom

The last student had his WordPress up and running @14:20. So much for the famous “Five minutes install”. WordPress is not the problem here. It’s XAMPP and the differences between the operative systems. Here’s a huge stumbling block for WordPress teachers.

As a teacher I need a local development platform, where WordPress just works out of the box on any platform – be it Mac, Windows or Linux.