Displaying API results inside a WordPress page template

Question

I've created a WordPress page template that calls an API using Httpful and formats the results. This is my first time using APIs on a page, so I'd like to know if this is the right direction to go in.

The code below uses information from a members API to receive the member's information and display their basic information along with a single upcoming class.

page-members.php

<?php
/**
 * The template for displaying a list of members.
 *
 * @package themename
 */

get_header();

// call from api using basic auth
require_once 'inc/httpful.phar';
$uri = "https://api.example.com/v1/accounts/KEY/members_list";
$response = \Httpful\Request::get($uri)
    ->addHeader('Authorization', 'Basic KEY')
    ->expects('application/json')
    ->send();
?>

<main class="members">
    <section class="members-content">
        <?php
        $defaultImage = get_field('logo', 'option');

        // loop through api response for each member
        foreach($response->body->members as $member) :
            $memberID = $member->id;

            // if member has no id, skip member
            if (empty($memberID)) :
                continue;
            endif;

            // if member has no image, use default logo
            $memberImage   = (!empty($member->image)) ? $member->image : $defaultImage;
            $memberName    = $member->name;
            $memberTagline = $member->tagline;

            // loop through upcoming classes for each member
            foreach($member->upcoming_classes as $class) :
                $classID = $class->id;

                // if class has no id, skip class
                if (empty($classID)) :
                    continue;
                endif;

                $className = $class->name;
                $classDate = $class->date;
                $classTime = $class->start_time;
            ?>

            <div class="members-column">
                <a href="<?php echo site_url() . '/member/?MemberID=' . $memberID; ?>">
                    <div class="members-image" style="background: url('<?php echo $memberImage; ?>') no-repeat top center / cover;">
                    </div>
                </a>

                <div class="members-list">
                    <h2 class="members-list-name"><?php echo $memberName; ?></h2>
                    <h4 class="members-list-tagline"><?php echo $memberTagline; ?></h4>
                </div>

                <div class="members-class">
                    <span class="members-class-info">
                        <?php echo $className; ?><br>
                        <!-- format class date, ex: 01/01 - 1:00pm --> 
                        <?php echo date('m/d', strtotime($classDate)); ?> — <?php echo date('g:i a', strtotime($classTime)); ?>
                    </span>

                    <a class="button" href="<?php echo site_url() . '/reserve/?classID=' . $classID; ?>">Book</a>
                </div>
            </div>
        <?php
        // end class loop by breaking on first upcoming class with an id
        break; endforeach; endforeach;
        ?>
    </section>
</main>

<?php get_footer(); ?>

Is there anything I can do to improve this single template?

Answer 1

I see three things

I'm not too terribly familiar with custom wordpress tempaltes, but I'm fairly certain you shouldn avoid doing the API logic in the view. You should call the API in a controller and pass the result to the view, if at all possible. This is a standard separation of concerns.

Additionally, you shouldn't assume the API call will work. If they're server or dns has issues, or they make a breaking change to their API, you should handle it gracefully and inform the user that there are issues. Right now it appears foreach($response->body->members as $member) would fail if the API failed.

Finally, it's a good idea to keep the "Basic KEY" in a config or something, so you don't need to touch the code to update the key.