Chapter 1: Custom Templates and PHP Basics in WordPress

What is front-page.php?

In WordPress, the front-page.php file is a special template file. When present in your active theme’s folder, it is automatically used as the homepage template regardless of your “home page” settings. This makes it the perfect place to add custom PHP code that is unique to your site’s landing page.

• Isolation: Customize the homepage without affecting other pages.
• Flexibility: Use pure PHP code to pull in external data, run custom queries, or even bypass the typical WordPress loop.
• Control: Gain full control over layout and functionality specifically for your site’s front page.

How WordPress Loads front-page.php

When a visitor lands on your site’s homepage, WordPress checks for a front-page.php file in your theme directory. If it exists, WordPress uses that file instead of index.php or home.php. This allows you to design a completely custom homepage while still leveraging WordPress’s core functions.

Demo: Using front-page.php to Fetch Coinbase Currencies

In this demo, we’ll create a front-page.php template that uses PHP to fetch live data from Coinbase’s currencies API. The endpoint https://api.coinbase.com/v2/currencies returns a JSON object containing a list of currencies, each with an id, name, and min_size.

1. Create or Edit front-page.php:Navigate to your active theme’s folder (e.g., wp-content/themes/your-theme/) and create a file named front-page.php if it doesn’t exist already.
2. Insert the Custom Code:Paste the following code into front-page.php:

   <?php
   /**
    * Front Page Template
    *
    * This template is used as the homepage.
    */
   
   get_header();
   
   echo '<h1>Welcome to Our Site!</h1>';
   echo '<h2>Live Coinbase Currencies</h2>';
   
   // Fetch live data from the Coinbase endpoint.
   $response = wp_remote_get('https://api.coinbase.com/v2/currencies');
   
   if ( is_wp_error( $response ) ) {
       echo '<p>Error retrieving currencies.</p>';
   } else {
       $body = wp_remote_retrieve_body( $response );
       $json = json_decode( $body, true );
   
       if ( ! empty( $json['data'] ) && is_array( $json['data'] ) ) {
           echo '<ul>';
           foreach ( $json['data'] as $currency ) {
               echo '<li>';
               echo '<strong>' . esc_html( $currency['id'] ) . ':</strong> ';
               echo esc_html( $currency['name'] ) . ' (Min Size: ' . esc_html( $currency['min_size'] ) . ')';
               echo '</li>';
           }
           echo '</ul>';
       } else {
           echo '<p>No currency data found.</p>';
       }
   }
   
   get_footer();
   ?>

3. Explanation of the Code:
   • Header and Footer: The get_header() and get_footer() functions load the header and footer parts of your theme, ensuring a consistent layout with the rest of your site.
   • Display Title: A heading welcomes visitors, setting the stage for dynamic content.
   • Fetching the API Data:
     • wp_remote_get() makes an HTTP GET request to the Coinbase currencies API.
     • Error handling is implemented to display an error message if the API call fails.
     • The JSON response is decoded into an associative array.
   • Outputting the Data: If valid data is received, it is looped through and displayed in an unordered list. The functions esc_html() ensure that any dynamic data is safely output.

Why Use front-page.php for Custom PHP Integrations?

By writing pure PHP in front-page.php, you gain direct control over what’s rendered on your homepage. You still benefit from WordPress functions, such as wp_remote_get() and esc_html(), which simplify tasks like data fetching and output sanitization. In our demo, the live Coinbase endpoint provides up-to-date information that enhances your homepage with dynamic content.

Conclusion

In this chapter, you learned about the significance of front-page.php in WordPress, how it is automatically used as the homepage, and how to integrate custom PHP code into it. By fetching live data from an external API, you can create dynamic, engaging, and fully custom front pages that set your website apart.

In the next chapter, we will explore extending functionality with custom REST API endpoints and integrating additional external data. Happy coding!