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 9 – Part 3 – Add Options to Thesis Packages

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’re going to refine this by adding options to it so I’m going to copy this and we’re going to call it trbm_options_sample_package and Sample Package with Options. As you may well assume, that means we’re going to have a protected function options, let’s go ahead and copy that for just a moment and paste it under translate. Now in fact, we are going to take out the Thesis API stuff for the moment and we’re going to create our own option so take that stuff out too.

Types of Thesis Package Option Parameters

Now, before we do that, we’re going to talk about the typical option parameters. Now, if you remember from our boxes, there were a bunch of different parameters for each option. You had the type, you can have a width, a description, a label, a tooltip, a default. Actually, our options, if it’s a select type there is code, if it’s a piece of code and the other options is fields. Now, the fields option is an option that you should use if you have a section that has fields that has different options inside of it.

You’ll see what I mean by that here in an hour or so but there also the typical option parameters, type, width, rows. Row is for text widget, label, description, tooltip, options, placeholder, default, code and fields so it’s very much like the box options. Now, also like the box options, it has several different types of options so in this case is ‘type’ => ‘text’ but you can have ‘type’ => ‘text’, ‘checkbox’, ‘radio’, ‘text area’, select.

Something new in this that you haven’t seen before is ‘type’=> ‘color’ and that adds all of the special color picker stuff associated with it. And then also ‘type=> ‘group’ and that goes along with the fields option so you can have groups of fields together and you’re going to see that. It’s hard to explain it without just simply demonstrating it. And also along with the boxes that you have types and you also have widths of these input types and just like before, it has full, long, medium, short and tiny so we’re just going to dive right into that here and start writing an option.

Adding Options to a Package

Now, the option that we’re going to add is a border width option so return array and so the option is going to be ‘border-width’ and that is equal to an array, it is just like boxes at this point and the first element of the array will be a type so it’s ‘type’ and that’ll be a ‘text’ and the next will be ‘width’ and the width will be ‘small’ and the next will be ‘label’ and we’re going to internationalize this so the ‘label’ is going to be a ‘border-width’ and our text domain is ‘trbm’.

I think we’ll also add a ‘tooltip’ and again internationalize it so enter the desired width of the border and pixels, numerals only. Okay, so there’s our ‘tooltip’ and our text domain ‘trbm’. So that is the option that we’re going to use and I think that’s it actually so we’re just going to add this one option to that.

Now, if we save this and upload it, we also have to again, add this sample_package to our skin file so we’ve got this package and now we need to add another one. Then we’ve got two packages that we’ve added to our skin file so save that and upload package and skin. If we refresh our skin editor here for a second and go over to CSS, now we’ve got our sample package and our sample package with options.

Add Post Box Skin to the Sample Box

Let’s see sample and we’re going to add this to post box skin and we don’t need to use the sample box anymore so we’re going to say &sample_options and at the moment, it displays exactly the same way as the previous one did because we haven’t changed the CSS output. However, if you look at the package you’ll see there is an option for border width and I called this as ‘small’ but that was a mistake, it’s ‘short’ not ‘small’ so it got to be too long for us here so let’s go ahead and fix that.

It’s not ‘small’ it’s ‘short’, there we go, that’s the correct designation for width. However, we aren’t doing anything with this border width option so if we upload that again and come over to our sample options and change the border width to say, 20 and hit save. It’s not actually changing anything and it’s not changing anything because we aren’t using that 20. The 20 we got saved but it’s not being used and so the way we use it is to come over here and get it from the options.

We’re going to do that in a way that’s very similar to the way we got options and packages. So in a package, we would get the variable and we’d say if it’s not empty then put that in otherwise, put in some other kind of number or some other kind of value. We’re going to do exactly that same thing as we’ve done in boxes, we’ll come over here and say, it’s not going to be $html though, it’ll be $border_width = if not empty, ‘width’ then ‘width’ else and we’ll say 0px and give it a space like that.

Adding a Border Width

Actually, at this moment we’ll also have to do the same thing. We’ll have to give it a px and a space so the number comes in here but then pixels and the space. Now, you’ll see that we don’t have to do this in a few minutes but right now, we’re not using any of Thesis’ streamlining so grab border_width and right in this place right here, in fact, we don’t have to do that, I take that back. We’re just going to say this 0 and then we’ll take border_width and right here, we’re going to replace that 2 with the border width.

Now, if a PHP variable is up against an HTML character like this, you need to put it in brackets so that’s what we’re going to do here, we’ll put it in brackets, paste it, close the bracket. So what this is going to do is take our option border_width and put it right in this place here. So if we come up and save it now, refresh it and save our CSS, now that border is going to be huge. Now, let’s reload it and obviously something is not working quite correctly so let’s just take a look at it and see what happened.

If we look at our custom.css file, we’ll just look at it on the site for a second, save our CSS, refresh it so let’s see what the problem is, inspect that, go to our resources and look at our css.css file. Let’s see what am I looking for here, right down here I am looking for border, right 0px so you can see I wrote that, it took the value, said it was empty and then put 0 in its place, so if we come back over and look at the setting there, the setting must have been 0.

No, it’s not, it’s 20 so let’s save it, save the CSS. I’ve got something wrong with my code, it’s not width, it’s border-width. That’s the option name so $border_width = if not empty, these options ‘border-width’ so the code was behaving exactly as we asked it to. There you go, now you’ve got this massive 20 pixel wide border here and it’s because we set the border width at 20 pixels here. Take it back to 5 and we’re back to 5 instead of 20. So that’s adding options to a package.

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