Gone are the days when you could only create a simple blog with WordPress. Over time, it has evolved into a state-of-the-art content management system allowing you to integrate your web pages with external APIs.
In today’s blog post, we’ll first talk about what external API is and why you should integrate them on your WordPress pages.
After that, we’ll walk you through the five ways to integrate External API on a WordPress Page. So, without further ado, let’s get started.
What is an API or Application Programming Interface and why do you need to capitalize it?
API, or Application Programming Interface, allows different software applications to interact and connect with each other using a set of rules and protocols.
It determines how different components of various software systems should specify and interact with data formats, methods, and conventions in an attempt to communicate seamlessly with each other.
In simpler terms, you can use an API to bridge various software solutions to enable them to exchange functionalities and data.
Without having to understand a software system’s underlying implementation, developers get a standardized way to access and manipulate certain features or data.
That being said, this abstraction layer promotes code reusability, simplifies the development process and facilitates integration between diverse applications.
Here is a fact from Statista about areas where developers mostly use API technology:
Source: Statista
If you’re visiting API technology for the first time, you may wonder what API is for, right? Well, with this technology, you can allow third-party developers to interact with your platform or service so that they can build applications and services revolving around yours.
API commonly ships with a well-structured interface that developers can take advantage to perform actions, make requests to retrieve data or receive responses in a controlled and consistent manner.
For instance, to facilitate developers to interact with their software systems, social media platforms like LinkedIn, Instagram or Twitter reveals their APIs on their respective websites.
Another example can be payment gateways exposing their APIs to help secure transactions. The other instance could be mapping services offering API keys so that developers can integrate maps and location-based functionalities in their software systems or applications.
In summary, an API acts as a communication mechanism that a developer can use in their software applications to request, retrieve and exchange data to create integrated solutions or extend the functionalities of two existing software systems simultaneously.
Five ways to integrate external API in a WordPress Page
Here are five ways to do it:
- Using a WordPress plugin
- Custom Code in Theme Functions.php
- Using a Custom Plugin
- Embedding JavaScript/jQuery:
- Using WordPress REST API
Method 1: Using a WordPress plugin
With WordPress plugins, you can literally do anything you can imagine. You will find numerous plugins with a view to integrating an external API on your website page.
The best perk of using a WordPress plugin to do so is it will allow you to configure the API settings with a user-friendly interface and effortlessly display the retrieved data on your web page using a widget or shortcode.
Although you’ll find many API plugins, we will use WPGetAPI for this tutorial. Make sure you follow these steps:
Step 1: Install the WPGetAPI plugin
We assume that you have your WordPress website up and running. To install WPGetAPI, you need to log in to your WordPress admin dashboard.
Then navigate to Plugins > Add New > Search for the keyword “WPGetAPI” > Click the Install Now button.
Hit the Activate button.
Step 2: Configure the basic settings
Now, you’ll be able to see the WPGetAPI plugin in your WordPress menu. Select the WPGetAPI plugin as indicated by the red arrow:
Now, give an API name and a unique ID. After that, paste the URL ( https://api.quotable.io ) into the input field Base URL. Make sure you keep the ( https:// ) before the URL.
Finally, save the changes by clicking on the Save button.
Step 3: Adding the details for the endpoints
After saving the changes, you’ll get a new tab according to the API name (Quotable), where you can add all the details for the endpoints you will prefer to use.
Select the Quotable tab.
Now, insert a Unique ID, an Endpoint URL. We’re going to use the word id ‘random’ and the url ‘/random’ here.
Leave the other settings as they are because they are unimportant here. For example, we’ll only be using the GET request Method for the endpoint here and the result format will be JSON string.
Step 4: Run a quick test
Now, let’s run a quick test by hitting the Test Endpoint button if the string is echoed properly.
Voila! We’re getting a quote string even if the data string looks strange. This is happening because we’re using the JSON result format. Not to worry! We’ll fix that in a moment.
Let’s show the Data Output or quote on a WordPress page.
Step 5: Copy and paste the shortcode on a WordPress page.
To show the quote or Data Output on a WordPress page, you need to copy the following shortcode.
Now, paste the shortcode on a WordPress page you like then Save or Update the page.
Now, select the Preview option to view the data output.
Select the Preview in new tab option.
Boom Shakalaka! There you have it!
This is just an example of how you can integrate an external API with your WordPress pages using a WordPress plugin.
Bonus tips: Getting rid of the ugly JSON string format and customizing the output
To do so, let’s go back to the WPGetAPI option from your WordPress admin dashboard.
Select the Quotable tab.
Select the PHP array data option from the Results Format dropdown menu.
Hit the Save button.
You can install and activate the Code Snippets plugin to use the template tag at this stage. This way, you don’t have to modify your theme files.
To install the plugin, go to Plugins > Add New > search for the keyword “Code Snippets”.
Hit the Activate button.
Select Snippets from the left menu bar.
Click the Add New button to add a new PHP code snippet.
Give a headline to the Snippet.
Now, copy the following template tag from the WPGetAPI plugin.
After that, select the Content tab.
Now, paste the following PHP code into the editor.
<?php
$data = wpgetapi_endpoint( ‘quotable’, ‘random’, array(‘debug’ => false) );
echo $data[‘content’];
echo ‘<br>’;
echo $data[‘author’];
?>
Note: Remember to paste the code that you copied from the WPGetAPI plugin: wpgetapi_endpoint( ‘quotable’, ‘random’, array(‘debug’ => false) );
Now, click on the Save Changes and Activate button to take effect.
Copy the shortcode and use it on any page to see the clean string output.
After pasting the shortcode, Update the page.
Using a plugin that’s all about integrating an external API on a WordPress page.
Method 2. Custom code in Theme Functions.php
If you are comfortable with coding, you can easily integrate an external API by writing custom code in your WordPress theme’s `functions.php` file.
To achieve greater flexibility and more control over the API integration process, you can use PHP libraries like the WordPress HTTP API or cURL to make API requests, retrieve data and manipulate the response as per your need.
This method will help you leverage hooks and filters, enabling you to integrate an external API by writing custom code.
Method 3. Using a custom plugin
If you don’t want to clutter the functions.php file, creating a custom plugin can be a great idea. This way, you can keep your theme files more organized and tidy.
With this method, you will be able to ensure better maintainability by confining the API integration logic in a separate plugin.
For this purpose, the WordPress development guidelines can allow you to create your custom plugin. Eventually, you can use the filters and hooks to connect your WordPress website’s pages with external APIs.
Simply put, a custom plugin will allow you to enjoy full control over the API integration process, maintaining your specific requirements.
Method 4: Embedding JavaScript/jQuery:
Sometimes, you may need to rely heavily on client-side language like JavaScript’s functionality to create an API integration.
You will simply integrate the external APIs on your WordPress pages or templates in such requirements by embedding JavaScript or jQuery code.
If you want to deal with APIs that offer dynamic content such as social media feeds, interactive maps or weather forecasts, this method will take you to the rescue.
With this method, you can communicate with the API and display the retrieved data in real time by including the necessary JavaScript code in your page’s HTML markup.
Method 5: Using WordPress REST API:
WordPress is quite developer-friendly, with a robust and dedicated REST API feature. With Rest API, you can seamlessly interact with your web pages and connect them with any external APIs.
You just need to create custom WordPress endpoints to make them act as proxies for the external API endpoints.
To this end, you can handle the requests, make the necessary API calls and retrieve data with WordPress hooks, filters and other PHP code.
Suppose you are looking for a secure API integration. In that case, nothing can beat the idea of using the WordPress REST API, which will offer you data sanitization, authentication and other security measures out of the box.
FAQs on how to integrate an external API in a WordPress page
Question 1: Are there specific plugins available for integrating APIs in WordPress?
A: Yes, there are numerous plugins available in the WordPress repository that facilitate API integration. These plugins often provide user-friendly interfaces, allowing you to configure API settings and easily display the retrieved data on your pages using shortcodes or widgets. Some popular API integration plugins include WordPress REST API Authentication, API KEY for Google Maps, ACF REST API and REST API Helper.
Question 2: I’m not a developer. Can I still integrate APIs into my WordPress page?
A: Absolutely! If you’re uncomfortable with coding, using API integration plugins is an excellent option. These plugins typically have intuitive interfaces that guide you through the setup process. With just a few clicks, you can connect to an API, configure settings, and display the desired data on your WordPress page without writing any code.
Question 3: Can I integrate any API into my WordPress page, or are there limitations?
A: In general, you can integrate any API into your WordPress page as long as the API provides the necessary documentation and endpoints to access its data or functionality. However, some APIs may require authentication, specific data formats, or API keys. Reviewing the API documentation and ensuring compatibility before attempting integration is important.
Question 4: What if I need more control and customization options for API integration?
A: If you have coding experience and need greater control over the API integration process, you can write custom code in your WordPress theme’s functions.php file or create a custom plugin. These approaches provide flexibility and allow you to tailor the integration to your specific requirements, enabling handling complex API interactions or manipulating the retrieved data as needed.
Question 5: Are there any security considerations when integrating external APIs?
A: Yes, security is an important aspect when integrating external APIs. It’s crucial to ensure that the API you’re integrating follows secure practices, such as using HTTPS for data transmission and providing authentication mechanisms. Additionally, sanitizing and validating user input and implementing appropriate security measures to protect against potential vulnerabilities are essential when writing custom code.
Question 6: Can I integrate multiple APIs into a single WordPress page?
A: Integrating multiple APIs into a single WordPress page is possible. Depending on your chosen integration method, you can configure and connect with multiple APIs, retrieve data from each API, and display the relevant information on your page. This flexibility allows you to combine the functionalities of different APIs to create rich and dynamic content on your WordPress site.
Question 8: What are the benefits of integrating external APIs into my WordPress page?
A: Integrating external APIs can offer several benefits. It allows you to access a wealth of data and functionality from external sources, enhance user experiences with interactive features, automate tasks, and extend the capabilities of your website beyond the core WordPress functionality. API integration enables you to create more dynamic, personalized, and powerful WordPress pages tailored to your specific needs.
Final thoughts
To step up the user experience, provide richer functionalities and create a vast array of possibilities, integrating external APIs on your WordPress pages can be an ideal choice.
Fortunately, you can achieve external API integration on your web pages using readily available plugins in WordPress.org, writing custom code, embedding JavaScript or utilizing WordPress REST API.
The method you choose depends on your comfort level with coding, the API’s complexity, and your website’s specific requirements.
If you truly empower the power of your WordPress website, deliver dynamic content to the pages, automate tasks and unlock new possibilities, you need to integrate external APIs successfully.