Theme Development Process

The theme development process
The theme development process (Do you want a bigger picture? Click on the image.)
Process notes:
How to make and debug a WordPress theme
Toolbox

Automation (Nodejs)

Nodejs is a must in rapid development. Here are some essential tools.

SASS

Much template work is tweaking the CSS. A stylesheet preprocessor is a nice-to-have. Here’s how to use SASS:

sass --watch input.scss:style.css
Bower

Bower is a nice package manager.  Install libraries, e.g.:

bower install jquery bootstrap jquery-ui --save

The libraries are saved in the bower_components directory. The –save option will save dependencies in bower.json. If you download a repo without dependencies, they’re installed in this way:

bower install

Yep, that’s it.

Bower is installed via npm (part of Nodejs):

npm install -g bower

Version Control

Github

Here’s a link to (my work-in-progress) theme:

Github is made for group work. Code may be forked into branches, and versions merged to a mutual production.

Projects will give the group a nice kanban for work organization. Users may rise Issues.

Ready for Upload

When all is ready you can upload the theme for review on WordPress. Delete whatever files and directories that you don’t need.

Hidden files and directories must be removed.

If you use minfied scripts and css a non-minified version should be available. The files in the WordPress theme pool should be in clear text.

Then you can try to upload the theme for review.

Challenge: Write a Theme

One thing is to review themes. Another is to get it through the needle’s eye. Here’s the quest.

  • Hack a theme that’ll meet all requirements and WordPress standards.
  • The aim of the theme is to teach how to write a theme.

In this way the theme will be usefull not only for me, but for anyone who wants to learn how to make a theme.

Development environment

The core-WordPress themes don’t use preprocessors and similar. They want a clear and easy to read code. The aim of the core themes is to teach the art of theming.

I’m working on a LAMP server. So the code and methods will be easy to follow for any *NIX user. But we should not forget Windows users. Here’s a challenge. I don’t use Windows any more.

Nodejs

However in the business rapid development is often used. My approach is to develop a theme with Nodejs tools, such as:

  • Bower (package manager)
  • Sass (CSS preprocessor)
  • Gulp (compiling, automatic test)
  • Github will play a major role for versioning.
WordPress standards

The theme is an attempt to follow WordPress coding standards. Theme review tools, such as debugger plugins and code sniffers will be used. So will the theme debugger plugin. And of course the debugging features in WordPress must be activated. Edit these lines in wp-config.php:

 // Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );
Brainstorm

Multimedia designers tend to love animations. I’ll make a theme with many creative features, such as:

  • Animated splash frontpage (demonstrate costum pages).
  • CSS and JavaScript libraries (demonstrate how to implement external scripts and libraries). Such as:
    • Jquery, Jquery-ui (styling GUI elements).
    • Bootstrap (responsive grid, and menu)
    • Tweenjs or perhaps Wagerfield’s cool Parallax library

Something along these lines. You know: floating goblins, fairies, and creatures out of norse legends of old. That kind of stuff.

Review: WordPress for Beginners (New for 2017)

If your’re running a WordPress blog or similar “WordPress for Beginners” is a source of inspiration and knowledge. For web developers: this book is not for you!

Focus on Beginners

Perhaps I should have known: “… for beginners” may just mean “for beginners”. I bought the bookazine. At home it was opened. Not much about code here. Most chapters focus on the GUI usage.

What the web developer may find

Towards the end however things get more interesting, that is: for the web developers. There’s a chapter about the WP-CLI . And some tutorials. Anyone with a little knowledge of CSS would be able to follow the tutorials.

The bookazine’s focus on the end user makes sense. This book is what most people need in order to get up and running with any WordPress site – especially if you run a blog or similar on wordpress.com.

There’s good advice on how to choose plugins and themes. Twenty different themes are reviewed. Theme customization is introduced.

Here things get fun: fading buttons, hovering slide out menus, and so on.

The strength of the book is a clear focus on the WordPress beginner. The text does what it says.

Recommendation

 

Didactic Template

