Migrating from Custom Code

Replace custom PHP/API code with API Mapper

Migrating from Custom Code

If you've been using custom PHP code to fetch API data, API Mapper can simplify your workflow significantly. This guide helps you migrate.

Why Migrate?

Custom CodeAPI Mapper
Requires PHP knowledgeNo coding needed
Manual error handlingBuilt-in error handling
No caching (or DIY)Built-in caching
Updates require developerUpdate via UI
Hard to debugVisual testing tools

Common Migration Scenarios

Scenario 1: Custom PHP in Child Theme

Before (functions.php):

function get_weather_data() {
    $api_key = 'your-api-key';
    $response = wp_remote_get("https://api.openweathermap.org/data/2.5/weather?q=London&appid={$api_key}");
 
    if (is_wp_error($response)) {
        return null;
    }
 
    return json_decode(wp_remote_retrieve_body($response), true);
}

After (API Mapper):

  1. Create a new connection
  2. Set URL: https://api.openweathermap.org/data/2.5/weather
  3. Add query parameters: q=London, appid=YOUR_KEY
  4. Map fields: main.temp, weather[0].description
  5. Done! No code needed.

Scenario 2: Shortcode-Based API Display

Before:

add_shortcode('products', function() {
    $products = fetch_products_from_api(); // Your custom function
 
    ob_start();
    foreach ($products as $product) {
        echo '<div class="product">';
        echo '<h3>' . esc_html($product['name']) . '</h3>';
        echo '<p>' . esc_html($product['price']) . '</p>';
        echo '</div>';
    }
    return ob_get_clean();
});

After (API Mapper + YOOtheme):

  1. Create API connection in API Mapper
  2. In YOOtheme, add a Grid element
  3. Set dynamic content to your API connection
  4. Map fields to grid items
  5. Style with YOOtheme's visual editor

Scenario 3: AJAX-Based Data Loading

Before (JavaScript + PHP endpoint):

// JavaScript
fetch('/wp-admin/admin-ajax.php?action=get_data')
  .then(r => r.json())
  .then(data => displayData(data));
// PHP
add_action('wp_ajax_get_data', function() {
    // Fetch and return API data
});

After (API Mapper):

  • Data loads server-side with the page
  • No separate AJAX calls needed
  • Cached automatically
  • Works with YOOtheme's dynamic content system

Step-by-Step Migration

Step 1: Identify Your API Calls

Find all places where you're fetching external data:

  • wp_remote_get() / wp_remote_post()
  • file_get_contents()
  • curl_exec()
  • Guzzle HTTP client
  • Any third-party API libraries

Step 2: Document Current Configuration

For each API call, note:

  • Base URL
  • Endpoint path
  • Query parameters
  • Headers
  • Authentication method
  • Which fields you use

Step 3: Create API Mapper Connections

For each documented API call:

WordPress
  1. Go to Settings → API Mapper
  2. Click Add Connection
  3. Enter your documented settings
  4. Map the fields you identified
  5. Test the connection

Step 4: Update YOOtheme Layouts

Replace custom shortcodes/widgets with YOOtheme elements:

  1. Edit the page in YOOtheme
  2. Remove the shortcode/custom element
  3. Add a Grid, List, or other element
  4. Enable dynamic content
  5. Select your API Mapper connection
  6. Map fields to element properties

Step 5: Test Thoroughly

Before removing old code:

  • Verify all data displays correctly
  • Check responsive layouts
  • Test error scenarios (what if API is down?)
  • Verify caching works
  • Test on staging first

Step 6: Clean Up Old Code

Once everything works:

  1. Remove old PHP functions
  2. Remove old shortcodes
  3. Remove unused JavaScript
  4. Keep backups just in case

Handling Edge Cases

Dynamic Parameters

Old code might have:

$category = $_GET['cat'];
$products = fetch_products($category);

API Mapper solution:

  • Create separate connections per category
  • Or wait for dynamic parameters feature (coming soon)

Complex Data Transformations

Old code might have:

$data = array_filter($items, fn($i) => $i['price'] > 100);
$data = array_map(fn($i) => ['title' => strtoupper($i['name'])], $data);

API Mapper solution:

  • Use JMESPath (Pro/Developer) for filtering and transformation
  • Or handle display logic in YOOtheme templates

Multi-API Combinations

Old code might combine multiple APIs:

$weather = get_weather();
$news = get_news();
$combined = merge_data($weather, $news);

API Mapper solution:

  • Create separate connections for each API
  • Display in separate YOOtheme sections
  • Or use custom code for complex merging (hybrid approach)

Hybrid Approach

You don't have to migrate everything at once. You can:

  • Start with simpler API integrations
  • Keep complex custom code temporarily
  • Migrate piece by piece
  • Use API Mapper for new projects

Need Help?

Was this page helpful?