Code compilation

First thing first: using “alternative” languages is not a constrain. Wordless scaffolded theme uses the following languages by default:

  • PHUG for views as alternative to PHP+HTML
  • CoffeeScript 2 for JS (ES6 ready)
  • Sass for CSS

You could decide to use plain languages, just by renaming (and rewriting) your files.

Wordless’ functions which want filenames as arguments such as

<?php

render_partial("posts/post")

// or

javascript_url("application")

will always require extension-less names and they will find your files whatever extension they have.

See also

PHUG paragraph @ Using plain PHP templates

Anyway we think that default languages are powerful, more productive, more pleasant to read and to write.

Add the fact that wordless will take care of all compilation tasks, giving you focus on writing: we think this is a win-win scenario.

PHUG

Pug is a robust, elegant, feature rich template engine for Node.js. Here we use a terrific PHP port of the language: Phug. You can find huge documentation on the official site https://www.phug-lang.com/, where you can also find a neat live playground (click on the “Try Phug” menu item).

It comes from the JS world, so most front-end programmers should be familiar with it, but it is also very similar to other template languages such as SLIM and HAML (old!).

We love it because it is concise, clear, tidy and clean.

A snippet of a minimal WP template
h2 Post Details
- the_post()
.post
  header
    h3!= link_to(get_the_title(), get_permalink())
  content!= get_the_content()

For sure becoming fluent in PUG usage could have a not-so-flat learning curve, but starting from the basics shuold be affordable and the reward is high.

Who compiles PUG?

When a .html.pug template is loaded, Wordless plugin will automatically compile (and cache) it. As far as you have the plugin activated you are ok.

Important

You have to do nothing to deploy in production.

CoffeeScript and Sass

Here we are in the Webpack domain; from the compilation point of view there is nothing Wordless specific but file path configuration.

The default webpack configuration file is written itself in coffeescript, because it is natively supported by Webpack and because it make the code more affordable to read.

Configuration is pretty standard, so it’s up to you to read Webpack’s documentation. Let’s see how paths are configured in webpack.config.coffee.

Paths

Paths are based on the Wordless scaffold. Variables are defined at top:

webpack.config.coffee
4
5
6
7
srcDir = path.resolve(__dirname, 'theme/assets')
dstDir = path.resolve(__dirname, 'assets')
javascriptsDstPath = path.join(dstDir, '/javascripts')
stylesheetsDstPath = path.join(dstDir, '/stylesheets')

and are used by entry and output configurations:

webpack.config.coffee
18
19
20
21
22
23
  return {
    entry: path.join(srcDir, "/main.js")

    output: {
      filename: "application.js"
      path: javascriptsDstPath

CSS will be extracted from the bundle by the usual extract-text-webpack-plugin

webpack.config.coffee
69
70
71
72
73
74
75
76
77
78
79
80
    plugins: [
      new BrowserSyncPlugin {
          host: "127.0.0.1"
          port: 3000
          proxy: { target: "http://127.0.0.1:8080" }
          watchOptions: { ignoreInitial: true }
          files: [
            './theme/views/**/*.pug'
            './theme/views/**/*.php'
            './theme/helpers/**/*.php'
            ]
        }

Compiled files inclusion

Wrapping up: result files will be

  • assets/javascripts/application.js
  • assets/stylesheets/screen.css

As far as those files remain as-is, the theme will automatically load them.

If you want to edit names and/or paths, you have only to edit WordPress assets enqueueing configurations:

config/initializers/default_hooks.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?php

// This function include screen.css in wp_head() function

function enqueue_stylesheets() {
  wp_register_style("screen", stylesheet_url("screen"), false, false);
  wp_enqueue_style("screen");
}

add_action('wp_enqueue_scripts', 'enqueue_stylesheets');

// This function include jquery and application.js in wp_footer() function

function enqueue_javascripts() {
  wp_enqueue_script("jquery");
  wp_register_script("application", javascript_url("application"), '', false, true);
  wp_enqueue_script("application");
}

add_action('wp_enqueue_scripts', 'enqueue_javascripts');

Note

stylesheet_url and javascript_url Wordless’ helpers will search for a file named as per the passed parameter inside the default paths, so if you’ll use default paths and custom file naming, you’ll be ok, but if you’ll change the path you’ll have to supply it using other WordPress functinons.