Build Your Own Business Website header image

Whoops, you've found some premium content!

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

Lesson 8 – Part 1 – Understanding the Problem

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

How to Deal With Theme Options

Good morning everybody and welcome to Lesson 8 of our Create a Thesis Responsive Child Theme class. We have 3 more sessions including today and then we’ll be finished. Over the next 3 weeks, we’re going to be talking about some fairly advanced programming concepts. At least today and our final week, we’ll be talking about programming concepts that are not very well documented.

Storing, Retrieving and Updating Thesis Options

Today, we’re going to be working on storing, retrieving and updating Thesis options. We’ve set a whole bunch of options in Thesis as we’ve worked our way through this child theme. That’s a blessing and a curse when you’re creating a child theme because on the one hand, it gives you the flexibility of styling things fairly easily and it gives your users an opportunity to make some minor modifications to the child theme without actually using code. On the other hand, it also means that since your child theme is dependent upon those Thesis options, somehow you need to communicate that to the end user.

Now, in the bad old days, and it still happens in some child themes and skins currently, what people did was they gave you a set of instructions so if you got a child theme or a skin, it came with instructions on how to set your Thesis Design Options so that it had everything the right way. That actually makes a lot of additional work for your end user.

The alternative that some child themes adopt which I think is not a good alternative, is they choose to override theme options. In fact, you see an example of that in the child theme that you can download from DIY themes where they deliberately interfere with the CSS that Thesis generates and replaces that CSS with a new set of CSS.

It doesn’t really matter how you change the CSS, or what options you set, you’re never going to be able to get those options to change because those options have been entirely overridden by a code that follows. That is one option, that you could use code like that to override the options or you can do what we’re going to learn today which is how to use code to set the default options.

Use of Codes to Set the Default Options

I think this is a much more flexible, more friendly way of handling it. The trick is of course, as the programmer or as the web designer, it means that you have to go to more effort but you’ll probably agree that it’s better for you to go to the effort than having the end user to go to the effort. What we’re going to learn how to do is use a set of code to set the options.

Now, the way this whole option thing works is that when you are switching themes or perhaps when a child theme is uninstalled, if you’re going to go back to some kind of an original theme options system, that means the end user has to manually change all the theme options that you gave them in the first place.

That can actually be more work than setting the options the first time around but you could also use code to reset the theme options to their original condition. What that means is that when you install your theme, you automatically copy the original theme options and update those theme options with the new theme options and save the old theme options some place where you can go find them again.

Activating and Deactivating Child Themes and Setting Theme Options

When you deactivate the child theme or when you activate a new theme, what the system can do is go read the old theme options and replace the child theme options with the theme options that were there before the child theme came along. That is what we’re going to work on today. However, the trick to doing that is that you have to find a WordPress event that triggers that kind of activity because what you’re trying to do is automatically update options upon theme activation and automatically restore original options upon theme deactivation.

Now, the way some Thesis based child themes handle this is that they give you a button in theme setup section where you can click the button that says, “Add All Default Options to this Theme”. That’s not bad as long as you know you got to look for that button but what we’re going to do is create some hooks that make that happen automatically.

Hooks Available in Plugins

If you’re familiar with the way plugins work which perhaps you aren’t but plugins have 3 hooks available to them that help them do this. They have the plugin activation hook, the plugin deactivation and plugin deletion. In your plugin, you can hook into each of those hooks to do something upon plugin activation, upon plugin deactivation and plugin deletion.

In my own plugins, what I do is upon plugin activation, I look for the plugin options. If the plugin options don’t exist, I write a set of default options. If they do exist, then I take those options and I write the CSS file. Upon plugin deactivation, I remove that CSS although I don’t remove the options. I remove the CSS of that plugin creates from the CSS file and upon plugin deletion, I delete the plugin options as well. I can do those things because those hooks exist.

Creating Theme Activation Hooks

Unfortunately, those hooks do not exist for themes, there is no theme activation hook so that’s what we’re going to create. We’re going to create our own theme activation hooks and hook into those hooks with functions that will save the existing Thesis Design Options and will update those options with our child theme options. Upon activation and deactivation, we’ll go retrieve those old Thesis Design Options and replace the child theme design options with those old Thesis Design Options. That’s what we’re going to do in this class today.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment