Categories
Posts

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.

The CSS

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 invistruct.com.

50 replies on “Child’s Play, child theme for Thematic”

Hi Scott,

I’ve started to customize Child’s Play theme locally for my photography site turknikon.com. Last night it was %99 ready for production and i’ve activated the theme but the FlexSlider doesn’t showup.

I can see it loads the flex css on top and flexslider.js at the bottom. Also when i look at the page source i can see that it gets my two sticky posts.

I had to return to my older theme. But any help will be good.

Thx

I deactivated all the plugins and flex slider worked. Then one by one activated plugins and checked the slider in every plugin activation. After i’ve activated JetPack from WordPress plugin flexslider started to stop again. I think Jetpack causes the slider stop but i don’t know how to fix it.

Well, this is interesting, especially since I have no clue to why there is a conflict. I will have to do some tinkering.

From what I have figured out, there is some kind of conflict with the conditional tag && is_sticky(), if you remove this from the functions childtheme_flexslider_slider and childtheme_flexslider_script in the functions.php, it will work fine.

This will fix it, but forces you to use the slider. If you didn’t use sticky posts, it technically breaks and defeats the whole purpose of me trying to only apply the code when sticky posts are present. I will try to find more info, but if you always plan on using the slider, then the above solution is fine. It just doesn’t work if you removed the && is_sticky() and then remove the “Stick this post to the front page” from all your posts in WP.

Looks good on the full size width, you mentioned you still need to play with it, I imagine that has to do with converting existing elements to scale correctly at smaller device widths. Something like responsinator.com may help for testing on different devices.

I may take a closer look when you get further along with fixing some of the issues at smaller widths, most of it is really easy CSS. It is probably a fairly big task converting the site.

Great theme!

I’m a thematic fan and have been using it for a a couple years now. I’m pretty versed in it but am just getting back to using it after all the new updates.

Something I’m trying to do is remove the .menu nav, jquery function so even smaller device widths show the normal access/nav as @media min width 768px.

I know some styling will be needed and I see the access function in the child’s play theme that calls the menu in but can’t quite figure out how to get rid of it and still show a nav/access bar on all devices.

Probably sounds confusing as I already got some direction from the new thematic forum but still a little confused.

Thanks in advance and once again great theme!

Ballanrk

If you just want to remove the jQuery functionality on small menus, delete the jQuery snippet in the “js/custom.js” folder and you can actually also remove the childtheme_override_access completely. After that it is all CSS, just remove the CSS for the old menu, and you could actually probably just copy and paste the styles contained in the media query to the main layout section.

Thanks a lot for your response. I haven’t had a chance to apply what you’ve mentioned but pretty sure you filled in the missing blanks for me.

Ballanrk

Hi, Scott!
Thank you for the great theme! But could you, please, help me with two things:
1) The menu is not drop down, and I cannot activate it!
2) Is it possible to add a responsive header to the Child’s play (and to the Responsive base)?

It is actually pretty easy to reinstate the default Thematic style menus (suckerfish/superfish).

Recently on GitHub, Afranken sent me a pull request where he reinstated the drop downs. You can see exactly what to change/modified by reviewing the pull request here on Github. Look for the “added some commits” part, which will show you in red what was changed and green is what is added.

While I could merge them, there is this whole issue of on a hand-held device, you really have to be careful what you do with :hover, a drop down menu is usually toggled by the ability to hover with a mouse, which obviously isn’t the same on a cell phone. So essentially the drop downs won’t be visible on a mobile device, and if I did add something to take care of this, it would be so complex that no one could modify it, so I just opted not to add it (as there are a ton of other different issues, one example being screen real estate the menu takes up).

As far as your second question, I am not sure what you mean by responsive header. If you just mean something like an image, that can easily be done by setting a max-width: 100% and a height: auto in the CSS on the image, which will cause it to shrink based on the parent element that contains it.

Hi, Scott!
Thank you for the reply. I’ll try this with the menu. By the way, there are good examples, IMHO, of the responsive menus with drop downs on mobile devices, such as in the Picochic theme (http://s1.bild.me/bilder/160512/8055917menu1.jpg), and in Responsive (http://s1.bild.me/bilder/160512/9652567menu2.jpg). What do you think?

As far as the responsive header – I want to achieve the same effect as, for example, seen on twenty eleven theme: when it is used on a mobile device its header image becomes smaller, not being cut by half or something. Just gets resized to fit the screen.

As a resource for Responsive Design menus, check this post by Brad Frost of Responsive Navigation Patterns, it explains some of the pitfalls and differences.

As far as adding a header image, the best way to do it is to add an options panel inside WP’s Admin so you can select images, which is a whole beast in itself. A cheater way is to add this gist snippet to your functions.php and just drop a “header.png” image in your /images/ folder.

And add this to your style.css.
#branding img {
height: auto;
max-width: 100%;
}

