Now we’re going to use what we’ve learned in this lesson on Using Custom Post Meta in the Thesis theme to add custom page specific content to the sidebar. This will be example number 1, again which is to create a meta box that will allow us to add custom page specific content to the sidebar.
The first thing we have to do is define our meta box and we’ll start by editing this meta box here. Rather than calling it custom_meta_box, we’re going to call it $byob_page_specific_sidebar_content, that’s the name of this extension of this class.
The ID is going to be this ‘byob_page-specific_sidebar_content’, the title that’s going to show up on that is going to be ‘Sidebar Content’ and we are going to give this a context of normal, a priority of high, we’re going to define that mode and use WPALCHEMY_MODE_EXTRACT then we need to define our template.
Create a Template for the Meta Box Form
We are not going to use STYLESHEETPATH, we could use this but we’re not going to use it. We are going to use the WordPress system called get_stylesheet_directory which does the same thing as this but it’s the preferred way now. This get_stylesheet_directory is Thesis 1.8.5 in this case. It’s the directory of current theme essentially and we’re getting it from our custom folder.
Inside of custom and metaboxes then, it’s not going to be meta.php, it’s going to be byob_sidebar_content_meta.php. That’s the template that we’re going to be creating for the form for this meta box. That’s all we need to define here, the ID, the title, its location, the mode and the template that will be used to create it and we can just save this. Then we need to create this template and what I’m going to do is just use the simple meta file that came with the download for this.
I think I have to do it differently than this, close that. Let’s see 185, custom, metaboxes, go to our example-files and copy this example_file and paste it in metaboxes. I’m going to get the name that I chose which is byob_sidebar_content_meta and paste that. Now, this file is called byob_sidebar_content_meta and we refresh it, now we’ll see it over there under metaboxes. Here it is, byob_sidebar_content_meta.php so now we’ll just open up that file.
Create a Field Name
The first thing we’re going to do is flush out these things so we’re going to give a description up here. We’ll say, ‘Add content to the top of Sidebar 1’ and say, ‘Give it a Title’ then ‘Add your Content’. There are bits of direction here, let’s see, ‘Enter the content – HTML is fine’. We’ve got sort of the bare bones of our thing set up here so now we have to give this field a name. The field name in this case is going to be byob_sidebar_content_title.
Now, if I’d used the prefix value when I defined the meta box and if I’d said byob then it would’ve added byob to this. This is where I said I want to explicitly set the name of this byob_sidebar_content_title. I could leave that byob out, come back over here and say prefix and that would be the same thing because it will automatically add byob_ to everyone of my field names here but I don’t want to do it that way because I just want to make sure we set it explicitly.
Then we’re using text input field so we’re just going to take a real quick look at w3schools. You already know that a text input field, doesn’t really matter here but HTML5 and forms. Inside of your forms you have various input types. Right now what we’re doing is looking at input. Let’s see, where did my input types go, type equals button, checkbox, file, hidden, image, password, radio, reset, submit and text.
Using Input Text Type
We are using the type input text type. Well, input type=”text” can take a number of values and in this case, it’ll take the name and ID and we’re actually going to also display the value that has already been established in that. That’s what’s going on in here so type=”text” name equals and in this case, the name is going to be byob_sidebar_content_title, that’s the name of this text input.
We can also and very commonly you would say, ID here so you’d say, id=. You could also give it a class, you have all kinds of things like that that are possible but the name=, the id= and the value=, what happens here is that if a value has been set previously, then the value of this custom post meta is displayed here. If it hasn’t been set previously, then it shows up as blank so this is how you get to see what it looks like once you’ve set something up. That’s your text input.
The next one is the textarea. Here what we’re going to do, it’s not going to be description, it’s going to be byob_sidebar_content, that’s what I did, I just left it like that. Again, now instead of input type=”text” we’re using a field called textarea and this is a bit different. It gives you a chance to specify the number of rows and the number of columns. In this case, we’re just going to say, rows=”3″ so it specifies its height. It’s name equals the name as above, we could easily say, the id equals the id, rows=”3″.
In a textarea, what happens is it closes the opening tag and the content of the textarea goes in between the opening and closing textarea tags. Now, the value of this custom post meta is being displayed in between the textarea tags and that’s just the particular way in which the syntax of textareas work versus the syntax of input type=”text” which is really for one line input whereas textarea is for multi-line input. That’s the difference of what’s going on here.
We’ve now setup this form so we’ve given information, get some instruction, we’ve told it to name the field byob_sidebar_content_title and associated that field with this input then we’ve defined this field and once we’ve defined this field, now we’ve defined this textarea with this field. We can save both of these and upload them so that is uploading this one here, going back up and uploading custom_functions.
If we go to edit this page, scroll down here, we’re going to find that we have this Sidebar Content that’s been created and we can drag this thing around if we want. That’s the name, Sidebar Content, here’s our thing ‘Give it a Title’ so we’re going to say, ‘Sidebar Content Title’ and ‘This content will only show up on the front page. It won’t show up on any other pages’.
There’s our post meta, we’ll come up here and hit update so our post meta is now saved. If we make sure we’re looking at our custom fields, we can come down here to the custom fields and see that this post meta has been created now, byob_sidebar_content and here’s the value and byob_sidebar_content_title and here’s that value then here’s the old ‘Rick field’ thing that we created previously. We’ve created the form, we’ve created the fields and we’ve stored them. Now we need to use them.
Using get_post_meta Function in WordPress
In order to use them, we rely on the get_post_meta function in WordPress. I’m going to leave it here, we’re going to start writing a function first that will use them. We have our custom_functions file, here’s where that post meta has been defined, now we’re just going to come down and write a function here and this is going to be function byob_add_page_specific_sidebar_content.
Global Post Variable
The very first thing we do in this function is to access the global post variable. I’ll show you what that is in a moment but the way you access the global post variable is by typing global $post; that’s the post variable. This the variable that stores all of the content of the original query and in particular, we need the post ID so we will be using global post to extract the ID.
It also happens to store all of the post meta as well. If you set this all up and you know your meta data has been saved and stored at the post but you can’t get it to show up, the chances are, you’ve forgotten to define global $post.
Setup the Variables
The next thing to do then is to setup a couple of variables. We’ll setup one variable as $title equals and we’re going to use that get_post_meta function. If we look at our get_post_meta, it takes the post ID as the first thing, it takes the meta key or the name of the post meta as the second attribute and it takes a third attribute called single. Now, these two things I think are pretty self explanatory but single is not necessarily.
Single needs to be either true or false. If you say, single is true, what it will do is take that post meta and return it to you as a single string of data. If you leave it this blank, that is don’t provide the attribute or if you say false, it will return the post meta as an array. If you’ve created your post meta as an array, then you want to leave this as false but the post meta that we’re creating is all being created as a string so we wanted to find this as true.
What we do here is we take that function, paste that there, get_post_meta and now post ID, since we’re grabbing the ID value of the global $post variable so $post ->ID and in terms of the name, the first name is byob_sidebar_content_title so that’s the key. We’ll just remove key and replace it with byob_sidebar_content_title and replace single with true. That takes the value of this post meta field and places it in the variable $title as a string. Now we’ll say, $sidebar_content here then the name of that sidebar content. This takes the value of this post meta field and places it in this variable.
Now that we’ve captured this information and place it in these variables, we want to export those variables. We really only want to do something if there’s information in those variables. So what we’re going to say is, if there is something in title or the sidebar_content then we’ll do these things. If there isn’t something in title or sidebar_content, that is if there’s no value in those post meta fields, then we’re not going to do anything but if there is something either in the title or in the sidebar_content then we will do this.
Mimic a Text Widget
What we’re going to do essentially is mimic a widget. Really, we’re mimicking a text widget. When we mimic a text widget here inside of our sidebar, we’re going to start this off by saying echo and remember that widgets are li items inside the sidebar so widget li. Also remember that those widgets have a class of widgets so echo ‘ul li class=”widget”‘ then we’re going to do the title first so the title is going to be an h3 then a concatenation symbol, then the title, another concatenation symbol and the closing h3 tag and that’ll be the end of that line.
We’ll echo again and in this case, we’re going to say, ‘div p’ and a concatenation symbol, grab $sidebar_content then /p then we’re going to close out the div and close out the li. That’s the end of what we’re going to echo so we’re going to echo this title as title, we’ll echo the content as content and that’s some of our function.
Now we need to add this function to the sidebar so add_action (‘thesis_hook_before-sidebar_1’) and the name of our function so there’s our add_page_specific_sidebar_content, that’s our function. We’ll grab the global $post, we capture the title as get_post_meta for the title, we capture the content as get_post_meta for the content then we say, if there’s either one of those things, then we’re going to echo the title and these tags and echo the content and these tags. Save that, upload it, come over to our page and view it. Here we go, sidebar_content_title, ‘This content will only show up on the front page. It won’t show up on any other pages’, come over to our About and it’s not there anymore.
We could add something to the carousel page by going to Edit Page, scroll down to where we have that sidebar_content and say, ‘This is Carousel Content’, This only shows up on the carousel page’. Go ahead and save that, view the page and now we have Carousel content. That’s sort of the base-use case for this custom post meta.