How to create a Child theme for Flexx

In order to preserve your original Flexx theme files (as downloaded), you should use a Child Theme. Using Child themes, you can modify (override) all aspects of an existing iThemes (Parent theme), e.g. the css code in the stylesheet, html or php code in the page templates, functions, without having to modify any of the original core theme template files. This also means that upgrading the parent theme does not overwrite any of your modifications.

This article describes how to create a Child theme for Flexx CandyApple theme, but it applies to all Flexx themes.

There is one modification required to the parent theme.

Minimum requirements

Your current Flexx theme should be at least at version 2.6.3 (release date: Oct. 15, 2009)

Modifications in the Parent themes functions.php

Locate the following code in functions.php of the parent theme. Note that currently, this modification will be overwritten when you upgrade the theme.

//A function to include files throughout the theme
//It checks to see if the file exists first, so as to avoid error messages.
function get_template_file($filename) {
if (file_exists(TEMPLATEPATH."/$filename"))
include(TEMPLATEPATH."/$filename");
}

and replace that entire block of code with:

//A function to include files throughout the theme
//It checks to see if the file exists first, so as to avoid error messages.
function get_template_file($filename) {
if (file_exists(get_stylesheet_directory()."/$filename"))
include(get_stylesheet_directory()."/$filename");
else if (file_exists(get_template_directory()."/$filename"))
include(get_template_directory()."/$filename");
}

This will make sure that theme functions will try to locate a theme file in the Child theme template first, and if it does not exists, the theme will use the file from the parent theme.

Creating a child theme

A child theme in the most essential form contains only a stylesheet, named style.css. Code in that stylesheet will tell WordPress that this is actually a Child theme, and what its Parent theme is.

To make sure all functions work properly, and all images used for the design of the theme, we will need to duplicate the following files and folders.

copy the images subfolder and all it's content to the Child theme folder

copy the screenshot.jpg to the Child theme, it will just look better on the WordPress themes panel (optional)

create a style.css, and make sure it has the proper information in the header.

Download a sample Child theme

Using the Child theme

Install the Child theme as you normally would, using the WordPress theme installer, or by unzipping and uploading the Child Theme folder to your wp-content/themes folder. Activate the Child theme just as you would activate any other theme.

How to change the navigation bar colours

The navigation bar in Flexx themes is generally made up from background colours, and background images. All the styling is done using CSS, you will find the relevant section labeled:

The background is generated using the menu-bg.gif background image. If that image doesn't exist, the background colour will be #058cc4.

All background images can be found in the wp-content/themes/{yourflexxtheme}/images/ subdirectory in your theme folder. You will need an image editing program to change these images.

Sample Code

Paste the following code into your child themes stylesheet, or at the end of your Flexx theme stylesheet, and notice the changes. I have simplified the colour codes, so that you can easily see what the visible changes are based on these css rules.

How to change the widget header colours

The widget headings in Flexx themes are generally made up from background colours in combination with background images. Changing the background colour will not show as long as there still is a background image defined for the widget heading.

The background is generated using the sidebar-h4-bg.gif background image. If that image doesn't exist, the background colour will be #013565.

All background images can be found in the wp-content/themes/{yourflexxtheme}/images/ subdirectory in your theme folder. You will need an image editing program to change these images, or you can remove the image from the css code, leaving just the colour.

How to change the Feature Top and or Bottom colours

The widget headings in Flexx themes are generally made up from background colours in combination with background images. Changing the background colour will not show as long as there still is a background image defined for the widget heading.

The background is generated using the feature-top-bg.gif background image. If that image doesn't exist, the background colour will be #134600.

All background images can be found in the wp-content/themes/{yourflexxtheme}/images/ subdirectory in your theme folder. You will need an image editing program to change these images, or you can remove the image from the css code, leaving just the colour.

You can for instance override the feature top colours by adding the following code at the end of you (child themes) stylesheet style.css:

#feature-top {
background: #e1771e;
}

Flexx Wide or Narrow

The width of Flexx is set automatically by the layout engine. There is no other way to set the default width of your Flexx site. Based on your settings, Flexx will either flex to a Narrow (780px) or Wide (960px) layout.

Set the layout

In your wp-dashboard, go to My Theme > Settings. Select one of the 6 layouts that you would like to apply. The layouts with no, or only one sidebar area will result in a Narrow layout. The layouts with a sidebar left and right (split sidebars), or the layout with one sidebar with 2 skinny sidebars in the middle and a wider sidebar on top and bottom will result in a Wide layout. See also this image:

The resulting layout, the default layout can't be changed otherwise!

Page templates

There are several page templates shipped with Flexx. These page templates can be applied to your WordPress pages, and allow you to add variations to your page layouts.

Page with Left Sidebar (narrow layout)

Page with Right Sidebar (narrow layout)

Page with No Sidebars (narrow layout)

Page with Left Sidebar (wide layout)

Page with Right Sidebar (wide layout)

Page with No Sidebars (wide layout)

Page with Split Sidebars (wide layout) (=> there is no Page with Split Sidebars layout for the narrow layout)

As you can see, there is a Narrow and a Wide version of each page template (except the Split Sidebars one). These are all included, since at the time of packing and shipping the Flexx theme, it is unknown which will be the layout you choose for your site.

This means, that if your site has a Narrow default layout, you should use the page templates designed for a Narrow layout.
For a Wide default layout, choose a page template designed for the Wide layout. This does NOT mean, that you can manipulate the default site width or a particular page layout by selecting a page template for Narrow if your site is Wide, or the other way around.

So if your default layout is Narrow, and you decide to choose a page template with a Wide layout, it will not change the page width, it will however most likely result in a messy page. If your default layout is Wide, you should only use the page templates designed for the Wide layout. Choosing a page template with a Narrow layout, will not change the page width, it will again probably result in a messy page.

To summarize: If your site layout is narrow, only use Page Templates that say (narrow layout). If your site layout is wide, only use Page Templates that say (wide layout).

Widgets

Flexx comes with default widget areas (also called "sidebars" by WordPress, which is not an accurate term). Depending on the widget areas you select in your layout, you can add content to your site using these widget areas.

For the aforementioned Page Templates, additional widget areas have been created. This allows you to use other widgets on your Pages than those in your default layout. These widgets are prefixed by the word "Page". So widget areas such as "Page Wide Sidebar Bottom" will ONLY be applied to pages that use a Page template. The "Wide Sidebar Bottom" Widget area will be applied to all posts, and to pages that do NOT use a page template as listed in the previous chapter.