Now we’re going to add HTML inside of the HTML function of the custom excerpt box we just created. If we look at the structure of this HTML, it doesn’t have anything around it. It’s not wrapped in any div tag, it doesn’t have any class assigned to it. It’s going to be essentially impossible to style because we haven’t actually added any HTML.
Adding HTML Box Options
So let’s add HTML and in n order for us to do that, we need to add some options. Let’s look over at his box options and come down look at our HTML Options. HTML Options do 4 things automatically.
4 Things HTML Options Do Automatically
They make available to you the ability to select HTML tags like divs, spans, paragraph, etc. They make available to you the opportunity to assign HTML ID and HTML class. It contains inside of it something that you don’t really manipulate but you have access to which is the depth parameter for automatic tabbing of you HTML elements. Then the 4th thing is essentially contain any other option that you want to add that is going to be edited inside of the box.
Where the Options are Set
The HTML options are options that are set here from this box. So if you look at your HTML options for your container, you’ve got a tag that you can choose, HTML ID you can choose and a class that you can choose.
So the first thing that we’re going to add to our new box is the ability to set those things. Let’s look at this example here, protected function html_options and there’s a little syntax and this code here but we’ll fix that.
Add Options to Specify Tag, Class and ID
So right above HTML, we’ll add our html_options, notice everything is flashing bright red here? It’s because it’s missing the opening and closing parenthesis after html_options but public function html_options. If we leave this alone right now and all we do is put that, our excerpt box will now have an opportunity to specify a tag, a class and an ID.
Let’s save that and upload it, there we go. And then come back over and look at our site. If we come down and look at our except, right now there’s something here called Programmatic ID that we didn’t do anything with that got automatically added to our box. But if we come along here and refresh, the new codes are going to kick in.
Let’s open up the sidebar and open up the Query Box and look at the Home Excerpt. Now we have an HTML tag, the Admin tag that used to be there, that gives us the choice of div, p or span, HTML id and HTML class.
Review the Function
Now, all of that was provided to us because of this one little piece of code right here, function html_options. Then you have global $thesis that is the global $thesis variable and then options have to have their values returned.
So here in the HTML, we’re echoing an excerpt, you may be doing other kinds of things and other functions but all options take a return value and in this case, Chris has it return $thesis->api->html_options(array. What that means is that the html_options will take an array of HTML tags where the syntax has the value of the tag first and the label of the tag second. So div, this is its value, that’s its label and at the end of that array, it takes a declaration of the default value so it shows div by default.
Create a New Set of HTML Tags
Really for what we’re doing, we’re doing an excerpt and div is just fine and p is okay but span is useless to us here. But because we’re in HTML5 world, we could say ‘article’ and ‘article’, copy that, paste it. We could also say ‘section’ and ‘section’ because everybody in the world argues about whether or not this will be an article or a section. You don’t have to argue about it, you can just decide for yourself which one you want to use if you don’t want to just use a div and then the div can still be the default.
So if we save this and upload it and then refresh this page, you see the Home Excerpt now gives us a different set of HTML tags. Click on that and now, our HTML tag is div, p, section, or article, it used to be div, p and span now it’s div, p, section and article.
Remove ID Option
For this kind of thing, you don’t want an id because ids only show up once per page and by definition, excerpts showing up a bunch of different times so there’s no reason for us to have the id as a choice here. So what we’re going to do is the typical method of removing the id by unsetting it from inside its array.
What that means is, we’re going to create a variable. Instead of saying return, we’re going to create a variable called html, doesn’t matter what you call it, it could be fishsticks. First, we’re going to say unset and then $html and then array item which in this case is ‘id’, inside of the html array like that so we are unsetting the html id.
If we wanted to, we could unset html class and leave id in place, we could also unset HTML depth but that would be useless. HTML depth is something that we’re going to use down here. So in any case, anything that’s in this html array you can unset that is, remove it from the array. So when we unset html id, now the html id is not going to be a choice for us.
Let’s come over here and update it and then refresh it, come down to our Sidebar, Query Box and look at that. Well, that didn’t work right, what did I do wrong? We haven’t returned the html right? We have to return the html still. Remember I said in the beginning, you have to return the value? That’s what all of our options have to do is return the value.
If we don’t return a value then there is no value for it to display and it’s easy to say return this array but since we want to manipulate the array, we put the return statement in the end instead. So save this, upload it and refresh it. And the id is now gone. We’ve just got HTML tag and HTML class but no id.
Get Access to the Values
Well, now that we’re capturing that information, we are going to use it. Let’s just say for a moment here that we are going to use article as our HTML tag and howdy as our class. When we save this template, those values are saved but there’s nothing to do with it because we aren’t referencing those values anywhere on our stuff. We still have this exact situation where there is no class, there’s no article, there’s no nothing, right?
The way we do that is first, we have to get access to these values. And the way to do that is to say first, $tag = and then if not empty. And the thing that’s not empty here is $this->options and the option we want to reference is html inside of html here.
So if we want to unset the tag, we would unset ‘html’ ‘html’ because that’s the name of the tag inside of the array; that’s the id of the tag inside of the array. So $this->options[‘html’]. So if it’s not empty, this options[‘html’] then use this options[‘html’] and then else is the colon and else and we’ll say ‘div’.
So what this says is, the variable $tag is equal to if $this->options[‘html’] is not empty then it’s going to be equal to the option, if it is empty then it’s going to be equal to the div. That means if this is has not been set, it’ll show up as a div. If it’s been set it’ll be whatever we have here that’s going to go to this variable.
While we’re at it, we’ll do the same thing for class so this is going to be $class ($this->options[‘class’] okay so in this case, class equals either the class that you put in there or blank. If we didn’t put any class in then it’s going to be blank but if we did put a class and it’s going to class.
Now, to make this easier we’re actually going to add a little bit of html in this so we’re going to say, class= and then the concatenation symbol and then another concatenation symbol and then our closing quotation marks and then that.
So what happens here is classes are either going to be equal to class = this class or class is going to equal to blank and then what we do here is we take these 2 values that we have extracted from our options and we wrap our excerpt in them.
So it’s echo and opening html bracket and then we’re going to say $tag. So whatever it is, div, article, whatever, and then we’ll give a space and we’ll say $class and then we’ll close its space. This is going to say echo $div $class equals whatever and then echo “” and semi colon.
So now we have our opening HTML tag and our closing HTML tag and the value of that HTML tag is extracted from the html_options. If a class is specified, then the class is taken from the html_options and added to class= such and such and it’s placed here and then we get the excerpt and then we have our closing tag.
We’re going to save this, upload it and test it. We don’t actually have to refresh the other setting because those things have been saved now. So now if we look at this, you can see that it’s wrapped in an article tag with the class of “howd”. If I change this to a div and I take out the class all together, save the template, refresh it and then look at it again, now it’s in a div without a class. Just plain old div. So we’ve taken those html_options and we’ve used them here to set our HTML up.