On Wednesday the 13th of June, Divi Space hosted a Facebook Live session about building a text resizer for your blog.

If you missed the Facebook live, you can rewatch it at any time!

https://www.facebook.com/wpzoneco/videos/1767189446662521/

SJ has all the code from this tutorial ready for you to download at Github.

The plugin that was built is a set of buttons that allow your users to change the font size to the best size for them and have their computer remember the settings when they refresh the page.

You’ll need to start by creating your folder, .php file, .css file, and your .js file for your code and enqueue them. If you activate the plugin after you’ve made the first line of code it will appear in your plugin list and will become live code on your site every time you save. This allows you to test the functionality as you go and find problems immediately instead of after you’ve typed multiple lines of code.

Here’s the code (it’s also available at GitHub):

PHP:

<?php
/*
Plugin Name: Divi Resizer
*/
function divi_resizer_enqueue() {
if ( is_single() ) {
wp_enqueue_style( 'divi-resizer-css', plugin_dir_url( __FILE__ ) . 'resizer.css' );
wp_enqueue_script( 'divi-resizer-js', plugin_dir_url( __FILE__ ) . 'resizer.js', array( 'jquery' ), '1.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'divi_resizer_enqueue');

CSS:

#resizer {
display: inline-block;
margin-left: 30px;
color: #303030;
border: 1px solid #303030;
padding: 2px 10px;
}

.resizer-icon {
display: inline-block;
position: relative;
width: 26px;
text-align: center;
cursor: pointer;
}

.resizer-icon:before {
content: 'Aa';
}

#resizer button {
background: transparent;
border: 0;
cursor: pointer;
}

#resizer .resizer-icon:hover:before {
display: block;
font-family: 'etModules';
content: "\e02a";
font-size: 12px;
}

JS:

jQuery(document).ready(function($){
// Add text resizer buttons after logo
$('<div id="resizer"><button type="button" class="smaller">-</button><span class="resizer-icon"></span><button type="button" class="bigger">+</button></div>').insertAfter('.logo_container a');
// create a fontSize local storage object, but only if one doesn't exist...
if (localStorage.getItem("fontSize") === null) {
// Set that local storage item's value to whatever the value was before it was created...
storeFont = $(".single #main-content p").css("font-size");
localStorage.setItem("fontSize", storeFont );
}
// Get the new fontSize local storage object
storedFont = localStorage.getItem("fontSize");
// Set it as the new font size...
$(".single #main-content p").css("font-size", storedFont );

// If the reduce size button is clicked...
$(".smaller").on("click", function(){
// Get just the numbers from the current font size
var fontSize = parseFloat($('.single #main-content p').css("font-size"));
// Then take away 2 and put 'px' back on...
if ( fontSize > 10 ) {
smallerSize = fontSize - 2 + "px";
} else {
smallerSize = fontSize + "px";
}
// Now set that as the new font-size value...
$('.single #main-content p').css({'font-size':smallerSize});
// And update the fontSize local storage object to reflect the new value
localStorage.setItem("fontSize", smallerSize );
});

$(".bigger").on("click", function(){
// Get just the numbers from the current font size
var fontSize = parseFloat($('.single #main-content p').css("font-size"));
if ( fontSize < 22 ) {
// Then add 2 and put 'px' back on...
biggerSize = fontSize + 2 + "px";
} else {
biggerSize = fontSize + "px";
}
// Now set that as the new font-size value...
$('.single #main-content p').css({'font-size':biggerSize});
// And update the fontSize local storage object to reflect the new value
localStorage.setItem("fontSize", biggerSize );
});

$(".resizer-icon").on("click", function(){
localStorage.removeItem('fontSize');
window.location.reload();
});
});

The need for this type of testing becomes evident as you watch this video. SJ used this method to trace down an error from using a dash instead of a dot, from forgetting to close a command before opening another, and when he hadn’t entered the code to get the item after setting the item. If you watch closely there is also an instance of .css instead of .js and a set of missing quotation marks that were fixed when he pasted in known good code. I personally like seeing the troubleshooting process and I’m glad he does this live. (Thanks SJ).

A few lines of code create two buttons and a span. The buttons include a “-” and a “+” with a font icon on the span between them. While figuring out where to place the buttons SJ points out the fact that you use the same selectors in jQuery as in CSS which makes it very easy to work with. Watching how the selections SJ makes effects the finished buttons makes it easier to understand how to adjust the settings for a different appearance.

SJ walks you through creating on-click functions for the smaller button. Don’t forget to add an if-else statement to keep the text from being shrunk into oblivion. You’ll also need to include the code to reset your localStorage item to the users’ new setting. Once the smaller button is working properly it’s just a matter of copy and paste and a few adjustments to make a larger button functional.

The localStorage item you’ve created can be adjusted multiple times within your code. Since you set it up in localStorage the user preference will be remembered even if they click away.

In case the user wants a way to set everything back to default it’s best to set up a refresh button. SJ steps you through this process as well including changing the font icon to a refresh icon on hover.

The last step is to make conditional statements that allow the resizer to only display on the pages you choose.

This set of code is one of the most complicated that’s been done on one of the Divi Space webinars. It goes a bit beyond standard jQuery so you’ll want to look through the code and make sure you understand what’s going on. The setting and getting items in localStoarge part of this code is massively useful. It can be used to collect and store customizations on the users’ computers without collecting data, so there’s no GDPR involved.

Don’t forget that it’s less than 24 hours before the second class of Transforming Divi with CSS & jQuery Course begins.

If you loved the content of the webinar and loved learning from SJ, then have a look at our online course! Now in its second enrollment of the Transforming Divi with CSS & jQuery Course will start June 15th. You can register now.

Here is a sneak peek of whats included in the course: