How to grab WordPress Tags from JSON API and show them with Flutter Web

WordPress Tags

I’ll continue my previous post about Consuming WordPress JSON API by showing you how to Grab the Tags and their related Posts or Products from the JSON API of a WordPress Web Site.

If you have a WordPress Site, you probably also have available several REST endpoints described in technical detail in the WordPress.org documentation. To access them on your site you need to open your browser on http(s)://<your_wp_instance>/<optional_subdomain_or_subdirectory>/wp-json. The tags list endpoint is located under the address https://<wp>/wp-json/wp/v2/tags. It has the following JSON Model:

WordPress Rest API Tags

 

There are several objects not necessary for our use and also several that could be composed by other fields. The primary properties are:

  • id : Integer
  • name: String – populated in the WordPress Admin Interface
  • description: String – populated in the WordPress Admin Interface
  • slug: String – URL friendly String of the tag (again open for modification by the admin).
  • count – the number of posts that have the tag.
  • there is link field, but it could be sub-created with  https://<wp>/tag/<slug>/
  • the collection href value is tag hyperlink/URL to the list of tags
  • the self href value is URL to itself  https://<wp>/tags/<id>/
  • the wp:post_type href value contains the URL to query for posts with the current element tag  https://<wp>/wp-json/wp/v2/posts?tags=<id>

To demonstrate the Blog Posts Tags I’ve created a Flutter Web Application that loads the tags from this website: https://programtom.com/dev_examples/wp_tags/posts/. More complete display of information will be extended with the inclusion of other WordPress Data Models.

You also have Product Tags that have very much the same fields and could probably be stored in the same data structure:

WordPress Product tags

  • id : Integer
  • name: String – populated in the WordPress Admin Interface
  • description: String – populated in the WordPress Admin Interface
  • slug: String – URL friendly String of the tag (again open for modification by the admin).
  • count – the number of products that have the tag.

They are located on the following URL: https://<wp>/wp-json/wc/store/products/tags.
To query products containing the corresponding Product Tags you could create the endpoint accordingly: https://<wp>/wp-json/wc/store/products?tag=<id>

To demonstrate the Blog Posts Tags I’ve created a Flutter Web Application that loads the tags from this website: https://programtom.com/dev_examples/wp_tags/products.

Leave a Reply

Your email address will not be published. Required fields are marked *