Category: Theme Quest

The research project has a theoretical and a practical part. The Theme Quest is notes and reflections from this work.

Method: coding and reflections on code.

Working on a minimal viable theme

Post author By Per Thykjaer Jensen
Post date 2. February 2017
No Comments on Working on a minimal viable theme

Minimum viable WordPress theme (petj-mvp)

The concept “minimal viable production” is a common concept in agile projects. I’m working on a minimal viable WordPress theme. The rules are:

The theme must validate according to WordPress Standards.
The design is not important.

So it’s all about function then. You can follow the development of the theme here (petj-mvp).

The design is inspired by the first WordPress theme: Kubrick.

Theme Quest Theme Review Themes

Theme Development Process

Post author By Per Thykjaer Jensen
Post date 26. January 2017
No Comments on Theme Development Process

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:

https://github.com/asathoor/maat_bower_wp_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.

Theme Quest Theme 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.

Theme Quest Themes

Didactic Template

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.