EasyCoder Workshop

The Story of this project

Every website starts with a story... More

This workshop will show you how to create an interactive web page entirely in the WordPress page editor, without having to know anything about PHP or JavaScript and without the need to access any files on the server.

I assume you already have a blank Workshop page and a browser tab showing the page editor. Make sure the editor is set to Text mode; that's one of the tabs at the top right of the editing panel. This is so you can edit HTML tags without the editor thinking they are normal text. You'll spend much of your time editing in Text mode.

To get started, type the following text (or copy and and paste it) into your editor:

<h1 style="text-align:center">My first EasyCoder page</h1>

Now click the blue Update button, then when the page has finished saving click View Page to see the result.

Click Next to go to the next step.

Now we have something visible on our page, so let's add some more HTML. This will be a single div element containing the word "epigram" (you'll see why later). Here's the HTML; as before, copy and paste it into your editor.

<div>epigram</div>

When you view the page you'll see the text is placed hard up against the left-hand edge of the page. This is rather ugly and it's where CSS comes to the rescue. We'll wrap another div around the one we already have and add some styling. Copy and paste the following to replace the previous line:

<div id="ec-box">
<div id="ec-epigram">epigram</div>
</div>

Nothing will look any different yet when you view the page; for that we need some CSS. At the bottom of the editor page is a box titled Insert Script to <head>, which is provided by a very useful plugin called Header and Footer Scripts. Copy and paste the following in there:

<style>
div#ec-box {
  margin:0 5em;
}
div#ec-epigram {
  padding: 1em;
  border: 1px solid gray;
}
</style>

Click Update then View Page and the text is now positioned away from the edge, in a box with extra padding around the text.

You may have noticed that I've added a couple of id="something" to the HTML. These ids serve 2 purposes. One is to allow the CSS to identify the right element to apply styles to. The other is for EasyCoder, as you'll you'll see shortly.

The last part of the HTML is a row of buttons. When each one is clicked you'll see a different epigram in the box. Nothing very fancy there, but I'm going to use a simple CSS trick to make the buttons appear as solid color circles. The code for the row of buttons looks like this:

<div id="ec-buttons"><div id="ec-red"></div><div id="ec-green"></div><div id="ec-blue"></div><div id="ec-yellow"></div></div>

Add this to your page just after the epigram line, above the final </div>. When you view it you won't see the buttons at all because they have neither content nor style, but if you look at the page source (Control-U on most browsers) you'll see them.

To make them appear as circles, here's the CSS, to be added to what you already have in the box at the bottom of the editor (make sure you put it between the <style>...</style> tags). It also centers the row of buttons and provides their background colors:

div#ec-buttons {
  text-align:center;
}
div#ec-buttons div {
  display:inline-block;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid gray;
  margin:20px 20px 0 20px;
}
div#ec-red {
  background:red;
}
div#ec-green {
  background:green;
}
div#ec-blue {
  background:blue;
}
div#ec-yellow {
  background:yellow;
}

Now we'll add the epigrams. Here's a section to add at the bottom of your file. This is preformatted data, which is a convenient place to put data and other text that's not intended for display.

<pre id="ec-epigrams">[
  "It takes 20 years to become an overnight success",
  "Time flies like an arrow; fruit flies like a banana",
  "I'd rather have a bottle in front of me than a frontal lobotomy",
  "It is a much cleverer thing to talk nonsense than to listen to it"
]</pre>

As before, this item has an id and we'll be using it later. I'll just comment for now that WordPress and its themes use a lot of ids, so to make sure your own are unique it's best to put a namespace prefix on each one. Here we're using ec- but you can choose whatever you like.

The epigram block is JSON-formatted data. JSON stands for JavaScript Object Notation; its a way of representing textual data so that it's easy to manage with JavaScript and easy to pass around. In this case we just have an array of 4 elements, each a string of text.

When you view the page you'll see the data block below the buttons, which is obviously not what's wanted in the final page. You can add a style to the pre element to make it invisible, but then you won't be able to see and edit it in the WordPress editor unless you go into Text mode. You'll probably do that eventually but for now we'll get the script to make it invisible.

Click Next to start dealing with the script.

EasyCoder scripts, like the data we already added, live in preformatted text blocks. Here's the one you need for your page, with no script commands in it:

<pre id="easycoder-script">
</pre>

The element has a special name, easycoder-script. When the EasyCoder plugin is installed on your site, every time you load a page it looks for this pre section. If it's there it's assumed to contain a script, so this is compiled and run. Compilation is very quick, usually only tens of milliseconds, and the result is another form of code; one that can be run very quickly. So the overall performance is good, usually indistinguishable from the same functionality written directly in JavaScript.

Add the block to your page. It doesn't matter if it goes at the top, the bottom or somewhere in between. I often put it at the top while I'm developing the code as it's then there as soon as I enter the editor.

Now click Next.

