====================================
Stable/production releases: https://github.com/Jonnyauk/Wonderflux/releases
====================================
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You may have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
You may also view the license online: http://www.gnu.org/licenses/gpl-2.0.html
Wonderflux is distributed under the GPL v2 license and just like WordPress is free to download, use and modify. YES, you can use Wonderflux on as many commercial, non-commercial and personal WordPress websites as you wish without any a fee, subscription or credit required (but it would be appreciated!)
Anyone is welcome to suggest ideas or code on GitHub, the goal is to develop a fantastic professional theme framework for everyone to use, for free, to make amazing WordPress sites! I appreciate any comments or patches - big or small!
The Wonderflux documentation site is a (slowly!) growing reference of all the files, functions, hooks & filters you can use in your child themes. Apologies, coding is much more fun than writing documentation, but there is complete in-line code documentation (PHPDoc format) in functions.php to refer to.
Please note the documentation website is somewhat out of date - I've fallen behind a little on working on this unfortunately, due to my normal (paid!) work. However, once I've completed Wonderflux v2.0 I'll be turning my attention back to documentation!
Getting bored already and want to dive in - lets go!
- [Download the latest stable release of Wonderflux.] (https://github.com/Jonnyauk/Wonderflux/releases) NOTE: Ensure directory is called wonderflux if downloading straight from GitHub master branch (not Wonderflux-master).
- [Download WFX Girder demo child theme.] (https://github.com/Jonnyauk/wonderflux-girder/releases) NOTE: You can rename this directory to anything you wish.
- Unzip and install both directories to wp-content/themes directory.
- Activate WFX Girder demo child theme.
- Take a look at the source code of WFX Girder child theme to learn more!
Any active child theme of Wonderflux automatically has access to a number of theme configuration options (almost all are filterable on individual view too - cool!)
You'll find these in the admin area under 'Appearance > WFX Stylelab'.
- Number of vertical columns
- Create additional multiple column layout definition sets
- Column system gutter width
- Main content width
- Main container position
- Optimise media queries (remove rarely used CSS rules = huge reduction in file output)
- Content width
- Sidebar width
- Sidebar position
- Sidebar/main content responsive breakpoint for full width
- Sidebar display
- Media content width
- Hide Wonderflux page templates
- Document type
- Document language
- Document character set
Other features available in admin area:
- Generate a single compressed/minified Flux Layout CSS file, less than 6k Gzipped!
- Full server environmental system report
- Backup and restore Wonderflux options
Feeling brave? Beta testers can try out the shiny new Customizer options by installing the WP Flux Layout plugin plugin. It's a work in progress right now and is not complete (may be missing options!), but when installed it automatically interacts with Wonderflux options - cute!
If you've used WordPress much, you are going to be right at home here! Wonderflux is developed to be similar to WordPress - it uses many of the same principles like actions and filters. It also features strong compliance with the latest WordPress theme standards (unlike most other frameworks!) and does pretty-much everything the WordPress way.
Wonderflux is a theme framework (sometimes called a parent theme) that you use by building your own child themes. You simply have both Wonderflux and your child theme uploaded to your normal WordPress theme directory.
By activating your child theme in the WordPress admin area just like a normal theme, it will automatically use files and functionality from Wonderflux, giving you a powerful toolkit and dynamic CSS layout system to rapidly develop bespoke WordPress themes for any purpose.
What makes a child theme work is a single line in the top section of
style.css - Template: wonderflux. This lets WordPress know you want
to use Wonderflux as a parent theme.
Child themes can be as simple as a single style.css file, or include any
number of files that override or add functionality to Wonderflux or your
website. A simple rule to remember is that if a core Wonderflux theme
layout file exists in your child theme directory (eg header-content.php)
it will be used instead of the core Wonderflux file. Read more about this
in the Template parts section below.
Only advanced developers will need to actually override other standard Wonderflux template files in their Wonderflux child theme, for example header.php or footer.php
IF YOU OVERRIDE THESE YOU SHOULD DUPLICATE THE CORE FILE FROM WONDERFLUX INTO YOUR CHILD THEME DIRECTORY, this will ensure you retain the Wonderflux structure and hook system to give you the perfect starter file to begin playing with!
The quickest way to begin learning how to use Wonderflux is to download the WFX Girder demonstration child theme and examine the file structure and code. There are lots of comments in each file to get you started.
WFX Girder is not only a good way to learn Wonderflux, but also provides a solid base starter child theme for you to build your own themes with.
These important files contain very simple content and layout. Separating the surrounding layout logic and code from the actual content makes the files simpler to edit. They can be thought of as re-useable parts that help avoid repetition of code.
An example is loop-content.php - used to display the main content of your site. Instead of repeating common CSS classes and layout just edit this one file, or see below on optionally extending with location awareness for more complex configurations.
If you have not worked with theme frameworks, parent themes or
get_template_part() before - welcome to the future of WordPress
theme development... and this barely scratches the surface of what
Wonderflux can do for you!
Any file that has '-content' in the name is a template part:
header-content-phploop-content.php(used to display main content)sidebar-content.phpfooter-content.php
Wonderflux extends the principle of template parts by adding
location awareness. This automatically adds the ability to use
files such as header-content-category.php which will override
header-content.php when viewing a category archive.
Location awareness works automatically - if the file exists it gets used,
otherwise it falls back to using the default file (the last listed). You will
see the files shown below in the order, or cascade of files that will be
used in given locations. We are using template part loop-content.php as an
example template part, but this will work with any main template part, or
indeed your own files if you use the wfx_get_template_part() function.
The loop-content-archive.php template part, is an useful (optional) file
for child theme developers. It's used as a common fallback file when viewing
category, tag, taxonomy, date and search archives views for a consistent
archive display experience. You can of-course create files such as
loop-content-date.php or loop-content-search.php to override this.
Wonderflux also feature basic non-desktop/mobile/tablet detection for
template parts. Create unique non-desktop optimised screen alternative template
parts by creating an additional file with '-mobile' appended, like:
loop-content-single-mobile.php which will be used instead on non-desktop devices.
-
SINGLE POST (INCLUDING CUSTOM POST TYPES) NOTE: Normal 'post' post type uses loop-content-single.php NOT loop-content-single-post.php
- loop-content-single-your-post-type-slug.php
- loop-content-single.php
- loop-content.php
-
CATEGORY ARCHIVE
- loop-content-category-your-category-slug.php
- loop-content-category.php
- loop-content-archive.php (common archive template)
- loop-content.php
-
TAXONOMY ARCHIVE
- loop-content-taxonomy-your-taxonomy-name-your-taxonomy-term.php
- loop-content-taxonomy-your-taxonomy-name.php
- loop-content-taxonomy.php
- loop-content-archive.php (common archive template)
- loop-content.php
-
TAG ARCHIVE
- loop-content-tag-your-tag-slug.php
- loop-content-tag.php
- loop-content-archive.php (common archive template)
- loop-content.php
-
DATE ARCHIVE NOTE: 4 digit year, 2 digit month with leading zero if less than 10
- loop-content-date-your-year-your-month.php (4 digit year, 2 digit month with leading zero if less than 10).
- loop-content-date-your-year.php (4 digit year)
- loop-content-date.php
- loop-content-archive.php (common archive template)
- loop-content.php
-
POST ARCHIVE NOTE: especially useful for custom post type archives - introduced in v2.0!
- loop-content-archive-your-post-type-slug.php
- loop-content-archive.php (common archive template)
- loop-content.php
-
AUTHOR
- loop-content-author.php
- loop-content.php
-
HOMEPAGE
- loop-content-home.php
- loop-content.php
-
SEARCH
- loop-content-search.php
- loop-content-archive.php (common archive template)
- loop-content.php
-
ATTACHMENT
- loop-content-attachment.php
- loop-content.php
-
PAGE
- loop-content-page.php
- loop-content.php
-
404 ERROR PAGE
- loop-content-404.php
- loop-content.php
Wonderflux generates a complete responsive CSS layout system built with Flux Layout. This replaces the pixel based system in Wonderflux v1 and generates a number of useful media queries based on your options (set in Appearance > Wonderflux).
Your Flux Layout system is generated from the following values set on the Wonderflux Stylelab options page:
- Site container width unit (default size)
- Number of columns
- Site container position
- Main content width
- Sidebar 1 width
- Sidebar 1 position
Flux Layout deals with responsive layout design by generating a complete custom grid system based on percentage values. In addition to the columns you set, it also generates half, quarter, fifth, eighth and tenth column systems.
Wonderflux 2 also simplifies the creation of layout code in your theme files compared to version 1. IMPORTANT: wfx_css() function is no longer required, you simply use normal CSS rules as defined in the Flux Layout system.
It is built with two files, which are included by default when you activate any Wonderflux child theme. Documentation to come, but in the meantime the easiest thing to do is to have a look at the file output and look at WFX Girder child theme demo. See the output of your document:
wf-css-flux-layout-core.css- basic rules and resetwf-css-flux-layout.php- dynamic generated CSS layout rules
I have some more development planned for the Flux Layout system and how it integrates with Wonderflux. Also be aware that things may change a-little following feedback from users and testing - this is a beta after all!
The entire grid configuration and all wrapper output can be filtered and removed if required. Remember this is a framework! Oh and if you spot somewhere that needs a filter or more flexibility, just let me know on the GitHub issues page.
Wonderflux features over 100 hooks allowing you to run a function in your child theme at specific output points when a page is rendered. There are general ones that will display across the entire site, and location specific ones that run only in specific locations or views, such as 'page' or 'category'.
You'll see the hooks available in each template file in Wonderflux, if you'd
like to see every hook available, check out the file:
wf-includes/wf-display-hooks.php
Also, if you are logged-in as an admin level user, you can set a constant in
your child theme functions.php file to reveal all hooks in the current view:
define( 'WF_DEBUG', true );
Updating Wonderflux is easy - just download the latest .zip file for the
relevant release, extract files, and replace the whole wonderflux directory
in your wp-content/themes/ directory with the new one.
I am careful to outline all new features and anything that could mess with your sie when updating Wonderflux - but it goes without saying you should read through the release notes and all code changes and OBVIOUSLY TEST YOUR SITE with each new version of Wonderflux as it becomes available.
If things go drastically wrong with your update, you should be able to revert
back to your previous version by replacing the wonderflux directory with an
older version of Wonderflux whilst working out what the issue is.
You should not modify the Wonderflux theme framework to avoid issues with updates in the future. One of the main advantages of using a theme framework is the ability to update the core framework to quickly and easily support future versions of WordPress and improve performance and functionality.
There are lots of ways to use Wonderflux from your child theme:
-
Filter the layout values to change the layout configuration at any time (including underlying CSS grid system).
-
Create a main template file with the same name in your child theme - this will be used instead of the core Wonderflux file.
-
Create a function with the same name as a core Wonderflux display function in your child theme - this will be used instead of the core Wonderflux function.
-
Remove a core Wonderflux action in your child theme functions.php file with the remove_action().
-
Add a filter to change or add to the code Wonderflux outputs.
-
Use over 100 location-aware hooks to detect what type of content is being viewed and automatically add unique content.
If you still feel the need to hack the Wonderflux core code - that means that there is probably something that needs changing! See somewhere you'd like a filter, spotted a bug, or see a function that needs extra parameters? Why not get involved with the project on GitHub, all feedback and contributions are welcome.
Drop by the GitHub Wonderflux project page to find out more. Branches and patches are probably the best way to contribute, but if you're not able to do this, do not worry - you can still send over your ideas, just create a new issue on GitHub and explain how you would like to see Wonderflux improved... and I'll do my best to accommodate it thanks!
I am proud to recommend BrowserStack for browser testing across multiple devices and platforms - it rocks!
It allows realtime browser testing and I use it to test all my websites - best of all they offer a free trial so you can see how awesome it is ;) Stop trying to wrangle multiple virtual machines and take the headache out of browser testing once and for all and make sure your website looks beautiful for all your visitors no matter what they are using!