Building a Gutenberg sidebar plugin Part 5: Outputting data.
Tags: wordpress, webdev, php, javascript
Published: 2019-09-29 17:39:41

---
title: Building a Gutenberg sidebar plugin Part 5: Outputting data.
published: true
description: A multi-part tutorial, showing how you can build WordPress Gutenberg sidebar plugins by developing a simple SEO tag editor sidebar.
canonical_url: https://since1979.dev/building-a-gutenberg-sidebar-plugin-part-5-outputting-data/
cover_image: https://since1979.dev/wp-content/uploads/2019/09/building-a-gutenberg-sidebar-plugin-part-5-1000x450.jpg
tags: wordpress, webdev, php, javascript
---
[Originally posted on my website on September 29th 2019](https://since1979.dev/building-a-gutenberg-sidebar-plugin-part-5-outputting-data/)

### Introduction

In the [previous article](https://since1979.dev/building-a-gutenberg-sidebar-plugin-part-4-adding-form-components/) we finished up our sidebar and added form elements to enter Seo data and persist it to the *post_meta* database table.

In this final part of our little journey we are going to use this data and actually output it to the head of our webpages. To do this we are going back to our *metatags* class we created in the first article.

### Adding additional hooks.

To get started we need some extra hooks in our class. Open *metatags.php*, find the *register* method inside the *metatags* class, and edit it to add the three hooks shown below..

{% gist https://gist.github.com/vanaf1979/c8c38d380b92846810324101f03ee775 %}

With this extra code we register three more hooks with WordPress.

-   **[after_setup_theme](https://developer.wordpress.org/reference/hooks/after_setup_theme/) > add_title_theme_support:** Enable theme support for the title tag.
-   **[pre_get_document_title](https://developer.wordpress.org/reference/hooks/pre_get_document_title/) > add_title_to_head**: Add browser title data to the title tag.
-   **[wp_head](https://developer.wordpress.org/reference/hooks/wp_head/) > add_metatags_to_head**: Add other meta tags to the head.

Now that we have these hooks in place we can create the actual callback methods to handle them.

### Add title theme support

Before we can actually output our *metatags_browser_title* data to the page's title tag we first need to make sure that there is support for this feature. Not all themes support dynamic title tags so with the following method we are going to enable it.

Add the *add_title_theme_support* method below to the *Metatags* class.


{% gist https://gist.github.com/vanaf1979/9d8cd0bd359b3eb8f4a9b73ee58aa04e %}

Inside the *add_title_theme_support* method we use the *[add_theme_support](https://developer.wordpress.org/reference/functions/add_theme_support/)* function and pass it 'title-tag' to enable dynamic titles for he current theme.

With support for the title tag we can now handle it's content.

### Add title tag content

To handle the content of the title tag we added a *action* to the *[pre_get_document_title](https://developer.wordpress.org/reference/hooks/pre_get_document_title/)* hook and registered the *add_title_to_head* callback method.

Now lets add this method to the Metatags class.

{% gist https://gist.github.com/vanaf1979/3ea303edf5115ae3d60b3faa6a7d1974 %}

The *add_title_to_head* method receives 1 parameter being the current title for the page. And it needs to return a string representing the title we want for our title tag.

Inside our method we first get the current post object with *global $post*, and then we use the *[get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)* function to get the *metatags_browser_title* meta field for this post from the database. We use the *[trim](https://www.php.net/manual/en/function.trim.php)* function to remove any white space from the beginning and end of the title.

Finally we use a [php ternary](https://davidwalsh.name/php-shorthand-if-else-ternary-operators) (if/else shorthand) to check if the *$title* is bigger then an empty string. If it is we return that title, else we simply return the title of the current post.

That's it for our Browser title. let's move on to the rest of our data.

### Add meta tags to the head

For the *metatags_description_field* and *metatags_robots_field* we have to add *[html meta tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)* to the head of the page. To do so we registered the *add_metatags_to_head* callback method to the *[wp_head](https://developer.wordpress.org/reference/hooks/wp_head/)* hook.

So let's add the *add_metatags_to_head* method below to our *Metatags* class.

{% gist https://gist.github.com/vanaf1979/dde3f724b78a060c8886666bfbfa2cf0 %}

In the *add_metatags_to_head* method we again get the current post with *global $post*. We then loop through the *$this->metafields* array we created at the top of the Metatags class.

In the loop we first check if the $key is 'title'. Because we already handled the *title* tag, and we don't need a *meta* tag for the title we skip it.

We then get the value for the current meta field from the database using the *get_post_meta* function again.

Finaly we use [Php string interpolation](https://phppot.com/php/variable-interpolation-in-php/) to echo a meta tag to the head setting the *name* attribute to the $key of the meta field and the *content* attribute to the $value.

### The final output

We now have all the Php code in place to output our data to the page.

To test it out go to any edit page within the WordPress admin that has the gutenberg editor. And enter some data in our sidebar plugin like shown in the image below.

![](https://since1979.dev/wp-content/uploads/2019/09/metatags-sidebar-input.png)

If we did everything correctly we should now have a output like shown below in our source code.

{% gist https://gist.github.com/vanaf1979/882284674eaf026afc52ad944d677f94 %}

If you don't get this result. Please check this [Github Repositorie of the finished project](https://github.com/vanaf1979/gb-plugin-tutorial) to check if you missed something along the way..

### All done

That's it for this series building a Gutenberg sidebar plugin. Keep in mind that the code from this series is in no way production ready and that there are a lot of things that could use improvement. But i hope you learned enough about the basics of creating sidebar plugins to help you build something great off your own.

You can always come back to the [Github Repositorie of the finished project](https://github.com/vanaf1979/gb-plugin-tutorial) as a reference.

**Follow me on twitter** [**@Vanaf1979**](https://twitter.com/Vanaf1979) **or here on Dev.to** [**@Vanaf1979**](https://dev.to/vanaf1979) **to be notified about other articles, and WordPress related stuff.**

If you have any questions or want to leave a comment, please do so here so i can get back to you

**Thanks for reading along.**