The first thing to do is to get access to the epigram data. For this we need a variable - a place to store something - that we can associate with the item in the page identified by its id. So here's some code to put inside the EasyCoder pre block:

  pre EpigramData

  attach EpigramData to `ec-epigrams`

The first line defines the variable EpigramData. Variables all start with capital letters, just as names do in English. The variable will be used to access data in a preformatted block, so it has a type of pre. Different types of variable have different attributes and behaviors, somewhat as they do in human languages. For example, you might construct English sentences in which you inflate a balloon or feed your dog, both of which make sense. If you said you would inflate the dog and feed a balloon they would still be valid English but would no longer make sense. EasyCoder is fussier; if something makes no sense you can't say it. End of.

The id of the item we're attaching to is enclosed in backticks. Other languages use single or double quotes to signify constant text, but these cause problems in the WordPress editor, so instead EasyCoder uses backticks, which are essentially unused characters, allowing text strings to freely contain quotes of all kinds.

When the attach command runs, the variable sets itself up to manage the element, in this case the one containing the epigrams, allowing us to do things with the element.

I said earlier that we'd hide the epigram data, and now's the time to do it. Here's a command to add after the attach:

  set style `display` of EpigramData to `none`

This command is doing something you might see in your CSS; it's making a given element invisible. The set command is a key feature of EasyCoder and it's used all over the place to set up the styles, attributes and content of a variety of things. You can use it to set any CSS attribute, wherever it is and whenever you need it.

So far we have a variable attached to the HTML pre element containing the epigrams. Now we want to get at this data. To do so we need another variable and another command. Replace the script lines you have so far with these:

  pre EpigramData
  variable Epigrams

  attach EpigramData to `ec-epigrams`
  set style `display` of EpigramData to `none`
  put the content of EpigramData into Epigrams

The second variable is a general-purpose one used to store textual or numeric data. In this case the data we want is inside EpigramData, and the third command extracts it and puts it into our variable. It's actually plain text structured as valid JSON data, exactly as as it was when you added it to your page.

The next thing to do is set up the 4 buttons. When clicked, each one will cause one of the epigrams to be copied to the box on the screen. The only reason the word epigram is there to start with is that without it the box would collapse until you put one of the epigrams into it. You could of course prevent that happening by giving the box a height attribute instead of preloading it with text.

Now we need a variable for each of the buttons:

  button RedButton
  button GreenButton
  button BlueButton
  button YellowButton
  ...
  attach RedButton to `ec-red`
  attach GreenButton to `ec-green`
  attach BlueButton to `ec-blue`
  attach YellowButton to `ec-yellow`

It's normal - but not compulsory - to put variable declarations at the top of the script; they can be in any order. The only stipulation is that variables must be declared somewhere above any code that references them.

At some point we will need a variable to attach to the epigram box. So add these 2 lines somewhere appropriate (one with the variables, the other with the commands):

  div Epigram
  ...
  attach Epigram to `ec-epigram`

To handle clicks on a button we need to write some code known as a handler. Here's the handler for the Red button:

  on click RedButton set the content of Epigram to element 0 of Epigrams

When the command is run, nothing visible happens, but the system now knows what to do when the user clicks the red button, being to take the first item from the JSON data and put it into the box where it will be seen.

Try to do the same for the other 3 buttons and test the results, before going to the next page.

If all is well your page should now show a different epigram for each button. Your script may not be exactly like mine, but as long as it works that doesn't matter. Here's mine, for comparison:

  pre EpigramData
  variable Epigrams
  div Epigram
  button RedButton
  button GreenButton
  button BlueButton
  button YellowButton

  attach EpigramData to `ec-epigrams`
  set style `display` of EpigramData to `none`
  put the content of EpigramData into Epigrams

  attach Epigram to `ec-epigram`

  attach RedButton to `ec-red`
  attach GreenButton to `ec-green`
  attach BlueButton to `ec-blue`
  attach YellowButton to `ec-yellow`

  on click RedButton set the content of Epigram to element 0 of Epigrams
  on click GreenButton set the content of Epigram to element 1 of Epigrams
  on click BlueButton set the content of Epigram to element 2 of Epigrams
  on click YellowButton set the content of Epigram to element 3 of Epigrams

That's the end of the workshop, so if you would like to know more, where do you go from here? This example has barely scratched the surface of what EasyCoder can do; there's a lot more waiting to be discovered.

Over on the left you'll see links to our documentation, examples and tutorials, a sizeable resource that should keep you busy for some time. If at any time you need to ask questions, go to our About page where you'll find contact details. We prefer Slack to email as it offers the chance for other users to contribute to discussions, but initially we'll be happy to hear from you by any available means.

Happy coding!

Further reading

Actually there is just one more page. It doesn't affect what you've been doing; it just presents an alternative, all-code approach that achieves exactly the same result.

