It’s no secret that I love designing websites with Divi from Elegant Themes. Divi powers this site, thepocketsquareproject.org, and soon, the main loinc.org site as well. I love Divi’s layout builders and wide array of customizable modules that look amazing together.
Today I’m going to share a hack for dynamically updating the Circle Counter module.
The Divi Circle Counter
To display our fundraising progress for Project Secret Weapon, I wanted to use the beautiful, lazy-loading Circle Counter. The Circle Counter is easy to configure and looks great.
Divi Circle Counter Module Settings
You can set the number 0-100 to display (with or without the percent) sign and adjust many design parameters.
It’s works wonderfully for simple visualizations, but I didn’t want to log into the page and edit the number setting manually each time we received a donation. Hopefully that will happen often!
Our fundraising progress is being tracked on a page by our non-profit partner Building Tomorrow.
The challenge was to get the Circle Counter updated with the data from the project page.
My first thought was that I’d have to script something to edit the page content in MySQL. After reviewing the stored page contents, I noticed that the circle counter was stored natively in short code format:
[et_pb_circle_counter admin_label="Circle Counter" title="Amount Raised for $30,000 Goal" number="4" percent_sign="on" background_layout="light" bar_bg_color="#2ea3f2" disabled="off"] [/et_pb_circle_counter]
In reviewing the documentation and forums from Elegant Themes, I hadn’t seen reference to a specific shortcode for rendering the circle counter. But, it is relatively easy to create a custom shortcode function.
Rendering the Divi Circle Counter Shortcode
In your child theme’s functions.php file (yes, you should be using a child theme with Divi), just add something like this:
function add_counter_shortcode() {
$progress = 5;
$et_counter = '[et_pb_circle_counter admin_label="Circle Counter" title="Amount Raised for $30,000 Goal" number="'. $progress . '" percent_sign="on" background_layout="light" bar_bg_color="#2ea3f2" disabled="off"] [/et_pb_circle_counter]';
return do_shortcode($et_counter);
}
add_shortcode('goal_progress_counter', 'add_counter_shortcode');
Of course, the example above just hard codes the value of the counter and other parameters into the function. For my purpose, the only one of these parameters that needed to change dynamically was the counter.
Updating the Divi Circle Counter Dynamically
On the page I was parsing, the amount raised is displayed as:
<div class="to-fund"><font color="#FFFFFF">We have currently raised <font color="#F48324" size="6px">$1,200</font> of our $30,000 goal!</font></div>
To set the Circle Counter’s number dynamically my approach was to use file_get_contents() to grab the page with the content, parse it with a regular expression, convert the total amount raised to the percentage, and then put that value into the shortcode function.
function add_counter_shortcode() {
# page with the value we want
$url = 'http://www.buildingtomorrow.org/get-involved/buildchallenge/vreeman/';
$content = file_get_contents($url);
# navigate to the portion of the page we want
$first_step = explode( '' , $content );
$second_step = explode("" , $first_step[1] );
$raised = $second_step[0];
# match dollar value of amount raised from the page text
$re = '/(\$[0-9,]+(\.[0-9]{2})?)/';
preg_match($re, $raised, $matches);
$newstr = str_replace('$', '', $matches[1]);
# convert the dollar amount to a percentage
$progress = round(($newstr / 30000) * 100);
# insert the amount raised into the shortcode
$et_counter = '[et_pb_circle_counter admin_label="Circle Counter" title="Amount Raised for $30,000 Goal" number="'. $progress . '" percent_sign="on" background_layout="light" bar_bg_color="#2ea3f2" disabled="off"] [/et_pb_circle_counter]';
return do_shortcode($et_counter);
}
add_shortcode('goal_progress_counter', 'add_counter_shortcode');
Now, all we need to do to display the Circle Counter is to use the shortcode on our page:
[goal_progress_counter]
You could certainly use a similar approach to retrieve a data value from a database for display in the Circle Counter. It would also be easy to modify the shortcode function to take input parameters for the other variables.
Last, if you’re using some kind of caching plugin, you’ll want to adjust the settings ensure that the page is reloaded at an appropriate frequency.