Authoring on this Site

Our course website is implemented as a WordPress blog, customized with a variety of plugins. For general information about editing WordPress pages, see this resource, or this one. To get started publishing, log in here.

Note, we’ve discovered that some students have problems logging in to WordPress from Windows using Chrome. If that happens to you, try a different browser (such as “Edge”).

Student Projects will be submitted in the form of WordPress Posts (not Pages!), that you edit and publish with the WordPress editor after logging in.

Below, you can find additional information and links describing how to:

  • Embed links to other web pages
  • Upload and embed images
  • Use standard “shortcodes” to embed external media, such as YouTube videos
  • Embed interactive media formats, in particular: p5.js objects
  • Embed syntax-colored code in your posts

Embedding links to other web pages

To create a link like this, in Visual mode, select the text you want to turn into a link. Then choose the link icon at the top of the editing area (it looks like chain links, the pop-up description says “Insert/edit link” when you hover over the right icon). A small text entry box will appear with the instructions “Paste URL or type to search.” Type or paste your URL here. (You can link to other pages on this site most easily by typing some search terms to get a pop-up list of pages that you can select to link to.) Finally, click the “Apply” icon or just hit the Enter key.

If you click the three vertical dots, you can enter HTML directly,
e.g. <a href="">link like this</a>
is the code used to create the link in the previous paragraph.

Embedding uploaded images.

Customary varieties of web-ready images (.jpg, .gif, .png) can be uploaded to our site using the + button (top left of the WordPress editor or floating below the text you’ve already entered. Under Common Elements, select Image and then Upload. Select the file and it will upload into your post with a space for a caption. You can also add the file to your Media Library (so you can post it elsewhere) but you must make sure you add the image to your post once you upload it to the Media Library or it will just languish in a directory of uploaded images.

Note that there are restrictions on the maximum file size (10MB) you may upload. You are advised to save your file with a smaller file size and resolution, using Photoshop’s “Save for Web & Devices” feature if it is too big.

Embedding external media in your posts.

Some assignments will require you to embed a variety of external media objects into a WordPress post. For example, you may need to embed a YouTube video documenting one of your projects, or a project by someone else. Generally these services provide tools for embedding their media. For example:

In both cases, you go to the video you want to add, and click the “Share” button or icon. Then you use the Embed feature to give you HTML text to copy and paste into your post (while in HTML mode).

Embedding p5.js Objects.

Unless otherwise noted, programming projects will be developed in p5.js, a JavaScript client-side library for creating graphic and interactive experiences, using canvas and HTML5, based on the core principles of Processing.

To embed p5.js objects into your WordPress posts, we are using Lauren McCarthy’s p5 WordPress Embedder. Lauren’s tool includes options for embedding the syntax-colored JavaScript code for your sketch. For more information, please see: Demonstration of a p5.js object working in this WordPress site, with instructions.

Embedding other syntax-colored code.

You may sometimes wish to embed properly-formatted JavaScript code without uploading a p5 sketch. For this purpose, we are using the Crayon Syntax Highlighter plugin, which provides syntax highlighting for a wide range of popular languages. For a quick example, suppose your code is the following:

function setup() {
function draw() {
line (0,0, mouseX, mouseY);
line (width,0, mouseX, mouseY);
line (0,height, mouseX, mouseY);
line (width,height, mouseX, mouseY);
ellipse(mouseX, mouseY, 30,30);

That’s what you get if you just copy-paste your code into a WordPress post, and it looks awful. To see your code formatted properly, instead: In the WordPress editor’s HTML or “Text” mode, wrap your code blocks with the tags
<pre lang=”javascript”>
See here for more information and a list of all the options (scroll down past the code to find the information!). The result will look like the following example: