For absolute beginners

So you've built yourself a WordPress website and you'd like to add some interactivity. For this you need a program - otherwise known as a script - and some element on your page to make interactive.

Let's start with something super simple. Create a new Page or Post, go to the editor, select Text mode (not Visual) and add this line of code:

<div id="my-first">This is my interactive text</div>

Update then View your Page and check the text appears.

We're going to write a script that does something when you click the text.

You'll need to get EasyCoder from the WordPress plugins library. Installing plugins is very easy, but if you've never added one before and need help there are plenty of step by step guides. You'll need to go to the plugins page, click Add New then search for EasyCoder. Once you've installed the plugin and activated it, return here and continue.

Now head back to the editor and add these lines:

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

This is a special piece of HTML that EasyCoder looks for when the page starts up. You'll never see the <pre> block itself on your page, but anything inside it is assumed to be the script you want to run. So let's add some code between the two lines above:

<pre id="easycoder-script">
div MyText
attach MyText to `my-first`
</pre>

Here we define a "variable" called MyText and attach it to the <div> we added at the start. Variables are named items that hold values of some kind, so when you use the variable you are accessing the data it contains - or in this case the <div> it's attached to.

By "attach", what I mean is the variable MyText looks for the screen element having the id my-first. Now, anything we do with MyText will operate directly on that screen element.

So what's the simplest interactivity we can have? How about popping up a message when you click the text? After the "attach" line, add

on click MyText alert `Click!`

Click the blue Update button then view the page. Click the text and you should get the popup alert. Voila! Your EasyCoder script is running!

Now you've got this far, the Examples and Tutorials pages might start to make sense. Also try our Workshop.