Introduction to Wonderflux

Once you have got Wonderflux installed to your server, there are a few basic principles to understand on how Wonderflux works before you can really get going. Don’t worry, Wonderflux is designed to be simple and logical to use and you will be up and running in no time!

Download a free example Girder theme

Often the quickest way to get going is by looking at example code and playing around with it. There is a free example Wonderflux child theme called WFX Girder that you can download and install. It demonstrates how to use Wonderflux and some of the display functions.

1) Wonderflux is a theme framework

A WordPress theme framework is an advanced WordPress theme which provides layout, display and other functionality. They are specifically designed to be flexible for the designer or developer to customise. This allows rapid, professional theme development by providing an easy to update ‘core’ of cool stuff ready to use. JQuery is an example of a Javascript framework, as is WordPress which we already know makes a world-class website Content Management System framework!

Although Wonderflux can be directly activated, just like most ‘pure’ theme frameworks it is best used with your own Wonderflux ‘child theme‘. A child theme can comprise of one single style.css file or be made up of any files you wish that follow the normal WordPress theme conventions for theme file naming.

To create a child theme for Wonderflux, you can begin by creating a directory in your wp-content/themes folder and saving the following code as style.css

/*
Theme Name: Wonderflux demo theme
Theme URI: http://wonderflux.com/
Description: A demo Wonderflux child theme
Author: Me!
Author URI:http://wonderflux.com/
Version: 0.1
Template: wonderflux
Tags: two-columns, left-sidebar, flexible-width, theme-options
Template Minimum: 0.93
*/
a { text-decoration: none; }
body { background-color: #57aec0; }

If completed correctly, when you go to Appearance > Themes you will now see a new theme available called ‘Wonderflux demo theme’, which you can activate.

Remember the basic principle – if the file exists in your child theme it gets used instead of the Wonderflux theme file.

2) Wonderflux -content files simplify theme design

In addition to the usual WordPress theme files you expect, Wonderflux also fetches content into some of these files. Think of it like a clever include (or for WordPress developers – it’s a turbo-charged get_template_part function!). This separates the actual content display away from the code making for simple theme code edits and less repeating of code.

In Wonderflux the following files are ‘content aware’, meaning that if you are viewing a certain type of content (for example a page, or date archive) it will follow this cascade when looking for the file to use to render content to the page:

i) Optional in your child theme folder – header-content-page.php

ii) Your child theme folder – header-content.php
– used if header.content-LOCATION.php doesn’t exist

iii) Wonderflux core theme file – header-content.php

3) Wonderflux theme hooks

Just like WordPress, Wonderflux has lots of ‘hooks’ which allow you to interact with the code without any modifications – in-fact there are over 100! By using the hook system within Wonderflux it is easy to deploy advanced theme modifications to selected areas of the output of your WordPress website without overriding so many different files – there are many different type of hooks that become available depending on what type of content you are viewing (for example a page, or date archive).

Using hooks will be covered in more depth in another guide, but you can clearly see them displayed if you look at any of the core Wonderflux theme files – for instance single.php

If you wish to override more than just -content files like header-content.php COPY THE ORIGINAL FILE FROM THE WONDERFLUX THEME DIRECTORY into your child theme directory – for instance loop.php to ensure that you keep all the required WordPress hooks and supporting code present.

4) WordPress theme options

One of the benefits of using Wonderflux is that when you activate a Wonderflux child theme, you automatically get very advanced layout options which will be covered in more depth in a separate guide. To get to these options, you can either click on the Appearance > Style Lab link in the WordPress admin bar when viewing your site, or by clicking on the Wonderflux menu at the bottom of your administration menu if you are in the admin area.

This allows you to control and configure a complete, dynamic CSS grid, sidebar position, sidebar display, document type and language along with some other theme controls.

5) Your functions.php file

The functions.php file is an important file in any theme – and in Wonderflux it really opens up the power of advanced WordPress theme design. This is a file that sits in your child theme directory and can execute code to do a-lot of clever stuff! There will be more documentation to come on this, but it would be best to look at the WFX Girder example child theme and it’s functions.php file to see how this is used in Wonderflux.

This Wonderflux guide document was last modified on: September 20, 2011 by Jonny