If you're interested, there's more than one way to achieve the same result. The example we've been using is based on HTML templates, using script to add content, but you can in fact do the entire job using just a script. Both methods are supported by EasyCoder, so you can use whichever you like.

You need a single HTML div; everything else is built on the fly using script code. Here's the script; if you want to run it then you can add a new page to your website and paste this code into it. As you can see from this example, an all-script approach will usually make the code larger than when templates are used, but there are times when doing it all with script makes more sense. On the plus side, it keeps everything to do with an action or a feature in one place rather than requiring you to look at script, HTML and CSS in 3 different places.

Performance is also an issue. Nearly half your users will click away if they have to wait more than about 3 seconds for your page to show them something. The optimal approach is to put just enough into your HTML to get some content onto the screen before the user loses patience. For the quickest load time, do this initial content with just text and CSS and make it interesting enough to hold their attention while you go and fetch images, scripts and data. EasyCoder lets you do these things on the fly, but that's beyond the scope of this simple starter.

<div id="ec-content"></div>

<pre id="easycoder-script">
  div Content
  div Epigram
  div Box
  div Buttons
  div Red
  div Green
  div Blue
  div Yellow
  h1 Title
  pre EpigramData
  variable Epigrams

  attach EpigramData to `ec-epigrams`
  put the content of EpigramData into Epigrams

  attach Content to `ec-content`

  create Title in Content
  set the style of Title to `text-align:center`
  set the content of Title to `My first EasyCoder page`

  create Box in Content
  set the style of Box to `margin:0 5em`

    create Epigram in Box
    set the style of Epigram to `padding:1em;border:1px solid gray`
    set the content of Epigram to `epigram`

  create Buttons in Content
  set the style of Buttons to `text-align:center`

    create Red in Buttons
    set the style of Red to
      `display:inline-block;width:50px;height:50px;background:red;`
      cat `border-radius:50%;border:1px solid gray;margin:20px 20px 0 20px;`
    on click Red set the content of Epigram to element 0 of Epigrams

    create Green in Buttons
    set the style of Green to
      `display:inline-block;width:50px;height:50px;background:green;`
      cat `border-radius:50%;border:1px solid gray;margin:20px 20px 0 20px;`
    on click Green set the content of Epigram to element 1 of Epigrams

    create Blue in Buttons
    set the style of Blue to
      `display:inline-block;width:50px;height:50px;background:blue;`
      cat `border-radius:50%;border:1px solid gray;margin:20px 20px 0 20px;`
    on click Blue set the content of Epigram to element 2 of Epigrams

    create Yellow in Buttons
    set the style of Yellow to
      `display:inline-block;width:50px;height:50px;background:yellow;`
      cat `border-radius:50%;border:1px solid gray;margin:20px 20px 0 20px;`
    on click Yellow set the content of Epigram to element 3 of Epigrams

</pre>

<pre id="ec-epigrams" style="display: none;">
[
  "It takes 20 years to become an overnight success",
  "Time flies like an arrow; fruit flies like a banana",
  "I'd rather have a bottle in front of me than a frontal lobotomy",
  "It is a much cleverer thing to talk nonsense than to listen to it"
]
</pre>
!
  div Text
  div MoreText
  div LessText
  a More
  a Less
  button Previous
  button Next
  variable Step
  variable NSteps

  put 12 into NSteps
  put 1 into Step
  while Step is less than NSteps
  begin
    attach Text to `ec-step` cat Step
    set style `display` of Text to `none`
    add 1 to Step
  end

  put 0 into Step
  attach Previous to `ec-previous`
  attach Next to `ec-next`
  disable Previous
  set style `color` of Previous to `Gray`
  on click Previous
  begin
    if Step is greater than 0
    begin
      enable Next
      set style `color` of Next to ``
      attach Text to `ec-step` cat Step
      set style `display` of Text to `none`
      take 1 from Step
      attach Text to `ec-step` cat Step
      set style `display` of Text to `block`
      if Step is 0
      begin
        disable Previous
        set style `color` of Previous to `Gray`
      end
    end
  end
  on click Next
  begin
    add 1 to Step
    if Step is less than NSteps
    begin
      enable Previous
      set style `color` of Previous to ``
      take 1 from Step
      attach Text to `ec-step` cat Step
      set style `display` of Text to `none`
      add 1 to Step
      attach Text to `ec-step` cat Step
      set style `display` of Text to `block`
      add 1 to Step
      if Step is NSteps
      begin
        disable Next
        set style `color` of Next to `Gray`
      end
    end
    take 1 from Step
  end

  attach MoreText to `ec-story-more-text`
  attach LessText to `ec-story-less-text`
  attach More to `ec-story-more`
  attach Less to `ec-story-less`

ShowLess:
  set style `display` of LessText to `block`
  set style `display` of MoreText to `none`
  on click More go to ShowMore
  stop

ShowMore:
  set style `display` of MoreText to `block`
  set style `display` of LessText to `none`
  on click Less go to ShowLess
  stop