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

Last update: April 13, 2020 15:25:03