Render SVGs from CPT field in Bricks loops

Want to render SVGs from custom post type fields? Here's how!

Background

I have a custom post type (using the free Pods plugin) called “Solutions” and want to be able to dynamically update the post list generated in the front-end from a query loop simply by adding a new solution post in the wp-admin area. In addition, I want to have SVG icons render without having to upload SVG files to the media area.

Thanks to the suggestions from Mohammad Khan Yousufzai in the Bricks Facebook group, I managed to come up with a cool solution.

My setup

Adding the SVGs

I will add the SVG as markup inside of a “Code (Syntax Highlighting)” field and the field name, in my case, is called “icon”.

Builder loop

Inside the Bricks builder query loop (assuming you know how to do this), I will add a code element and drop in the following code:

<?php

// Get the ID of the current post (inside the loop, this will be automatically set).
$post_id = get_the_ID();

// Get the value of the custom field with the name "icon" for the current post.
$custom_field_value = get_post_meta($post_id, 'icon', true);

// Check if the custom field value exists and is not empty before echoing.
if (!empty($custom_field_value)) {
    echo $custom_field_value;
}else {
    echo 'No custom field value found.';
}

?>

If you want to copy the above code, simply replace “icon” inside of the get_post_meta parameter with whatever your field name is inside the single quotation marks!