Show Geo Content by Visitor IP in WordPress

API explanation

A browser-side call checks the visitor IP and returns the visitor IP, country, region, and city. It is suitable for localized content display.

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

Use cases

These scenarios show the value of the IP information interface while clearly separating server IP from visitor IP.

• These scenarios show the value of the IP information interface while clearly separating server IP from visitor IP.
• Show Geo Content by Visitor IP in WordPress
• API explanation
• SEO and UX recommendations

Implementation logic

Before implementation, identify the requester: server requests return server IP, while browser requests return visitor IP.

• Before implementation, identify the requester: server requests return server IP, while browser requests return visitor IP.
• A browser-side call checks the visitor IP and returns the visitor IP, country, region, and city. It is suitable for localized content display.
• All examples below use https://my.ipin.io/info directly, with localized comments and interface text.
• Default content should remain complete and readable, while regional content acts as an enhancement. Search engines can crawl stable content, and the page remains usable if the API fails.

Code example

All examples below use https://my.ipin.io/info directly, with localized comments and interface text.

functions.php / plugin

function ipin_geo_content_shortcode() {
    $box_id = 'ipin-geo-content-' . wp_generate_uuid4();
    ob_start();
    ?>
    <div id="<?php echo esc_attr($box_id); ?>" class="ipin-geo-box">Welcome. This is the default content.</div>
    <script>
    (async function () {
      const el = document.getElementById("<?php echo esc_js($box_id); ?>");
      const defaultText = "Welcome. This is the default content.";
const contentMap = { TW: "Content for Taiwan visitors", US: "Content for United States visitors", JP: "Content for Japan visitors" };
try {
  // Browser-side call to /info: detects the visitor IP.
  const info = await fetch("https://my.ipin.io/info").then(res => res.json());
  el.textContent = contentMap[info.country] || defaultText;
} catch (e) {
  // Keep the default value when the API request fails.
  el.textContent = defaultText;
}
    })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('geo_content', 'ipin_geo_content_shortcode');

Shortcode

[geo_content]

SEO and UX recommendations

Default content should remain complete and readable, while regional content acts as an enhancement. Search engines can crawl stable content, and the page remains usable if the API fails.

Common mistakes

The following issues affect article accuracy, code usability, and the credibility of the API explanation.

• The following issues affect article accuracy, code usability, and the credibility of the API explanation.
• Default content should remain complete and readable, while regional content acts as an enhancement. Search engines can crawl stable content, and the page remains usable if the API fails.
• Before implementation, identify the requester: server requests return server IP, while browser requests return visitor IP.
• These scenarios show the value of the IP information interface while clearly separating server IP from visitor IP.

Summary

A browser-side call checks the visitor IP and returns the visitor IP, country, region, and city. It is suitable for localized content display.

FAQ

The questions below are written specifically for this article and are directly related to the implementation.