This is part 2 in the story of the evolution on the a3rev Parent Theme Framework. Picking up where we left off in Part One Getting Started – its now early October 2012. We have a Parent Theme Framework, but whats a Parent without Children?
Stage 2 – The Children
Like all responsible parents you don’t have children without giving it some thought and doing some planning. Building a Parent Theme Framework is one thing but how best to handle the Children that is another issue altogether.
To start with we went back to the 4 guiding concepts we establish before we started the project. When we did that again it was pretty easy to come up with our child structure.
1. Child Themes must only apply the style. In other words they are a ‘skin’. The parent controls the layout.
2. All Child themes must be seamlessly inter-changeable. That is if you change a child theme all the layout features created in the Parent Theme remain the same, the new child just applies its own style to that layout.
3. The child theme is a starting point of the site style, not the end point. We wanted users to be able to use any Child Theme as is or to be able to easily customize any aspect of the Child Theme style by simple point click and WYSIWYG editors.
4. Child themes like the parent must have one click auto feature upgrades and bug fixes.
5. Easy and quick install and activation of the child themes via the WordPress Themes uploader.
Sounds logical that is the way a family of Child Themes should work. So we set off on building the first Child theme which would later be called Chameleon.
Chameleon Responsi Child Theme.
In retrospect we really did bite off more than we could chew with the first child theme – but having started we just chewed like hell. Chameleon is the child theme that users would choose if they wanted to start from scratch and launch all of their creative forces.
The Chameleon Child is really the form of the parent with initially 7 different coloured skins to act as a base to start styling from. We also created a front-end skin selector and style editor to allow users to look at and edit the skin and some main options from the front end.
Initially we built the front end skin selector into the Parent Theme Framework thinking we would use it with all of our themes. We would later spend considerable time changing this, but more about that in another post.
Making the Chameleon Child Theme with it’s 7 different skins took all of October and bit into November to finish but we learned a lot from doing the hard one first. The decision was then made that all subsequent child themes would add a specific style. Because the Childs just add the style to the framework, we could use our skill as HTML and CSS coders to create individual designs that users may prefer to use ‘out of the box’ or as a base to start creating their own unique design from.
Elegance Responsi Child Theme.
Creating the Elegance Child theme was really quite a a simple task now with all of the ground work we had put in over the previous 4 months. What was not simple was creating the Child Theme interchange process.
Remember we said that we wanted all of the Child themes to be easily changed without losing the layout created by the Parent Theme. This is extremely difficult to do when it comes to things like Nav Bars and child specific features.
Now that we had 2 Child themes we could start to perfect being able to change child themes with just the child style applying to the existing layout. We tested, tweak and tested again and again to perfect this. It was right here that we found out what a monumental task this was when we had built 7 different skins into the Chameleon Child Theme (we’d later add another 4).
Eventually we got this feature working well enough that we were confident to move on and create another 2 child themes:
Decor Responsi Child Theme
In Decor we really went for an extravagant design. Just wanted to be sure that we could support any kind of design. In the end we are very happy with the result and the highly styled layout worked a treat with the Parent Theme framework and the child interchange – big tick.
Professional Responsi Child
This was a theme design that we had done for a previous client project that never really got off the ground. We always liked the design and converting it to a Responsi Child Theme was pleasingly simple to do. Within 2 days of starting the Professional Child theme was completed.
Stage 2 Completed.
On the 12th Of December 2013 we committed the source code for the 4 child themes to the a3rev Github Repository and created the readme’s and first release. Wow 5 months on and we had a working Parent Theme Framework and 4 Children. That is pretty exciting.
We were enthused and ready for stage 3, testing in the real world.
End Part 2.