Skip to content

Theme Development with Wordpress


Theme Documentation

Using a template engine

Setup for development

  1. Create composer.json file - composer init
  2. Add "type": "wordpress-theme" to get composer to install it in the wordpress plugin directory
  "name": "",
  "description": "",
  "authors": [
      "name": "Johan Martin",
      "homepage": "",
      "role": "developer"
  "type": "wordpress-theme"

Developing with Timber

  • Resources
  • Using Timber for development.
  • Setup to get it to work with Timber/Timber package.
    • In functions.php
      • Add include to site autoload file
      • use statements to alias class names.
require ABSPATH . '../vendor/autoload.php';
use Timber\Timber as Timber;
use Timber\Site as TimberSite;
use Timber\Menu as TimberMenu;
    * Remove check for Timber plugin
    * line 60 - change filter statement. 
        * `$twig->addFilter( new Twig_SimpleFilter('myfoo', array($this, 'myfoo')));`
* Will get you to an unstyled Wordpress page.

Configuring foundation framework

  • Checkout/download foundation-zurb-template
  • Copy src/scss folder.
    • app.scss
    • _settings.scss
  • Configuration
    • Add _custom.scss for our custom configs
    • Add component folder in sass folder for custom components
    • Add font-awesome icons as a dependency - npm install font-awesome
    • edit app.scss - explicit import statements
@import 'settings';
@import 'custom';
@import '~font-awesome/scss/font-awesome';
@import '~foundation-sites/scss/foundation';
  • Remove motion-ui imports and settings.
  • Edit _settings.scss
    • change @import 'util/util' to @import '~foundation-sites/scss/util/util';
    • Add section 57 for font-awesome
    • $fa-font-path: "~font-awesome/fonts"; - font-awesome path