It’s important to have an API in an application these days, given how sophisticated some applications are. When you do API integration into WordPress, it allows you to access real-time information, automate content updates, and provide interactive features. However, there are certain things you need to know to get started with this. This article will go through how you can integrate API in WordPress.
Table of Contents
What’s the Difference Between Theme and Plugin API Integration in WordPress?
There are two main ways of integrating APIs in WordPress. One is by Themes and the other by Plugins. Each of these ways has its own pros and cons.
Themes, for instance, provide you with a flexible means of customizing the design and layout of your WordPress site. They offer a variety of templates and styles from which to choose. You must modify the theme files in order to integrate API calls and display the necessary material in order to implement the API call integration via a theme. This method definitely has its own advantages. For example, they are quite simple since it has very few steps as opposed to creating a WordPress REST API plugin from scratch.
This article will focus primarily only on how you can integrate APIs through Themes.
Step-By-Step Guide to Integrating an External API Into WordPress
This step-by-step guide will go through how you can integrate your external API into WordPress. But first, you have to choose an API. This article will demonstrate using the currencylayer API from API Layer. Access to historical and current exchange rates for different currencies is made possible via the currencylayer API. Developers can access precise and recent exchange rates for a variety of global currencies.
1. Obtain an API Key for the External API
Like it is for all APIs, we should get an API key for the currencylayer API as well. This key will be a unique identifier that gives access to API data endpoints.
First, sign up for an account in currencylayer. You can subscribe to the free version for 100 API calls.
You will then get access to a free API key in your dashboard.
Use your key and append it to a base URL. The following URL is an example to get live currency rates.
|
1 |
https://api.currencylayer.com/live?access_key=YOUR_ACCESS_KEY |
2. Create a Child Theme
Using a child theme is of utmost importance when it comes to maintaining the integrity and flexibility of your WordPress website. It acts as a safeguarding layer that allows you to make customizations without altering the original parent theme. The significance of using a child theme can be attributed to several key factors.
Firstly, a child theme ensures that any modifications you make to your website won’t be lost when the parent theme is updated. It acts as a protective shield, preserving your customizations and preventing them from being overwritten. This way, you can confidently update the parent theme without the fear of losing your changes.
Furthermore, a child theme grants you the freedom to customize various aspects of your website, including design, layout, and functionality. It empowers you to make changes without any limitations imposed by the parent theme. With a child theme, you have complete control over the customization process.
Before we create the child theme, make sure you have properly hosted your WordPress site.
Steps to Create a Child Theme
Go to your WordPress theme directory. You can usually find this directory when you navigate into the wp-content directory and then into themes.
If you notice a theme folder already inside (which usually is the case) like the one in the image above, create another folder in that same directory. You can name this with a “child” prefix to the existing theme folder, eg. “twentytwentyone-child”.
Now, in this child theme folder, create a file (not a folder) with the name style.css. In this file, you can add the following code.
|
1 2 3 4 5 6 7 |
/* Theme Name: Twenty Twenty One Child Template: twentytwentyone */ |
You should also make sure the “twentytwentyone” in the Template matches with the parent theme folder.
To make sure the stylesheet is usable, we need to enqueue it. We can do so by creating another file alongside the style.css file with the name “functions.php” and adding the following.
|
1 2 3 4 5 6 7 8 9 |
<?php add_action( 'wp_enqueue_scripts', 'twentytwentyone_enqueue_child_theme_styles' ); function twentytwentyone_enqueue_child_theme_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri() ); } |
Now to activate this theme, go to your WordPress admin area and navigate into Appearance and into Themes.
You will be able to see the theme you created previously on your screen. You can now click on “Activate”.
3. Create a Custom Page Template and Integrate the API
We created a theme, and now we will be using a custom page template so that it structures your webpage in a way that integrates your own API request data appropriately.
To get started, create another file with the name “custom-api.php” under your child theme directory. Paste the following code but make sure to replace the access key appropriately.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<?php /* Template Name: Currency Exchange Rates Description: This is a custom page template that integrates with the Currency Layer WordPress API to display real-time exchange rates. */ // Show the header of your WordPress site so the page does not look out of place get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main"> <?php // set REST API Endpoint and access key $endpoint = 'live'; $access_key = 'ACCESS-KEY'; // Initialize CURL: $ch = curl_init('http://api.currencylayer.com/'.$endpoint.'?access_key='.$access_key.''); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // Store the data: $json = curl_exec($ch); curl_close($ch); // Decode JSON response: $exchangeRates = json_decode($json, true); if (isset($exchangeRates['success']) && $exchangeRates['success'] === true) { // Access the exchange rate values: $usdToGbp = $exchangeRates['quotes']['USDGBP']; $usdToEur = $exchangeRates['quotes']['USDEUR']; // Create HTML to display the exchange rates: $pageHTML = "<h2>Real-time Exchange Rates</h2>"; $pageHTML .= "<p>USD to GBP: $usdToGbp</p>"; $pageHTML .= "<p>USD to EUR: $usdToEur</p>"; echo $pageHTML; } else { // Show the specific error message: if (isset($exchangeRates['error'])) { echo "Error: " . $exchangeRates['error']['info']; } else { echo "Oops, something went wrong. Please try again later."; } } ?> </main><!-- #main --> </div><!-- #primary --> <?php // Show the footer of the WordPress site to keep the page in context get_footer(); |
The following image shows you how the above code appears on the file.
4. Add a New Page Using Your New Page Template
If you now go to your WordPress admin area again, you will find a “Add New” option.
You will now see a screen where you can find the custom page you created from a template option’s drop-down menu. Select the “Currency Exchange Rates” option.
Now you are done! You have now integrated your currency exchange rates WordPress REST API into your WordPress site.
How to Handle REST API Authentication in WordPress?
Securing API authentication in WordPress is very important when integrating APIs into your website. It ensures that only authorized users or applications can access and interact with the API.
Using unique API keys is a common approach. These keys act as identifiers that grant access to the API. You can obtain an API key from the provider and securely store it in your WordPress installation. When making API requests, include the key as a parameter or in the request headers.
OAuth is a widely adopted protocol for authentication and authorization. It enables users to grant limited access to their data on one platform (e.g., WordPress) to another (e.g., the API provider). A WordPress plugin would simplify the implementation of OAuth for API authentication.
Another method is token-based authentication, where authorized users or applications receive a token. This token serves as proof of authentication and should be included in API requests. WordPress provides plugins and libraries supporting token-based authentication methods like JWT.
Consider implementing two-factor authentication (2FA) for enhanced security. With 2FA, users must provide an additional authentication factor, such as a code sent to their mobile device, along with their credentials.
Why Should You Use APILayer for Your Next API Search?
Integrating APIs into your WordPress pages opens up a world of possibilities, allowing you to leverage external services and data to enhance your website’s functionality. By following the methods discussed in this article, such as using themes or plugins, you can seamlessly incorporate APIs and access real-time information, automate content updates, and provide interactive features.
For your next API search, APILayer is the ideal choice. As an API marketplace, APILayer offers a wide range of APIs that cater to various needs and industries. Whether you require currency conversion, WordPress data, payment processing, or any other functionality, APILayer has you covered.
FAQs
Can We Integrate API in WordPress?
Yes. You can integrate APIs in WordPress. There are two main ways. One is by using themes, and the other is by plugins.
What Is API Integration?
API integration is the process of connecting software applications with external APIs in order to exchange data or functionality.
Can I Integrate Multiple APIs Into My WordPress Website?
Yes. WordPress offers the flexibility to integrate multiple APIs.
Are There Any Costs Associated With API Integration WordPress?
The cost of API integration depends on the API provider you choose. While some APIs provide free access with limited functionality, you will need to purchase a subscription or license to gain more advanced functionality.
