Child’s Play, child theme for Thematic

Child’s Play is a child theme for the Thematic Theme Framework, it is built with the mobile-first approach to responsive web design, but with a few unique features. It was originally created as a stress test for the Responsive Base to find more improvements and make sure I wasn’t forgetting anything obvious. After adding new functionality and some styling to make it a little more visually impressive, the Child’s Play child theme was born.

Child's Play Responsive Theme Image

Demo Child’s Play Theme

Download Child’s Play

This project is on Github, so feel free to contribute!

Child’s Play Highlights

While this child theme shares all the same benefits as the Responsive Base child theme, I won’t be repeating them here. Child’s Play is unique in that it is the only child theme (I know of) available for Thematic which has the benefit of using Sass and Compass. Child’s Play turned out to be a good alternative to Responsive Base for those who want even a more refined starting point for child theme development. Although if you were coding a site from a PSD, Responsive Base would probably be a better start.


Child’s Play takes it up a notch adding presentational styles and utilizing some very handy features that using Sass and Compass provide. I can’t really dive into all the things that make Sass and Compass great, that is already heavily documented and there is no way I could ever do it justice. All I can say is from now on, I will always be using Sass and Compass for my future projects, I think you should too.

The Functions PHP

Probably a little over the top, the functions.php clocks in at a little over 500 lines of code. I ended up reworking a bunch of things and adding more options to be reused in other various projects.

  • Added WooThemes Flexslider which works off of sticky posts, it is currently set up to show featured images of 750px wide by 425px height, which can easily be changed. You just have to settle on a specific size and make sure they are saved as the same size when using this option. If you have no sticky posts, the slider just won’t show, and best of all, the slider assets won’t load.
  • I also went ahead and added a header aside widget, I use this a lot for addresses, search bars, or even social icons, which comes in handy.
  • Added a heavily modified version of FlexNav, a jQuery menu that is collapsed on mobile devices to provide more room for content, currently the menu doesn’t support drop downs now supports drop downs.
  • Modified the postheader and postfooter to offer a different style, keeping the content on top.

Last Thoughts

Again, check the Responsive Base starter theme for more information on all the features packed into this child theme, Child’s Play just takes it a step further. This theme may be a little advanced for someone just getting started with Thematic, but if you already use Thematic for all your child theming, I think you will love this setup. A lot of the work on this theme comes from a big push from myself to optimize my workflow and stay up on the latest best practices.

Update: Now made to comply to with Idiomatic-CSS guidelines.

Update: Now works with the Thematic HTML5 Plugin by Karin at


  1. Hi Scott, Love your theme, Child’s Play!
    I would normaly ask this in thematic forum but for some reason I can’t log in. I get a “this site is protected by the spammer registrations” I have used the field to ask to be placed on the system white list several days ago, but can still not log in. So I hope you see this and are willing to help me.
    This is my first attempt to get into a responsive theme, and digging in your theme is a great start. Have not use the SASS and Compass this time for the lack of time. I do have a problem that I cannot get the grip on. I have used your code for inserting an image in the header with admin interference and now I can’t get the blog-title and description to ”lay over” #branding. I feel that this is just css but I have tried everything I can think of.
    I have add this to my style.css like you suggested in this thread.
    #branding img {
    height: auto;
    max-width: 100%;
    If I just add the image to the css like a background for #branding it works great, but for the sake of learning new ways I like to try to implant the function of changing the image from wp-admin.
    Any tip much appreciated. The site is temporary at

    • Yeah, I have heard of the login issues, I sent an email but haven’t heard anything back.

      I took a look at the demo site and there are a few ways to do it. The easiest way would be to position:absolute; them on top and give the branding a fixed height, but you will find that it might be a little tougher to make responsive (it is doable) as you will have to check how the positioning looks at all breakpoints (scaling the browser).

      I would also recommend getting rid of the white background on the image, instead do that with CSS, so make the branding background white, add top-left and top-right border radius through CSS, this will actually give you more flexibility (make life easier) dealing with the responsive aspect.

      • Thanks for your replay and help. I have made same adjustments like you suggested and get it to look like I want in the browsers. It sort of scaling but do not look nice on some mobile devices with the image behind it becomes a bit cluttered. I’ve manage to use some breakpoints (I think) to make the title smaller and the position different on mobile devises. I’ve my friend (the owner of the karate club) here today and he thought it looks good, so I guess I should be pleased with the results then.
        I’m thinking that I might do this site with an image instead of the #blog-title in a span, like I use to do. Or try to fix the css so there is no image at all on mobile devices.
        I haven’t heard anything either from the forum. It is a bit frustrated, because I know for sure that I have not done anything wrong.
        Thanks again, and I relies that I have to take the time to learn SASS and Compass to make my life easier!

  2. Alex
    | Permalink

    There is only one disadvantage I have noticed yet. Almost all entypo icons are not seen in my Android device. The built in browser, it’s Chrome, if I am not mistaken, does not show the icons, Opera Mini shows crap instead, and only Firefox shows them properly. So I will have to replace or remove the icons, it’s a pity. But I am really grateful for your wonderful responsive theme, it’s really excellent together with Thematic and I am going to use it from now on.

    • I still haven’t had a chance to test this, or actually look into what the problem could be. The theme is pulling the fonts from, I actually need to remove that. I actually forgot the theme was doing this, I have even written places that loading font icons from a external source isn’t ideal. The best solution is to use a service like IcoMoon, where you can load only the icons you need (much faster). If you have any trouble, let me know and I can “fix” the icons, then push it up to Github. If I did that, the commit logs would show exactly what files were touched, and what was changed so you could see exactly what to do.

  3. I Scott,
    I’m using your theme like a framework on my website. Something strange is happening… the widget areas are kind of crazy! They appear ok on the admin, but the widgets I put on the Header Aside, goes to Primary on the web. And the ones I put in Primary, go to secundary!
    What could be happening?

    • Hmm, I haven’t ever seen anything like that before. I can’t even think of something that would affect the widgets like that. The theme works for me fine (the widgets), so I would start commenting out any added code in the functions.php and disabling anything added like plugins to narrow down what it is. Sorry, not much help on this one. :P

      • Ok, no problem. I will investigate it and let you know if I find the problem! It’s crazy… :)

  4. I found it… the problem is that I’m using a Theme Switcher plugin to work on the new version of the website… and the plugin make some confusion with the widget areas between themes…
    Thanks Scott!

  5. I have installed this theme. I have a question: what file do I have to edit in order to show only the last 2 or 3 blog posts?

    (PS Just noticing that the previous commenter (Cristiano) also has a site about the brazilian culture just like my site but in Spanish :) Congratulations Cristiano!)

    • scott
      | Permalink

      You can modify how many blog posts are shown from inside the WordPress admin.

      Settings > Reading

      You will see a setting for “Blog pages show at most”, just change this to 3. This however will make it show only 3 posts on each page, to have the front page show 3 and the rest show more, you would have to do a custom query inside the functions.php, or create a custom front page template.

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>