Theme Development with Wordpress¶

Resources/Articles¶

Theme Documentation¶

Wordpress.org links

Using a template engine¶

Using Templating Engines to Streamline WordPress Theme Development
Timber - Twig template engine
- Uses Twig for templating.
ThemeAwsome - Foundation theme for wordpress.
Mustache for PHP BobTheCow

Setup for development¶

Create composer.json file - composer init

Add “type”: “wordpress-theme” to get composer to install it in the wordpress plugin directory

{
  "name": "",
  "description": "",
  "authors": [
    {
      "name": "Johan Martin",
      "homepage": "http://www.johan-martin.com",
      "role": "developer"
    }
  ],
  "keywords":[
    "Wordpress",
    "Theme",
    "Composer"
  ],
  "type": "wordpress-theme"
}

Developing with Timber¶

Resources
- Timber Cheatsheet
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