anunatak/anunatheme

dev-master 2017-02-17 14:30 UTC

Requires

• danielstjules/stringy: ^2.2
• jjgrainger/wp-custom-post-type-class: dev-master
• symfony/http-foundation: ^3.0
• tormjens/wp-blade: 2.0.1

MIT

• Tor Morten Jensen

README

AnunaTheme is a WordPress starter-theme based on Sage, flavoured with Laravel Blade.

If you are looking for a complete production-ready theme, move along. AnunaTheme is a skeleton and contains a bare minimum of styles, and acts as a starting point for developers.

Features

• Sage
• Laravel Blade
• jQuery DOM Router
• Gulp
• Foundation for Sites 6
• Off Canvas Menu
• CoffeeScript
• Browserify
• Bourbon

Requirements

Prerequisite	How to check	How to install
PHP >= 5.4.x	php -v	php.net
Node.js 0.12.x	node -v	nodejs.org
gulp >= 3.8.10	gulp -v	npm install -g gulp
Bower >= 1.3.12	bower -v	npm install -g bower
Composer	composer --version	getcomposer.org

Ajax Requests

In AnunaTheme AJAX is made really simple.

PHP

On the server side, in your lib/ajax.php

Ajax::create('my_cool_action', function($request) {
	echo $request->get('cool_parameter_from_request');
});

The $request object is an instance of Symfony\Component\HttpFoundation\Request. Check out the documentation for usage instructions.

CoffeeScript

On the client side, in your assets/scripts/plugins/routes.coffee:

new Ajax 'my_cool_action', ( (response) ->
	console.log response
),
	cool_parameter_from_request: 'You are cool!'

The client side Ajax class accepts the following parameters:

• action: The action to send the request to.
• callback: A callback function.
• data (optional): An object of data
• method (optional): The method to use for the request. Defaults to 'GET'

404 Page

We've incorporated a fun 404 page in the theme. When your visitors lands somewhere that doesn't exist they can play the ever popular Snake game. The code behind it courtesy of Nick Pierson, which developed the game while becoming more familiar with JavaScript. We've made some minor adjustments which allows us to modify colors and listen for events. See the Github page for the plugin.

DOM Based Routing

Sage has this thing they call DOM Based routing. In AnunaTheme you can route your stuff in the same way, except we are using this awesome jQuery-plugin called jquery-dom-router.

We've set this up so you can add your dom routes in assets/scripts/plugins/routes.coffee.

Blade

Blade is the template language of the excellent Laravel framework. Anunablade bases all of its templates on it, thanks to Blade for Wordpress.

All theme-files are "Bladed" and ready to be used with the Blade syntax. Since Blade sort of acts like it's own theme wrapper we've removed Sage's wrapper.

See for example the index.php-file for an example on how to extend upon layouts.

All template files are located in the templates-directory. The folder cache acts as a cache for WordPress template files (e.g. all template files that WordPress' template hierarchy searches for).

Gulp

In the themes gulpfile there are several tasks defined for a great workflow.

• images will optimize images located in assets/images.
• scripts will compile the CoffeeScript and Browserify.
• styles will compile the SCSS.
• watch will watch files and run tasks when they are needed.

When developing source maps are created, and the output will not be minified (styles and scripts). To create a production-ready file, simply add the --production argument when running gulp (gulp --production)

Naming Conventions

All functions in AnunaTheme are named by Sage's naming conventions. Meaning that they are namespaced.

Renaming to your theme

To use your own theme name instead, do the following search and replace in all files from the root of your project.

1. Namespaces: Search for AnunaTheme\ (case sensitive) and replace with YourNamespace\
2. Text-Domains: Search for 'anunatheme' (case sensitive) and replace with 'your-textdomain'
3. Theme Name: Search for AnunaTheme (case sensitive) and replace with Your Theme Name

Getting Started

1. Install Composer dependencies: composer install
2. Install NPM packages: [sudo] npm install
3. Install Bower dependencies: bower install
4. Run Gulp for the first time: gulp watch (For more options see the documentation)

Documentation

Sage documentation is available at https://roots.io/sage/docs/.