Maat - a Bootstrap theme with wp-navwalker
Maat – a Bootstrap theme with wp-navwalker. It’s still a very rough prototype. By now the code validates according to WordPress standards.

I’m working on a didactic template with these features:

  • Bootstrap (for responsive web design)
  • Wp-navwalker (for the menu)

During the development I’ve used SASS and Bower for rapid prototyping. The theme was validated by the theme check plugin.

Curriculum 2nd Semester

Twenty Seventeen: screenshot.png
Twenty Seventeen: screenshot.png

Reflow to the business academy

Friday: on a meeting we prepared for the upcoming semester.

I told the 2nd semester team about the ideas behind Twenty Seventeen. In many ways the theme for our first project and Twenty Seventeen are similar.

It’s interesting to note, that topics we’ve worked on for the last two -three years find its way to official WordPress themes. For instance Twenty Seventeen is defined as immersive.

The Role as WP Theme-reviewer

Anthropological field study II: experiences from the role as a theme-reviewer on make.wordpress.org

It’s the next logical step

To me the next logical step is to engage in themes. Since 2010 or so I have dabbled with themes. Testing themes is a challenge. Doing so will give valuable skills. That’s why I try out this role. The standards for WordPress themes are well defined. Working with review gives:

  • Knowledge about WordPress coding standards.
  • Experience with the role as reviewer and giving feedback to developers.
  • Experience with code validation. Not just the good old W3 validation services. It’s codesniffing with automation tools, such as phpcs.

Here bash commands, such as grep, is a great help too. It’s relatively easy to find lines, styles, classes, get_header, and so on. Testing themes is more than:

phpcs --standard=WordPress /wp-content/themes/themeName

Knowing the role

I guess that anyone starting out in a new role is bound to make errors here and there. Trying to engage in the open source community isn’t easy at all. By now I see two classes of theme-reviewers:

  • Theme reviewers: they determin whether a theme is mature for publication.
  • When the theme is approved, it’s passed to key-theme-reviewers.
  • They give the final judgement.

There are two layers of control here.

Enviromment

The theme reviewers meet on Slack.  Here they chat and help each others with day-to-day problems.

The themes are reviewed on Trac. Getting into the WordPress repositories is not easy at all. I saw one theme, that tried to get in for 5 months or so.

Impact on classes

This knowledge is valuable for the business academies. We need knowledge about the coding standards in the business. But we also have to be pragmatic.

I guess that sometimes it’s important to get the feeling of “IT WORKS!”. Validating the code according to the stern standards of professional WordPress developers would be a didactic suicide in the classroom.

At least I think that’s the case where I teach.

Our students should be able to code a child theme or a theme from scratch. You can say that they work with frontend.

Linux Mint

I use Linux Mint on Virtual Box as the theme-review platform. Doing a total review is somewhat time consuming. Even with codesniffers. I developed a template in markdown for the review, and went trough the list of theme requirements.

Here’s the list of requirements:

Required

A Fellow Researcher

WordPress used by researcher to publish findings
WordPress used by researcher to publish findings

Observation

Today a fellow researcher mentioned that she wanted to publish her findings on a WordPress blog. The researchers with a multimedia background promised to give an introduction to “add images and media“.

Deduction I: WordPress is everywhere. It’s not just a question of the odd multimedia designer student mocking up a web presence or webshop. WordPress is a tool for researchers too.

Deducton II: WordPress is used because you can publish without code knowledge. The ease of use is a major key to the influence of WordPress.

 

phpcs for WordPress

PHP Code sniffer is a code validator. In the tutorial: “Using PHP CodeSniffer With WordPress: Installing and Using the WordPress Rules” Tom McFarlin explains how to install the codesniffer with WordPress-specific sniffs.

Then Tom McFarlin gives a demo on a phpcs on the plugin Hello Dolly:


phpcs --standard=WordPress hello-dolly

I have installed the sniffer following the suggestions in McFarlin’s tutorial on a LAMP server with WordPress. So the tool’s in the box.