CINXE.COM

<!doctype html> <html dir="ltr" lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#0f187b"> <title>Use Snippet - WPCode Library</title><link rel="preload" data-rocket-preload as="image" href="https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library.jpg" imagesrcset="https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library.jpg 750w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-300x240.jpg 300w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-600x481.jpg 600w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-75x60.jpg 75w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-112x90.jpg 112w" imagesizes="100vw" fetchpriority="high">  <meta name="description" content="How to Use A WPCode Snippet A step-by-step guide to easily using a WPCode Snippet on your site Step 1: Install WPCode The first step to safely using a snippet from the library is to make sure the WPCode plugin is installed and activated on your WordPress website. Step 2: Add The Snippet Some snippets" /> <meta name="robots" content="max-image-preview:large" /> <link rel="canonical" href="https://library.wpcode.com/use-snippet/" /> <meta name="generator" content="All in One SEO Pro (AIOSEO) 4.7.9" /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="WPCode Library -" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Use Snippet - WPCode Library" /> <meta property="og:description" content="How to Use A WPCode Snippet A step-by-step guide to easily using a WPCode Snippet on your site Step 1: Install WPCode The first step to safely using a snippet from the library is to make sure the WPCode plugin is installed and activated on your WordPress website. Step 2: Add The Snippet Some snippets" /> <meta property="og:url" content="https://library.wpcode.com/use-snippet/" /> <meta property="og:image" content="https://library.wpcode.com/wp-content/uploads/2023/07/wpcode-featured-image-2.jpg" /> <meta property="og:image:secure_url" content="https://library.wpcode.com/wp-content/uploads/2023/07/wpcode-featured-image-2.jpg" /> <meta property="og:image:width" content="2400" /> <meta property="og:image:height" content="1260" /> <meta property="article:published_time" content="2022-11-17T08:14:14+00:00" /> <meta property="article:modified_time" content="2022-11-17T08:14:18+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@wpcodelibrary" /> <meta name="twitter:title" content="Use Snippet - WPCode Library" /> <meta name="twitter:description" content="How to Use A WPCode Snippet A step-by-step guide to easily using a WPCode Snippet on your site Step 1: Install WPCode The first step to safely using a snippet from the library is to make sure the WPCode plugin is installed and activated on your WordPress website. Step 2: Add The Snippet Some snippets" /> <meta name="twitter:creator" content="@wpcodelibrary" /> <meta name="twitter:image" content="https://library.wpcode.com/wp-content/uploads/2022/11/banner-1544x500-3.png" /> <script type="application/ld+json" class="aioseo-schema"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/library.wpcode.com\/use-snippet\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/library.wpcode.com\/#listItem","position":1,"name":"Home","item":"https:\/\/library.wpcode.com\/","nextItem":{"@type":"ListItem","@id":"https:\/\/library.wpcode.com\/use-snippet\/#listItem","name":"Use Snippet"}},{"@type":"ListItem","@id":"https:\/\/library.wpcode.com\/use-snippet\/#listItem","position":2,"name":"Use Snippet","previousItem":{"@type":"ListItem","@id":"https:\/\/library.wpcode.com\/#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/library.wpcode.com\/#organization","name":"WPCode","url":"https:\/\/library.wpcode.com\/","logo":{"@type":"ImageObject","url":"https:\/\/library.wpcode.com\/wp-content\/uploads\/2022\/11\/wpcode-logo.svg","@id":"https:\/\/library.wpcode.com\/use-snippet\/#organizationLogo","width":161,"height":40},"image":{"@id":"https:\/\/library.wpcode.com\/use-snippet\/#organizationLogo"},"sameAs":["https:\/\/twitter.com\/wpcodelibrary"]},{"@type":"WebPage","@id":"https:\/\/library.wpcode.com\/use-snippet\/#webpage","url":"https:\/\/library.wpcode.com\/use-snippet\/","name":"Use Snippet - WPCode Library","description":"How to Use A WPCode Snippet A step-by-step guide to easily using a WPCode Snippet on your site Step 1: Install WPCode The first step to safely using a snippet from the library is to make sure the WPCode plugin is installed and activated on your WordPress website. Step 2: Add The Snippet Some snippets","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/library.wpcode.com\/#website"},"breadcrumb":{"@id":"https:\/\/library.wpcode.com\/use-snippet\/#breadcrumblist"},"datePublished":"2022-11-17T08:14:14-05:00","dateModified":"2022-11-17T08:14:18-05:00"},{"@type":"WebSite","@id":"https:\/\/library.wpcode.com\/#website","url":"https:\/\/library.wpcode.com\/","name":"WPCode Library","inLanguage":"en-US","publisher":{"@id":"https:\/\/library.wpcode.com\/#organization"}}]} </script>  <script type="text/javascript">function parentIsEvil() { var html = null; try { var doc = top.location.pathname; } catch(err){ }; if(typeof doc === "undefined") { return true } else { return false }; }; if (parentIsEvil()) { top.location = self.location.href; };var url = "https://library.wpcode.com/use-snippet/";if(url.indexOf("stfi.re") != -1) { var canonical = ""; var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length; i ++) { if (links[i].getAttribute("rel") === "canonical") { canonical = links[i].getAttribute("href")}}; canonical = canonical.replace("?sfr=1", "");top.location = canonical; console.log(canonical);};</script><link rel='dns-prefetch' href='//a.omappapi.com' /> <link rel="alternate" type="application/rss+xml" title="WPCode Library » Feed" href="https://library.wpcode.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="WPCode Library » Comments Feed" href="https://library.wpcode.com/comments/feed/" />  <script src="//www.googletagmanager.com/gtag/js?id=G-4R8G544HHE" data-cfasync="false" data-wpfc-render="false" async></script> <script data-cfasync="false" data-wpfc-render="false"> var mi_version = '8.26.0'; var mi_track_user = true; var mi_no_track_reason = ''; var MonsterInsightsDefaultLocations = {"page_location":"https:\/\/library.wpcode.com\/use-snippet\/"}; if ( typeof MonsterInsightsPrivacyGuardFilter === 'function' ) { var MonsterInsightsLocations = (typeof MonsterInsightsExcludeQuery === 'object') ? MonsterInsightsPrivacyGuardFilter( MonsterInsightsExcludeQuery ) : MonsterInsightsPrivacyGuardFilter( MonsterInsightsDefaultLocations ); } else { var MonsterInsightsLocations = (typeof MonsterInsightsExcludeQuery === 'object') ? MonsterInsightsExcludeQuery : MonsterInsightsDefaultLocations; } var disableStrs = [ 'ga-disable-G-4R8G544HHE', ]; /* Function to detect opted out users */ function __gtagTrackerIsOptedOut() { for (var index = 0; index < disableStrs.length; index++) { if (document.cookie.indexOf(disableStrs[index] + '=true') > -1) { return true; } } return false; } /* Disable tracking if the opt-out cookie exists. */ if (__gtagTrackerIsOptedOut()) { for (var index = 0; index < disableStrs.length; index++) { window[disableStrs[index]] = true; } } /* Opt-out function */ function __gtagTrackerOptout() { for (var index = 0; index < disableStrs.length; index++) { document.cookie = disableStrs[index] + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; window[disableStrs[index]] = true; } } if ('undefined' === typeof gaOptout) { function gaOptout() { __gtagTrackerOptout(); } } window.dataLayer = window.dataLayer || []; window.MonsterInsightsDualTracker = { helpers: {}, trackers: {}, }; if (mi_track_user) { function __gtagDataLayer() { dataLayer.push(arguments); } function __gtagTracker(type, name, parameters) { if (!parameters) { parameters = {}; } if (parameters.send_to) { __gtagDataLayer.apply(null, arguments); return; } if (type === 'event') { parameters.send_to = monsterinsights_frontend.v4_id; var hookName = name; if (typeof parameters['event_category'] !== 'undefined') { hookName = parameters['event_category'] + ':' + name; } if (typeof MonsterInsightsDualTracker.trackers[hookName] !== 'undefined') { MonsterInsightsDualTracker.trackers[hookName](parameters); } else { __gtagDataLayer('event', name, parameters); } } else { __gtagDataLayer.apply(null, arguments); } } __gtagTracker('js', new Date()); __gtagTracker('set', { 'developer_id.dZGIzZG': true, }); if ( MonsterInsightsLocations.page_location ) { __gtagTracker('set', MonsterInsightsLocations); } __gtagTracker('config', 'G-4R8G544HHE', {"forceSSL":"true","link_attribution":"true"} ); window.gtag = __gtagTracker; (function () { /* https://developers.google.com/analytics/devguides/collection/analyticsjs/ */ /* ga and __gaTracker compatibility shim. */ var noopfn = function () { return null; }; var newtracker = function () { return new Tracker(); }; var Tracker = function () { return null; }; var p = Tracker.prototype; p.get = noopfn; p.set = noopfn; p.send = function () { var args = Array.prototype.slice.call(arguments); args.unshift('send'); __gaTracker.apply(null, args); }; var __gaTracker = function () { var len = arguments.length; if (len === 0) { return; } var f = arguments[len - 1]; if (typeof f !== 'object' || f === null || typeof f.hitCallback !== 'function') { if ('send' === arguments[0]) { var hitConverted, hitObject = false, action; if ('event' === arguments[1]) { if ('undefined' !== typeof arguments[3]) { hitObject = { 'eventAction': arguments[3], 'eventCategory': arguments[2], 'eventLabel': arguments[4], 'value': arguments[5] ? arguments[5] : 1, } } } if ('pageview' === arguments[1]) { if ('undefined' !== typeof arguments[2]) { hitObject = { 'eventAction': 'page_view', 'page_path': arguments[2], } } } if (typeof arguments[2] === 'object') { hitObject = arguments[2]; } if (typeof arguments[5] === 'object') { Object.assign(hitObject, arguments[5]); } if ('undefined' !== typeof arguments[1].hitType) { hitObject = arguments[1]; if ('pageview' === hitObject.hitType) { hitObject.eventAction = 'page_view'; } } if (hitObject) { action = 'timing' === arguments[1].hitType ? 'timing_complete' : hitObject.eventAction; hitConverted = mapArgs(hitObject); __gtagTracker('event', action, hitConverted); } } return; } function mapArgs(args) { var arg, hit = {}; var gaMap = { 'eventCategory': 'event_category', 'eventAction': 'event_action', 'eventLabel': 'event_label', 'eventValue': 'event_value', 'nonInteraction': 'non_interaction', 'timingCategory': 'event_category', 'timingVar': 'name', 'timingValue': 'value', 'timingLabel': 'event_label', 'page': 'page_path', 'location': 'page_location', 'title': 'page_title', 'referrer' : 'page_referrer', }; for (arg in args) { if (!(!args.hasOwnProperty(arg) || !gaMap.hasOwnProperty(arg))) { hit[gaMap[arg]] = args[arg]; } else { hit[arg] = args[arg]; } } return hit; } try { f.hitCallback(); } catch (ex) { } }; __gaTracker.create = newtracker; __gaTracker.getByName = newtracker; __gaTracker.getAll = function () { return []; }; __gaTracker.remove = noopfn; __gaTracker.loaded = true; window['__gaTracker'] = __gaTracker; })(); } else { console.log(""); (function () { function __gtagTracker() { return null; } window['__gtagTracker'] = __gtagTracker; window['gtag'] = __gtagTracker; })(); } </script>  <script data-cfasync="false" data-wpfc-render="false"> window.MonsterInsightsDualTracker.helpers.mapProductItem = function (uaItem) { var prefixIndex, prefixKey, mapIndex; var toBePrefixed = ['id', 'name', 'list_name', 'brand', 'category', 'variant']; var item = {}; var fieldMap = { 'price': 'price', 'list_position': 'index', 'quantity': 'quantity', 'position': 'index', }; for (mapIndex in fieldMap) { if (uaItem.hasOwnProperty(mapIndex)) { item[fieldMap[mapIndex]] = uaItem[mapIndex]; } } for (prefixIndex = 0; prefixIndex < toBePrefixed.length; prefixIndex++) { prefixKey = toBePrefixed[prefixIndex]; if (typeof uaItem[prefixKey] !== 'undefined') { item['item_' + prefixKey] = uaItem[prefixKey]; } } return item; }; MonsterInsightsDualTracker.trackers['view_item_list'] = function (parameters) { var items = parameters.items; var listName, itemIndex, item, itemListName; var lists = { '_': {items: [], 'send_to': monsterinsights_frontend.v4_id}, }; for (itemIndex = 0; itemIndex < items.length; itemIndex++) { item = MonsterInsightsDualTracker.helpers.mapProductItem(items[itemIndex]); if (typeof item['item_list_name'] === 'undefined') { lists['_'].items.push(item); } else { itemListName = item['item_list_name']; if (typeof lists[itemListName] === 'undefined') { lists[itemListName] = { 'items': [], 'item_list_name': itemListName, 'send_to': monsterinsights_frontend.v4_id, }; } lists[itemListName].items.push(item); } } for (listName in lists) { __gtagDataLayer('event', 'view_item_list', lists[listName]); } }; MonsterInsightsDualTracker.trackers['select_content'] = function (parameters) { const items = parameters.items.map(MonsterInsightsDualTracker.helpers.mapProductItem); __gtagDataLayer('event', 'select_item', {items: items, send_to: parameters.send_to}); }; MonsterInsightsDualTracker.trackers['view_item'] = function (parameters) { const items = parameters.items.map(MonsterInsightsDualTracker.helpers.mapProductItem); __gtagDataLayer('event', 'view_item', {items: items, send_to: parameters.send_to}); }; </script> <link rel='stylesheet' id='wc-blocks-integration-css' href='https://library.wpcode.com/wp-content/plugins/woocommerce-subscriptions/vendor/woocommerce/subscriptions-core/build/index.css?ver=7.3.0' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://library.wpcode.com/wp-includes/css/dist/block-library/style.min.css?ver=6.6.1' media='all' /> <style id='safe-svg-svg-icon-style-inline-css'> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <link rel='stylesheet' id='mpp_gutenberg-css' href='https://library.wpcode.com/wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css?ver=2.6.3' media='all' /> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--theme-primary: #0f187b;--wp--preset--color--theme-primary-light: #1a82ea;--wp--preset--color--theme-secondary: #00aa63;--wp--preset--color--theme-secondary-light: #07C575;--wp--preset--color--theme-gray-dark: #434960;--wp--preset--color--theme-gray: #8c8f9a;--wp--preset--color--theme-gray-light: #f3f4f5;--wp--preset--color--theme-red: #df2a4a;--wp--preset--color--theme-orange: #f18200;--wp--preset--color--theme-orange-light: #fedfb6;--wp--preset--color--theme-highlight: #fff08b;--wp--preset--color--theme-pale-highlight: #fff6ba;--wp--preset--color--theme-info: #f2f7fd;--wp--preset--color--theme-warning: #fffadb;--wp--preset--color--theme-error: #f6e9eb;--wp--preset--color--theme-success: #f2fbf7;--wp--preset--color--theme-background: #ffffff;--wp--preset--color--theme-foreground: #141b38;--wp--preset--color--splash-blue-light: #cce0ff;--wp--preset--color--splash-blue-dark: #141b38;--wp--preset--color--splash-blue-bold: #005ae0;--wp--preset--color--splash-blue-pale: #e6eefc;--wp--preset--color--splash-green-light: #daf1ea;--wp--preset--color--splash-green-dark: #15955f;--wp--preset--color--splash-green-bold: #00aa63;--wp--preset--color--splash-green-pale: #97d5c2;--wp--preset--color--splash-orange-light: #ffe8cc;--wp--preset--color--splash-orange-dark: #d4790d;--wp--preset--color--splash-orange-bold: #f18200;--wp--preset--color--splash-orange-pale: #ffbb6b;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--gradient--primary-to-white-20-80: linear-gradient(180deg,#0f187b 20%,#ffffff 20%);--wp--preset--gradient--primary-to-white-50-50: linear-gradient(180deg,#0f187b 50%,#ffffff 50%);--wp--preset--gradient--primary-to-white-80-20: linear-gradient(180deg,#0f187b 80%,#ffffff 80%);--wp--preset--gradient--primary-to-white-500-px: linear-gradient(180deg,#0f187b 500px,#ffffff 500px);--wp--preset--gradient--white-to-primary-80-20: linear-gradient(180deg,#ffffff 80%,#0f187b 80%);--wp--preset--gradient--white-to-primary-50-50: linear-gradient(180deg,#ffffff 50%,#0f187b 50%);--wp--preset--gradient--white-to-primary-20-80: linear-gradient(180deg,#ffffff 20%,#0f187b 20%);--wp--preset--gradient--info-to-white-20-80: linear-gradient(180deg,#f2f7fd 20%,#ffffff 20%);--wp--preset--gradient--info-to-white-50-50: linear-gradient(180deg,#f2f7fd 50%,#ffffff 50%);--wp--preset--gradient--white-to-info-50-50: linear-gradient(180deg,#ffffff 50%,#f2f7fd 50%);--wp--preset--gradient--white-to-info-80-20: linear-gradient(180deg,#ffffff 80%,#f2f7fd 80%);--wp--preset--gradient--splash-green-bold: linear-gradient(90deg, #daf1ea 70%, #00aa63 70%);--wp--preset--gradient--splash-green-circle: linear-gradient(90deg, #daf1ea 71%, #00aa63 71%);--wp--preset--gradient--splash-green-pale: linear-gradient(90deg, #daf1ea 70%, #97d5c2 70%);--wp--preset--gradient--splash-blue-bold: linear-gradient(90deg, #cce0ff 70%, #005ae0 70%);--wp--preset--gradient--splash-blue-circle: linear-gradient(90deg, #cce0ff 71%, #005ae0 71%);--wp--preset--gradient--splash-blue-pale: linear-gradient(90deg, #cce0ff 70%, #e6eefc 70%);--wp--preset--gradient--splash-orange-bold: linear-gradient(90deg, #ffe8cc 70%, #f18200 70%);--wp--preset--gradient--splash-orange-circle: linear-gradient(90deg, #ffe8cc 71%, #f18200 71%);--wp--preset--gradient--splash-orange-pale: linear-gradient(90deg, #ffe8cc 70%, #ffbb6b 70%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--medium: 18px;--wp--preset--font-size--large: 20px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--sub: 14px;--wp--preset--font-size--normal: 16px;--wp--preset--font-size--larger: 24px;--wp--preset--font-size--jumbo: 52px;--wp--preset--font-family--inter: "Inter", sans-serif;--wp--preset--font-family--cardo: Cardo;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <style id='woocommerce-inline-inline-css'> .woocommerce form .form-row .required { visibility: visible; } </style> <link rel='stylesheet' id='affwp-forms-css' href='https://library.wpcode.com/wp-content/plugins/affiliate-wp/assets/css/forms.min.css?ver=2.27.4' media='all' /> <link rel='stylesheet' id='aioseo-theme-style-css' href='https://library.wpcode.com/wp-content/themes/wpcode-theme/dist/css/main.css?ver=1.1.1' media='all' /> <style id='aioseo-theme-style-inline-css'> :root {--background_color:#ffffff;--foreground_color:#141b38;--color-1:#0f187b;--color-2:#00aa63;}.has-theme-background-color {color: var(--background_color);}.has-theme-foreground-color {color: var(--foreground_color);}.has-theme-primary-color {color: var(--color-1);}.has-theme-accent-color {color: var(--color-2);} </style> <link rel='stylesheet' id='searchwp-live-search-css' href='https://library.wpcode.com/wp-content/plugins/searchwp-live-ajax-search/assets/styles/style.css?ver=1.8.4' media='all' /> <style id='searchwp-live-search-inline-css'> .searchwp-live-search-result .searchwp-live-search-result--title a { font-size: 16px; } .searchwp-live-search-result .searchwp-live-search-result--price { font-size: 14px; } .searchwp-live-search-result .searchwp-live-search-result--add-to-cart .button { font-size: 14px; } </style> <link rel='stylesheet' id='searchwp-forms-css' href='https://library.wpcode.com/wp-content/plugins/searchwp/assets/css/frontend/search-forms.css?ver=4.3.15' media='all' /> <script src="https://library.wpcode.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script src="https://library.wpcode.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script id="drip-js-extra"> var drip = {"url":"https:\/\/library.wpcode.com"}; </script> <script src="https://library.wpcode.com/wp-content/mu-plugins/wpcode-drip-integration/build/drip.min.js?ver=1.0.0" id="drip-js"></script> <script src="https://library.wpcode.com/wp-content/plugins/google-analytics-premium/assets/js/frontend-gtag.min.js?ver=8.26.0" id="monsterinsights-frontend-script-js"></script> <script data-cfasync="false" data-wpfc-render="false" id='monsterinsights-frontend-script-js-extra'>var monsterinsights_frontend = {"js_events_tracking":"true","download_extensions":"doc,pdf,ppt,zip,xls,docx,pptx,xlsx,zip","inbound_paths":"[{\"path\":\"\\\/go\\\/\",\"label\":\"affiliate\"},{\"path\":\"\\\/recommend\\\/\",\"label\":\"affiliate\"}]","home_url":"https:\/\/library.wpcode.com","hash_tracking":"false","v4_id":"G-4R8G544HHE"};</script> <script id="jquery-cookie-js-extra"> var affwp_scripts = {"ajaxurl":"https:\/\/library.wpcode.com\/wp-admin\/admin-ajax.php"}; </script> <script src="https://library.wpcode.com/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.4.1-wc.9.1.4" id="jquery-cookie-js" data-wp-strategy="defer"></script> <script id="affwp-tracking-js-extra"> var affwp_debug_vars = {"integrations":{"woocommerce":"WooCommerce"},"version":"2.27.4","currency":"USD","ref_cookie":"affwp_ref","visit_cookie":"affwp_ref_visit_id","campaign_cookie":"affwp_campaign"}; </script> <script src="https://library.wpcode.com/wp-content/plugins/affiliate-wp/assets/js/tracking.min.js?ver=2.27.4" id="affwp-tracking-js"></script> <link rel="https://api.w.org/" href="https://library.wpcode.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://library.wpcode.com/wp-json/wp/v2/pages/971" /><link rel='shortlink' href='https://library.wpcode.com/?p=971' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://library.wpcode.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Flibrary.wpcode.com%2Fuse-snippet%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://library.wpcode.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Flibrary.wpcode.com%2Fuse-snippet%2F&format=xml" /> <script type="text/javascript"> var AFFWP = AFFWP || {}; AFFWP.referral_var = 'ref'; AFFWP.expiration = 30; AFFWP.debug = 0; AFFWP.cookie_domain = 'library.wpcode.com'; AFFWP.referral_credit_last = 0; </script> <noscript><style>.woocommerce-product-gallery{ opacity: 1 !important; }</style></noscript> <style id="custom-header-style"> header .site-title, header .site-description { position: absolute; clip: rect(1px, 1px, 1px, 1px); font-size:1px!important; } </style>  <script type="text/javascript"> var _dcq = _dcq || []; var _dcs = _dcs || {}; _dcs.account = '3850925'; ( function () { var dc = document.createElement( 'script' ); dc.type = 'text/javascript'; dc.async = true; dc.src = '//tag.getdrip.com/3850925.js'; var s = document.getElementsByTagName( 'script' )[0]; s.parentNode.insertBefore( dc, s ); } )(); </script>  <style id='wp-fonts-local'> @font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:fallback;src:url('https://library.wpcode.com/wp-content/plugins/woocommerce/assets/fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;} @font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:fallback;src:url('https://library.wpcode.com/wp-content/plugins/woocommerce/assets/fonts/cardo_normal_400.woff2') format('woff2');} </style> <link rel="icon" href="https://library.wpcode.com/wp-content/uploads/2022/11/favicon-48x48.png" sizes="32x32" /> <link rel="icon" href="https://library.wpcode.com/wp-content/uploads/2022/11/favicon-300x300.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://library.wpcode.com/wp-content/uploads/2022/11/favicon-300x300.png" /> <meta name="msapplication-TileImage" content="https://library.wpcode.com/wp-content/uploads/2022/11/favicon-300x300.png" /> <style id="wp-custom-css"> @media( max-width: 669px ) { .checkout-breadcrumbs { display: none; } } [data-modal=deploy-modal].modal-window.is-open .modal-card { max-height: 100vh; overflow: scroll; } .wpcode-icon-popular:after, .wpcode-icon-new:after { content: 'NEW!'; color: #df2a4a; vertical-align: super; font-size: 11px; font-weight: 400; padding-left: 2px; top: 0px; position: absolute; } .wpcode-icon-popular:after { content: 'POPULAR!'; } </style> <meta name="generator" content="WP Rocket 3.18.2" data-wpr-features="wpr_oci wpr_preload_links wpr_desktop" /></head> <body class="page-template-default page page-id-971 wp-custom-logo wp-embed-responsive theme-wpcode-theme woocommerce-no-js use-snippet can-upgrade"> <div data-rocket-location-hash="54257ff4dc2eb7aae68fa23eb5f11e06" id="page" class="site"> <a class="skip-link screen-reader-text" href="#main">Skip to content</a> <header data-rocket-location-hash="fc409f86088b20b81d38a444febf083b" id="masthead" class="site-header"> <div data-rocket-location-hash="954911c5b1f145c08881922193f5d29c" class="site-header__content"> <div class="site-branding"> <a href="https://wpcode.com" class="custom-logo-link" rel="home"><span class="screen-reader-text">WPCode Library</span><?xml version="1.0" encoding="UTF-8"?> <svg focusable="false" class=" v-image v-wpcode-logo-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="161" height="40" viewBox="0 0 161 40" fill="none"><path d="M95.1055 19.9995C95.1055 16.1111 96.0171 13.4506 97.8217 11.4972C99.6264 9.52506 102.194 8.55762 105.487 8.55762C107.031 8.55762 108.519 8.8739 109.803 9.50645C111.143 10.139 112.147 10.9948 112.947 12.0553C113.115 12.2599 113.152 12.4832 113.152 12.7437C113.152 13.0599 113.04 13.2832 112.836 13.4878C112.631 13.6925 112.408 13.8041 112.092 13.8041C111.719 13.8041 111.459 13.6367 111.236 13.3762C110.64 12.5762 109.859 11.8878 108.78 11.3483C107.775 10.8088 106.64 10.5483 105.412 10.5483C102.808 10.5483 100.836 11.3483 99.4404 12.9483C98.0636 14.5483 97.3566 16.7251 97.3566 19.9251C97.3566 23.2739 98.045 25.5065 99.3845 26.9948C100.724 28.4832 102.733 29.2832 105.412 29.2832C106.585 29.2832 107.645 29.0785 108.724 28.5948C109.729 28.1111 110.585 27.4785 111.236 26.5669C111.44 26.3065 111.719 26.139 112.092 26.139C112.408 26.139 112.631 26.2506 112.836 26.4553C113.04 26.6599 113.152 26.939 113.152 27.1995C113.152 27.4041 113.096 27.6274 112.947 27.832C112.203 28.8925 111.18 29.7483 109.803 30.3809C108.426 31.0134 106.975 31.3297 105.431 31.3297C102.082 31.3297 99.5148 30.3809 97.7473 28.5018C95.9985 26.6972 95.1055 23.9809 95.1055 19.9995Z" fill="#11293E"></path><path d="M117.319 29.4144C116.092 28.0934 115.459 26.0655 115.459 23.4051C115.459 20.7446 116.054 18.7725 117.264 17.4516C118.492 16.1307 120.203 15.4795 122.436 15.4795C124.668 15.4795 126.38 16.1121 127.608 17.4516C128.836 18.7725 129.412 20.7446 129.412 23.4051C129.412 26.0655 128.817 28.0934 127.608 29.4144C126.38 30.7353 124.668 31.4423 122.436 31.4423C120.259 31.4423 118.547 30.7539 117.319 29.4144ZM117.654 23.4051C117.654 27.4423 119.254 29.4702 122.454 29.4702C125.654 29.4702 127.254 27.4423 127.254 23.4051C127.254 19.3679 125.654 17.34 122.454 17.34C119.236 17.34 117.654 19.4237 117.654 23.4051Z" fill="#11293E"></path><path d="M131.459 23.4599C131.459 18.139 133.692 15.7948 138.119 15.7948C139.124 15.7948 140.036 15.9995 140.836 16.4274C141.636 16.8553 142.268 17.339 142.64 17.9716V9.61808C142.64 9.3018 142.752 9.07855 142.957 8.8739C143.161 8.66925 143.385 8.55762 143.701 8.55762C144.017 8.55762 144.24 8.66925 144.445 8.8739C144.65 9.07855 144.761 9.3018 144.761 9.61808V24.8925C144.761 27.0134 144.166 28.6134 142.957 29.7297C141.785 30.846 140.185 31.4227 138.212 31.4227C136.036 31.4227 134.324 30.7344 133.152 29.3948C132.036 28.0925 131.459 26.1204 131.459 23.4599ZM133.58 23.4599C133.58 27.4972 135.124 29.5251 138.268 29.5251C139.608 29.5251 140.668 29.153 141.468 28.353C142.268 27.553 142.64 26.4367 142.64 24.8925V20.632C142.585 20.5762 142.529 20.4646 142.473 20.3158C142.417 20.1483 142.268 19.9437 141.989 19.6274C141.729 19.3111 141.45 18.9948 141.133 18.7158C140.817 18.4553 140.389 18.232 139.905 18.0274C139.366 17.8227 138.845 17.7111 138.25 17.7111C136.705 17.7111 135.589 18.1948 134.733 19.1995C133.952 20.2041 133.58 21.432 133.58 23.4599Z" fill="#11293E"></path><path d="M147.332 23.4052C147.332 20.8564 147.927 18.8843 149.137 17.5075C150.346 16.1308 152.02 15.4238 154.197 15.4238C155.053 15.4238 155.853 15.5355 156.486 15.7401C157.174 15.9448 157.769 16.2238 158.197 16.5959C158.625 16.968 159.053 17.3401 159.369 17.8238C159.686 18.2517 159.965 18.7355 160.113 19.2564C160.281 19.7959 160.374 20.2052 160.486 20.6331C160.597 21.061 160.597 21.4889 160.597 21.9169C160.597 22.2331 160.597 22.4936 160.597 22.661C160.597 22.8285 160.541 23.0331 160.43 23.2936C160.374 23.5541 160.225 23.7215 160.002 23.8331C159.797 23.9448 159.574 24.0006 159.258 24.0006H149.583C149.583 25.6564 150.011 26.9773 150.923 27.9448C151.834 28.8936 153.062 29.4331 154.606 29.4331C155.462 29.4331 156.206 29.3215 156.783 29.061C157.379 28.8006 158.011 28.4843 158.588 28.0006C158.792 27.8331 159.016 27.7959 159.183 27.7959C159.444 27.7959 159.667 27.9075 159.872 28.0564C160.039 28.261 160.132 28.4843 160.132 28.7448C160.132 29.0052 160.02 29.2843 159.76 29.4889C159.555 29.6936 159.22 29.9727 158.848 30.2331C158.476 30.4936 157.881 30.7169 157.081 30.9773C156.281 31.2378 155.425 31.3494 154.513 31.3494C152.225 31.3494 150.458 30.7168 149.23 29.3773C147.983 28.1308 147.332 26.1215 147.332 23.4052ZM149.527 22.1773H158.476C158.476 21.5448 158.42 20.9494 158.272 20.4285C158.16 19.8889 157.955 19.4238 157.639 18.9401C157.323 18.4564 156.895 18.0843 156.299 17.8238C155.704 17.5634 155.016 17.3959 154.216 17.3959C152.783 17.3959 151.704 17.8238 150.848 18.6796C150.067 19.5169 149.583 20.6889 149.527 22.1773Z" fill="#11293E"></path><path d="M48.0742 10.4751C48.0742 9.93559 48.2789 9.47047 48.6696 9.09838C49.0417 8.72629 49.5254 8.52163 50.0649 8.52163C50.5486 8.52163 50.9765 8.68908 51.2928 8.94954C51.6091 9.21001 51.8324 9.52629 51.9254 9.86117L55.8138 23.7961L59.5905 9.91698C59.7021 9.48908 59.9068 9.1728 60.2789 8.91233C60.651 8.65187 61.0231 8.54024 61.3951 8.54024C61.8231 8.54024 62.1951 8.65187 62.5114 8.91233C62.8277 9.1728 63.1068 9.48908 63.1998 9.91698L66.9765 23.7961L70.8649 9.80536C70.9765 9.48908 71.1812 9.1728 71.4975 8.89373C71.8138 8.63326 72.1858 8.46582 72.7254 8.46582C73.2649 8.46582 73.6928 8.63326 74.0649 9.00536C74.437 9.37745 74.6045 9.80535 74.6045 10.3263C74.6045 10.5309 74.5486 10.7542 74.4928 10.903L68.7812 29.8984C68.6696 30.2705 68.4649 30.6426 68.0928 30.8472C67.7765 31.1077 67.4045 31.2193 66.9765 31.2193C66.5486 31.2193 66.1765 31.1077 65.8603 30.8472C65.544 30.5867 65.3207 30.2705 65.2277 29.8426L61.3951 16.224L57.5626 29.9914C57.451 30.4193 57.1905 30.7356 56.8742 30.996C56.5579 31.2565 56.13 31.3681 55.7021 31.3681C55.2742 31.3681 54.9021 31.2565 54.5858 30.996C54.2696 30.7356 53.9905 30.4193 53.8975 30.0472L48.1858 11.0705C48.13 10.903 48.0742 10.6984 48.0742 10.4751Z" fill="#11293E"></path><path d="M77.3398 29.526V10.4748C77.3398 9.93529 77.5445 9.52599 77.8794 9.15389C78.2515 8.7818 78.7352 8.57715 79.2747 8.57715H85.6189C87.7026 8.57715 89.3584 9.15389 90.6236 10.326C91.9073 11.4981 92.5957 13.1911 92.5957 15.3865C92.5957 17.619 91.9631 19.2748 90.6794 20.4469C89.3957 21.619 87.7026 22.1958 85.6747 22.1958H81.2468V29.5446C81.2468 30.0841 81.0794 30.5492 80.7073 30.9213C80.3352 31.2934 79.9073 31.4609 79.3119 31.4609C78.7166 31.4609 78.3073 31.2562 77.9352 30.8841C77.5073 30.4748 77.3398 30.0469 77.3398 29.526ZM81.191 18.7167H85.3026C86.3631 18.7167 87.1631 18.4004 87.7584 17.8051C88.3538 17.2283 88.6143 16.3725 88.6143 15.312C88.6143 14.2516 88.3538 13.3958 87.7584 12.819C87.1631 12.2423 86.3631 11.9632 85.3584 11.9632H81.2468V18.7167H81.191Z" fill="#11293E"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M35.9814 40H4.11163C1.80465 40 0 38.1953 0 35.907V4.09302C0 1.80465 1.80465 0 4.11163 0H35.9814C38.2698 0 40.093 1.80465 40.093 4.09302V35.907C40.093 38.1953 38.2698 40 35.9814 40ZM9.91628 32.5581C9.71163 32.5581 9.43256 32.5023 9.22791 32.4465C8.26046 32.0744 7.79535 31.014 8.16744 30.0465L16.5395 8.61395C16.9116 7.66512 17.9721 7.1814 18.9395 7.55349C19.907 7.92558 20.3721 8.98605 20 9.95349L11.6651 31.386C11.4046 32.1302 10.6605 32.5581 9.91628 32.5581ZM21.9163 29.8419C22.2884 30.214 22.7721 30.3814 23.2558 30.3814C23.7395 30.3814 24.2233 30.214 24.5953 29.8419L31.1442 23.3488C32.3163 22.1767 32.3163 20.2047 31.1442 19.0326L24.5953 12.4837C23.907 11.7395 22.7349 11.7395 21.9907 12.4837C21.2465 13.1721 21.2465 14.3442 21.9907 15.0884L28.0186 21.1535L21.9349 27.2186C21.1535 27.9256 21.1535 29.0977 21.9163 29.8419Z" fill="#0065FF"></path></svg> </a> <p class="site-title u-h1"><a href="https://library.wpcode.com/" rel="home">WPCode Library</a></p> </div> <div class="block-area header-cta-block-area"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center cta-p-col is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p style="font-size:15px">Join<strong> 2,000,000+ Professionals</strong> who use WPCode to <strong class="has-theme-pale-highlight-background-color">Future-Proof Their Websites!</strong></p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button is-style-btn-med u-my0"><a class="wp-block-button__link has-theme-secondary-background-color has-background wp-element-button" href="/pricing/">Get WPCode</a></div> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="/pricing/#pricing-table">See all Features</a></div> </div> </div> </div> <p></p> </div> <nav id="site-navigation" class="main-navigation nav--toggle-sub nav--toggle-small" aria-label="Main menu" > <button class="menu-toggle" aria-label="Open menu" aria-controls="primary-menu" aria-expanded="false"> <svg focusable="false" class="toggle-lines v-image v-menu" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg> <span class="screen-reader-text" href="#main">Skip to content</span> </button> <div class="primary-menu-container"> <ul id="primary-menu" class="menu"><li id="menu-item-774" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-774"><a href="https://wpcode.com/features">Features</a><span class="dropdown"><svg focusable="false" class=" v-image v-chevron_down" aria-hidden="true" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.47517 4.47539L0.300173 1.30039C0.0668395 1.06706 0.0126725 0.796225 0.137672 0.487891C0.262672 0.179558 0.491839 0.0253906 0.825172 0.0253906H7.17517C7.50851 0.0253906 7.73767 0.179558 7.86267 0.487891C7.98767 0.796225 7.93351 1.06706 7.70017 1.30039L4.52517 4.47539C4.44184 4.55872 4.35851 4.61706 4.27517 4.65039C4.19184 4.68372 4.10017 4.70039 4.00017 4.70039C3.90017 4.70039 3.80851 4.68372 3.72517 4.65039C3.64184 4.61706 3.55851 4.55872 3.47517 4.47539Z" fill="#374151"/> </svg> </span> <ul class="sub-menu"> <li id="menu-item-775" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-775"><a href="https://wpcode.com/features/code-snippets-library">Code Snippets Library</a></li> <li id="menu-item-776" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-776"><a href="https://wpcode.com/features/smart-conditional-logic/">Smart Conditional Logic</a></li> <li id="menu-item-978" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-978"><a href="https://wpcode.com/features/advanced-code-revisions/">Advanced Code Revisions</a></li> <li id="menu-item-777" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-777"><a href="https://wpcode.com/features/private-snippets-library/">Private Cloud Library</a></li> <li id="menu-item-778" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-778"><a href="https://wpcode.com/features/marketing-scripts-conversion-pixels/">Marketing Scripts & Conversion Pixels</a></li> </ul> </li> <li id="menu-item-779" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-779"><a href="https://library.wpcode.com/pricing/">Pricing</a></li> <li id="menu-item-938" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-938"><a href="https://library.wpcode.com/">Snippets Library</a></li> <li id="menu-item-993" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-993"><a>Help Center</a><span class="dropdown"><svg focusable="false" class=" v-image v-chevron_down" aria-hidden="true" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.47517 4.47539L0.300173 1.30039C0.0668395 1.06706 0.0126725 0.796225 0.137672 0.487891C0.262672 0.179558 0.491839 0.0253906 0.825172 0.0253906H7.17517C7.50851 0.0253906 7.73767 0.179558 7.86267 0.487891C7.98767 0.796225 7.93351 1.06706 7.70017 1.30039L4.52517 4.47539C4.44184 4.55872 4.35851 4.61706 4.27517 4.65039C4.19184 4.68372 4.10017 4.70039 4.00017 4.70039C3.90017 4.70039 3.80851 4.68372 3.72517 4.65039C3.64184 4.61706 3.55851 4.55872 3.47517 4.47539Z" fill="#374151"/> </svg> </span> <ul class="sub-menu"> <li id="menu-item-781" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-781"><a href="https://wpcode.com/docs/">Docs</a></li> <li id="menu-item-994" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-994 logged-out-menu-item"><a href="https://wpcode.com/contact">Support</a></li> <li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-995 logged-in-menu-item"></li> </ul> </li> <li id="menu-item-782" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-782"><a href="https://wpcode.com/blog/">Blog</a></li> <li id="menu-item-780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-780 logged-out-menu-item"><a href="https://library.wpcode.com/login/">Login</a></li> <li id="menu-item-723" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-723 logged-out-menu-item has-color has-theme-secondary-color has-link-arrow"><a href="https://library.wpcode.com/pricing/">Get WPCode</a><svg focusable="false" class="nav-link-arrow v-image v-long_arrow_right" aria-hidden="true" width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.2742 11.6C10.0909 11.4167 9.99505 11.1875 9.98672 10.9125C9.97839 10.6375 10.0659 10.4083 10.2492 10.225L13.5492 6.95H1.69922C1.41589 6.95 1.17839 6.85417 0.986719 6.6625C0.795052 6.47083 0.699219 6.23333 0.699219 5.95C0.699219 5.66667 0.795052 5.42917 0.986719 5.2375C1.17839 5.04583 1.41589 4.95 1.69922 4.95H13.5492L10.2242 1.65C10.0409 1.45 9.95339 1.21667 9.96172 0.95C9.97005 0.683333 10.0659 0.458333 10.2492 0.275C10.4492 0.0916668 10.6867 0 10.9617 0C11.2367 0 11.4659 0.0916668 11.6492 0.275L16.6242 5.25C16.7242 5.35 16.7992 5.45833 16.8492 5.575C16.8992 5.69167 16.9242 5.81667 16.9242 5.95C16.9242 6.08333 16.8992 6.20833 16.8492 6.325C16.7992 6.44167 16.7242 6.55 16.6242 6.65L11.6742 11.6C11.4742 11.8 11.2409 11.9 10.9742 11.9C10.7076 11.9 10.4742 11.8 10.2742 11.6Z" fill="#16A34A"/></svg> </li> </ul> </div> </nav> </div> </header> <div data-rocket-location-hash="0bda2b9bb07176da195ba74c38cc3607" id="headerPX" class="headerPX"></div> <div data-rocket-location-hash="784355a943626a60671f105f75b23e8b" class="block-area library-nav-block-area"> <div data-rocket-location-hash="4fdf60e0523faeb62e12d25e474e1710" class="wp-block-columns alignwide are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%"> <p class="wpcode-semibold has-medium-font-size"><a href="/">Snippets library</a></p> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%"> <div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex"> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="/">Browse Snippets</a></div> <div class="wp-block-button is-style-link-btn logged-out-menu-item"><a class="wp-block-button__link wp-element-button" href="https://library.wpcode.com/register/">Claim your Free Profile</a></div> <div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="/editor">Add Snippet</a></div> </div> </div> </div> </div> <main data-rocket-location-hash="b65da60034db2e27bf0242cf244edc49" id="main" class="site-main"> <article data-rocket-location-hash="88232be58b46f23df02e8f5303b9319f" id="post-971" class="entry post-971 page type-page status-publish hentry"> <div class="page-content"> <div class="wp-block-group alignfull page-header has-theme-primary-background-color has-background"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h1 class="page-title wp-block-heading">How to Use A WPCode Snippet</h1> <p class="has-text-align-center page-description">A step-by-step guide to easily using a WPCode Snippet on your site</p> </div></div> <h2 class="wp-block-heading">Step 1: Install WPCode</h2> <p>The first step to safely using a snippet from the library is to make sure the WPCode plugin is installed and activated on your WordPress website.</p> <h2 class="wp-block-heading">Step 2: Add The Snippet</h2> <p>Some snippets are available for use directly in the WPCode plugin library and you can install them directly with 1 click, these snippets are created by the “WPCode Team” author. Other snippets you have to set up manually.</p> <h3 class="wp-block-heading">In-plugin Library snippet</h3> <figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="750" height="601" src="https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library.jpg" alt="" class="wp-image-972" srcset="https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library.jpg 750w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-300x240.jpg 300w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-600x481.jpg 600w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-75x60.jpg 75w, https://library.wpcode.com/wp-content/uploads/2022/11/add-snippets-from-library-112x90.jpg 112w" sizes="100vw" /></figure> <h3 class="wp-block-heading">Other Snippets</h3> <p>For other snippets in the library you can use the “Copy” button at the bottom of the code and set up a new snippet in a few easy steps:</p> <h4 class="wp-block-heading">1. Add a new custom snippet:</h4> <figure class="wp-block-image size-full"><img decoding="async" width="753" height="309" src="https://library.wpcode.com/wp-content/uploads/2022/11/add-custom-snippet.jpg" alt="" class="wp-image-973" srcset="https://library.wpcode.com/wp-content/uploads/2022/11/add-custom-snippet.jpg 753w, https://library.wpcode.com/wp-content/uploads/2022/11/add-custom-snippet-300x123.jpg 300w, https://library.wpcode.com/wp-content/uploads/2022/11/add-custom-snippet-600x246.jpg 600w, https://library.wpcode.com/wp-content/uploads/2022/11/add-custom-snippet-146x60.jpg 146w, https://library.wpcode.com/wp-content/uploads/2022/11/add-custom-snippet-219x90.jpg 219w" sizes="100vw" /></figure> <h4 class="wp-block-heading">2. Make Sure your Code Type matches:</h4> <figure class="wp-block-image size-full"><img decoding="async" width="753" height="309" src="https://library.wpcode.com/wp-content/uploads/2022/11/code-type-matches.jpg" alt="" class="wp-image-974" srcset="https://library.wpcode.com/wp-content/uploads/2022/11/code-type-matches.jpg 753w, https://library.wpcode.com/wp-content/uploads/2022/11/code-type-matches-300x123.jpg 300w, https://library.wpcode.com/wp-content/uploads/2022/11/code-type-matches-600x246.jpg 600w, https://library.wpcode.com/wp-content/uploads/2022/11/code-type-matches-146x60.jpg 146w, https://library.wpcode.com/wp-content/uploads/2022/11/code-type-matches-219x90.jpg 219w" sizes="100vw" /></figure> <h4 class="wp-block-heading">3. Copy-Paste the snippet code</h4> <figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="702" height="680" src="https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code.jpg" alt="" class="wp-image-975" srcset="https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code.jpg 702w, https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code-300x291.jpg 300w, https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code-600x581.jpg 600w, https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code-24x24.jpg 24w, https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code-62x60.jpg 62w, https://library.wpcode.com/wp-content/uploads/2022/11/copy-paste-code-93x90.jpg 93w" sizes="(max-width: 702px) 100vw, 702px" /></figure> <p>That’s it! Don’t forget to save and activate the snippet or select the auto-insert location where the snippet should be automatically inserted.</p> <p>If you have any questions don’t hesitate to <a href="https://wpcode.com/contact">reach out</a>.</p> </div> <footer class="entry-footer"> </footer> </article> </main> <footer data-rocket-location-hash="1b51d5ed567f6e89f8d32818c506169f" id="colophon" class="site-footer"> <aside class="block-area footer-block-area"> <div class="wp-block-columns alignwide footer-links is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <h2 class="wp-block-heading has-medium-font-size">Company</h2> <ul class="is-style-no-marker has-sub-font-size wp-block-list"> <li><a href="https://wpcode.com/about" title="">About</a></li> <li><a href="https://awesomemotive.com/career/" target="_blank" rel="noreferrer noopener">Careers</a></li> <li><a href="https://wpcode.com/reviews">Testimonials</a></li> <li><a href="https://wpcode.com/blog">Blog</a></li> <li><a href="https://wpcode.com/affiliates" title="">Affiliates</a></li> <li><a href="https://wpcode.com/contact">Contact</a></li> </ul> <ul class="wp-block-social-links is-style-logos-only is-layout-flex wp-block-social-links-is-layout-flex"> <li class="wp-social-link wp-social-link-twitter wp-block-social-link"><a href="https://twitter.com/wpcodelibrary" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Twitter</span></a></li> <li class="wp-social-link wp-social-link-facebook wp-block-social-link"><a href="https://www.facebook.com/groups/wpbeginner" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li> </ul> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <h2 class="wp-block-heading has-medium-font-size">Powerful Code Features</h2> <ul class="is-style-no-marker has-sub-font-size wp-block-list"> <li><a href="https://wpcode.com/features/code-snippets-library">Ready-made Snippets Library</a></li> <li><a href="https://wpcode.com/features/smart-conditional-logic">Smart Conditional Logic</a></li> <li><a href="https://wpcode.com/features/">Advanced Auto-insert Locations</a></li> <li><a href="https://wpcode.com/features/">Global Header & Footer Scripts</a></li> <li><a href="https://wpcode.com/features/">Safe Error Handling</a></li> <li><a href="https://wpcode.com/features/">WordPress Code Generators</a></li> </ul> <p></p> </div> <div class="wp-block-column u-mr-auto is-layout-flow wp-block-column-is-layout-flow"> <div style="height:44px" aria-hidden="true" class="wp-block-spacer"></div> <ul class="is-style-no-marker wp-block-list"> <li><a href="https://wpcode.com/features/marketing-scripts-conversion-pixels/">Ecommerce Conversion Pixels</a></li> <li><a href="https://wpcode.com/features/">Dynamic Content Elements</a></li> <li><a href="https://wpcode.com/features/">Reduce Number of Plugins</a></li> <li><a href="https://wpcode.com/features/private-snippets-library/">Save Snippets in Cloud</a></li> <li><a href="https://wpcode.com/features/">Easy Code Management</a></li> <li><a href="https://wpcode.com/features/advanced-code-revisions/" data-type="URL" data-id="https://wpcode.com/features/advanced-code-revisions/">Advanced Code Revisions</a></li> </ul> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <h2 class="wp-block-heading has-medium-font-size">Helpful Links</h2> <ul class="is-style-no-marker wp-block-list"> <li><a href="https://wpcode.com/contact/" target="_blank" rel="noreferrer noopener">Support</a></li> <li><a href="https://wpcode.com/docs">Documentation</a></li> <li><a href="https://library.wpcode.com/pricing/" data-type="page" data-id="688">Plans & Pricing</a></li> <li><a href="https://www.wpbeginner.com/wordpress-hosting/" target="_blank" rel="noreferrer noopener">WordPress Hosting</a></li> <li><a href="https://www.wpbeginner.com/guides/" data-type="URL" data-id="https://www.wpbeginner.com/guides/" target="_blank" rel="noreferrer noopener">Start a Blog</a></li> <li><a href="https://www.wpbeginner.com/guides/" target="_blank" rel="noreferrer noopener">Make a Website</a></li> <li></li> </ul> </div> </div> </aside> <aside class="block-area footer-copyright-block-area"> <div class="wp-block-columns alignwide are-vertically-aligned-center u-mb-gutter-sm footer-bottom-area is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center footer-text is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%"> <p class="has-theme-background-color has-text-color">Copyright 漏 2025 WPCode. WPCode庐 is a registered trademark of WPCode, LLC</p> <div class="wp-block-buttons u-my-base is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="https://wpcode.com/terms-of-service/">Terms of Service</a></div> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="https://wpcode.com/privacy-policy/">Privacy Policy</a></div> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="https://wpcode.com/ftc-disclosure/">FTC Disclosure</a></div> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="/sitemap.xml" target="_blank" rel="noreferrer noopener">Sitemap</a></div> <div class="wp-block-button is-style-link-btn"><a class="wp-block-button__link wp-element-button" href="https://wpcode.com/wpcode-coupon-code">WPCode Coupon</a></div> </div> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:48px"> <figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="48" height="48" src="https://library.wpcode.com/wp-content/uploads/2022/11/paypal.svg" alt="" class="wp-image-818"/></figure> </div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:167px"> <figure class="wp-block-image size-large wpb-verified"><a href="https://www.wpbeginner.com/solutions/wpcode/" target="_blank" rel="noreferrer noopener"><img loading="lazy" decoding="async" width="203" height="54" src="https://library.wpcode.com/wp-content/uploads/2022/11/verified.svg" alt="" class="wp-image-817"/></a></figure> </div> </div> </div> </div> <div class="wp-block-columns alignwide footer-bottom-area u-mb-gutter-sm is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"> <p class="has-theme-background-color has-text-color has-link-color wp-elements-57b9618aa57ad78ce843557c7a6e31a0">The WordPress庐 trademark is the intellectual property of the WordPress Foundation. Uses of the WordPress庐, names in this website are for identification purposes only and do not imply an endorsement by WordPress Foundation. WPCode is not endorsed or owned by, or affiliated with, the WordPress Foundation.</p> </div> </div> </aside> <div data-rocket-location-hash="3ab8e7cc581669006eb15076710f3a63" data-modal="snippet-preview" class="modal-window modal-snippet-preview"> <div class="modal-card o-card"> <div class="modal-header">Snippet Preview <button class="modal-close" aria-label="close">✕</button> </div> <div class="modal-content"> <article> <div class="snippet-preview-content"></div> </article> </div> </div> </div> </footer> </div> <style> .searchwp-live-search-results { opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; height: 0; overflow: hidden; z-index: 9999995; /* Exceed SearchWP Modal Search Form overlay. */ position: absolute; display: none; } .searchwp-live-search-results-showing { display: block; opacity: 1; height: auto; overflow: auto; } .searchwp-live-search-no-results { padding: 3em 2em 0; text-align: center; } .searchwp-live-search-no-min-chars:after { content: "Continue typing"; display: block; text-align: center; padding: 2em 2em 0; } </style> <script> var _SEARCHWP_LIVE_AJAX_SEARCH_BLOCKS = true; var _SEARCHWP_LIVE_AJAX_SEARCH_ENGINE = 'default'; var _SEARCHWP_LIVE_AJAX_SEARCH_CONFIG = 'default'; </script>  <script>(function(d,u,ac){var s=d.createElement('script');s.type='text/javascript';s.src='https://a.omappapi.com/app/js/api.min.js';s.async=true;s.dataset.user=u;s.dataset.campaign=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,51025,'ymd7isscgxsgmwl0nfrt');</script>  <script> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <script type="text/javascript"> /* MonsterInsights Scroll Tracking */ if ( typeof(jQuery) !== 'undefined' ) { jQuery( document ).ready(function(){ function monsterinsights_scroll_tracking_load() { if ( ( typeof(__gaTracker) !== 'undefined' && __gaTracker && __gaTracker.hasOwnProperty( "loaded" ) && __gaTracker.loaded == true ) || ( typeof(__gtagTracker) !== 'undefined' && __gtagTracker ) ) { (function(factory) { factory(jQuery); }(function($) { /* Scroll Depth */ "use strict"; var defaults = { percentage: true }; var $window = $(window), cache = [], scrollEventBound = false, lastPixelDepth = 0; /* * Plugin */ $.scrollDepth = function(options) { var startTime = +new Date(); options = $.extend({}, defaults, options); /* * Functions */ function sendEvent(action, label, scrollDistance, timing) { if ( 'undefined' === typeof MonsterInsightsObject || 'undefined' === typeof MonsterInsightsObject.sendEvent ) { return; } var paramName = action.toLowerCase(); var fieldsArray = { send_to: 'G-4R8G544HHE', non_interaction: true }; fieldsArray[paramName] = label; if (arguments.length > 3) { fieldsArray.scroll_timing = timing MonsterInsightsObject.sendEvent('event', 'scroll_depth', fieldsArray); } else { MonsterInsightsObject.sendEvent('event', 'scroll_depth', fieldsArray); } } function calculateMarks(docHeight) { return { '25%' : parseInt(docHeight * 0.25, 10), '50%' : parseInt(docHeight * 0.50, 10), '75%' : parseInt(docHeight * 0.75, 10), /* Cushion to trigger 100% event in iOS */ '100%': docHeight - 5 }; } function checkMarks(marks, scrollDistance, timing) { /* Check each active mark */ $.each(marks, function(key, val) { if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) { sendEvent('Percentage', key, scrollDistance, timing); cache.push(key); } }); } function rounded(scrollDistance) { /* Returns String */ return (Math.floor(scrollDistance/250) * 250).toString(); } function init() { bindScrollDepth(); } /* * Public Methods */ /* Reset Scroll Depth with the originally initialized options */ $.scrollDepth.reset = function() { cache = []; lastPixelDepth = 0; $window.off('scroll.scrollDepth'); bindScrollDepth(); }; /* Add DOM elements to be tracked */ $.scrollDepth.addElements = function(elems) { if (typeof elems == "undefined" || !$.isArray(elems)) { return; } $.merge(options.elements, elems); /* If scroll event has been unbound from window, rebind */ if (!scrollEventBound) { bindScrollDepth(); } }; /* Remove DOM elements currently tracked */ $.scrollDepth.removeElements = function(elems) { if (typeof elems == "undefined" || !$.isArray(elems)) { return; } $.each(elems, function(index, elem) { var inElementsArray = $.inArray(elem, options.elements); var inCacheArray = $.inArray(elem, cache); if (inElementsArray != -1) { options.elements.splice(inElementsArray, 1); } if (inCacheArray != -1) { cache.splice(inCacheArray, 1); } }); }; /* * Throttle function borrowed from: * Underscore.js 1.5.2 * http://underscorejs.org * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors * Underscore may be freely distributed under the MIT license. */ function throttle(func, wait) { var context, args, result; var timeout = null; var previous = 0; var later = function() { previous = new Date; timeout = null; result = func.apply(context, args); }; return function() { var now = new Date; if (!previous) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0) { clearTimeout(timeout); timeout = null; previous = now; result = func.apply(context, args); } else if (!timeout) { timeout = setTimeout(later, remaining); } return result; }; } /* * Scroll Event */ function bindScrollDepth() { scrollEventBound = true; $window.on('scroll.scrollDepth', throttle(function() { /* * We calculate document and window height on each scroll event to * account for dynamic DOM changes. */ var docHeight = $(document).height(), winHeight = window.innerHeight ? window.innerHeight : $window.height(), scrollDistance = $window.scrollTop() + winHeight, /* Recalculate percentage marks */ marks = calculateMarks(docHeight), /* Timing */ timing = +new Date - startTime; checkMarks(marks, scrollDistance, timing); }, 500)); } init(); }; /* UMD export */ return $.scrollDepth; })); jQuery.scrollDepth(); } else { setTimeout(monsterinsights_scroll_tracking_load, 200); } } monsterinsights_scroll_tracking_load(); }); } /* End MonsterInsights Scroll Tracking */ </script> <script type="text/javascript"> var ymd7isscgxsgmwl0nfrt_shortcode = true; </script> <link rel='stylesheet' id='wc-blocks-style-css' href='https://library.wpcode.com/wp-content/plugins/woocommerce/assets/client/blocks/wc-blocks.css?ver=wc-9.1.4' media='all' /> <style id='core-block-supports-inline-css'> .wp-container-core-columns-is-layout-1{flex-wrap:nowrap;}.wp-container-core-buttons-is-layout-2{justify-content:flex-end;}.wp-container-core-columns-is-layout-2{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-3{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-4{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-5{flex-wrap:nowrap;}.wp-elements-57b9618aa57ad78ce843557c7a6e31a0 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--theme-background);}.wp-container-core-columns-is-layout-6{flex-wrap:nowrap;} </style> <script src="https://library.wpcode.com/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.6.3" id="mpp_gutenberg_tabs-js"></script> <script id="rocket-browser-checker-js-after"> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script id="rocket-preload-links-js-extra"> var RocketPreloadLinksConfig = {"excludeUris":"\/login\/|\/register\/|\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/checkout\/??(.*)|\/cart\/?|\/my-account\/??(.*)|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/library.wpcode.com","onHoverDelay":"100","rateThrottle":"3"}; </script> <script id="rocket-preload-links-js-after"> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script id="aioseo-theme-script-js-extra"> var AIOSEOThemeScreenReaderText = {"expand":"Expand child menu","collapse":"Collapse child menu","ajaxurl":"https:\/\/library.wpcode.com\/wp-admin\/admin-ajax.php","star_nonce":"b9d087c0ab"}; </script> <script src="https://library.wpcode.com/wp-content/themes/wpcode-theme/dist/js/main.js?ver=1.1.1" id="aioseo-theme-script-js"></script> <script id="swp-live-search-client-js-extra"> var searchwp_live_search_params = []; searchwp_live_search_params = {"ajaxurl":"https:\/\/library.wpcode.com\/wp-admin\/admin-ajax.php","origin_id":971,"config":{"default":{"engine":"default","input":{"delay":300,"min_chars":3},"results":{"position":"bottom","width":"auto","offset":{"x":0,"y":5}},"spinner":{"lines":12,"length":8,"width":3,"radius":8,"scale":1,"corners":1,"color":"#424242","fadeColor":"transparent","speed":1,"rotate":0,"animation":"searchwp-spinner-line-fade-quick","direction":1,"zIndex":2000000000,"className":"spinner","top":"50%","left":"50%","shadow":"0 0 1px transparent","position":"absolute"}}},"msg_no_config_found":"No valid SearchWP Live Search configuration found!","aria_instructions":"When autocomplete results are available use up and down arrows to review and enter to go to the desired page. Touch device users, explore by touch or with swipe gestures."};; </script> <script src="https://library.wpcode.com/wp-content/plugins/searchwp-live-ajax-search/assets/javascript/dist/script.min.js?ver=1.8.4" id="swp-live-search-client-js"></script> <script>(function(d){var s=d.createElement("script");s.type="text/javascript";s.src="https://a.omappapi.com/app/js/api.min.js";s.async=true;s.id="omapi-script";d.getElementsByTagName("head")[0].appendChild(s);})(document);</script><script src="https://library.wpcode.com/wp-content/plugins/optinmonster/assets/dist/js/helper.min.js?ver=2.16.16" id="optinmonster-wp-helper-js"></script> <script type="text/javascript">var omapi_localized = { ajax: 'https://library.wpcode.com/wp-admin/admin-ajax.php?optin-monster-ajax-route=1', nonce: '2150e0c77a', slugs: {"ymd7isscgxsgmwl0nfrt":{"slug":"ymd7isscgxsgmwl0nfrt","mailpoet":false}} };</script> <script type="text/javascript">var omapi_data = {"object_id":971,"object_key":"page","object_type":"post","term_ids":[],"wp_json":"https:\/\/library.wpcode.com\/wp-json","wc_active":true,"edd_active":false,"nonce":"3dc4c68aff"};</script> <script>var rocket_beacon_data = {"ajax_url":"https:\/\/library.wpcode.com\/wp-admin\/admin-ajax.php","nonce":"41f8120834","url":"https:\/\/library.wpcode.com\/use-snippet","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://library.wpcode.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body> </html>