Categories
teaching Themes What You Should Know

Learning 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
Categories
MMD2 Multimedia Deign

GitKraken Tutorials ( YouTube )

A few introductions to Github, and the gui GitKraken.

 

A very fast video

If you’ve got one hour …

 

Categories
Github Multimedia Deign

Github: The GitKraken GUI

The GitKraken app is a GUI for Github. Some people may prefer a GUI solution. The video above will give an impression of the app.

Branches

A strong feature on Github is the concept of brances. Here you may experiment with some code. Later on the experiments can be merged with the master code ( origin master ).

  1. Create a branch.
  2. Chekout the branch ( that is: work on the branch ).
  3. Edit the file.
  4. Make sure that the branch is chosen.
  5. Stage the changed file(s).
  6. Edit the commit message.
  7. Push to Github.

Go to Github. If everything is ok the changes should be stored.

Merge a branch to origin master

When you’re satisfied with the code in the branch, you may want to merge the new work with the stem of the tree. The stem is called ‘origin master’. In GitKraken rightclick on remote / master. A popup menu will let you merge from the branch to the master:

 

Click on the merge option. Then write a commit message, and click on Push.

On the Github web page you’ll be able to follow all the comitted changes:

Above you see the content of the file, and the history. The image below is the online version of the branches:

( The screencast and screendumps were made on a Ubuntu Linux system. )