A little late, but I try to change my WordPress theme at least once a year. This is a process I dread, mostly because I am not a designer and just trying to figure out a color scheme can take days only to revert back to what I started with.
I am doing something different this year and throwing the theme up on Github so others can tinker with it. So feel free to use it as is, or whack away at it till you get something you want. Since this is my current theme, expect things to change.
This theme is a child theme for the Thematic Framework, it allows me to test out the new Thematic 2.0 (still in beta) which incorporates some new features and code to make it a little more modern.
Update: This theme has now been converted to a Responsive Base Theme for Thematic 2.0, which is a much better starting point. It is also available on Github, still need to write docs.
So what is new?
My workflow has completely changed. I am not going to explain anything in detail, just a brief overview of what has changed.
I am now using gulp. Switching to gulp from something like Compass.app to compile my Sass has been by far the biggest boost to productivity. I made the switch because I was having trouble getting Autoprefixer to work and I was hell-bent on incorporating it into my workflow. With gulp, I now have Autoprefixer working with LiveReload, so I don’t have to bother with keeping up with vendor prefixes and when I save the file my browser automatically refreshes. I also set it up to spit out a minified version of the CSS, but I don’t use that so others can view my code to learn (or steal it).
If you’re interested in learning gulp, there are tons of videos out there so you can get an overview of using it and an awesome article I would recommend is “Getting started with gulp” by Mark Goodyear.
I dropped using Compass (Sorry Compass), the only reason I was using it before was for vendor prefixing for things like transitions and gradients. Now Autoprefixer makes all that obsolete. Compass use to also be a required dependency for Susy Grids, but now Susy Grids 2.0 doesn’t need it any longer.
I finally got with the times and have started using FTPloy. I work on the site locally, then push the updated files to Github, FTPloy sees the files have changed and pushes that up to my live site. So no more working on the site live, but this setup allows me to still be lazy (the reason I worked on it live in the first place).
14 replies on “2014 Thematic Child Theme”
For someone who struggled with Compass, how do you think I’ll fair with Gulp?
Time for me to start digging through your code to see if I can spot the changes with the Beta 2.0
It is really tough to say, gulp is much tougher to grasp than GUI tools where you just click a button and the Sass gets compiled.
The problem I ran into is all the available tools are always missing features, that one thing you want to incorporate in your workflow just isn’t possible, or you have to wait. Which as a front-end dev wanting to play with new tools, really sucks. This is one major reason for me why tools like gulp and Grunt are awesome.
It really depends how deep you want to get into things. If you aren’t working on tons of sites, or have hopes of being developer, really there isn’t a need to bother with any of this. Using regular CSS is still perfectly fine. When you do CSS a lot, that is when tools really make the monotonous things you deal with day after day fun again.
Hello friend,
Any reason why you chose gulp.js over grunt.js?
I never got into Grunt, I had an issue with getting started and I just gave up too early since I had work to do. When I was ready to try making my workflow more awesome again, I kept seeing “gulp” this, “gulp” that and most of it looked very positive. :)
Do you forsee any issues with moving to Thematic 2.0 for users of your Child’s Play child theme?
Would you recommend moving to your new Responsive Base?
It doesn’t break with the new Thematic 2.0, but there are a few things that should be changed. Child’s Play was built to work with the HTML5 Plugin for Thematic, that plugin has been now merged into Thematic 2.0, so it works pretty good.
I would highly recommend making a few changes to your functions.php though. I documented these on Github.
Child’s Play works fine, but I won’t be updating it, if anything I will make a new theme. The reason is my workflow has changed and the CSS for Child’s Play has to be totally reworked. Thematic 2.0 adds a lot of classes which were previously ID’s, this is much better for specificity with CSS (easier to work with).
As far as Responsive Base Plus goes, I started over from scratch (kinda). I moved a lot of stuff around because my workflow has changed a lot, added more comprehensive comments and incorporated a lot of best practice stuff I have picked up since then. So if you were starting a new theme, use Responsive Base Plus.
If you are fine with Child’s Play as it is, then just keep it (make the few functoins.php changes though) and it is totally fine.
Edit: Make sure to always back up files just in case. :)
If you have any other questions, feel free to ask. A bunch of people use this theme, so the question will most likely help someone else too.
Thanks your updates were very useful for me. Thanks for taking the time do do that.
I think there may be a redundant escape in the favicon section. I have a slightly different favicon function which adds icons for ios and android devices (reference http://mathiasbynens.be/notes/touch-icons )
Edit: Favicon Code Snippet moved to Github Gist.
Hey Scott, thanks for sharing your tech. Have starting tinkering with Gulp and had a quick look at FTPloy – at this point I’m not sure if it’s my set up, but deployments via github seem slow and random – how’s your experience been with it? Still using it?
I still use both, FTPloy works pretty much instantly, can’t really think of what would cause a delay other than WordPress caching. I have W3 Total Cache set up to disable caching when I am logged into WordPress, other than that I am not sure what it could be. :(
FTPloy Sorted – got server path wrong. Right to start with then changed to PHP full path via
dirname(__FILE__);then back. Silly me. Found an interesting project along with way: https://github.com/git-ftp/git-ftp if you don’t feel like using Github.Hi Scott,
Thanks for the theme. One question regarding submenus in the main navigation. I see that they are hidden but no styles for display on hover exist. Is this intentionally?
Just found the dropdown answer on your site:
“Adding a complex menu to the starter theme would be a disservice since you would have to rip it out every time you wanted something different, which is something I tried to avoid on theme that is intended to be a starting point for development…”
Agree with your point. However, clients want dropdowns so I’ll try to add a “simple dropdown”.. ha ha (we banned the words “simple website” and “can you just add this”)
I really like how you organized the sass files for the child theme. And working with susy for the grid is super easy.
I’m torn if I should continue with thematic though. I used the _underscore theme a couple of times and I think taking a lighter approach instead of a framework like thematic is the better way to go in the future. Any thoughts on the underscore theme? What do you use besides thematic?
I am actually a really bad person to ask about the underscore theme. I know a lot of people use it as a base theme for child themes, but I haven’t ever set one up. I also hear a lot about the “bones” theme, but neither are really “frameworks”, like Thematic. If I were going to look into another framework, it would be Hybrid Core, just haven’t found the time.
Working on themes from scratch is a nightmare, it is a lot of work. The main reason I haven’t wanted to ditch Thematic yet is it’s ridiculously fast to make changes. The feeling of just opening a functions.php in a child theme, copying and pasting into a new themes functions.php with only a few modifications is super satisfying.
I am happy to hear you don’t hate my “Sass”, the only thing I am not happy with right now is the setup of the color variables, for things like links/colors. Also, that is awesome you are using Susy, it is one of those things that takes a little bit to get the hang of, but one you get it, all other grid systems just seem way overly complex for no reason. :P
Yes I have the same love/hate relationship with thematic…
I looked at the Hybrid framework before and it seems very powerful. However it’s avery custom approach to the whole WP file structure and how WP works as vanilla install. I understand that Justin wants to improve WP but for a Designer/Dev there is a lot to learn…
My goal is to simplify. If I find the time I’ll create my own base theme which has just enough features, templates and CSS for my clients to get started… I came across this starter theme which uses underscore, bourbon, neat and bitters: https://github.com/digisavvy/some-like-it-neat. I think this combo has some potential but the theme even as base needs some work.
I’ve been working on a few custom bootstrap projects lately and I like how all colors and other important variables are defined in the file variables. Although the file can get long, sometimes I prefer this instead of modifying a million files. DRY is hard…