At the bottom of my posts you will sometimes see a couple of embedded tweets near the comments section. Many people have asked me how this appears on the site and if it's an automatic process. Well it's not an automatic process, I manually add these to the post. I wanted a way of highlighting tweets that stand out to me on Twitter, if this was an automatic process all tweets would come through, I just wanted a selected few to be displayed. But these tweets have nothing to do with the content but they are related to the post. If I placed these at the bottom of the content then these tweets would appear in the content. I wanted these to appear after the content but still have them related to the post. How is that possible in Wordpress to have additional content related to the post? The answer to use post meta data on your posts by adding custom meta boxes to add a new textarea to the post screen where you can add new content related to the post. In this tutorial we are going to look at creating a new custom meta box and how to use that new data within your Wordpress theme.
What Is A Custom Post Meta Boxes
Post meta boxes are draggable boxes on the post screen which content different inputs to attach to the post. Wordpress already comes with loads of post meta boxes and you will be familiar with most of them. The publish meta box allows you to change the publish settings on the current post or schedule it for the future. The category meta box allows you to choose a taxonomy for the current post. There is a tags meta box to add additional tags to the post. If you have used Wordpress before you would of certainly used all of these meta boxes. To see all the meta boxes available to you click on the screen options tab at the top of your edit post screen. This displays checkboxes of all your post meta boxes and allows you to turn on these different boxes.
How Is This Stored
All of the post meta data is stored in the Wordpress database table wp_postmeta, which has 4 columns on it: - Meta Id - ID for the meta data
- Post Id - ID for the post the meta ID is attached to
- Meta key - Key to identify the data
- Meta Value - Value of the data
As you can see the meta data is just a key value pairing of data attached to a post.
Creating Meta Box For Your Posts
In this tutorial we are going to create a meta box to add embedded tweets to be displayed at the bottom of your single post pages. To create this tutorial we are going to add post metadata, when working with post meta data you need to use the following functions.
- Add post metadata with add_post_meta();
- Update the post meta data with update_post_meta();
- Delete the post meta with delete_post_meta();
- Get the stored post meta data with get_post_meta();
- Get all stored post meta data with get_post_custom();
To create our embedded tweet meta box we need to use the function add_meta_box() and attach this to the action add_meta_boxes. The add_meta_box() function has been in Wordpress since version 2.5 and it allows developers to add a meta box to the post admin screen.
This function takes seven parameters:
- ID - Used as the meta ID
- Title - Meta box title visible on the edit page.
- Callback - Callback function to display the HTML
- Post Type - The type of post this is displayed on
- Context - The type of context this is displayed on choices of normal, advanced or side. If not supplied will be advanced.
- Priority - Priority of order the boxes will be displayed.
- Callback Args - Additional arguments passed to the callback function.
Add the following to your functions.php file to add a meta box to your edit post admin screen.
Display Post Meta Boxes
If you have a look at the post admin screen you will now see a new custom meta box under your main content box, but it will be empty as we haven't created the function to display the textarea to embed the tweets. In the add_meta_box() function we had a third parameter of show_embed_tweet_meta_box() which Wordpress will use to display the meta boxes, so lets now create that function. Add the following to the functions.php file to display the embed tweets textarea.
The above function starts off by adding a form nonce which is used for validation when saving the meta data. Then we create a table using the built in Wordpress styling. We then use the get_post_meta() function to get the existing meta data of the embedded tweet meta. When we get this we can add the current data inside the textarea so that you can see the current value.
Save Or Delete Meta Data
If you now go back to your post screen you will now see the form we created but you won't be able to save any data. So lets create the function to save the meta data to the post.
This function is added to the save_post action, so it will run whenever the post is save which will happen on auto saves too. On saving the post Wordpress will now run the save_embed_tweet_meta() function and pass through the current post ID. First we start off by doing some validation to see if it's ok to change the meta data on the embed tweet. To do this we first check the nonce on the form is setup for this form, this means we can't update the post data outside of the post form. Then we check if the save process happening is a auto save, if it is a auto save we don't want to save the meta data. The reason we don't want to save on auto save is because this saves on a timer so we could be halfway through editing the meta data and it could save it when it's not finished. Finally we check if the current user has access to edit post data. Then we can see if we can update the meta data, we do this by comparing the existing stored values with the post data. If the new value is set and is different to the old data we then save the data by using the update_post_meta() function. The * update_post_meta() function* first does a check to see if the meta key exists if it doesn't it will add the new meta if it does exist it will update the existing values. If the new value is empty then we call the delete_post_meta() function to remove this from the database.
Display Stored Post Data
Above you would see how to add and update meta data now we have these values in the database, we can learn how to get these values out of the database and display the embed tweets on the page. To get meta data from the database we use the function get_post_meta().
The return value of this function is the value of the meta key, so we can use this to get the embedded tweets. Open up your single.php file and decide where you want the embedded tweets to be displayed and add the following code snippet.
Conclusion
That's how you can use custom post meta boxes to store extra data on your post.
All you have to do now is find tweets you want to display on your post grab the embedded tweet block quotes and paste this inside the new textarea on your edit post screen.