How do I save a wordpress theme created using a theme framework?

July 10, 2011 2:40 PM

Wordpress for a noob who isn't a noob developer: Can you explain the basics of using a framework theme to create a new theme? I totally understand the concept but can't figure out how to save changes I make as a new theme.

I've been designing sites using the MovableType backend since 2003 (gasp!) but I'm switching to Wordpress and have the perfect project for a trial run.

Working with a framework theme seems to make sense for a first project. Canvas, by Woothemes, seems like a particularly easy way to get my wordpress feet wet... and since they're having a sale this weekend, I can pick it up at a nice discount. SWEET! I know there are free frameworks like themehybrid and thematic, and perhaps I'll try one of those in a future project).

...Here's where I'm lost:

Let's say I buy the Canvas theme/framework.
I'd design a site in photoshop, slice up the parts, upload them, and then alter Canvas within wordpress to fit the site I've designed [/oversimplification].

OK! Got it.

How do I then export the design in wordpress once it's all working so I can use it for another site? Obviously, I have to install wordpress on that domain, and I need to upload my images/javascript/jquery/etc. But, in my wordpress, where I've altered Canvas to fit the design I've created, I'm editing and altering the Canvas theme/framework... How do I turn my alterations into a new theme? How do I export that theme?

This seems like it'll have a really simple answer, but my google-fu has led me into maze after maze.

Any and all advice welcome!!!!!!!!!

posted by 2oh1 to computers & internet (13 answers total)

Are you sure its even possible? I've never used Canvas but I did have a client use something similar and it did seem like it didn't create a stand-alone theme that you could just install on any wordpress without the framework too. If it saves everything to the theme folder then it would be as easy as just copying that but I suspect a lot of the settings will be saved in the db.

If you want a product where you can create stand-alone themes, look at something like Artisteer - its an offline desktop program but you can design visually then export (and not just to wordpress)
posted by missmagenta at 3:07 PM on July 10, 2011

You modify the stylesheet header to give it a new name, and make sure the theme directory is named something new as well, and WordPress will see it as a new theme.

There are much simpler frameworks to start with than Canvas.
posted by annathea at 3:09 PM on July 10, 2011 [1 favorite]

A quick googling however says it has an export option but any more info requires you to have actually bought the product.
posted by missmagenta at 3:10 PM on July 10, 2011

Theme frameworks are mostly based on the concept of child themes in the Wordpress architecture. This means that you have a parent theme - which you leave unmodified - and extend it by following a set of coding conventions:

Making a child theme is very simple. Create a directory, put a properly formatted style.css file in it, and you have a child theme! With a little understanding of HTML and CSS, you can make that very basic child theme modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.

I don't know how Woothemes' Canvas works, but I'm pretty sure you get detailed installation and theming instructions when you purchase the theme.
posted by Foci for Analysis at 3:12 PM on July 10, 2011

WooThemes seems to have a child theme available. Note that for a child theme to work, you need both the parent and the child theme uploaded to your hosting.
posted by Foci for Analysis at 3:15 PM on July 10, 2011

annathea: do you have anything to recommend? I've sampled Thematic, ThemeHybrid, Thesis, Genesis and Canvas... maybe one or two others. I found Cavnas really easy to work with even though it seemed really powerful as well (and everything I've read about woothemes - the company - has been extremely positive). Like I said, I'm definitely open to suggestions. I'm mostly looking for a place to start with wordpress implementing my own site design. Canvas seemed like a great starting point.
posted by 2oh1 at 3:17 PM on July 10, 2011

WooThemes is fabulous, I simply meant that you don't have to start with a framework that includes theme options (as all of the ones you listed do). And Foci is right about child themes, which I generally don't use since they require installing two themes - but in terms of "forking" Canvas, it's the best and quickest way to make slim style modifications live. You can also create a child theme for the default installed Twenty Eleven WordPress theme, but since you are familiar with and already like Canvas, have at it!
posted by annathea at 4:22 PM on July 10, 2011

I think this will make more sense to you once you see the docs - a theme is basically a collection of files, and can be as simple as index.php, header.php, and footer.php, plus style.css. These will all be collected in a folder with the theme name and stored in your WP install's "wp-content" > "themes" folder. You specify your theme name in the style.css file. That's it - no export necessary; to 'install' your theme on another Wordpress site, you just copy it into that site's "themes" folder and select it from the WP Admin panel.

I like Starkers or Starkers HTML5 for great (and free!) theme foundations that cover all the technical stuff and get out of your way for the design. I started with no WP experience and heavily customized a large site using these, and was able to learn everything I needed along the way (mostly from Wordpress' great and very comprehensive online Codex).

Lastly, Smashing Wordpress was my favorite of all the books I checked out on the subject, good enough that I purchased it as a reference. It's perfect for what you're doing because it covers theme structure and creation in detail.
posted by ella wren at 5:49 PM on July 10, 2011 [2 favorites]

I use ThemeHybrid the most (the support is paid, but at $25 a year it's well worth it), but I've used Thematic and Thesis in the past as well. How it works is in my /wp-content/themes folder you have a folder called

hybrid

that contains the Hybrid framework. Then I create another folder for my child theme, which in this case I'll call

childTheme

I make absolutely no changes to the hybrid folder. All changes are done within the childTheme folder. Mostly by using functions.php and style.css, but I can throw my own pages templates in there, and they'll override what's in the Hybrid folder if they exist. At the top of style.css you need something similar to this:

/*
Theme Name: Backwards Guitar Child Theme
Theme URI: http://example.com/
Description: BG's Child theme for Hybrid
Author: Backwards Guitar
Author URI: http://example2.com/
Template: hybrid
Version: 1.0
*/

In Wordpress, when you select a theme you choose Backwards Guitar Child Theme, and not Hybrid.

Hope that helps. The important thing to note is that you don't alter the parent theme. It's possible the Woo Theme is different, but I think this is fairly standard.

Basically you want to use hooks and filters to make changes to the site (say adding a new section of html that you need for some reason), as opposed to creating new templates for the changes.

It might seem complicated at first, but it makes new site creation a snap - I can just start a new Wordpress install with a hybrid theme and a copy of my child theme, and adjust the functions.php and style.css to match the look and needs of the new site. I've got a library of functions that I can use from site to site with ease.
posted by backwards guitar at 5:52 PM on July 10, 2011

Oh, and in case it wasn't obvious enough, the key line in the comment at the top of style.css is this:

Template: hybrid

Which denotes that it's a child theme of Hybrid.
posted by backwards guitar at 5:53 PM on July 10, 2011

Seconding Ella's suggestion of Starkers. Makes it super easy to understand what Wordpress is actually doing, and thus easy to apply your design to a custom theme. Don't bother with paid themes unless they're fancy enough to offer features you'd never code (not sure what those would be though). And child themes seem like an unnecessary mess.
posted by svdodge at 10:24 PM on July 10, 2011

Also recommending Starkers, IF it does what you want. It's less a theme framework and more a template, since it's basically a theme without any style information set (except for browser resetting). For what I do, that's sufficient; I just want the template to get out of my way so I can do my thing, and its HTML/PHP are nice and clean. If you're looking for something that gives you a bigger toolbox, though, then it may not be the right choice.
posted by ashirys at 8:25 AM on July 11, 2011

Wow. So much good information here. Thanks all! I've already managed to create a theme - a working theme - and now just need to work out the bugs I created and learn a lot more in the process.
posted by 2oh1 at 12:15 PM on July 11, 2011