In most WordPress setups, images are typically uploaded through the media library, which stores them inside the wp-content/uploads directory. This is perfectly fine for general content — but there are rare cases where you might need more control over your image location.

For instance, you may want to reference images that are:

• Part of your site’s design (e.g., icons, background assets)
• Meant to stay fixed and not be moved or deleted accidentally
• Used across multiple posts or pages and should remain version-controlled

In such cases, it’s better to store these images directly inside your theme folder — either at the root or inside a subfolder like /assets/.

But how do you reference them inside content or blocks?

That’s where this simple but powerful shortcode comes in.

---

The [theme_url] Shortcode

This shortcode dynamically returns the URL of your currently active theme, whether it’s a parent or a child theme.

You can define the shortcode by adding this to your theme’s functions.php file:

// Shortcode to get the active theme URL (parent or child)
function rk_get_active_theme_url_shortcode() {
    $theme = wp_get_theme();
    $theme_dir = get_theme_root_uri() . '/' . $theme->get_stylesheet();
    return esc_url($theme_dir);
}
add_shortcode('theme_url', 'rk_get_active_theme_url_shortcode');
Code language: PHP (php)

How to Use It in Content

Once the shortcode is active, you can use it like this in your posts, pages, or even widgets:

<img src="[theme_url]/carousel.png" alt="Carousel Image" />
Code language: HTML, XML (xml)

 WordPress will automatically replace [theme_url] with your current theme’s URL. So if your active theme is located at:  

https://yourdomain.com/wp-content/themes/my-themeCode language: JavaScript (javascript)

…then the above <img> tag will render as: 

<img src="https://yourdomain.com/wp-content/themes/my-theme/carousel.png" alt="Carousel Image" />
Code language: HTML, XML (xml)

Example Use Case

Let’s say you have an image called icon-check.png in your theme folder under /assets/icons/. You can reference it like this:

<img src="[theme_url]/assets/icons/icon-check.png" alt="Check Icon" />
Code language: HTML, XML (xml)

This approach ensures:

• Predictable and organized image locations
• Better portability during migrations
• You avoid cluttering the media library with permanent UI assets

---

When Should You Use This?

• When you have static or UI-related images that are part of the theme design
• For images that should not be edited, deleted, or moved by content editors
• When using custom blocks or templates that expect certain assets to live in the theme

---

When Not to Use It

• For regular blog post images or dynamic content
• When you need media to be user-editable from the admin panel

---

Final Thoughts

While this is a niche use case, it’s a neat trick to have in your WordPress toolkit. With the [theme_url] shortcode, you get an easy, flexible way to link to important theme-based assets right from your content — without diving into PHP or template files every time.