I say cheater way only because adding an options panel is really the best way, but it isn’t very easy, there are tons of articles out there that explain how, but the above works fine and if you want to change the image, just replace the header.png in the /images/ file. ;)

Hey Scott,

Liking Titanic – noticed you mentioning it’s your last Thematic childtheme. Does that mean you’re going to be focussing on another framework from here?

I’ve enjoyed looking through responsive base and child’s play. A bunch of useful stuff in there.

Thanks for your work

I wasn’t paying attention and emailed you back instead of leaving a comment.

For anyone else wondering, I will be focusing on a new theme that isn’t quite ready yet, but you probably will want to start watching it on GitHub, it is called Prism Theme.

Thanks for the kind word also.

Hi there,
Very nice skeleton theme. Thanks so much… Unfortunately I cant get the slider to work! I’m not a complete newbie, I know how to make a sticky post and add a featured image to it… so what am I missing? Is the image specified in the custom field articleimg ?? I tried putting a full path value in there and I still can’t get the slider to show up on the home page with my sticky post. I have a static front page and a different blog page, could that be an issue? I wouldn’t think so.
I see in the code that the slider is being included along with its css. hmmm. Maybe I’m having the same issue as the guy who wrote the first comment here? But I’m not even using jetpack on this install.
Any ideas would be greatly appreciated!

You are going to have to tinker with things a bit to do it, but it is totally possible.

You will need to change some conditionals, specifically

function childtheme_flexslider_script() {
if ( is_front_page() ) { ?>

function childtheme_flexslider_slider() {
if ( is_front_page() ) {
and in that same function, also relocate it to add it above the content (previously was above the index loop which is blog specific).
add_action('thematic_abovecontent', 'childtheme_flexslider_slider');

That is pretty much it, just find the correct function locations and replace those conditionals. :)

I can’t even believe you made an crazy awesome responsive template for Thematic. That is just rocking sweet. What suggestions do you have a for someone wanting to convert a standard html/css website to responsive. What would be the easiest & fastest way?

I had to ponder that question for a few minutes, converting an existing site isn’t easy and almost has to be done from the ground up. The most important thing I can think of is developing the site “mobile first”, there is plenty of info out there and I will admit I was one of the people that just didn’t get how it could be so great. Someone mentioned on a podcast somewhere about once you get it, it is an “AHA Moment” where it just clicks, but it boils down to less css coding and css that is easier to work with.

As far as faster, I would say SASS/Compass are a huge help in speeding things up by allowing you to do all the things you wished you could do with CSS for years. You have a background in programming, so you would excel at SASS for sure. There is tons of information on it, but the most awesome things about it are the simplest things it allows you to do.

Now the problem, both aren’t necessarily fast until you have you “AHA Moment” with both of them, but once you do, you will never want to go back. :)

Oh, and SublimeText2 is bad ass editor, every time I learn something new with it I get faster and faster, it feels so good.

Hi Scott,
I’m very intrigued by what you’re doing here and I’ve downloaded the theme and plan to pick it apart. Question: The demo for flexislider at woo themes maintains the aspect ratio as it changes size and I noticed that your flexislider doesn’t scale properly, in that it squashes the image vertically before popping back to the proper aspect ratio. Is this something you changed intentionally or a quirk of the theme?
Thanks for sharing your work!

It doesn’t scale because WordPress adds the height and width in the HTML to the img tag. If you remove the CSS (height/width) that I added to combat that and then remove HTML (height/width) on the img tags, it will scale just like the Flexslider demo. I was going to figure this out and forgot, if you figure out how to get WP to not load the height/width attribute on image tags, let me know, next on my list is getting the drop downs working, which I am not excited about, I failed the last two times I tried. :P

Hi again :-)
I’ve used Child’s Play as a starting point for my Thematic experience. After played on turknikon.com, now i’ve moved my tech site http://www.murekkep.org to Child’s Play and also used 1140px grid system for the layout. It’s fully responsive in every part and i really have to thank again to Scott for creating these beautiful themes. I would be glad if you have a look to my site murekkep.org and drop some feedbacks.
Best,
Alper

[…] much of a designer, but I was having fun making my own child theme for Thematic when I came across Child’s Play theme from scottnix.com. I liked it so much, that I threw away my work and applied Child’s Play to […]

Thanks for contributing this to the Thematic Community Scott. I’m going to give it a try now and see how it goes. Hopefully I can make a similar gift back based on some additions/ modifications.

Awesome, I would be curious to see what you come up with, it looks like you have a lot more talent in the design department, so feel free to post a link when you finish. :)

