This guide will walk you through the process of connecting your WordPress site to an external API (specifically, the Quotable API for random quotes) and displaying the retrieved data. You’ll learn to use both a shortcode for quick integration and a template tag for more customized display, including how to format the data using PHP. This is invaluable for dynamically adding content to your WordPress site from external sources, keeping your content fresh and engaging.
Step 1: Setting Up the API Connection in WordPress
Heading: Create a New API Connection
To start, you need to define the API connection within your WordPress setup. This involves providing essential details like a name, a unique ID, and the base URL of the API.
Name and ID: Give your API connection a descriptive name (e.g., “Quotable”) and a unique ID (e.g., “quotable”).
Tip: Use lowercase letters for the ID to ensure compatibility and avoid potential errors.
Base URL: Copy the base URL of the Quotable API. Ensure you include the “https://” protocol. The base URL is the root address of the API.
Save: Save these initial details. This action typically creates a new tab dedicated to your API connection, enabling you to configure specific endpoints (the specific data you want to retrieve).
Step 2: Configuring the Endpoint for Random Quotes
Heading: Define the Endpoint for Random Quotes
Now, specify the particular endpoint within the Quotable API that you want to access. In this case, we’ll retrieve a random quote.
Endpoint URL: Consult the Quotable API documentation and copy the endpoint for retrieving a random quote (e.g., `/random`). This endpoint specifies the exact data you’re requesting from the API.
Endpoint ID: Assign a unique ID to this endpoint (e.g., “random”). This ID helps you easily reference this specific endpoint later.
Method: Identify the HTTP method used by the endpoint. The API documentation will specify “GET” for retrieving data. This indicates that you are fetching data from the API.
Results Format: For the initial shortcode example, leave the results format as “JSON String”. You’ll change this later for template tag usage.
Save: Save the endpoint configuration.
Step 3: Testing the API Endpoint Connection
Heading: Test the API Endpoint
After setting up the endpoint, it’s crucial to run a quick test to ensure that you can successfully connect and retrieve data from the API.
Test Endpoint: Locate and click the “Test Endpoint” button within your WordPress setup. This initiates a request to the API using the configured endpoint.
Verify: Examine the returned data. It should be a JSON string containing the random quote.
Note: The JSON string format might appear slightly complex at first, but it confirms that the connection is working correctly. This data format is a standard way of transmitting data over the web.
Step 4: Displaying Data in WordPress with a Shortcode
Heading: Embed the Shortcode
Shortcodes provide a simple method to display the API data directly within your WordPress website’s content.
Copy Shortcode: Locate and copy the generated shortcode for your endpoint. It’s typically found at the top of the endpoint settings.
Create a Page: Create a new page or edit an existing one in WordPress where you want to display the quote.
Paste Shortcode: Paste the copied shortcode into the page content area. This tells WordPress to execute the code associated with the shortcode.
Publish: Publish the page.
View: View the published page. You should now see the random quote displayed in JSON format.
Step 5: Preparing for Template Tag Usage (Changing Results Format)
Heading: Convert JSON String to PHP Array
Template tags offer greater flexibility for customized data display, but they require the data to be in a PHP array format.
Edit Endpoint: Navigate back to the endpoint settings screen within your WordPress setup.
Change Results Format: Change the “Results Format” from “JSON String” to “PHP Array Data”. This instructs WordPress to convert the received JSON data into a format that PHP can easily work with.
Save: Save the changes to the endpoint settings.
Step 6: Using the Template Tag with the Code Snippets Plugin
Heading: Display Template Tag Data
Since directly adding PHP code to themes is discouraged, we’ll use the Code Snippets plugin to safely insert the template tag.
Install & Activate Plugin: Install and activate the Code Snippets plugin from the WordPress plugin repository.
Add a New Snippet: Create a new snippet within the Code Snippets plugin.
Add Snippet Title: Add a descriptive title for the Snippet (e.g., “Quotable API Display”).
Paste Template Tag: Copy the template tag for your endpoint. Paste it into the content area of the snippet.
Store the Data: Modify the code to store the returned data in a variable. For example: `$data = yourtemplatetag;` (replace `yourtemplatetag` with the actual template tag).
Optional Testing Function: Add a line `print_r($data);` to test the snippet’s functionality. This will display the contents of the `$data` variable, helping you verify that the API data is being retrieved correctly.
Save & Activate: Save and activate the snippet. The plugin will generate a shortcode for the snippet.
Step 7: Displaying Formatted Data with the Template Tag
Heading: Fine-tune the Template Tag to Display Individual Keys
Now that the data is stored in the `$data` variable, you can access individual keys to format and display specific elements of the quote (e.g., the quote content and the author).
Modify the Snippet: Edit the code snippet you created earlier.
Target Specific Keys: Access specific elements of the returned data using array keys. For example, to display the quote content: `echo $data[‘content’];` and the author: `echo $data[‘author’];`. The keys ‘content’ and ‘author’ are specific to the Quotable API’s response. Refer to the API documentation for the correct keys.
Add Formatting (Optional): Add HTML tags for better presentation. For instance: `echo $data[‘content’] . “
– ” . $data[‘author’];`. This will display the quote content on one line and the author on the next, separated by a line break and a hyphen.Save Changes: Save the updated code snippet.
Embed Snippet Shortcode to Page: Locate the new snippet’s shortcode and add it to the wordpress page, that you’d like the quote and author to be displayed on.
View the Page: Reload the page where you embedded the snippet’s shortcode. You should now see the formatted quote and author displayed as intended.
Conclusion
You’ve successfully connected your WordPress site to an external API, retrieved data, and displayed it using both shortcodes and template tags. You’ve learned how to format the data for improved presentation using PHP array data and accessing individual keys. This empowers you to dynamically integrate external content into your website with flexibility and precise control over the display, keeping your WordPress site fresh and engaging.
Leave a Reply