Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals – Part 11 – Thesis 2.1 Developer Tool Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

The last thing we’re going to do is take a look at the Thesis Developer’s Tools Box on this site. And the Dev Tools box has a whole bunch of things to it.

Developers Updates

The first one is using developers updates. And if you’ve used the developers updates then it’s going to show you beta updates, beta versions of thesis, beta versions of boxes, beta versions of the skin. So that’s what clicking this does and you can always just check for updates here. But you’ve got to save the options before you can check for the updates.

Skin Editor Options

Then there are Skin Editor options. If you don’t check that box and you come over here to Content and say you go to header image, that’s where the options are for header image. And if you go over to the skin editor and go to the header image box and click on those options, it’s not here. In Thesis 2.1, the options were over here. Now, these kind of box options are imported to the dashboard.

However, if you’ve got Skin Editor Options checked and you go over to the skin editor, the options are also open for you in the skin editor. So now, if we take a look at header image, here’s the options tab and you can do it here.

This makes it so that you can set options while you’re working in the skin editor and then when you give it back over to your customer, the options are going to be set from the other place. So that’s what that tool does. It opens up the box options for you in the skin editor.

Skin Distribution

The next thing that this dev tools box does is it allows you to set up the existing skin, a current active skin for distribution. Now, what that means is that if you do that and hit save box options then come over to manage skins, now it has this thing that says ‘create zip file’. And you can create a zip file of the current skin. When you create that zip file, if your skin doesn’t already have seed php, it will create a seed php for you when that happens.

Now it doesn’t rename the skin. The skin name stays the same but it does, nevertheless, package absolutely everything associated with that skin – all images, everything. And so if I wanted to… well let’s see, let’s update Agility Nude first.

Okay so now I’m up to 1.09. I could activate Agility Nude and then if I want to make my skin distributable, all I do is hit create a zip file.

I’ve been asked the question, “So how you make a skin available for other people to install?”. This is the only way to do it. My Skin Copier plugin did that for you in Thesis 2 but it’s no necessary in Thesis 2.1 because the developer box gives you that ability. So what you can do is just create a zip file, download the zip file and now, you’ve got a distributable version of that skin.

And if you look at its contents, it’s got all of the elements of that skin including the seed php that was originally created with it. So it’s got everything with it and it can automatically be installed just like any skin. So that’s what you have to do in order to export a skin so that it can be installed.

Create Skin

So the next thing you can do is create a skin from scratch. If you click this button here, you’re going to get a dialogue that will allow you to create a skin from nothing essentially. So you will give it a name and we’ll call this the “What’s New in Thesis 2.1 for Pros”.

Skin author is Rick Anderson. Skin description: This is a test of the dev tools box ability to create a new skin. We’ll call the skin version 1.0. I have created a screenshot for that so I’m just going to choose the file for my screenshot called “sample screenshot”.

Open and add that, give it a class name. The class name should all be in lowercase with no spaces so use underscores instead of space and we’ll just call this one rickseminarskin. So we go ahead and create the skin.

Review the Blank Skin

And now if we go over to our managed skins, here is a completely blank skin. This is the test of the dev tools ability to create new skin. Here’s its name, by Rick Anderson. Here’s this little image that I did for it. If we activate the skin, we can go into the skin editor. And you’ll see that in the skin editor, it is entirely and completely blank. It’s got HTML body in the template and that’s it.

Let’s look at that skin in FileZilla for a second. There it is, rickseminarskin now. If we open up rickseminarskin, you can see inside the rickskin, there’s an images folder, a css.css file, a custom php, a screenshot.png and a skin php. So I renamed my screenshot to screenshot.png from sample screenshot. And we essentially have this here.

If you look at skin php in just in a plain, old text editor, you can see there’s no code in it, right? It’s just got the bare basics necessary in order to set up a skin, skin class definition, right? That’s what it is.

Let’s just go to front page and create a wp loop. We shift drag that into the front page and save the template. Le’ts view the site. Oh I’m sorry, wp loop doesn’t have anything in it. We also have to put a postbox in it. Now, save the template and refresh it. Okay, now we’ve got some content that shows up.

Make the Skin Exportable

If I come back over to Thesis and go to my Manage Skins and say, ‘create a zipfile’… that has now created this rickseminarskin in a way that can be used. It did not create a seed php which I expected it to do. You’d want that to create a seed php. I thought I was going to be showing you that. I guess I’m going to have to look into that a little bit. I’m not quite sure why that is the case.

Oh okay, maybe default php is it. Let’s look at defaul php. Yeah, it is. It’s created some boxes… okay, it’s not seed php. Now it’s default php and… okay, my mistake. Let’s see, Julia noticed that. Thank you for catching that, Julia.

In any case, that will be able to be used to return the thing back to its default position and when you install it, the installation routine is going to take the information out of default and insert it into the database. So that created the skin and made it exportable.

Skin Skeleton Data

There’s something else though that you can do with this that is the coolest thing and that is export skeleton data. So what you can choose to do is export boxes, templates, variables, css, custom css, design options, display options. You can choose to export any and all of that information as skin data and then import it into another skin. But you have to have the skin active in order for that to work.

Let’s come over here to manage skins and make Thesis Classic Responsive the active skin and then go back over to dev tools. Now I can export skeleton data. I’m going to export everything here. Okay, it’s down here as a text file then come back over to manage skins.

I can activate this skin, test skin for Thesis Developers’ Toolbox, come back over to dev tools and I can import the skeleton data and it imports into the current skin. So I’ll import the skeleton data that I just downloaded right there. That changes everything that I had in there before. But if I refresh that, now most of what I did in the past is here sitting here correctly.

What’s not there from this are the images. The background image that I used for this here and the background image that I used down here, those did not come across with the skeleton. So those still need to be added back into the skin. But once I’ve done that then, I can export this skin for distribution using that save as zip file.

This is a very, very powerful tool for skin developers to be able to create their own skins from pieces of other skins and for them to be able to create a base level skin and then export that data into a new skin and then modify that base level skin. It’s a very powerful tool and it’s something that I think that is going to really ease development of skins considerably.

0 Comments… add one
0 comments… add one

Leave a Comment