WordPress: Get Custom Featured Image Size URLs

Nov 17, 2025 by Alex Johnson 47 views

How to Get the URL of Each Custom Image Size of a Featured Image

Featured images in WordPress are a fantastic way to visually enhance your content. But what if you need more control over the image sizes used in different parts of your site? This article dives into how you can retrieve the URLs of your custom image sizes for a featured image, allowing you to inject them conditionally and create a truly tailored user experience. If you're looking to optimize your WordPress site by getting the exact URLs for custom image sizes, this guide is for you. By getting the URL, you are able to have more control over how they are displayed, ensuring that the images fit perfectly into your design and improve overall site performance.

Understanding WordPress Image Sizes

Before we dive into the code, let's clarify how WordPress handles image sizes. When you upload an image to your WordPress media library, WordPress automatically generates several different sizes of that image. These sizes include thumbnails, medium, large, and the original full-size image. WordPress also allows you to define your own custom image sizes in your theme's functions.php file. Understanding how these sizes are created and stored is crucial for effectively retrieving their URLs. Each generated size is stored as a separate file on your server, and WordPress keeps track of these files in the database. This system is designed to optimize image delivery by serving the most appropriate size for the context, whether it's a small thumbnail in a sidebar or a full-width image in a post. Knowing this background helps you appreciate the flexibility and power WordPress offers in managing images, and it sets the stage for customizing image handling to meet your specific needs.

Step-by-Step Guide to Retrieving Custom Image Size URLs

Now, let's get practical. Here’s a step-by-step guide on how to retrieve the URLs of your custom image sizes for a featured image in WordPress. This involves a bit of coding, but don't worry, we'll walk you through it. Ensure you have access to your theme's functions.php file or a custom plugin where you can add the necessary code.

1. Defining Custom Image Sizes

First, you need to define your custom image sizes. Open your functions.php file (or your custom plugin file) and add the following code:

<?php
add_action( 'after_setup_theme', 'my_custom_image_sizes' );
function my_custom_image_sizes() {
    add_image_size( 'custom-size-small', 300, 200, true ); // Hard crop
    add_image_size( 'custom-size-large', 800, 600, false ); // Soft crop
}
?>

In this example, we've defined two custom image sizes: custom-size-small and custom-size-large. The add_image_size() function takes four arguments:

$name: A unique name for the image size.
$width: The desired width of the image.
$height: The desired height of the image.
$crop: A boolean value indicating whether to hard crop the image (true) or soft crop (false).

Hard cropping means the image will be cropped to the exact dimensions specified, potentially cutting off parts of the image. Soft cropping maintains the aspect ratio and may result in dimensions smaller than specified if the original image doesn't fit.

2. Retrieving the Featured Image ID

Next, you need to retrieve the ID of the featured image for the current post. You can do this using the get_post_thumbnail_id() function. This function returns the ID of the featured image, which you'll need to retrieve the image URLs.

<?php
$post_thumbnail_id = get_post_thumbnail_id();
?>

3. Getting the Image URL for a Specific Size

Now, with the featured image ID in hand, you can use the wp_get_attachment_image_src() function to retrieve the URL for a specific image size. This function takes two arguments:

$attachment_id: The ID of the attachment (in this case, the featured image ID).
$size: The name of the image size you want to retrieve (e.g., 'custom-size-small' or 'custom-size-large').

Here’s how you can use it:

<?php
$custom_size_small_url = wp_get_attachment_image_src( $post_thumbnail_id, 'custom-size-small' )[0];
$custom_size_large_url = wp_get_attachment_image_src( $post_thumbnail_id, 'custom-size-large' )[0];

echo 'Small Size URL: ' . $custom_size_small_url . '<br>';
echo 'Large Size URL: ' . $custom_size_large_url . '<br>';
?>

In this code snippet, wp_get_attachment_image_src() returns an array containing the image URL, width, and height. We access the URL using [0]. This gives you the direct URL to the image in the specified custom size.

4. Putting It All Together

Here’s the complete code snippet that you can use in your theme files (e.g., single.php, page.php) to retrieve and display the custom image size URLs:

<?php
$post_thumbnail_id = get_post_thumbnail_id();

if ( $post_thumbnail_id ) {
    $custom_size_small_url = wp_get_attachment_image_src( $post_thumbnail_id, 'custom-size-small' )[0];
    $custom_size_large_url = wp_get_attachment_image_src( $post_thumbnail_id, 'custom-size-large' )[0];

    if ( $custom_size_small_url ) {
        echo '<img src="' . esc_url( $custom_size_small_url ) . '" alt="Featured Image Small">';
    }

    if ( $custom_size_large_url ) {
        echo '<img src="' . esc_url( $custom_size_large_url ) . '" alt="Featured Image Large">';
    }
}
?>

This code first checks if a featured image exists. If it does, it retrieves the URLs for the custom-size-small and custom-size-large sizes. Finally, it displays the images using <img> tags, ensuring the URLs are properly escaped using esc_url() for security.

Conditionally Injecting Image URLs

One of the primary reasons for retrieving custom image size URLs is to inject them conditionally based on various factors. Here are a few scenarios where this might be useful:

1. Responsive Images

You can use the URLs to create responsive images using the <picture> element or the srcset attribute of the <img> tag. This allows you to serve different image sizes based on the user's screen size, improving performance and user experience. This approach ensures that users on mobile devices don't download unnecessarily large images, while users on desktop computers get the benefit of higher-resolution images. By tailoring the image size to the device, you can significantly reduce page load times and improve overall site responsiveness.

2. Different Layouts

Depending on the page layout or device, you might want to use different image sizes. For example, on a mobile device, you might use the custom-size-small image, while on a desktop, you use the custom-size-large image. This can be achieved by checking the screen size using JavaScript or CSS media queries and then injecting the appropriate image URL.

3. Specific Sections of Your Site

Different sections of your site may require different image sizes. For example, a slider might need a larger image size than a thumbnail in a related posts section. By retrieving the custom image size URLs, you can easily tailor the images to fit each section perfectly. This level of control allows you to maintain a consistent and visually appealing design across your entire website.

Removing Default Crop Sizes

The user mentioned they are removing default crop sizes. If you are removing default image sizes in WordPress, proceed with caution. Here's how you might do it, and some considerations:

<?php
function remove_default_image_sizes( $sizes ) {
    unset( $sizes['thumbnail'] );
    unset( $sizes['medium'] );
    unset( $sizes['large'] );

    return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'remove_default_image_sizes' );
?>

Important Considerations:

Theme Compatibility: Ensure your theme doesn't rely on these default sizes. Removing them might break the theme's layout or functionality.
Plugin Compatibility: Some plugins might also depend on the default image sizes. Test thoroughly after removing them.
Regenerate Thumbnails: After removing default sizes, regenerate your thumbnails to remove the old sizes from your media library. You can use a plugin like Regenerate Thumbnails for this.

Removing default image sizes can help reduce server storage and improve performance, but it's crucial to ensure compatibility and regenerate thumbnails to avoid any issues.

Best Practices and Optimization

When working with custom image sizes, it's essential to follow best practices to ensure optimal performance and user experience. Here are some tips to keep in mind:

Optimize Images: Before uploading images to WordPress, optimize them using tools like TinyPNG or ImageOptim. This reduces the file size without sacrificing quality, improving page load times.
Use WebP Format: Consider using the WebP image format, which offers better compression than JPEG and PNG. WordPress supports WebP images since version 5.8, so you can easily use them on your site.
Lazy Loading: Implement lazy loading for images to improve initial page load time. This can be done using the `loading=