Theme anatomy: custom and vendor assets

Stylesheets

Custom stylesheets

The Wordless approach is to use screen.sass, present by default, as the aggregator of smaller sass partials. By default you have something like:

theme/assets/stylesheets/
├──── screen.sass
├──── _post.sass
├──── _site_header.sass
└──── _tinymce.sass

where screen.sass contains:

.page-wrapper
  [...]
  @import "site_header"
  section.site-content
    [...]
    @import "tinymce"
    @import "post"

Every @import will insert in that exact line the content of the called partial, where partials are named _post.sass and just called post.

This will result in a single compiled screen.css. This file, starting from version 0.3, will be served using WordPress internal enqueueing function wp_enqueue_style.

At your will, you can add e.g. mobile.css or print.css support, going in config/initializers/default_hooks.php and extending the default function such as

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

then write your code into theme/assets/stylesheets/print.sass. Finally you need to manage yourself WebPack config: by default we have a single entry file

entry: path.join(srcDir, '/main.js')

and .css will be extracted by loaders in the standard way

{ test: /\.s(a|c)ss$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap') },
{ test: /\.css$/, loaders: ['style-loader', 'css-loader', 'resolve-url-loader'] }

Vendor stylesheets (or how to include assets only in a specific view)

Say that you have a jQuery plugin shipped with custom css, ok? Take the vendor-plugin.css and drop it inside assets/stylesheets folder; then include the assets in your views using stylesheet_link_tag() helper.

= stylesheet_link_tag("vendor-plugin")

Usually you want css to load in the _head.html.haml partial, but you can get it inside any view or partial. This will produce the following HTML, pointing to the assets/stylesheets directory:

<link href="/wp-content/themes/YOUR_THEME/assets/stylesheets/vendor-plugin.css"
      media="all" rel="stylesheet" type="text/css" />

Javascripts

Custom javascripts

The Wordless approach is to use theme/assets/javascripts/application.js.coffee, present by default. This file, starting from version 0.3, will be served using WordPress internal enqueueing function wp_enqueue_style.

At your will, you can add support to other files, going in config/initializers/default_hooks.php and extending the default function such as:

function enqueue_javascripts() {
  wp_enqueue_script("jquery");

  wp_register_script("application", javascript_url("application"), '', false, true);
  wp_enqueue_script("application");
  wp_register_script("myjs", javascript_url("myjs"), '', false, true);
  wp_enqueue_script("myjs");
}

then write you code into theme/assets/javascripts/myjs.coffee. Finally you need to manage yourself WebPack config: by default we have a single entry file

entry: path.join(srcDir, '/main.js')

Vendor stylesheets (or the way to include assets only in a specific view)

Say that you have a jQuery plugin to load, ok? Take the vendor-plugin.js and drop it inside assets/javascripts folder; then include the assets in your views using javascript_include_tag() helper.

= javascript_include_tag("vendor-plugin")

You can get it inside any view or partial. This will produce the following HTML, pointing to the assets/javascripts directory:

<script src="/wp-content/themes/YOUR_THEME/assets/javascripts/vendor-plugin.js"
        type="text/javascript"></script>