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

Primary or Antithetical

Inspiration from Yeat’s “A Vision”

In 1925 the nobel prize winner and author W.B. Yeats published “A Vision”. Here he introduced the dichotomy of Primary and Antithetical. To Yeats there is an opposition between Primary and Antithetical thinking.

We could draw an analogy. Connect Primary with “Drag and drop production”, and Antithetical with “Focus on code / database”. Then you’ll get a suggestive illustration.

WordPress' primary and antithetical phases.
WordPress’ primary and antithetical phases.

Now the extremes would be rare. But you could perhaps imagine a user, that does not understand any code at all. Everything is done via drag and drop. Would such a user be able to make a professional webpage. My answer is clearly: yes.

You could also imagine a user who does not care for the GUI at all. Everything is PHP or SQL to that user. Such a user could build new funcitonality on the core functions of WordPress. Writing code for the sake of code would be possible. But it’s absurd.

Most users are somewhere in between. The more you work with WordPress development, the more you’ll be dragged towards the code side.

The more you can accomplish with a content management system without having to write code, the better it is. But the human race is creative. We often seek something new.

And so the primary drag ‘n dropper depends on the coder – and vice versa.

In my research project I have seen very good multimedia productions with hardly any code. But if your vision transcends the limits of the out-of-the-box WordPress – then you need a skilled coder.

How to use the model

You can use the model in order to visualize the complexity of a WordPress task or solution. Let’s use a Child Theme as a sample:

A child theme
A child theme

A Child Theme will use a given theme – and elaborate on the code. The developer will have to write some code. Depending on the amount of added functionality, widgets, plugins etc. we can place the dot.

In this way we can use the original model by W.B. Yeats in order to visualize the complexity of a WordPress solution.

Another sample: install and use a new theme via the dashboard:

Install a theme via the Dashboard.
Install a theme via the Dashboard.
Visualize Complexity

The model is a visualization of the balance between code and user. Usability is the raison d’être for code.