Now that we’ve gone through how to add standard HTML Box Options, next up we’re going to take a look at creating an option from scratch. In fact, the option that we’re creating is the one that determines how many words are going to be shown in the excerpt.
Thesis Options API – Text Input
In order for us to do that, we’re going to go take a look at the Thesis options API and the Thesis options API has a whole bunch of different types of options and ways of laying out these options and we are going to start off with a text input.
We come over here to html_options and add it because we want it to show up in the box not inside of skin content. So we’re going to start our own html option by saying $html and then we’re going to create a new excerpt name called ‘length’ and that equals an array.
Add the Text Type Option
The type of option is a text type of option. This is where we’re going to use our translation function so I don’t want that semicolon. The label here is going to be ‘Length of Excerpt’, text type options can take a width so we’re going to say ‘width’ and then call it ‘tiny’.
We can also add a tooltip, so ‘tooltip’. And again the tooltip is going to be ‘Enter the number of words you want displayed in this excerpt. The default is 55’. Then in fact, we’re not going to set a default but we’re going to use placeholder to say 55.
We’ve just created an option that’s going to show up on our HTML options called ‘length’ and it’s got this label, it’s going to be ‘tiny’ wide, it’s going to have this tooltip and it’s going to have this placeholder and that will be available for us to reference down here. Let’s just take a look at that so you can see what I mean.
Set Up Length of Excerpt
Now we have Length of Excerpt, it’s showing 55 as its placeholder, “Enter the number of words you want displayed in this excerpt. The default is 55”, that’s all we had to do in order to develop this input box.
Now, if you’ve already done anything with a plugin, you know that the amount of code necessary to do that is huge compared to this. Okay, so we’ve created our own HTML option, it’s a text option, it has this label, it’s that wide, it’s got that tooltip and it’s got that placeholder and we returned the HTML with this option added to it.
Now, we’re going to use this HTML right down here. Well, we’re going to use the same syntax in our function excerpt_length. So we’ll say $exlen = ($this->options[‘length’]), I don’t want to use the same value so $exlen = !empty($this->options[‘length’]), that is if this option isn’t empty then use the option, otherwise use 55 and then we’re going to return $exlen.
So this is now taking the value of that length and using it to modify the filter. If we save that and upload it, we can just set a value, say 10. Save the template, come back over and refresh this and now the value 10, not 25 or 50. It’s whatever we set inside this box and we’ve given ourselves the ability to now set the length of the excerpt that’s going to display whenever that specific box is being used.
Now, there’s something we haven’t done yet and that is take advantage of the custom tabs or the tab settings. Let’s just go back here, you can see how this kind of process of indentation shows up here. Well, if we view the source you can see that we’ve got our div class=”sidebar” and then ended it as div class=”query_box”. And then ended it as h1 class and span and then div, it’s just all the way over here.
It should have been indented to there but it wasn’t indented it there and the reason is because we weren’t taking advantage of Thesis’ ability to automatically add tabs to this. So that’s what we’re going to do next here in this example. We’re going to take advantage of that feature and I’m going to draw your attention to this little piece of code that I’ve placed in my simple sample box. This is actually a piece of Chris’s code but he says $tab = str_repeat and it places the HTML tab character for each instance of the number in depth.
So as long as depth has a number, if the $tab is 5 then there will be 5 tab characters inserted there and Chris has a way of passing this information back from the HTML options to here without you having to worry about how many tabs you really need.
Let’s copy that and come back over here and paste it, then $tab = str_repeat. Then what we do is take this tab and place it in front of the HTML tag so in front of that and in front of that. Now each of these things will get the number of tab characters necessary in order for that to read properly and so we’ll save this.
You know, for a beginner that maybe seems like it’s kind of overly fiddly but in real life, programmers should endeavor to make their code readable. And one of the aspects of making your code readable is properly indenting your code.