{"id":46776,"date":"2024-06-21T10:39:46","date_gmt":"2024-06-21T07:39:46","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=46776"},"modified":"2024-06-21T10:39:53","modified_gmt":"2024-06-21T07:39:53","slug":"wordpress-custom-javascript","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/","title":{"rendered":"How to Add Custom JavaScript to WordPress (5 Methods + Tips)"},"content":{"rendered":"\n<p>In the past, if you wanted to add custom JavaScript to WordPress posts, you had to either be familiar with code or you had to rely on a plugin. Unfortunately, neither of those solutions were ideal for the vast majority of WordPress users. The first one had a high barrier to entry and was risky if you didn&rsquo;t know what you were doing, and the second one was very limited in what it allowed you to do.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Fortunately, thanks to the development of <a href=\"https:\/\/themeisle.com\/blog\/ai-tools-for-website\/\">AI tools<\/a>, we no longer have to rely on those methods.<\/p>\n\n\n\n<p>In this tutorial, I will show you five unique ways to add JavaScript to WordPress. I&rsquo;ll also share the code snippet for each example so that you can use the ones you like on your own website. Afterwards, I&rsquo;ll provide you with some guidance on how you can use the free version of Claude (or any similar AI tool) to generate your own custom JavaScript functionalities.<\/p>\n\n\n\n<p>Let&rsquo;s get to work!<\/p>\n\n\n    \r\n    <style>\r\n        :root {\r\n        --jtoc-progress-bar-color: #4267cf;\n        }\r\n                    .wpj-jtoc.--jtoc-theme-none.--jtoc-has-custom-styles {\r\n        --jtoc-width: 100%;\n--jtoc-toc-padding: 24px;\n--jtoc-toc-border: 1px solid;\n--jtoc-toc-border-color: #dedede;\n--jtoc-background-color: #f6f7f9;\n--jtoc-header-height: 20px;\n--jtoc-header-margin: 0;\n--jtoc-header-padding: 0;\n--jtoc-title-color: #393939;\n--jtoc-title-font-size: 1.2em;\n--jtoc-title-label-font-weight: 400;\n--jtoc-body-margin: 16px 0 0 0;\n--jtoc-body-padding: 0;\n--jtoc-headings-margin: 10px 0 0 0;\n--jtoc-link-font-size: 1em;\n--jtoc-link-font-weight: 400;\n--jtoc-link-color: #848484;\n--jtoc-link-color-hover: #4a66c8;\n--jtoc-link-color-active: #4a66c8;\n        }\r\n        .--jtoc-the-content{\r\ndisplay:none;\r\n}\r\n.--jtoc-is-active>.wpj-jtoc--item-content>a:before{\r\nmargin-left:3px;\r\n}\r\n.wpj-jtoc--nav>.wpj-jtoc--items li a::before{\r\ncontent:'\\203A';\r\ndisplay:block;\r\nfloat:left;\r\nheight:100%;\r\nfont-weight:700;\r\ncolor:#4267CF;\r\nline-height: 20px;\r\nmargin-right: 3px;\r\n}\r\n.sidebar .wpj-jtoc--toc{\r\nborder:0;\r\npadding:0;\r\n}\r\n.sidebar .wpj-jtoc--header,\r\n.sidebar .wpj-jtoc--body{\r\nbackground:transparent;\r\n}\r\n\r\n.sidebar .--jtoc-is-active>.wpj-jtoc--item-content>a{\r\ntext-decoration:none;\r\n}\r\n.sidebar-left .widget-first{\r\nposition:sticky;\r\ntop:70px;\r\nmargin-bottom:1250px;\r\n}\r\n.sidebar-left{\r\ndisplay:none;\r\nmax-width:300px;\r\nposition:absolute;\r\nleft:-330px;\r\ntop:0;\r\nheight:100%;\r\n}\r\n@media only screen and (max-width: 1900px) {\r\n.single-post .sidebar-left{\r\ndisplay:none !important;\r\n}\r\n.--jtoc-the-content{\r\ndisplay:block;\r\n}\r\n@media only screen and (max-width: 400px) {\r\n.wpj-jtoc--item .wpj-jtoc--item-content{\r\nmargin-top:5px;\r\n}\r\n.wpj-jtoc--header-main .wpj-jtoc--title{\r\nfont-size:1.1em;\r\n}\r\n}    <\/style>\r\n\r\n\r\n    <!-- jtoc progress bar widget -->\r\n    <div class=\"wpj-jtoc--widget-progress --progress-top\">\r\n        <div class=\"wpj-jtoc--widget-progress-bar\"><\/div>\r\n    <\/div>\r\n\r\n<div id=\"wpj-jtoc\" class=\"wpj-jtoc wpj-jtoc--main --jtoc-the-content --jtoc-theme-none --jtoc-title-align-left --jtoc-toggle-icon --jtoc-toggle-position-right --jtoc-toggle-1 --jtoc-header-as-toggle --jtoc-headings-full-row-clickable --jtoc-floating-toc-top --jtoc-floating-has-shadow --jtoc-has-custom-styles --jtoc-is-unfolded\" >\r\n            \r\n    <!-- TOC -->\r\n    <div class=\"wpj-jtoc--toc \">\r\n                            <div class=\"wpj-jtoc--header\">\r\n                <div class=\"wpj-jtoc--header-main\">\r\n                                        <div class=\"wpj-jtoc--title\">\r\n                        <!-- <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-columns-3\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M9 3v18\"\/><path d=\"M15 3v18\"\/><\/svg> -->\r\n                        <span class=\"wpj-jtoc--title-label\">Table of contents<\/span>\r\n                    <\/div>\r\n                                                        <\/div>\r\n            <\/div>\r\n                                <div class=\"wpj-jtoc--body\">\r\n                        <nav class=\"wpj-jtoc--nav\">\r\n                <ol class=\"wpj-jtoc--items\"><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#h-how-to-use-this-tutorial\" title=\"How to use this tutorial\" data-numeration=\"1\" >How to use this tutorial<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#h-5-ways-to-use-javascript-in-wordpress-with-snippets\" title=\"5 ways to use JavaScript in WordPress (with snippets) *\" data-numeration=\"2\" >5 ways to use JavaScript in WordPress (with snippets) *<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#h-tips-to-unlock-other-custom-javascript-functions-in-wordpress\" title=\"Tips to unlock other custom JavaScript functions in WordPress\" data-numeration=\"3\" >Tips to unlock other custom JavaScript functions in WordPress<\/a>\r\n                    <\/div> <\/li><\/ol>            <\/nav>\r\n                                                        <\/div>\r\n            <\/div>\r\n<\/div>\r\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-how-to-use-this-tutorial\">How to use this tutorial<\/h2>\n\n\n\n<p>Although this article contains a lot of code, I want to make it clear that <strong>you don&rsquo;t need to have a single morsel of coding knowledge to take advantage of the information I&rsquo;m going to share<\/strong>.<\/p>\n\n\n\n<p>For each example, I will demonstrate what it looks and behaves like, and then I&rsquo;ll share the underlying code that is responsible for the effect. To use it yourself, all you have to do is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the code<\/li>\n\n\n\n<li>Go into whatever WordPress page or post that you&rsquo;re working on where you&rsquo;d like to use it<\/li>\n\n\n\n<li>Add a <strong>Custom HTML block<\/strong> (like in the image below)<\/li>\n\n\n\n<li>Paste the code into the block<\/li>\n\n\n\n<li>Modify the code according to your needs<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=1619918000  fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"598\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp\" alt=\"Adding a custom HTML block inside the WordPress editor.\" class=\"wp-image-105655\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:598\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:234\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:39\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:308\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 308w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:510\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 510w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:190\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 190w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:250\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 250w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:173\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 173w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:598\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-custom-HTML-block-inside-the-block-editor.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure>\n\n\n\n<p>With regard to the last bullet point, if you have at least a light background in HTML and \/ or CSS then it will make it easier to customize the code, but thanks to AI tools it&rsquo;s not a pre-requisite (more on this in a moment).<\/p>\n\n\n\n<p>For all but one of them, I will present the JavaScript effect directly within the heading itself. This means that the underlying code snippet will contain <code>&lt;h3&gt;<\/code> tags, which denote that the text is a heading. If you prefer to use the effect in a normal paragraph, then you can simply substitute the <code>&lt;h3&gt;<\/code> and closing <code>&lt;\/h3&gt;<\/code> for <code>&lt;p&gt;<\/code> and <code>&lt;\/p&gt;<\/code> respectively.<\/p>\n\n\n\n<p>Other than substituting your own text for the example text, this is the most basic adjustment that you will need to make. However, depending on the specific effect, you may want to alter the text alignment from left to center, adjust the font size, etc. The easiest way to do this if you have no background in coding, is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the entire code snippet<\/li>\n\n\n\n<li>Paste it into either <a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"noopener\">Claude<\/a> or <a href=\"https:\/\/chatgpt.com\/\" target=\"_blank\" rel=\"noopener\">ChatGPT<\/a><\/li>\n\n\n\n<li>Tell it to alter the code to achieve your desired result<\/li>\n<\/ul>\n\n\n\n<p>When you get the edited code back, paste it into the <strong>Custom HTML block<\/strong>, and click the preview button on the top right of the WordPress editor to see what it will look like on the front end of your site:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=1230834495  fetchpriority=\"high\" decoding=\"async\" width=\"2452\" height=\"1390\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp\" alt=\"Clicking the preview button in the WordPress editor.\" class=\"wp-image-105703\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1905\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 2452w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:170\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:580\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:435\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:871\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1905\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1800\/h:1020\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:28\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:423\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 423w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:700\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 700w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1058\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 1058w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:261\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 261w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:344\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 344w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:238\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 238w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1905\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Clicking-the-preview-button-in-the-WordPress-editor.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure>\n\n\n\n<p>If you&rsquo;re satisfied &ndash; great! If you&rsquo;re not, ask Claude or GPT to edit it some more. Better yet, ask what specific parameter is being tweaked so you can just do it yourself until you achieve your desired result. Often times, both tools will tell you this without even asking, but I&rsquo;m mentioning it just in case that doesn&rsquo;t happen.<\/p>\n\n\n\n<p>With that out of the way, let&rsquo;s move on to the examples.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-5-ways-to-use-javascript-in-wordpress-with-snippets\">5 ways to use JavaScript in WordPress (with snippets) *<\/h2>\n\n\n\n<p>You can use JavaScript to do a lot of really interesting and useful things that will make your posts more engaging. Although the possibilities are quite vast, I&rsquo;m going to stick to simple use cases here.<\/p>\n\n\n\n<p>For the last example, you&rsquo;ll need to take one additional step, but it&rsquo;s not anything complicated or outside the bounds of common WordPress knowledge.<\/p>\n\n\n\n<p>* <em>One of the examples on this list is purely based on HTML + CSS so if we&rsquo;re being precise, it&rsquo;s technically four ways to use JavaScript and then one bonus effect.<\/em><\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 id=\"example-1-blur-text-and-reveal-it-upon-clicking\" class=\"joli-heading jtoc-heading\">Example #1: <span id=\"blurredText\">Blur text and reveal it upon clicking<\/span><\/h3>\n<script>\n  const blurredText = document.getElementById('blurredText');\n\n  blurredText.style.filter = 'blur(5px)';\n  blurredText.style.cursor = 'pointer';\n\n  blurredText.addEventListener('click', function() {\n    if (blurredText.style.filter === 'blur(5px)') {\n      blurredText.style.filter = 'none';\n    } else {\n      blurredText.style.filter = 'blur(5px)';\n    }\n  });\n<\/script>\n\n\n\n<p>&#9757;&#65039; <strong>Click the blurred text to remove the blur.<\/strong><\/p>\n\n\n\n<p>Pretty cool, right? Here&rsquo;s the underlying code snippet you can use to execute this effect:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3&gt;Example #1: &lt;span id=\"blurredText\"&gt;Blur text and reveal it upon clicking&lt;\/span&gt;&lt;\/h3&gt;\n\n&lt;script&gt;\n  const blurredText = document.getElementById('blurredText');\n\n  blurredText.style.filter = 'blur(5px)';\n  blurredText.style.cursor = 'pointer';\n\n  blurredText.addEventListener('click', function() {\n    if (blurredText.style.filter === 'blur(5px)') {\n      blurredText.style.filter = 'none';\n    } else {\n      blurredText.style.filter = 'blur(5px)';\n    }\n  });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Just copy this into the Custom HTML block and then substitute &ldquo;Blur text and reveal it upon clicking&rdquo; with whatever text you want to blur. If the blurred text is part of a longer sentence, then the part before the blur effect should be inserted where you see &ldquo;Example #1.&rdquo; If there&rsquo;s any text after the blurred section, you can put that after the closing <code>&lt;\/span&gt;<\/code> tag.<\/p>\n\n\n\n<p>As mentioned in the previous section, please don&rsquo;t forget to substitute the <code>&lt;h3&gt;<\/code> opening tag and the <code>&lt;\/h3&gt;<\/code> closing tag with <code>&lt;p&gt;<\/code> and <code>&lt;\/p&gt;<\/code> if you plan on using the effect inside of a normal paragraph.<\/p>\n\n\n\n<p>If you get stuck or want to modify it in any other way, then ask Claude or ChatGPT to do it for you.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 id=\"example-2-rubcesanml-a-eamrblsdc-drwo-ro-swrod\" class=\"joli-heading jtoc-heading\">Example #2: <span id=\"scrambledPhrase\">rUbcesanml a eamrblsdc drwo ro swrod<\/span><\/h3>\n<script>\nconst scrambledPhrase = document.getElementById('scrambledPhrase');\nconst originalPhrase = 'Unscramble a scrambled word or words';\nlet unscrambledPhrase = originalPhrase.split('').sort(() => Math.random() > 0.5 ? 1 : -1).join('');\n\nscrambledPhrase.textContent = unscrambledPhrase;\nscrambledPhrase.style.cursor = 'pointer';\nscrambledPhrase.addEventListener('click', function() {\n  scrambledPhrase.textContent = originalPhrase;\n});\n<\/script>\n\n\n\n<p>&#9757;&#65039; <strong>Click the scrambled text to unscramble it.<\/strong><\/p>\n\n\n\n<p>This is a really neat concept that&rsquo;s perfect for puzzles or on-page quizzes. Here&rsquo;s the snippet to pull it off:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3&gt;Example #2: &lt;span id=\"scrambledPhrase\"&gt;rUbcesanml a eamrblsdc drwo ro swrod&lt;\/span&gt;&lt;\/h3&gt;\n\n&lt;script&gt;\nconst scrambledPhrase = document.getElementById('scrambledPhrase');\nconst originalPhrase = 'Unscramble a scrambled word or words';\nlet unscrambledPhrase = originalPhrase.split('').sort(() =&gt; Math.random() &gt; 0.5 ? 1 : -1).join('');\n\nscrambledPhrase.textContent = unscrambledPhrase;\nscrambledPhrase.style.cursor = 'pointer';\nscrambledPhrase.addEventListener('click', function() {\n  scrambledPhrase.textContent = originalPhrase;\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Same idea here with the <code>&lt;h3&gt;<\/code> tags. If you want to scramble words in a regular paragraph, you&rsquo;ll need to replace those with <code>&lt;p&gt;<\/code> tags.<\/p>\n\n\n\n<p>The <code>rUbcesanml a eamrblsdc drwo ro swrod<\/code> is what unscrambles to say &ldquo;Unscramble a scrambled word or words&rdquo; so this is where you&rsquo;ll put your own scrambled word or words.<\/p>\n\n\n\n<p>To the right of <code>const originalPhrase =<\/code> is where you&rsquo;ll put the unscrambled version.<\/p>\n\n\n\n<p>If you don&rsquo;t want to scramble the word(s) yourself, you can also use Claude or ChatGPT to do this for you.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-example-3-dynamically-changing-text\">Example #3: Dynamically changing text<\/h3>\n\n\n\n<p>This snippet will cause a piece of text to change to another piece of text in time intervals chosen by you. You can also add a timer to indicate when the next change will take place, but this is optional.<\/p>\n\n\n\n<p>The intervals can be set up however you want.<\/p>\n\n\n\n<p>For example, if you wanted to give your audience a &ldquo;daily tip&rdquo; then you could set the interval to rotate every 24 hours. In the example below, I set it to rotate every three minutes and I included a notification for when it&rsquo;s going to change next:<\/p>\n\n\n\n<style>\n#dynamicTipContainer {\n  background-color: #FFFBCC;\n  padding: 10px;\n  border-radius: 10px;\n}\n.tip-text {\n  font-weight: bold;\n  margin-bottom: 5px;\n}\n.next-update {\n  font-size: 0.8em;\n  color: #666;\n  margin-bottom: 0;\n}\n<\/style>\n\n<div id=\"dynamicTipContainer\">\n  <p class=\"tip-text\"><\/p>\n  <p class=\"next-update\">Next Update: <span id=\"dynamicTipTimestamp\"><\/span><\/p>\n<\/div>\n\n<script>\nconst tipTextElement = document.querySelector('#dynamicTipContainer .tip-text');\nconst dynamicTipTimestamp = document.getElementById('dynamicTipTimestamp');\nconst tips = [\n  \"Remember, there's often more than one way to write a JavaScript snippet. Don't be afraid to ask for clarification!\",\n  \"Always preview your post before publishing to ensure the JavaScript snippet is working as intended.\",\n  \"If you get stuck, feel free to ask for help or alternative approaches. There's no need to struggle alone!\",\n  \"Don't be discouraged if your first attempt doesn't work. Coding takes practice and patience.\",\n  \"Have fun with JavaScript! It's a powerful tool for adding interactivity to your WordPress posts.\",\n  \"Start with simple snippets and build up your skills gradually. You'll be amazed at what you can create!\",\n  \"Experiment! Try modifying the snippets and see how they behave differently.\",\n  \"Remember, you can always undo changes or revert to a previous version if something goes wrong.\"\n];\n\nlet nextUpdateTime;\n\nfunction updateTip() {\n  const currentTipIndex = Math.floor(Math.random() * tips.length);\n  tipTextElement.textContent = \"Tip: \" + tips[currentTipIndex];\n  \n  \/\/ Set the next update time\n  nextUpdateTime = new Date(Date.now() + 180000);\n  updateTimestamp();\n}\n\nfunction updateTimestamp() {\n  dynamicTipTimestamp.textContent = nextUpdateTime.toLocaleTimeString();\n  \n  \/\/ Update the timestamp every second\n  setTimeout(updateTimestamp, 1000);\n}\n\nupdateTip();\nsetInterval(updateTip, 180000); \/\/ Update every 3 minutes (180000 milliseconds)\n<\/script>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>If you hang out in this spot until the time you see above, you&rsquo;ll see it change.<\/p>\n\n\n\n<p>Keep in mind that you can edit this in so many other ways.<\/p>\n\n\n\n<p>For example, in the original version that Claude gave me, the tip looked exactly like the other surrounding text, so I asked it to modify the code by adding a yellow background with color #FFFBCC. I also asked it to change the notification from showing the last time the tip updated to showing the next time it will update.<\/p>\n\n\n\n<p><strong>I&rsquo;m mentioning this to once again reiterate that you don&rsquo;t need any coding background to use these snippets.<\/strong><\/p>\n\n\n\n<p>Simply copy the original JavaScript below, paste it into Claude or ChatGPT, and then ask it to make whatever adjustments you want. You&rsquo;ll need to do this anyway, to substitute whatever rotating pieces of text you want to show your audience (unless you edit the code manually).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n#dynamicTipContainer {\n  background-color: #FFFBCC;\n  padding: 10px;\n  border-radius: 10px;\n}\n.tip-text {\n  font-weight: bold;\n  margin-bottom: 5px;\n}\n.next-update {\n  font-size: 0.8em;\n  color: #666;\n  margin-bottom: 0;\n}\n&lt;\/style&gt;\n\n&lt;div id=\"dynamicTipContainer\"&gt;\n  &lt;p class=\"tip-text\"&gt;&lt;\/p&gt;\n  &lt;p class=\"next-update\"&gt;Next Update: &lt;span id=\"dynamicTipTimestamp\"&gt;&lt;\/span&gt;&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nconst tipTextElement = document.querySelector('#dynamicTipContainer .tip-text');\nconst dynamicTipTimestamp = document.getElementById('dynamicTipTimestamp');\nconst tips = [\n  \"Remember, there's often more than one way to write a JavaScript snippet. Don't be afraid to ask for clarification!\",\n  \"Always preview your post before publishing to ensure the JavaScript snippet is working as intended.\",\n  \"If you get stuck, feel free to ask for help or alternative approaches. There's no need to struggle alone!\",\n  \"Don't be discouraged if your first attempt doesn't work. Coding takes practice and patience.\",\n  \"Have fun with JavaScript! It's a powerful tool for adding interactivity to your WordPress posts.\",\n  \"Start with simple snippets and build up your skills gradually. You'll be amazed at what you can create!\",\n  \"Experiment! Try modifying the snippets and see how they behave differently.\",\n  \"Remember, you can always undo changes or revert to a previous version if something goes wrong.\"\n];\n\nlet nextUpdateTime;\n\nfunction updateTip() {\n  const currentTipIndex = Math.floor(Math.random() * tips.length);\n  tipTextElement.textContent = \"Tip: \" + tips[currentTipIndex];\n  \n  \/\/ Set the next update time\n  nextUpdateTime = new Date(Date.now() + 180000);\n  updateTimestamp();\n}\n\nfunction updateTimestamp() {\n  dynamicTipTimestamp.textContent = nextUpdateTime.toLocaleTimeString();\n  \n  \/\/ Update the timestamp every second\n  setTimeout(updateTimestamp, 1000);\n}\n\nupdateTip();\nsetInterval(updateTip, 180000); \/\/ Update every 3 minutes (180000 milliseconds)\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>&#9888;&#65039; <strong>Important note<\/strong>: One thing to be aware of is that sometimes AI gets lazy when making code modifications. If you notice that for whatever reason your edited snippet isn&rsquo;t previewing correctly on the front end, check the code for any notes that come after the double slashes <code>\/\/<\/code>. For example, if you see something similar to the screenshot below, it means the AI didn&rsquo;t include all of the original code:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=1391156938  fetchpriority=\"high\" decoding=\"async\" width=\"2398\" height=\"698\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp\" alt=\"Claude-3 giving back incomplete code.\" class=\"wp-image-105718\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:558\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 2398w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:87\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:298\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:224\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:447\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:558\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1800\/h:524\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:15\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:140\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:231\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:349\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:86\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:114\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:79\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:558\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-being-lazy.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure>\n\n\n\n<p>The solution is simple. Just ask it to give you back the entire code snippet with the modification and it&rsquo;ll do it. Problem solved.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 id=\"example-4-add-a-tooltip-that-appears-on-hoverwhen-readers-hover-over-specific-words-or-phrases-like-this-one-theyll-be-shown-additional-information\" class=\"joli-heading jtoc-heading\">Example #4: <span id=\"tooltipText\" class=\"tooltip\">Add a tooltip that appears on hover<span class=\"tooltiptext\">When readers hover over specific words or phrases like this one, they&rsquo;ll be shown additional information.<\/span><\/span><\/h3>\n<style>\n.tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n}\n\n.tooltip .tooltiptext {\n  visibility: hidden;\n  width: 200px;\n  background-color: #555;\n  color: #fff;\n  text-align: left;\n  padding: 10px;\n  border-radius: 6px;\n  position: absolute;\n  z-index: 1;\n  bottom: 150%;\n  left: 50%;\n  margin-left: -100px;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n.tooltip:hover .tooltiptext {\n  visibility: visible;\n  opacity: 1;\n}\n<\/style>\n\n\n\n<p>&#9757;&#65039; <strong>Hover your mouse cursor over the heading text above to reveal the tooltip.<\/strong><\/p>\n\n\n\n<p>Tooltips in WordPress posts are useful for a number of reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Providing definitions without cluttering your main content<\/li>\n\n\n\n<li>Enhancing user engagement through interactive elements<\/li>\n\n\n\n<li>Offering additional information on complex topics directly where it&rsquo;s needed<\/li>\n<\/ul>\n\n\n\n<p>In the past, you&rsquo;d have to rely on a plugin to use these, but now you can use your own custom code instead. This one doesn&rsquo;t even actually use JavaScript &ndash; it&rsquo;s purely HTML and CSS &ndash; but it&rsquo;s a useful function so I included it on the list anyway.<\/p>\n\n\n\n<p>Here is the base code snippet to get what you see above:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3&gt;&lt;span id=\"tooltipText\" class=\"tooltip\"&gt;Example #4: Add a tooltip that appears on hover&lt;span class=\"tooltiptext\"&gt;When readers hover over specific words or phrases like this one, they'll be shown additional information.&lt;\/span&gt;&lt;\/span&gt;&lt;\/h3&gt;\n\n&lt;style&gt;\n.tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n}\n\n.tooltip .tooltiptext {\n  visibility: hidden;\n  width: 200px;\n  background-color: #555;\n  color: #fff;\n  text-align: left;\n  padding: 10px;\n  border-radius: 6px;\n  position: absolute;\n  z-index: 1;\n  bottom: 150%;\n  left: 50%;\n  margin-left: -100px;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n.tooltip:hover .tooltiptext {\n  visibility: visible;\n  opacity: 1;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Again, for any modifications, you can do them by hand if you feel comfortable, or put them into Claude or ChatGPT.<\/p>\n\n\n\n<p>&#9888;&#65039; <strong>Another important note<\/strong>: The AI will generally attempt to fulfill whatever modification request you make, but this doesn&rsquo;t always mean that it will work inside of WordPress. If you find that the edited code isn&rsquo;t working and it has nothing to do with getting back incomplete code, then it might just be that your request isn&rsquo;t possible.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<style>\n  .audio-link {\n    font-weight: inherit;\n    color: inherit;\n    text-decoration: none;\n    cursor: pointer;\n  }\n<\/style>\n<h3 id=\"example-5-add-a-click-on-play-audio-snippet-to-your-text\" class=\"joli-heading jtoc-heading\"><a href=\"javascript:void(0);\" onclick=\"playMailSound()\" class=\"audio-link\">Example #5: Add a click-on-play audio snippet to your text<\/a><\/h3>\n<audio id=\"mailSound\" src=\"https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/audio-snippet.mp3\"><\/audio>\n<script>\nfunction playMailSound() {\n  var sound = document.getElementById(\"mailSound\");\n  sound.play();\n}\n<\/script>\n\n\n\n<p>&#9757;&#65039; <strong>Click the heading text above to play the audio snippet.<\/strong><\/p>\n\n\n\n<p>This particular example is exactly what I used JavaScript for in the two recent articles that I added it to.<\/p>\n\n\n\n<p>Here is the snippet for it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n  .audio-link {\n    font-weight: inherit;\n    color: inherit;\n    text-decoration: none;\n    cursor: pointer;\n  }\n&lt;\/style&gt;\n\n&lt;h3&gt;&lt;a href=\"javascript:void(0);\" onclick=\"playMailSound()\" class=\"audio-link\"&gt;Example #5: Add a click-on-play audio snippet to your text&lt;\/a&gt;&lt;\/h3&gt;\n&lt;audio id=\"mailSound\" src=\"https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/audio-snippet.mp3\"&gt;&lt;\/audio&gt;\n&lt;script&gt;\nfunction playMailSound() {\n  var sound = document.getElementById(\"mailSound\");\n  sound.play();\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>It&rsquo;s unique compared to the others on the list because it requires an extra step to pull it off.<\/p>\n\n\n\n<p>Since the piece of text being clicked is linked to an MP3 audio file, you first need to add the file to your WordPress media library.<\/p>\n\n\n\n<p>To do this, go to the WordPress dashboard, then to <strong>Media &rarr; Add New Media File<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=918720576  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp\"  decoding=\"async\" width=\"1202\" height=\"758\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp\" alt=\"Adding the MP3 file to your WordPress media library.\" class=\"wp-image-105659\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1202\/h:758\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 1202w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:189\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:646\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:484\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:32\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:381\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 381w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:630\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 630w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:951\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 951w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:235\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 235w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:309\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 309w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:214\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 214w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1202\/h:758\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 2x\"><noscript><img data-opt-id=918720576  decoding=\"async\" width=\"1202\" height=\"758\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp\" alt=\"Adding the MP3 file to your WordPress media library.\" class=\"wp-image-105659\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1202\/h:758\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 1202w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:189\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:646\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:484\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:32\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:381\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 381w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:630\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 630w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:951\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 951w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:235\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 235w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:309\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 309w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:214\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 214w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1202\/h:758\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Adding-a-new-media-file-to-the-WordPress-media-library.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>Find the MP3 file on your hard drive and upload it. Then click on <strong>Copy URL to clipboard<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=895400459  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png\"  decoding=\"async\" width=\"2938\" height=\"964\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png\" alt=\"Copying the location URL of the MP3 file.\" class=\"wp-image-105660\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:629\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 2938w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:98\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:336\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:252\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:504\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:630\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1800\/h:591\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:16\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:157\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:261\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:394\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:97\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:128\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:89\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:629\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 2x\"><noscript><img data-opt-id=895400459  decoding=\"async\" width=\"2938\" height=\"964\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png\" alt=\"Copying the location URL of the MP3 file.\" class=\"wp-image-105660\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:629\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 2938w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:98\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:336\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:252\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:504\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:630\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1800\/h:591\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:16\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:157\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:261\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:394\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:97\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:128\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:89\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:629\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Copy-MP3-location-URL-to-clipboard.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>Now take this URL and paste it into the code snippet above, after the part that says <code>&lt;audio id=\"mailSound\" src=<\/code>.<\/p>\n\n\n\n<p>Don&rsquo;t forget to swap out the <code>&lt;h3&gt;<\/code> tags if you need to use this in a paragraph or a different heading class.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-tips-to-unlock-other-custom-javascript-functions-in-wordpress\">Tips to unlock other custom JavaScript functions in WordPress<\/h2>\n\n\n\n<p>As I stated earlier, JavaScript can do a lot of things in WordPress. The deeper you dive into it, the more you&rsquo;ll realize that many of your favorite plugins rely heavily on JavaScript to do what they do. For example, when a plugin offers features like live updates, animations, form validations, or any kind of interactivity without a page reload, it&rsquo;s usually JavaScript at work.<\/p>\n\n\n\n<p>This doesn&rsquo;t mean that you can (or should) all of a sudden forget all about plugins. However, it does mean that for many simpler use cases, you can avoid installing yet-another-plugin, and instead rely on JavaScript to do the job.<\/p>\n\n\n\n<p>I only gave you five examples in this article, but there are lots more.<\/p>\n\n\n\n<p>While the exact steps for each of them might have some nuanced differences, for simpler effects like the ones I covered in this article, you should be able to make them work with just the snippet and some minor editing. At most you might have to take an additional step or two like you saw with the play-on-click audio example.<\/p>\n\n\n\n<p>Below are three tips to get the best results:<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-tip-1-use-a-good-prompt-to-validate-your-idea-and-generate-an-initial-snippet\">Tip #1: Use a good prompt to validate your idea and generate an initial snippet<\/h3>\n\n\n\n<p>This is straightforward. JavaScript can do a lot, but it can&rsquo;t do everything. First make sure that what you&rsquo;re trying to do is actually possible. The key to getting this right is to give Claude (or whatever similar tool you&rsquo;re using) a good initial prompt so that it communicates two things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Exactly what you want the JavaScript snippet to do<\/li>\n\n\n\n<li>That you are a beginner with no coding knowledge looking for the simplest possible solution<\/li>\n<\/ul>\n\n\n\n<p>If what you&rsquo;re asking to do is not possible with JavaScript, then Claude will inform you. Assuming it is possible, then it will most likely generate an initial snippet. This is also why it&rsquo;s crucial to not overlook the importance of the second point.<\/p>\n\n\n\n<p>In many cases, JavaScript can be used in more than one way to accomplish the same thing (more on this soon). This means that if you&rsquo;re not being direct enough with your instructions, you might wind up with a solution that goes above your coding comprehension level (assuming your level is zero) or that works, but isn&rsquo;t necessarily the best solution.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-tip-2-don-t-accept-the-first-answer\">Tip #2: Don&rsquo;t accept the first answer<\/h3>\n\n\n\n<p>The difficult aspect of generating custom JavaScript when you&rsquo;re coming from a non-coding background, is that you won&rsquo;t really know if what you&rsquo;re being presented with is the best approach.<\/p>\n\n\n\n<p>Let me give you an example.<\/p>\n\n\n\n<p>I asked Claude to generate me a JavaScript snippet like you saw in the fifth example I covered earlier &ndash; the play-on-click audio text. I worded the request so that it would identically match the real-life snippet that I already generated previously, for my article on <a href=\"https:\/\/themeisle.com\/blog\/gated-content\/\">gated content in WordPress<\/a>.<\/p>\n\n\n\n<p>It fulfilled my request. I tested it, and it worked just fine.<\/p>\n\n\n\n<p>But then I noticed something. The code it gave me was different from the code that&rsquo;s in the actual article. Even though both snippets work, I was curious why they were different. I asked Claude and this was its response:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=130431655  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp\"  decoding=\"async\" width=\"1486\" height=\"1298\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp\" alt=\"Claude-3 explaining the difference between the JavaScript it generated versus the JavaScript I'm currently using.\" class=\"wp-image-105654\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1236\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 1486w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:262\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:894\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:671\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:44\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:275\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 275w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:455\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 455w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:687\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 687w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:169\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 169w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:223\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 223w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:155\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 155w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1236\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 2x\"><noscript><img data-opt-id=130431655  decoding=\"async\" width=\"1486\" height=\"1298\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp\" alt=\"Claude-3 explaining the difference between the JavaScript it generated versus the JavaScript I'm currently using.\" class=\"wp-image-105654\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1236\/h:1080\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 1486w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:262\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:894\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:671\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:44\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:275\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 275w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:455\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 455w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:687\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 687w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:169\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 169w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:223\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 223w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:155\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 155w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1236\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3-explaining-the-difference-between-my-original-JavaScript-snippet-and-the-one-that-it-generated-for-me.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>Even if you don&rsquo;t understand the technicalities behind the explanation, you can understand the rationale. <\/p>\n\n\n\n<p>But there is a deeper lesson to be learned here.<\/p>\n\n\n\n<p>The lesson is that you can always follow-up with Claude (or whatever AI tool you&rsquo;re using) to ask if the custom snippet provided is the only way to execute the JavaScript functionality you&rsquo;re trying to do. <\/p>\n\n\n\n<p>Alternatively, you can also use two AI tools simultaneously to see what each one gives you. If the results are different, then probe each one with the other one&rsquo;s code.<\/p>\n\n\n\n<p>In short, be a detective. Dig down until you find the best possible solution for your use case scenario.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-tip-3-don-t-be-afraid-to-adapt-and-go-with-the-flow\">Tip #3: Don&rsquo;t be afraid to adapt and go with the flow<\/h3>\n\n\n\n<p>Lets say you decide to generate your first custom JavaScript snippet and you end up crafting a really good prompt. The prompt works and you end up with a solid initial snippet. So you decide to use it again. But then something happens &ndash; the response is not what you expected.<\/p>\n\n\n\n<p>Don&rsquo;t panic. This is normal. I&rsquo;ll give you another example. Below is an initial prompt that I gave to Claude when generating one of the five snippets for the previous section of this article. Note Claude&rsquo;s response:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=1499428742  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp\"  decoding=\"async\" width=\"1990\" height=\"1418\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp\" alt=\"Giving Claude-3 an initial prompt to set the proper expectations.\" class=\"wp-image-105649\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1515\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1990w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:214\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:730\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:547\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1516\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1515\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:36\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:337\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 337w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:557\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 557w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:842\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 842w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:208\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 208w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:274\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 274w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:189\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 189w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1515\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 2x\"><noscript><img data-opt-id=1499428742  decoding=\"async\" width=\"1990\" height=\"1418\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp\" alt=\"Giving Claude-3 an initial prompt to set the proper expectations.\" class=\"wp-image-105649\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1515\/h:1080\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1990w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:214\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:730\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:547\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1516\/h:1080\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1515\/h:1080\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:36\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:337\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 337w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:557\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 557w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:842\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 842w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:208\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 208w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:274\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 274w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:189\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 189w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1515\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Giving-Claude-3-an-initial-prompt-to-set-the-proper-expectations.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>I copied and pasted the exact same prompt as a starting point for one of the other five snippet examples, but I got this as a response instead:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=1270786955  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp\"  decoding=\"async\" width=\"1476\" height=\"836\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp\" alt=\"Claude-3's initial response to the same exact first prompt.\" class=\"wp-image-105668\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1476\/h:836\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 1476w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:170\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:580\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:435\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:28\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:424\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 424w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:701\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 701w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1059\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 1059w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:261\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 261w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:344\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 344w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:238\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 238w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1476\/h:836\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 2x\"><noscript><img data-opt-id=1270786955  decoding=\"async\" width=\"1476\" height=\"836\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp\" alt=\"Claude-3's initial response to the same exact first prompt.\" class=\"wp-image-105668\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1476\/h:836\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 1476w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:170\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:580\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:435\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:28\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:424\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 424w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:701\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 701w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1059\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 1059w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:261\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 261w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:344\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 344w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:238\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 238w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1476\/h:836\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/Claude-3s-initial-response-to-first-prompt.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>This time Claude decided to ask me some questions. Regardless of what questions it asks you (or doesn&rsquo;t ask you), you can answer them to the best of your ability. If you know the answers, that&rsquo;s great. If you don&rsquo;t know, it&rsquo;s also not a big deal. You can just be up front about that and have a conversation with Claude. It&rsquo;ll adapt and eventually get to the bottom of what it is you&rsquo;re asking it to do.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-parting-thoughts\">Parting thoughts<\/h2>\n\n\n\n<p>AI tools have changed the internet in many ways in a relatively short period of time. Although I have a lot of reservations about the way they are being misused to pump out low-quality content, on the flip side, they&rsquo;ve made it a lot more accessible for WordPress users without a technical background to add interactive JavaScript elements to their site. While there are many ways to do this, we covered the following five (you can interact with them, just like earlier):<\/p>\n\n\n\n<ul>\n  <li>\n    <span id=\"blurredText1\">Blur text and reveal it upon clicking<\/span>\n    <script>\n      const blurredText1 = document.getElementById('blurredText1');\n      blurredText1.style.filter = 'blur(5px)';\n      blurredText1.style.cursor = 'pointer';\n      blurredText1.addEventListener('click', function() {\n        if (this.style.filter === 'blur(5px)') {\n          this.style.filter = 'none';\n        } else {\n          this.style.filter = 'blur(5px)';\n        }\n      });\n    <\/script>\n  <\/li>\n\n  <li>\n    <span id=\"scrambledPhrase1\">rUbcesanml a eamrblsdc drwo ro swrod<\/span>\n    <script>\n      const scrambledPhrase1 = document.getElementById('scrambledPhrase1');\n      const originalPhrase1 = 'Unscramble a scrambled word or words';\n      scrambledPhrase1.textContent = originalPhrase1.split('').sort(() => Math.random() - 0.5).join('');\n      scrambledPhrase1.style.cursor = 'pointer';\n      scrambledPhrase1.addEventListener('click', function() {\n        this.textContent = originalPhrase1;\n      });\n    <\/script>\n  <\/li>\n\n  <li>\n    <span id=\"dynamicTip\">Tip: JavaScript is fun! (changes every 3 minutes)<\/span>\n    <script>\n      const dynamicTip = document.getElementById('dynamicTip');\n      const tips = [\n        \"Remember, there's often more than one way to write a JavaScript snippet.\",\n        \"Always preview your post before publishing to ensure the JavaScript snippet is working as intended.\",\n        \"If you get stuck, feel free to ask for help or alternative approaches.\",\n        \"Don't be discouraged if your first attempt doesn't work. Coding takes practice and patience.\",\n        \"Have fun with JavaScript! It's a powerful tool for adding interactivity to your WordPress posts.\",\n        \"Start with simple snippets and build up your skills gradually.\",\n        \"Experiment! Try modifying the snippets and see how they behave differently.\",\n        \"Remember, you can always undo changes or revert to a previous version if something goes wrong.\"\n      ];\n      function updateTip() {\n        const currentTipIndex = Math.floor(Math.random() * tips.length);\n        dynamicTip.textContent = \"Tip: \" + tips[currentTipIndex] + \" (changes every 3 minutes)\";\n      }\n      updateTip();\n      setInterval(updateTip, 180000); \/\/ Update every 3 minutes\n    <\/script>\n  <\/li>\n\n  <li>\n    <span id=\"tooltipText\" class=\"tooltip\">Add a tooltip that appears on hover<span class=\"tooltiptext\">When readers hover over specific words or phrases like this one, they&rsquo;ll be shown additional information.<\/span><\/span>\n    <style>\n      .tooltip {\n        position: relative;\n        display: inline-block;\n        cursor: help;\n      }\n      .tooltip .tooltiptext {\n        visibility: hidden;\n        width: 200px;\n        background-color: #555;\n        color: #fff;\n        text-align: left;\n        padding: 10px;\n        border-radius: 6px;\n        position: absolute;\n        z-index: 1;\n        bottom: 150%;\n        left: 50%;\n        margin-left: -100px;\n        opacity: 0;\n        transition: opacity 0.3s;\n      }\n      .tooltip:hover .tooltiptext {\n        visibility: visible;\n        opacity: 1;\n      }\n    <\/style>\n  <\/li>\n\n  <li>\n    <style>\n      .audio-link {\n        font-weight: inherit;\n        color: inherit;\n        text-decoration: none;\n        cursor: pointer;\n      }\n    <\/style>\n    <a href=\"javascript:void(0);\" onclick=\"playMailSound()\" class=\"audio-link\">Add a click-on-play audio snippet to your text<\/a>\n    <audio id=\"mailSound\" src=\"https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/audio-snippet.mp3\"><\/audio>\n    <script>\n      function playMailSound() {\n        var sound = document.getElementById(\"mailSound\");\n        sound.play();\n      }\n    <\/script>\n  <\/li>\n<\/ul>\n\n\n\n<p>For some other ideas, feel free to use either Claude, ChatGPT, or your favorite AI tool to generate your own custom snippets. Be sure to use a clear prompt with specific instructions, don&rsquo;t accept the first answer the tool gives you without asking if there are other options, and finally, adapt to its responses as you would in a conversation with a human.<\/p>\n\n\n\n<p>Have fun!<\/p>\n\n\n\n<p><strong><em>Have you ever incorporated custom JavaScript snippets on your WordPress site? What are some ways you did it? Share in the comments below!<\/em><\/strong><\/p>\n\n\n<style>.ticss-d144f107 strong{font-weight: 700;\n    letter-spacing: -0.2px;\n    line-height: 1.2;\n    display: inline-block;}<\/style>\n\n\n<div class=\"wp-block-columns speed-guide has-white-color has-text-color has-background has-link-color wp-elements-2f81f6c5526477b5b4d52d1ca4513949 is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#4267cf\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-image size-medium\"><img data-opt-id=30701221  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\"  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\"><noscript><img data-opt-id=30701221  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\" sizes=\"(max-width: 300px) 100vw, 300px\"></noscript><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center ticss-58e79f2f\" style=\"font-size:14px\"><strong>FREE GUIDE<\/strong><\/p>\n\n\n\n<p class=\"ticss-d144f107\" style=\"font-size:25px\"><strong>4 Essential Steps to Speed Up Your&nbsp;WordPress Website<\/strong><\/p>\n\n\n\n<p class=\"ticss-3b627beb\">Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%.&nbsp;&#128640;<\/p>\n\n\n<p><\/p><div class=\"frm_forms  with_frm_style frm_style_themeisle\" id=\"frm_form_4_container\" data-token=\"fb1c9a091ebf3b4b7ff9baa1739000ad\">\n<form enctype=\"multipart\/form-data\" method=\"post\" class=\"frm-show-form  frm_pro_form \" id=\"form_site-speed-guide-below-post\" data-token=\"fb1c9a091ebf3b4b7ff9baa1739000ad\">\n<div class=\"frm_form_fields \">\n<fieldset>\n<legend class=\"frm_screen_reader\">Site Speed Guide - Below Post<\/legend>\r\n\r\n<div class=\"frm_fields_container\">\n<input type=\"hidden\" name=\"frm_action\" value=\"create\">\n<input type=\"hidden\" name=\"form_id\" value=\"4\">\n<input type=\"hidden\" name=\"frm_hide_fields_4\" id=\"frm_hide_fields_4\" value=\"\">\n<input type=\"hidden\" name=\"form_key\" value=\"site-speed-guide-below-post\">\n<input type=\"hidden\" name=\"item_meta[0]\" value=\"\">\n<input type=\"hidden\" id=\"frm_submit_entry_4\" name=\"frm_submit_entry_4\" value=\"8b07cbbc4c\"><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/46776\"><input type=\"hidden\" name=\"item_meta[18]\" id=\"field_6px6q2\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/46776\" data-frmval=\"\/blog\/wp-json\/wp\/v2\/posts\/46776\">\n<div id=\"frm_field_15_container\" class=\"frm_form_field form-field  frm_required_field frm_none_container\">\r\n\t<label for=\"field_6px6q\" id=\"field_6px6q_label\" class=\"frm_primary_label\">Your Email\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\">*<\/span>\r\n\t<\/label>\r\n\t<input type=\"email\" id=\"field_6px6q\" name=\"item_meta[15]\" value=\"\" autocomplete=\"email\" placeholder=\"your@email.com\" data-reqmsg=\"Your Email cannot be blank.\" aria-required=\"true\" data-invmsg=\"Your Email is invalid\" aria-invalid=\"false\">\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_17_container\" class=\"frm_form_field form-field  frm_none_container vertical_radio\">\r\n\t<div id=\"field_6px6q3_label\" class=\"frm_primary_label\">Subscribe to our newsletter\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\"><\/span>\r\n\t<\/div>\r\n\t<div class=\"frm_opt_container\" aria-labelledby=\"field_6px6q3_label\" role=\"group\">\t\t<div class=\"frm_checkbox\" id=\"frm_checkbox_17-0\">\t\t\t<label for=\"field_6px6q3-0\">\n\t\t\t<input type=\"checkbox\" name=\"item_meta[17][]\" id=\"field_6px6q3-0\" value=\"true\" data-invmsg=\"Subscribe to our newsletter is invalid\" aria-invalid=\"false\"> Subscribe to our newsletter<\/label><\/div>\n<\/div>\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_14_container\" class=\"frm_form_field form-field \">\r\n\t<div class=\"frm_submit frm_flex\">\r\n<button class=\"frm_button_submit frm_final_submit\" type=\"submit\" formnovalidate=\"formnovalidate\">FREE ACCESS<\/button>\r\n\r\n\r\n\r\n<\/div>\r\n<\/div>\n\t<input type=\"hidden\" name=\"item_key\" value=\"\">\n\t\t\t<div id=\"frm_field_24_container\">\n\t\t\t<label for=\"field_kzzny\">\n\t\t\t\tIf you are human, leave this field blank.\t\t\t<\/label>\n\t\t\t<input id=\"field_kzzny\" type=\"text\" class=\"frm_form_field form-field frm_verify\" name=\"item_meta[24]\" value=\"\">\n\t\t<\/div>\n\t\t<input name=\"frm_state\" type=\"hidden\" value=\"tGKtIG19U6wyYcew8uBttVrMQtVbferFBorfHwBJzvEwF9M0QAXa6pd1+Qu8+H8p\"><\/div>\n<\/fieldset>\n<\/div>\n\n<p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&Delta;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"130\"><script>document.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );<\/script><\/p><\/form>\n<\/div>\n\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"In the past, if you wanted to add custom JavaScript to WordPress posts, you had to either be familiar with code or you had to rely on a plugin. Unfortunately, neither of those solutions were ideal for the vast majority of WordPress users. The first one had a high barrier to entry and was risky if you didn\u2019t know what you were doing, and the second one was very limited in what it allowed you to do.","protected":false},"author":68,"featured_media":105741,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":true,"_modified_date":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[272],"tags":[4065],"hashtags":[],"class_list":["post-46776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials","tag-popular"],"wppr_data":{"cwp_meta_box_check":"No"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.8 (Yoast SEO v26.1.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Custom JavaScript to WordPress (5 Methods + Tips)<\/title>\n<meta name=\"description\" content=\"Adding custom JavaScript to WordPress posts used to be a pain, but nowadays it&#039;s really easy to do. Here&#039;s how I do it, and how you can too.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Custom JavaScript to WordPress (5 Methods + Tips)\" \/>\n<meta property=\"og:description\" content=\"Adding custom JavaScript to WordPress posts used to be a pain, but nowadays it&#039;s really easy to do. Here&#039;s how I do it, and how you can too.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Themeisle Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-21T07:39:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-21T07:39:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2180\" \/>\n\t<meta property=\"og:image:height\" content=\"1090\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Martin Dubovic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Martin Dubovic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\"},\"author\":{\"name\":\"Martin Dubovic\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/person\/9aa19aa295f0e6aa2d6c0b4079a1a660\"},\"headline\":\"How to Add Custom JavaScript to WordPress (5 Methods + Tips)\",\"datePublished\":\"2024-06-21T07:39:46+00:00\",\"dateModified\":\"2024-06-21T07:39:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\"},\"wordCount\":2927,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png\",\"keywords\":[\"Popular\"],\"articleSection\":[\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\",\"url\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\",\"name\":\"How to Add Custom JavaScript to WordPress (5 Methods + Tips)\",\"isPartOf\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png\",\"datePublished\":\"2024-06-21T07:39:46+00:00\",\"dateModified\":\"2024-06-21T07:39:53+00:00\",\"description\":\"Adding custom JavaScript to WordPress posts used to be a pain, but nowadays it\\\\'s really easy to do. Here\\\\'s how I do it, and how you can too.\",\"breadcrumb\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage\",\"url\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png\",\"contentUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png\",\"width\":2180,\"height\":1090,\"caption\":\"WordPress custom javascript.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/themeisle.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Custom JavaScript to WordPress (5 Methods + Tips)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themeisle.com\/blog\/#website\",\"url\":\"https:\/\/themeisle.com\/blog\/\",\"name\":\"Themeisle Blog\",\"description\":\"WordPress Tutorials and Reviews for Beginners and Advanced\",\"publisher\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themeisle.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\",\"name\":\"VertiStudio\",\"alternateName\":\"Vertigo Studio SA\",\"url\":\"https:\/\/themeisle.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png\",\"contentUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png\",\"width\":718,\"height\":156,\"caption\":\"VertiStudio\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/person\/9aa19aa295f0e6aa2d6c0b4079a1a660\",\"name\":\"Martin Dubovic\",\"description\":\"Martin wrote his first e-book and built his first website using Weebly to market it and sell it in 2013. After making his first sale, he knew he was onto something. A few years later he made the switch to WordPress and from then on he became a full on WordPress addict. When he\\\\'s not WordPress-ing, you can find him doing pullups, handstands, drinking matcha, and of course, writing.\",\"url\":\"https:\/\/themeisle.com\/blog\/author\/martin-d\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Custom JavaScript to WordPress (5 Methods + Tips)","description":"Adding custom JavaScript to WordPress posts used to be a pain, but nowadays it&#039;s really easy to do. Here&#039;s how I do it, and how you can too.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Custom JavaScript to WordPress (5 Methods + Tips)","og_description":"Adding custom JavaScript to WordPress posts used to be a pain, but nowadays it&#039;s really easy to do. Here&#039;s how I do it, and how you can too.","og_url":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/","og_site_name":"Themeisle Blog","article_published_time":"2024-06-21T07:39:46+00:00","article_modified_time":"2024-06-21T07:39:53+00:00","og_image":[{"width":2180,"height":1090,"url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png","type":"image\/png"}],"author":"Martin Dubovic","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Martin Dubovic","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#article","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/"},"author":{"name":"Martin Dubovic","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/9aa19aa295f0e6aa2d6c0b4079a1a660"},"headline":"How to Add Custom JavaScript to WordPress (5 Methods + Tips)","datePublished":"2024-06-21T07:39:46+00:00","dateModified":"2024-06-21T07:39:53+00:00","mainEntityOfPage":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/"},"wordCount":2927,"commentCount":0,"publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"image":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png","keywords":["Popular"],"articleSection":["WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/","url":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/","name":"How to Add Custom JavaScript to WordPress (5 Methods + Tips)","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage"},"image":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png","datePublished":"2024-06-21T07:39:46+00:00","dateModified":"2024-06-21T07:39:53+00:00","description":"Adding custom JavaScript to WordPress posts used to be a pain, but nowadays it\\'s really easy to do. Here\\'s how I do it, and how you can too.","breadcrumb":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#primaryimage","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/06\/WordPress-custom-javascript.png","width":2180,"height":1090,"caption":"WordPress custom javascript."},{"@type":"BreadcrumbList","@id":"https:\/\/themeisle.com\/blog\/wordpress-custom-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/themeisle.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Custom JavaScript to WordPress (5 Methods + Tips)"}]},{"@type":"WebSite","@id":"https:\/\/themeisle.com\/blog\/#website","url":"https:\/\/themeisle.com\/blog\/","name":"Themeisle Blog","description":"WordPress Tutorials and Reviews for Beginners and Advanced","publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themeisle.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/themeisle.com\/blog\/#organization","name":"VertiStudio","alternateName":"Vertigo Studio SA","url":"https:\/\/themeisle.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","width":718,"height":156,"caption":"VertiStudio"},"image":{"@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/9aa19aa295f0e6aa2d6c0b4079a1a660","name":"Martin Dubovic","description":"Martin wrote his first e-book and built his first website using Weebly to market it and sell it in 2013. After making his first sale, he knew he was onto something. A few years later he made the switch to WordPress and from then on he became a full on WordPress addict. When he\\'s not WordPress-ing, you can find him doing pullups, handstands, drinking matcha, and of course, writing.","url":"https:\/\/themeisle.com\/blog\/author\/martin-d\/"}]}},"_links":{"self":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/46776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/comments?post=46776"}],"version-history":[{"count":39,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/46776\/revisions"}],"predecessor-version":[{"id":109285,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/46776\/revisions\/109285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media\/105741"}],"wp:attachment":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media?parent=46776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/categories?post=46776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/tags?post=46776"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/hashtags?post=46776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}