Child theme file overview

If you have ever worked with WordPress before, you should be able to get to grips with it pretty quick, as it uses the same file naming convention for all core theme files.

A fundamental principle of using Wonderflux is that it 100% supports core WordPress child theme functionality. It is possible to create a custom theme with only 1 style.css file – or over-ride and strip back as much as you want! Just remember that any core Wonderflux theme file can be over ridden in your child theme directory as detailed below.

Required files

style.css
Wonderflux is very flexible, but as with any WordPress theme you must have a style.css file. It must contain the following line Template: wonderflux – and that’s all you need to begin using Wonderflux as a theme framework, cool! A full example is shown below – you should have something like this at the top of your style.css file:

/*
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; }

Usual Files

screenshot.png
functions.php
You want a nice image shown in the admin dashboard when selecting your theme, right? Create an image 300px wide by 225px high and save it to your theme directory as screenshot.png.

Another standard feature of WordPress theme is a functions.php file. This can contain pretty much any code and functions you require and is the key to advanced theme design on any theme. Wonderflux allows for some very advanced functionality in your theme – which will be covered in a separate guide.

Wonderflux template parts

404-content.php
footer-content.php
header-content.php
loop-content.php
loop.php
sidebar-content.php
Wonderflux supports (and extends) the WordPress core function get_template_part() – which allows neat separation of display code and theme PHP. These are the best files to begin creating your child theme with (especially for beginners). When displayed on the page, they are each inside their own relevant configurable CSS <div> blocks ready to go! A great one to start with is loop-content.php – which controls the main content display of the theme.

Location awareness

One of the cool things about Wonderflux is that the template parts above are also ‘location aware’. When you are viewing any type of content, Wonderflux will automatically look for an optional file and use it first in your child theme directory.

For instance – if you are viewing a page, Wonderflux would look for the existence of the following files:
footer-content-page.php
header-content-page.php
loop-content-page.php
loop-page.php
sidebar-content-page.php

If this file doesn’t exist, it would roll back to the file name without -page, for instance footer-content.php in your child theme directory. If that doesn’t exist (as with any file) the core Wonderflux file will be used instead. For specific naming pattern examples, see individual entries above.

WordPress core theme files

404.php
archive.php
attachment.php
author.php
category.php
comments.php
date.php
footer.php
header.php
home.php
index.php
page.php
search.php
searchform.php
sidebar.php
single.php
tag.php
taxonomy.php
These are the usual files in any WordPress theme, in Wonderflux they contain a number of extra functions and hooks – so if you can’t achieve what you need through hooks and filters, just copy the core file into your child theme directory and it will over-ride the core file. Please ensure you keep all Wonderflux display hooks in-place. Most users will be fine using the template part files above – it’s up to you!

This Wonderflux guide document was last modified on: August 10, 2011 by Jonny