{"id":1244,"date":"2022-08-25T21:20:31","date_gmt":"2022-08-25T20:20:31","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1244"},"modified":"2022-10-24T20:04:26","modified_gmt":"2022-10-24T19:04:26","slug":"custom-widgets-for-your-wordpress-site","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/en\/1244\/custom-widgets-for-your-wordpress-site\/","title":{"rendered":"Custom Widgets for your WordPress site"},"content":{"rendered":"\n<p>To avoid the use of unnecessary external plugins, here you&#8217;ll see how to make your own widgets for your WordPress site or to insertthem in any post.<\/p>\n\n\n\n<p>All you need to know is some HTML and javascript. Let&#8217;s get down to it!<\/p>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Content<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\nconsole.log(text);\n}\n}\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"custom-html\">Custom HTML<\/h2>\n\n\n\n<p>If you've seen any other post in this blog, you've seen the table of contents above, or the cookie message to the right.<\/p>\n\n\n\n<p>Both are dynamic elements programmed in HTML and javascript which you can insert anywhere in your WordPress site using a \"Custom HTML\" block.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"653\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1.png\" alt=\"\" class=\"wp-image-1236\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1.png 748w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1-300x262.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom1-676x590.png 676w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Just insert this type of block and inside you can introduce a customizable HTML and program with javascript. Let's see a couple of examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cookie-notice\">Cookie notice<\/h2>\n\n\n\n<p>The sidebar in this blog shows a cookie consent message with a hyperlink to the privacy policy. <\/p>\n\n\n\n<p>You might have noticed that the content changes automatically when you switch languages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom2.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"233\" height=\"103\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom2.png\" alt=\"\" class=\"wp-image-1237\"\/><\/a><figcaption>Right click to inspect the website structure.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>For it to work properly, imagine that the <strong>Custom HTML<\/strong> block is an <code>iframe<\/code> or some kind on sub-site inside this website.<\/p>\n\n\n\n<p>You can edit the content of the <strong>Custom HTML<\/strong> as if it was an external site, and freely add anything you want.<\/p>\n\n\n\n<p>For the cookie notice I just want a line of text, and I assign \"cookie-txt\" as an <code>id<\/code>. It is good to add the HTML structure, but you can avoid most of it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;p id=\"cookie-txt\"&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Now I add a javascript function which reads the site language and fills this line according to it.<\/p>\n\n\n\n<p>You can do different tests using the inspector and console of your browser, right-clicking in the webpage.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"325\" height=\"146\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3.png\" alt=\"\" class=\"wp-image-1238\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3.png 325w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom3-300x135.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>A fast way to get the language is reading the <code>lang<\/code> property of the <code>&lt;html&gt;<\/code> element of the site.<\/p>\n\n\n\n<p>The rest is a condition:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If it detects \"es-ES\", message is defined in Spanish.<\/li><li>If it detects \"en-GB\", message is defined in English.<\/li><\/ul>\n\n\n\n<p>The content of the message is defined in the <code>innerHTML<\/code> property of the <code>&lt;p&gt;<\/code> element, so it can be formatted with HTML tags adding a hyperlink or bold text.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nvar lang=document.getElementsByTagName(\"html\")&#91;0].lang;\nif(lang==\"es-ES\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"\ud83c\udf6a &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=1225' target='_blank'&gt;Pol\u00edtica&lt;\/a&gt; &lt;b&gt;anti-Cookies&lt;\/b&gt; aceptada al navegar.&lt;\/p&gt;\";\n}else if(lang==\"en-GB\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"&lt;b&gt;\ud83c\udf6a anti-Cookies&lt;\/b&gt; &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=3' target='_blank'&gt;policy&lt;\/a&gt; accepted while browsing.\";\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>It would look like this:<\/p>\n\n\n\n<html>\n<body>\n<p id=\"cookie-txt\"><\/p>\n<\/body>\n<script>\nvar lang=document.getElementsByTagName(\"html\")[0].lang;\nif(lang==\"es-ES\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"\ud83c\udf6a <a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=1225' target='_blank'>Pol\u00edtica<\/a> <b>anti-Cookies<\/b> aceptada al navegar.<\/p>\";\n}else if(lang==\"en-GB\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"<b>\ud83c\udf6a anti-Cookies<\/b> <a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=3' target='_blank'>policy<\/a> accepted while browsing.\";\n}\n<\/script>\n<\/html>\n\n\n\n<p>The full code of the <strong>Custom HTML<\/strong> block showing the cookie notice is the following: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;body&gt;\n&lt;p id=\"cookie-txt\"&gt;&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;script&gt;\nvar lang=document.getElementsByTagName(\"html\")&#91;0].lang;\nif(lang==\"es-ES\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"\ud83c\udf6a &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=1225' target='_blank'&gt;Pol\u00edtica&lt;\/a&gt; &lt;b&gt;anti-Cookies&lt;\/b&gt; aceptada al navegar.&lt;\/p&gt;\";\n}else if(lang==\"en-GB\"){\ndocument.getElementById(\"cookie-txt\").innerHTML=\"&lt;b&gt;\ud83c\udf6a anti-Cookies&lt;\/b&gt; &lt;a href='https:\/\/theroamingworkshop.cloud\/b\/?page_id=3' target='_blank'&gt;policy&lt;\/a&gt; accepted while browsing.\";\n}\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>In this case, the block is inserted as an element in the sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"404\" height=\"563\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4.png\" alt=\"\" class=\"wp-image-1239\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4.png 404w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom4-215x300.png 215w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"table-of-content\">Table of contents<\/h2>\n\n\n\n<p>The table of contents that appears in every post is done in the same way.<\/p>\n\n\n\n<p>Firstly, I will define the table giving it some format and leaving the content empty so it's filled later by a function.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\"&gt;\n&lt;p style=\"font-weight:bold;\"&gt;Contenido&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>In this case, I will search for \"headings\" or titles of each section, specifically for <code>&lt;h2&gt;<\/code> tags. For this reason, when writing every post I must always use this type of heading (which is default) if I want it to appear in the table.<\/p>\n\n\n\n<p>Additionally, I define the <strong>html Anchor<\/strong> property, which will assign and \"id\" that will allow to create a hyperlink that takes us to that heading.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"623\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5.png\" alt=\"\" class=\"wp-image-1240\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5.png 299w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom5-144x300.png 144w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Then a function will do the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Search for &lt;h2&gt; tags one by one.<br><code>for (let i=0;i &lt; window.document.getElementsByTagName(\"h2\").length; i++) { element = window.document.getElementsByTagName(\"h2\")[i];<\/code><br><code>...<\/code><br><\/li><li>Get the text inside.<br><code>text = \"\u25b9 \"+element.innerHTML;<\/code><br><\/li><li>Create a new hyperlink (&lt;a&gt;) element which will go in the table of contents, with the previous text.<br><code>var newelement = document.createElement(\"a\"); newelement.innerHTML=text;<\/code><br><\/li><li>Get the post \"id\" and heading \"id\" to create a hyperlink to this heading.<br><code>var postid = window.document.getElementsByTagName(\"article\")[0].id;<\/code><br>v<code>ar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;<\/code><br><\/li><li>Insert it as a new child in the table of contents.<br><code>newelement.setAttribute(\"href\", url); newelement.appendChild(document.createElement(\"br\")); window.document.getElementById(\"menu\").appendChild(newelement);<\/code><br><\/li><\/ol>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Adding <b>#section-id<\/b> at the end of any URL it will take you to such section.<\/i><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\"><li>Finally, some pages take a bit of time to load and the headings wont be available, so I'll add the previous code inside a function and call it using a timeout.<br><code>window.setTimeout(fillmenu,500);<\/code><\/li><\/ol>\n\n\n\n<p>The full code for the block will be like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\"&gt;\n&lt;p style=\"font-weight:bold;\"&gt;Contenido&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i&lt;window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")&#91;i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")&#91;0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nwindow.setTimeout(fillmenu,500);\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Add this HTML block to your <b>reusables<\/b> and you can insert it in any other post.<\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bloque-TIP\">TIP! block<\/h2>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>This <b>TIP!<\/b> block is another example. You'll have to convert it back to a regular block if you want to change the content <b>only<\/b> in this inserted block.<\/i><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6.png\" alt=\"\" class=\"wp-image-1241\" width=\"551\" height=\"392\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6.png 734w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6-300x213.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/custom6-676x481.png 676w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Here's the code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"&gt;&lt;i&gt;&lt;b&gt;TIP! &lt;\/b&gt;This &lt;b&gt;TIP!&lt;\/b&gt; block is another example. You'll have to convert it back to a regular block if you want to change the content &lt;b&gt;only&lt;\/b&gt; in this inserted block.&lt;\/i&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>As you can see, there are unlimited possibilities and it's up to your imagination.<\/p>\n\n\n\n<p>Be creative and design your own widgets, they will add value to your blog!<\/p>\n\n\n\n<p>As always, doubts or comments on Twitter \ud83d\udc26 See you soon!<\/p>\n\n\n\n<p>(the Twitter block is also a reusable  \ud83d\udc40 )<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To avoid the use of unnecessary external plugins, here you&#8217;ll see how to make your own widgets for your WordPress site or to insertthem in any post. All you need to know is some HTML and javascript. Let&#8217;s get down to it! Custom HTML If you&#8217;ve seen any other post in this blog, you&#8217;ve seen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1250,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"class_list":["post-1244","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-weben","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=1244"}],"version-history":[{"count":10,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1244\/revisions"}],"predecessor-version":[{"id":1589,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1244\/revisions\/1589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1250"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}