Best WordPress Plugin for Custom Fields & Meta Boxes
In today's post, we'll walk you through the way to create an e-book page with download and preview buttons using Meta Box and Oxygen. The e-book files can be downloaded easily or viewed online by website visitors with just one click.
Continue reading "How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen" →
Meta Box is now officially integrated with Divi. We have been around for this integration between Meta Box and Divi for a long time. It took a lot of time and effort from us, but now we made it and have the very first version of the integration.
With the integration, you can get any type of data from any custom fields created with Meta Box, and display them in the right format on a page created with Divi. Even the data from cloneable fields or cloneable groups. Like this:
Continue reading "Meta Box - Divi Integration Walkthrough" →
Guest author is a type of account designed for visitors to register and submit posts without any admin permission. This helps you have more rich content for your site. Today, I'll show you how to allow users to sign up for a guest author account and submit guest posts using Meta Box.
Continue reading "How to Add Guest Authors and Guest Posts - Using Meta Box" →
Black Friday and Cyber Monday are coming to town! Hurry up to get as many WordPress hot deals as possible now.
This is the list of more than 101+ official WordPress ‘delicious’ deals that we’ve collected and updated daily. Let’s find out the best fit for you right now!
Continue reading "101+ WordPress Black Friday & Cyber Monday Deals 2022" →
Previously, we introduced to you how to create thumbnails and featured images for categories using Meta Box and Gutenberg. So in this tutorial, let’s find out how to do it with taxonomies. Basically, it’s quite similar to the method for categories. So if you don’t use any page builders, you can refer to our last post. Otherwise, try this way with Oxygen Builder in this article.
After the 4 articles in the FSE series, we’ve received a lot of positive feedback from readers. In particular, many of them asked to have one more part about Gutenberg block patterns. So, we came up with a post that has everything you need about this feature, like what block patterns are, their applications, how to create one, and the good resources of block patterns. Let's spend 5 minutes reading now!
If you are willing to change from ACF to Meta Box, how can you move all the custom fields data? Not only you but many others care about this matter. Therefore, recently Meta Box has released a new free extension called MB ACF Migration. This extension helps users migrate custom fields data from ACF to Meta Box with ONLY ONE CLICK. In this post, I will show you how to do that at the drop of a hat.
Continue reading "How to Migrate Custom Fields Data from ACF to Meta Box Plugin" →
As we mentioned in the article about Full Site Editing and others in this series before, block themes (or block-based themes) and the Full Site Editing (FSE) feature are changing the way we build WordPress sites. In each WordPress version, the block editor is updated with new features until it’s completely integrated with the core. So users, developers, and theme makers surely need to prepare themselves and keep updated every day for this revolution. That’s why finding resources to learn about block themes is important.
Continue reading "Top Resources to Learn About WordPress Block Theme for Developers" →
In recent years, approaching users on multiple channels such as advertising websites, social networks, or live chat services has become more and more popular. And then, using scripts to insert those services into a website is the most important technique. However, using too many 3rd party scripts will cause a slower loading speed of the website and its Page Speed scores may be worse. At that time, you often have just 2 options: accept the slow loading or remove some scripts. After a while of researching, we found a way to have one more option. It’s delaying the execution or loading of JavaScript. Let's see how!
Data downloaded from third-party servers like Facebook Page Widget, Facebook Messenger, Facebook Comments, iframe or live chat services like Tawk.to are data that you cannot control. You cannot compress, merge or cache them, simply because they are not on your host. These data are often very heavy and can cause serious problems related to website loading speed. To see this clearly, you can use Google PageSpeed Insights, GTmetrix, or any other speed test tools to verify.
And since you cannot optimize them, the only solution to integrate the above services into the website without affecting the page speed is to delay the execution of their scripts. In this way, you will reduce your page render time and improve speed indexes on page speed testing tools such as Time to Interactive, First CPU Idle, Max Potential Input Delay, etc. This will also reduce the initial payload on the browser by reducing the number of requests.
Note: This technique is based on the code of Flying Scripts, which allows you to delay scripts in WordPress. The plugin has more control options in the admin area where you don't need to touch code. So, check it out if you want that. Otherwise, let's discover how the code works below.
To delay scripts, we need to write a custom code. This code is called "delay script" and its job is delaying other scripts. In other words, it's used to load other scripts on the website.
You can put this script in the <head> or <body> tag. But you should put it in the <head> tag to run it at the same time with the lazy load scripts. It is more reasonable for most cases. If the delayed scripts are in the <head> tag, they will not work when placed in the <body> tag because the script will be loaded just after the whole page finished loading.
<script>
{
const load = () => {
document.querySelectorAll("script[data-type='lazy']").forEach(el => el.setAttribute("src", el.getAttribute("data-src")));
document.querySelectorAll("iframe[data-type='lazy']").forEach(el => el.setAttribute("src", el.getAttribute("data-src")));
}
const timer = setTimeout(load, 5000);
const trigger = () => {
load();
clearTimeout(timer);
}
const events = ["mouseover","keydown","touchmove","touchstart"];
events.forEach(e => window.addEventListener(e, trigger, {passive: true, once: true}));
}
</script>
Note: You can use the Slim SEO plugin to to add code to the header. This plugin allows you to insert any code to the header, body, or footer. So you can use it to insert Webmaster tool verification codes or tracking scripts.
Because there will still be scripts you want to execute right away, the above script doesn’t delay the execution of all the scripts on your site. In there, I specified that only scripts with the attribute data-type='lazy' (you can rename the attribute freely) will be delayed. Therefore, after adding the above script, you need to find all the scripts that you want to delay to add this attribute. I will do this in the next step.
The above script also specifies that it will delay the execution of the specified scripts until one of the following two conditions occurs:
After adding the delay script, we need to modify exising scripts on your website to make them delayed. For each type of script, there will be a different way to do that. Here is how to do it for some popular scripts like Google Tag Manager, Facebook Customer Chat, Youtube, or Google Maps.
Below is the default Google Tag Manager script:
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR-GTM-ID');</script>
You can rewrite it with the delay script as follows:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
</script>
<script data-type="lazy" data-src="https://www.googletagmanager.com/gtm.js?id=YOUR-GTM-ID"></script>
The default Google Analytics code looks like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4VVLXFCZ41"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR-ID');
</script>
To delay it, change it to:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4VVLXFCZ41');
</script>
<script data-type="lazy" data-src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID"></script>
Here is the default Facebook script, used to load the Customer Chat widget:
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat"></div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "YOUR_PAGE_ID");
chatbox.setAttribute("attribution", "biz_inbox");
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v12.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
In it, the code is in the paragraph (function()...); used to load chat widgets to your website.
I will shorten it by removing the function() code and adding a script like this right below the the code as follows:
<script data-type='lazy' data-src="https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"></script>
Then, the code of Facebook Customer Chat will look like this:
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat"></div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "YOUR_PAGE_ID");
chatbox.setAttribute("attribution", "biz_inbox");
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v12.0'
});
};
</script>
<script data-type='lazy' data-src="https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"></script>
If you use another plugin of Facebook such as Facebook Comment, Facebook Widget, or other live chat services such as Tawk.to, you can do likewise.
Youtube and Google Maps use iFrame tags. With this tag, you just have to add data-type='lazy' and data-src like this:
The default of Youtube is:
<iframe src="https://www.youtube.com/embed/I3ncHxLxwlM"></iframe>
Now, I will change it into this:
<iframe data-type='lazy' data-src="https://www.youtube.com/embed/I3ncHxLxwlM"></iframe>
The default iFrame of Google Maps is:
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Space+Needle,Seattle+WA"></iframe>
So I will change it by adding data- type='lazy' inside the tag <iframe> like this:
<iframe data-type='lazy' data-src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Space+Needle,Seattle+WA"></iframe>
If you want to apply this method to the common scripts, you just need to replace src into data-src and add the data-type='lazy' attribute.
An example is:
<script src="custom-javascript.js"></script>
Then, change it into this:
<script data-src="custom-javascript.js" data-type='lazy'></script>
This technique should be used for scripts related to the user interaction or live chat like Facebook Customer Chat, Facebook Widget, Facebook Comment, iframe (Youtube, Google Maps), Tawk.to, …
Otherwise, it isn’t recommended for scripts like tracking or analyzing user data such as Google Analytics, Facebook Pixel, Google Tag Manager, Crazy Egg, Google Remarketing Tag, ... Because applying this technique may cause recording data incompletely or inaccurately. You certainly won't want to miss this data, right?
However, even in the case you use tracking scripts, you still want to delay them, to increase the performance of the website. That will give you a better pagespeed score, better Core Web Vitals and as they're a ranking factor, it might help you rank better on Google.
Delaying the script execution method will help you optimize your website’s loading and increase page speed scores as well. There are many ways to increase the speed of websites; so, consider what is more suitable for you to use. If you cannot apply this method to your websites, you can read about other methods in this series.
If you have any questions, feel free to let us know in the comment section. Good luck!
