CDN integration in Wordpress - Mini Project: Build & Apply

CDN integration

📖 Scenario: Your WordPress site loads slowly for international visitors because all assets are served from a single origin server. You need to integrate a CDN to serve static assets from edge servers worldwide.

🎯 Goal: Set up CDN integration for a WordPress site by rewriting asset URLs in functions.php and configuring cache headers.

📋 What You'll Learn

Define a CDN URL constant in functions.php

Create a filter function to rewrite upload URLs to the CDN

Hook the filter to WordPress content and attachment filters

Add cache-control headers for static assets

💡 Why This Matters

🌍 Real World

CDN integration is essential for WordPress sites serving global audiences, reducing load times by 50-80% for international visitors.

💼 Career

WordPress developers frequently set up CDN integration for client sites to improve performance and handle traffic spikes.

1

Define CDN URL constant

In functions.php, define a constant CDN_URL with the value 'https://cdn.yoursite.com'.

Wordpress

<?php
// functions.php

// Define a constant for your CDN domain
// Your code here

Need a hint?

Use define('CDN_URL', 'https://cdn.yoursite.com') to create a PHP constant.

2

Create URL rewrite function

Create a function called rewrite_cdn_urls that takes $content as a parameter. Inside, get the site URL with get_site_url(), then use str_replace to replace the site's upload path with the CDN upload path. Return the modified content.

Wordpress

<?php
// functions.php

define('CDN_URL', 'https://cdn.yoursite.com');

// Create function to replace origin URLs with CDN URLs
// Your code here

Need a hint?

Use str_replace() to swap the origin upload path with the CDN upload path.

3

Hook filters for content and attachments

Use add_filter to hook rewrite_cdn_urls to both 'the_content' and 'wp_get_attachment_url' filters so that post content and media URLs are rewritten to the CDN.

Wordpress

<?php
// functions.php

define('CDN_URL', 'https://cdn.yoursite.com');

function rewrite_cdn_urls($content) {
    $site_url = get_site_url();
    $content = str_replace(
        $site_url . '/wp-content/uploads',
        CDN_URL . '/wp-content/uploads',
        $content
    );
    return $content;
}

// Add filters for content and attachment URLs
// Your code here

Need a hint?

Use add_filter('the_content', 'rewrite_cdn_urls') and repeat for 'wp_get_attachment_url'.

4

Add cache headers for static assets

Create a function add_cdn_cache_headers that hooks into 'send_headers'. Inside, use header() to set Cache-Control to 'public, max-age=31536000' for requests whose URI contains wp-content/uploads.

Wordpress

// Create function to add cache-control headers for uploads
// Hook it to 'send_headers'
// Your code here

Need a hint?

Check $_SERVER['REQUEST_URI'] for upload paths and set cache headers with header().