WordPress Modifying A Child Theme & Using The OpenWeatherMap API

The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap.

To accomplish this I used TypeScript to make my requests and perform DOM manipulation.

Child Theme Creation & OpenWeatherMap API

To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.).

This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract.

The child theme will now be available for activation through the WordPress admin panel by navigating to Appearance => Themes. The child theme should be selected here now, otherwise the changes made will not be reflected within the WordPress site.

The Proxy Page

Keeping API keys a secret is not always required (Google, 2021), however in this instance the openweathermap API can be paired with payment details. Keeping the API key in this instance is important as abuse of a key paired with payment details could result in large bills being created by users that intentionally abuse the API key use. 

To keep the keys private a proxy page was created that makes requests to the API. This proxy can be accessed by sending requests to /proxy with a query string for the city name such as ?city=glasgow. 

A custom template was created that acts as a proxy server, retrieving the openweathermap data from on the server and forwarding the data back to the client. The query string has any HTML special characters removed using htmlspecialchars( ) as described by The PHP Manual (The PHP Group, 2019).


This proxy page uses a custom WordPress template of Proxy Page, meaning that it runs any php found within that template. To create the page the WordPress admin panel was used. By accessing the Pages > Add New the following page was created.

Sending The Request For Weather Data

Sending the HTTP GET request to the proxy server was done using the same function as described in an earlier post. The function was reused across two different projects, the NextJs project and the WordPress project. More information can be found about the fetchJSON function here.

This script file was transcompiled using the TypeScript npm package into JavaScript which was then enqueued using the WordPress add_action( ) function within the functions.php file. The full contents transcompiled file can be found in the appendix section of this post.

This file is sent with the WordPress page found at /weather.php which was created using the WordPress page builder tool. The contents of the page can be seen below.


The response from the server contains JSON data that was originally transmitted by the openweathermaps API which is then read and inserted into the page via DOM manipulation performed by the TypeScript code found two images above.


Conclusion

A WordPress child theme was successfully created that allows users to search for weather data for a city using an input box. By using PHP and TypeScript this was achieved with relative ease, although online documentation must be followed closely in order to successfully create and modify a WordPress child theme.

References

Google (2021). Why and when to use API keys | Cloud Endpoints with OpenAPI. [online] Google Cloud. Available at: https://cloud.google.com/endpoints/docs/openapi/when-why-api-key#security_of_api_keys.

The PHP Group (2019). PHP: htmlspecialchars - Manual. [online] Php.net. Available at: https://www.php.net/manual/en/function.htmlspecialchars.php.

WordPress (n.d.). Child Themes | Theme Developer Handbook. [online] WordPress Developer Resources. Available at: https://developer.wordpress.org/themes/advanced-topics/child-themes/ [Accessed 9 May 2021].

Appendix



Comments

Post a Comment

Popular posts from this blog

Creating A WordPress Post Using The REST API

Image
The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...
Read more

Consuming The WordPress Posts Via The REST API

Image
WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...
Read more