Hi Scott!

Your theme looks great! Looking forward to editing it ;)

It is the first time that I am using SASS and Copass. I installed the SASS gems correctly.

After installing the Compass gem I installed it on the childs-play directory:
compass install compass

whitch created a bunch of extra files (I found that strange…)

When running SASS I get the following error when running:
sass --watch style.scss:style.css
I get the following error:
error scss/_base.scss (Line 4: File to import not found or unreadable: compass.
Load path: /.../wp-content/themes/childs-play)

Could you please point me to the correct workflow for having both SASS and Compass play nicely with your great Child’s Play child theme ;) ?

Thanks!

I got it working… just had to add the config.rb file with the correct settings:
http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "images"
javascripts_dir = "js"

And then run
compass watch/compile

It took me a little time to take a in depth look, you did a really nice job. This is by far the best custom implementation of Child’s Play I have seen to date. Probably going to be a while before someone takes that title from you. :)

Hi Scott. I just wanted to write and thank you. I’m a budding wordpress designer and I decided to use your Child’s Play theme for a site redesign project I did for a friend of mine. Check it out here: http://www.lavaroots.com/site

I didn’t use Compass/Sass on this site because I don’t understand it yet, but I’m learning about it now and might use it on my next project. I’m going to continue to work off of your themes because I think they’re great, and I love how you explain things on this website.

Thanks!!!

Looks good. It looks like you aren’t using the .entry-utility which is pulling in font-icons. If you go to the functions.php and locate the childtheme_script_manager function and remove (or comment out) the two lines involving the icon-fonts-css you can speed up the site a bit since that code makes a request to pull those font icons in.

If you get SASS/Compass down, keep checking back, I have a new theme I am working on which is like the Responsive Base Theme (meant as a starter theme), but much more heavy on SASS/Compass and with a Grid System. It will be a bit of a learning curve, but it has the best workflow (build sites fast) of all my themes.

Scott,

First of all, thanks for making an excellent child theme. It made creating my first responsive theme much easier.

I did customize it substantially. Mainly, I added respond.js to make IE8 responsive. I didn’t have the option to create a site that looks substantially different in IE8 only. Another tweak was adding “initial-scale=1.0, maximum-scale=1.0” to viewport meta for better iphone results. Lastly, the dropdowns didn’t work in iPad in landscape orientation — clicking a top level item would load that page instead of dropping down. I thought FlexNav took care of this? Maybe I have a version of your theme that lacks FlexNav. Anyway, I wrote some JavaScript to add a ‘hover’ class to a top level item if modernizr detects a touch device and the ‘menu-button’ is not displayed and the item doesn’t already have a ‘hover’ class.

When it comes to the meta viewport, there are some weird bugs no matter which route you go, I went the simple route because I wanted to error on the safe side since maximum-scale disables zooming.

As far as the iPad goes, I haven’t even tested that, feel free to post your solution up on a Github gist, or send me a pull request and I will implement it into the theme. Right now CSS just handles the hovers and the version of FlexNav I used is gutted and it looks like they have made a lot of progress on it since, so maybe one day I will get around to it, but navigation menus drive me crazy. ;x

Scott,

I posted a gist here: https://gist.github.com/yitwail/7519239

Please feel free to modify or add constructive criticism. Incidentally, I make genesis child themes as well as thematic/child’s play child themes. Do you know any free genesis child themes with responsive features comparable to child’s play? The official ‘sample’ theme is responsive, sort of, but looks more like an afterthought to me.

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 https://gist.github.com/scottnix/3248716 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 http://6472.diffner.se/

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!

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 weloveiconfonts.com, 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.

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?
Thanks!

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

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!

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!)

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.

Leave a Reply

Your email address will not be published.