popup

Add Language Editor to WP

This is an more advanced version of [Create Popup window].

The idea is to embed programming Language Console/IDE into a WordPress page with ability to pop-up the IDE out of the page. We will do that with the wonderful OneCompiler IDE, which supports myriad of languages.

We have two problems to solve :

  • Create themeless :\ Page to host the pop-up window
  • Ability to host all Languages in a single Page i.e. parameterized Page, w/o using PHP

Let start with the themless post.

Clean post

  • First install the “Blank Slate” plugin.
  • Create New Page
    • Leave the Title empty
    • Set in Page property Template=”Blank Slate”
    • Add the pop up IDE embed code (check below the numbered list)
    • Because there is no Title, we need to set a Permalink so that it is human readable, let say : your-site/lang-console
    • Publish the page
<script type="text/javascript">   
   function console_url() {
      //extract language from QS
      let params = (new URL(document.location)).searchParams;
      let lang = params.get("lang")
      lang = lang ? lang : 'python';//default
      return "https://onecompiler.com/embed/" + lang + "?hideStdin=true&hideTitle=true";
   }
</script>
<iframe frameborder=0 marginwidth=0 marginheight=0 height="450px" 
src='' onload='this.onload=null;this.src = console_url();' width='100%'></iframe>

This need explanation ! The pop up page uses the query string ?lang=ABC to decide which Language IDE to render.
The problem is we don’t have access to PHP, so we will trick the IFRAME (which renders the IDE).


We will leave the .src attribute empty and in .onload will call a function console_url() that returns the correct OneCompiler IDE url which we dynamically apply to .src.

The reason we have this.onload=null is to prevent the recursive loop of loading .src triggering onload, which tries to load, which triggers onload …

The goal of console_url() is to extract the parameter lang from the query string and build the correct IDE url.

Now that we got the Pop-up let’s embed the IDE in the …

Main page

Here we have a IFRAME for the embedded IDE, this time without using tricks and second a link to call the popup() function.

The function opens the Popup-page we just created in a new window. After that it removes the link and the IDE from the main page. Here goes :

<script type="text/javascript">
   function popup(lang){
      let url = 'https://myriad.website/lang-console/?lang=' + lang
      window.open(url,'win','width=640,height=350,menubar=0,titlebar=0,status=0,toolbar=0');
      document.getElementById('console').style.display='none';
      document.getElementById('console_link').style.display='none';
   }
</script>
<a id="console_link" href="" onclick="popup('python')" target="_blank" rel="noopener">
   <b>Click to popup the console, if you want to move it around !</b></a>

<iframe id=console frameborder="0" marginwidth="0" marginheight="0" height="300px" src="https://onecompiler.com/embed/python?hideStdin=true&hideTitle=true" width="100%"></iframe>

So finally you can embed different Language IDE’s on different pages by using only one Popup page, you just need to change popup(‘python’) onclick call with whatever you need.

The other important thing, we learned how to use query string to make decisions w/o using PHP. Wont tell you now, but you can use similar approach to render conditionally based on which page you are. There is no plugin for that 😉

Here is it in action : [Learn Python]

2021-11-09 by javascript wordpress 0

Create Popup window

Here is how to create a POPUP window in WordPress with a content of your choosing.
For the popup we need a Page w/o a theme, so let’s do this :

  • Install the “Blank Slate” plugin.
  • Create New Page
    • Leave the Title empty
    • Set in Page property Template=”Blank Slate”
    • Add whatever content you want
    • Because there is no Title, we need set a Permalink so that it is human readable, let say : your-site/blah
    • Publish the page
  • Go to the page you want to have the popup window show up when you click a link
  • Add the following code :
<a href='' onclick='window.open("https://your-site/blah/","window-name","width=400,height=320");' target='blank'>Popup window</a>

If you have an original element to hide use this, so that it looks like the element pop up from the page :

<a href='' onclick='window.open("https://your-site/blah/","window-name","width=400,height=320");document.getElementById("orig-blah").style.display="none";' target='blank'>Popup window</a>

Here is it in action : [Learn Python]

2021-11-02 by wordpress 2

For gifts and updates