Coding Poems

Though every poem is going to be different, the following should provide enough of a guide to get started with most poems. First we’ll show how to code a basic poem with no crazy white-space or other visual features - just left-aligned lines and some stanza breaks. Then we’ll talk about tips and tricks for the trickier poems.

Basic step-by-step

1. Copy the poem from the PDF or Word doc and paste it into a plain text editor. In this tutorial, we’ll be using Notepad++ (Windows).

2. You’ll often need to re-break the lines once in Notepad++ so the pasted poem matches the original.

3. Highlight the space at the end of the first line through to the beginning of the next line down, and type `Ctrl+H`.

4. In the Replace field, type `\n` and click `Replace All`.

5. This should make the poem look like this:

6. Notice you’ll have to add one more `` to the first line, and you’ll have to delete the last `` at the end of the poem.

Also, a quick note on what this code is doing, so far:  is telling each line of the poem to act like a “line” version of paragraph, which is a class we’ve defined in the website’s custom CSS. This paragraph class is designed to force longer lines in poems to wrap with an indentation on smaller devices. The empty  throughout the example above are white space placeholders for stanza breaks.

7. Now, you’ll need to add the top and bottom matter to the poem so that author/publisher/UI Library info appears in the post. This code will (pretty much) always look like this:

Top matter:

 by <a href="http://poetry.lib.uidaho.edu/index.php/poets/#sierra-nelson">Sierra Nelson</a> 

Bottom matter:

from <a target="_blank" href="http://www.poetrynw.org/issue-cover/spring-summer-2010/" rel="noopener noreferrer"> Poetry Northwest 05.1 Spring & Summer 2010</a><a target="_blank" class="librarylink" href="https://alliance-primo.hosted.exlibrisgroup.com/primo-explore/search?query=any,contains,Sierra%20Nelson&tab=everything&search_scope=everything&vid=UID">Find more by Sierra Nelson at the library</a>Copyright © 2010 Sierra Nelson Used with the permission of <a href="http://poetrynw.com/" target="_blank" rel="noopener noreferrer">Poetry Northwest</a>.

8. You’ll of course need to make sure the links and author name are all correct.

The one link in the top matter <a href="http://poetry.lib.uidaho.edu/index.php/poets/#sierra-nelson"> will take clickers to the author’s bio page.
In the bottom matter, the first link <a target="_blank" href="http://www.poetrynw.org/issue-cover/spring-summer-2010/" rel="noopener noreferrer"> points to the book or journal the poem was published in (usually the publisher’s website, or another reliable purchasing point for the book).
The next link <a target="_blank" class="librarylink" href="https://alliance-primo.hosted.exlibrisgroup.com/primo-explore/search?query=any,contains,Sierra%20Nelson&tab=everything&search_scope=everything&vid=UID"> is the UI Library search link, which you can modify for each author by simply changing the name in the URL.
The final link <a href="http://poetrynw.com/" target="_blank" rel="noopener noreferrer"> points to the featured publisher’s website homepage.

9. The actual title of the poem will be entered into WordPress when we get there. For now, this basic poem is all ready to go!

(Actually, 10. Check for typos again. And again.)

Your coded poem should look something like this:

Tips and Tricks for More Difficult Poems

Indented lines (white space at the beginning of the line)

Add &emsp; a few times until you get the indentation to about the size it needs to be.
Or, add padding your  like this:  (the greater the em#, the greater the padding)

Lines with caesuras (white space) in the middle of them

Add &emsp; a few times until you get the white space to about the size it needs to be.

Justified prose poems

Remove all line breaks, and instead of , use . You can change the percentage sign there until you get the width of the poem to where it needs to be.

Poems that spiral, are shaped like hearts, or are otherwise visually experimental

Call Devin?

Coding Poems

Basic step-by-step

1. Copy the poem from the PDF or Word doc and paste it into a plain text editor. In this tutorial, we’ll be using Notepad++ (Windows).

2. You’ll often need to re-break the lines once in Notepad++ so the pasted poem matches the original.

3. Highlight the space at the end of the first line through to the beginning of the next line down, and type `Ctrl+H`.

4. In the Replace field, type `</p>\n<p class="line">` and click `Replace All`.

5. This should make the poem look like this:

6. Notice you’ll have to add one more `<p class="line">` to the first line, and you’ll have to delete the last `<p class="line">` at the end of the poem.

7. Now, you’ll need to add the top and bottom matter to the poem so that author/publisher/UI Library info appears in the post. This code will (pretty much) always look like this:

Top matter:

Bottom matter:

8. You’ll of course need to make sure the links and author name are all correct.

9. The actual title of the poem will be entered into WordPress when we get there. For now, this basic poem is all ready to go!

Your coded poem should look something like this:

Tips and Tricks for More Difficult Poems

Indented lines (white space at the beginning of the line)

Lines with caesuras (white space) in the middle of them

Justified prose poems

Poems that spiral, are shaped like hearts, or are otherwise visually experimental

Coding Poems

Basic step-by-step

1. Copy the poem from the PDF or Word doc and paste it into a plain text editor. In this tutorial, we’ll be using Notepad++ (Windows).

2. You’ll often need to re-break the lines once in Notepad++ so the pasted poem matches the original.

3. Highlight the space at the end of the first line through to the beginning of the next line down, and type Ctrl+H.

4. In the Replace field, type </p>\n<p class="line"> and click Replace All.

5. This should make the poem look like this:

6. Notice you’ll have to add one more <p class="line"> to the first line, and you’ll have to delete the last <p class="line"> at the end of the poem.

7. Now, you’ll need to add the top and bottom matter to the poem so that author/publisher/UI Library info appears in the post. This code will (pretty much) always look like this:

Top matter:

Bottom matter:

8. You’ll of course need to make sure the links and author name are all correct.

9. The actual title of the poem will be entered into WordPress when we get there. For now, this basic poem is all ready to go!

Your coded poem should look something like this:

Tips and Tricks for More Difficult Poems

Indented lines (white space at the beginning of the line)

Lines with caesuras (white space) in the middle of them

Justified prose poems

Poems that spiral, are shaped like hearts, or are otherwise visually experimental

3. Highlight the space at the end of the first line through to the beginning of the next line down, and type `Ctrl+H`.

4. In the Replace field, type `</p>\n<p class="line">` and click `Replace All`.

6. Notice you’ll have to add one more `<p class="line">` to the first line, and you’ll have to delete the last `<p class="line">` at the end of the poem.