Tutorials and Extras

From CommentPress to PressBooks

Jack Dougherty

ROUGH NOTES to be updated, but link to remain the same

Copyediting workflow (last updated July 16, 2014) Our goal of this experiment is to increase the production speed and maintain the quality of copyediting this multi-author volume by conducting the process within WordPress/PressBooks, where the text is currently public and visible on this server. In past production workflows, book editors had to export text from WordPress into MSWord for copyediting, then the press had to export it back into a digital format (such as HTML or XML) for digital distribution, which slowed the process down and increased the likelihood of errors across different platforms. With this WordPress-based editorial & production workflow, we aim to improve the process for all parties involved: authors, book editors, production staff, and readers.

Outline of key steps:

1) After the open peer review phase on our CommentPress site, the Editors imported selected chapters in XMS format to this PressBooks site, and gave those Authors privileges to make revisions and/or upload resubmissions for the final manuscript. In some cases, Authors preferred to send us resubmissions in MSWord format, which the Book Editors converted to WP (with PressBooks conversion tools) or manually copied & pasted into WP/PressBooks format. At this stage, the book-in-progress is publicly readable on PressBooks, but only the Book Editors can edit the content.  (*Jack to do: insert more notes about the date?/pages? conditions for the CP export process, with screenshot, for anyone who wants to do this in the future)

2) The Book Editors must review, approve, and edit each chapter, which they will note on this public Editorial Status Google spreadsheet. (Any negative decisions about chapters that do not advance to the final volume will be communicated privately, in accordance with our editorial policy.)

3) The Book Editors will do all copyediting on this PressBooks site, in two ways, and communicate this info to Authors using the editorial queries Google Doc, which is publicly visible to all.

a) Substantive questions by the Book Editors to Authors will be posted on the public editorial queries Google Doc, and Authors will be reminded to respond directly on that GDoc by Inserting > Comment. We prefer the GDoc over email as a way to keep track of all of the changes.

b) Simple changes by the Book Editors will be typed directly into the PressBooks text. Using the built-in WordPress 3.8+ “Compare any two revisions” tool (Dashboard>Revisions>Browse>Compare checkbox), Book Editors will create a PDF of highlighted changes (red vs. green) they have made, as shown in the two screenshots below, and will embed a link to each one in the editorial queries GDoc for Authors to review. (Note: to create these wide PDFs, we used a wide monitor and Safari for Mac browser with 17 x 11 paper settings, zoomed out.)






March 2014 letter to contributors

Dear Web Writing authors,

This evening you should receive an automated email confirmation link to create your account on EPress, our new PressBooks/WordPress platform at Trinity College, where we will construct the final volume of Web Writing to submit to Michigan Publishing. Check it out at: http://epress.trincoll.edu/webwriting We’re using this PressBooks platform to create a finished volume that can be read online and easily exported into PDF, Kindle, EPUB formats. I migrated the current draft of your essay to this new site, marked it “revisions in progress” at the top, and published it online to help you see how the volume as a whole is shaping up. Your original essays (with comments) will remain on our CommentPress site, and later I will insert links between the old and new versions. This email is being sent to all authors whose essays are being considered for the final volume. Of course, your work must be officially accepted by the editorial team before it will be included in the book, but we have budgeted space for all of you.

Next steps:

1) Click the automated email from EPress to confirm the creation of your account. Change your password via Users > Profile, if desired. After I receive notification that your account has been created, I can assign you editing access to your essay.

2) Make sure that you (or your co-author) can login to our new site and access your essay. Remember, only one author can edit at a time. Don’t worry about your position in the table of contents, as the placement of your essay may change as we reorganize the volume.

3) Decide if you wish to edit your existing essay online at the link above, which saves time for me, because it’s already formatted for WordPress.

4) Or, if you prefer to rewrite your essay in a word processor, you can email me a MS Word file, because PressBooks has a nice import feature that handles most of the formatting.

5) Budget your time to submit your revised essay by May 15th (sooner is always better). If you miss this deadline, we cannot guarantee that your work will appear in the final volume.

— Jack

STILL UPDATING SOME OF THE INSTRUCTIONS BELOW, but most remains the same as before Login to our new site, which brings you to the Dashboard. Go to User Profile to update your initial password. If desired, change how your name will be publicly displayed on the site. To edit your essay, go to Dashboard > Text and select it to open the WordPress editor window, which acts as a word processor for the web. Open the “kitchen sink” to display all buttons and explore options, such as block quotes, pasting from MS Word, and the full-screen view. You may edit the text and add footnotes, links, and media, as described below. Do NOT indent each paragraph, and do NOT creatively format text by inserting extra spaces. Use <h2> for any section headings, rather than bold (which is a change from before. If working with a co-author, you cannot simultaneously edit in WordPress, so do collaborative work with another tool (such as Google Docs) and decide who will edit the web essay. Click “Save Draft” when editing your page, and “Preview” to see how it will appear on the site, but all content is hidden from the public until published by the editors. When your edits are complete, email Jack . To see your word count, look at the bottom-left corner of the WordPress editor screen. All of your text, notes, and biographical statement are included in this word count, which may differ from the calculation in your word processor. SampleWordCount Insert a brief biographical statement at the bottom of your web page, in italics, beginning with “About the author(s): . . ,” followed by a 1-2 sentence description for each contributor, with the option of adding a personal web link. To insert a link, select the relevant text and click the “link” button. Add the web address in the pop-up window, type a brief description for visually impaired readers, and click the box to open in a new tab/window, which allows readers to easily return to your page. WordPressGuide3Links To add footnotes in our preferred WordPress format, contributors have two options. First, you may compose your essay in MS Word or OpenOffice and submit to the editors to automatically convert all of your footnotes. (This is the fastest way to deal with multiple footnotes.) In addition, you may manually add footnotes in WordPress by using the handy “Insert footnote” button, as shown below.[1] Footnote1Tool Insert the footnote into the pop-up window, as shown below. Footnote2Insert The tool automatically inserts the footnote in your text between the bracketed “shortcodes” that WordPress recognizes to display it properly. If desired, you can manually type these shortcodes. Footnote3Shortcodes If your footnote includes a web address, then add a link, and check the box for it to open in a new window/tab, as shown below. Footnote4InsertLink When citing sources (such as books, articles, and websites), use full Chicago-style footnotes, and when possible, include the web address to help readers locate items, as shown in these examples.[2] Also, authors have the option to embed selected links directly in the main text for emphasis and convenience of online readers (such as this Chicago-Style Citation Quick Guide), as long as the full citation and web address appear in the footnote, to assure that links are visible to readers of print editions, like this.[3] If the source includes a digital object identifier (DOI), add the prefix “http://dx.doi.org/” to create a valid web address. Do not include “accessed on” dates in footnotes, since all web links will be re-checked before the final publication. In unusual cases, when a digital source has been removed from the web and is no longer available to readers, explain the circumstances in a footnote with a full or partial citation, and provide the former web address or link from the Internet Archive Way-Back Machine. Do not include a separate bibliography at the end of your essay. Instead, see note below about the option to share your references with our  Zotero group library. When citing another chapter that will appear in the final manuscript, add the phrase “in this volume” to the text and simply insert an internal link in the body to the current version of the page. No separate footnote is required, because an internal link serves as a convenience for the reader, who already has access to the full manuscript. Example:

As Christopher Hager explains in this volume. . .

When citing another chapter (or a comment on a chapter) that appeared in the Fall 2013 open peer review volume, this is an external link that also requires an abbreviated citation, since one cannot assume that the reader of the current volume has access to the earlier version. Examples:

As Christopher Hager explained in the first version of his essay. . . [4]

As Barbara Fister commented on Christopher Hager’s essay . . . [5]


To insert a horizontal line to break up a section of your text, as shown above, select the Text Editor tab and insert the code shown below.

To create a horizontal line to break up sections, insert this code in the Text editor tab.

To create a horizontal line to break up sections, insert this code in the Text editor tab.

To insert images, either use content that you personally created or ensure that you have rights to use content that has been copyrighted by others (with their written permission, or under “fair use” guidelines, or Creative Commons licensed material).[6] To capture a screen shot from your computer, use the built-in commands for Mac (Shift + Command + 4) or Windows (Print Screen, or in newer versions, Accessories > Snipping Tool), or download the free Skitch tool for easy renaming and resizing. Save images for WordPress in JPG or PNG format (not TIFF). PDF also is acceptable for uploading documents to be linked, but no cover image will appear. Label your images with your last name, such as “Jones_Image1” so keep them organized among the others on the site. For this CommentPress site, images ideally should be around 600 pixels wide if feasible, and definitely not less than 300 pixels wide. NEW: For our PressBooks textbook theme and the publisher’s print version, images ideally should be between 700 to 800 pixels wide if feasible. Hint: For images of online student writing, think creatively about ways to make it legible at 800 pixels wide, such as resizing the browser window (by dragging the bottom-right corner) or reformatting the text to appear more vertical. If you need help, feel free to ask. In the WordPress editor window, place your cursor below the paragraph where you wish the image to appear, and press the “Add Media” button as shown below. (Do NOT attempt to wrap text around an image in CommentPress, as the plugin treats each image as a separate paragraph for commentary.)


The “Add Media” button in the WordPress editor.

On the Insert Media screen, upload the image file. Next, add a caption (with credit to the original source, if needed), select an appropriate size (ideally between 300 to 600 pixels wide for this CommentPress site), and click “insert into page” button, as shown below.

The Insert Media screen in WordPress.

The upload portion of the Insert Media screen in WordPress.

The attachment details and display settings for Insert Media in WordPress.

The attachment details and display settings for Insert Media in WordPress.

By default, when readers click on an image, WordPress displays the original media file. But if the image came from another website (such as a screenshot), you may wish to change the destination by selecting “Link to: Custom URL” and inserting the original web address, as shown below. Inform the reader about your interactive graphic with a caption such as “Click to view (the original site) in a new tab/window.” 

To send readers from the image to the original website, insert a custom URL.

To send readers from the image to the original website, insert a custom URL.

Furthermore, after your image appears in the WordPress editor, float your cursor over the top-left corner to edit the image. On the Advanced Settings tab, check the box to open the target link in a new tab/window (so that readers can easily return to your page), and update your changes, as shown below.

Float cursor over the image to edit it in WordPress.

Float cursor over the image to edit it in WordPress.

Click "Advanced Settings" tab and check box to open target link in a new window.

Click “Advanced Settings” tab and check box to open target link in a new window.

Your limited “contributor+” access to this site means that you cannot delete images you have uploaded. So, if you make mistakes or wish to delete unnecessary images, send the exact file name by email to Jack or ask for help. To add a video or screencast, either use content that you personally created or ensure that you have rights to use content that has been copyrighted by others (with their written permission, or under “fair use” guidelines, or Creative Commons licensed material). Video works best on WordPress when it is hosted by a service, such as YouTube or Vimeo, because you can copy and paste the URL directly into the main text of the editor, as shown below. Save your draft and click “Preview” to see how it will display. See additional tips in screenshots below and email Jack to ask for help.

Illustration of how to paste YouTube URL directly into WordPress editor.

Illustration of how to paste YouTube URL directly into WordPress editor.

Illustration of the "Share" and "Start time" features in YouTube.

Illustration of the “Share” and “Start time” features in YouTube.

To add a table, copy and paste the table contents from a spreadsheet or word processor directly into the WordPress editor. Use the Visual/Text tab (upper-right corner of the editor) to clean up unwanted code, or ask for help. Optional: Share your bibliography via our Zotero group library. Each essay includes Chicago-style footnotes with full references, with no bibliography at the end of the essay. But if you use the Zotero tool to manage your citations (free download), and have a Zotero login account (free registration), then you may share your citations in our public Zotero group library, which also will appear in the Web Writing bibliography page in WordPress. Go to the Web Writing public Zotero group library, click “Join Group” (as shown below), and wait for approval by the editor.

Join the Group to share your citations in the Web Writing Zotero library.

Join the Group to share your citations in the Web Writing Zotero library.

In your Zotero application, look in the Group Libraries section for the “Web Writing public” folder to appear. Right-click to create a new collection, and name it “from (Insert your name here),” as shown below. Drag Zotero entries from your personal library into your named collection folder in the group library, which makes the citation (and the abstract field) publicly visible. (Please avoid accidentally erasing the contents of other group members’ folders.) New citations & abstracts added to the Zotero group library will automatically appear in on the Web Writing WordPress bibliography when the editor re-syncs the account. After you’ve added a batch of citations, feel free to email Jack to remind him to re-sync.

Right-click the Zotero group library to add a new collection for your shared items.

Right-click the Zotero group library to add a new collection for your shared items.

If you encounter problems formatting your WordPress page and are familiar with HTML (or are code-curious and willing to explore), switch from the Visual to the Text tab (upper-right corner) in the WordPress editor to identify and remove unwanted code (such as unnecessary span tags), or email Jack to ask for help. WordPressGuide_VisualText

  1. To automatically convert footnotes from MS Word or OpenOffice to WordPress, we import essays into a temporary page in a free PressBooks site, which includes this built-in tool, not yet available as a standalone plugin for WordPress. To manually add footnotes to WordPress, we use a Simple-footnotes-editor-button-to-match-Pressbooks plugin, which inserts a "footnote" shortcode.
  2. Gerald Graff and Cathy Birkenstein, They Say / I Say: The Moves That Matter in Academic Writing (New York: W.W. Norton & Co., 2010), http://trincoll.worldcat.org/oclc/286490473; Kate Singer, “Digital Close Reading: TEI for Teaching Poetic Vocabularies,” Journal of Interactive Technology & Pedagogy no. 3 (Spring 2013), http://jitp.commons.gc.cuny.edu/digital-close-reading-tei-for-teaching-poetic-vocabularies/; Mark Sample, “A Better Blogging Assignment,” The Chronicle of Higher Education, ProfHacker, July 3, 2012, http://chronicle.com/blogs/profhacker/a-better-blogging-assignment/41127.
  3. The University of Chicago Press, “Chicago-Style Citation Quick Guide,” The Chicago Manual of Style Online, 2010, http://www.chicagomanualofstyle.org/tools_citationguide.html.
  4.  Christopher Hager, “The Secondary Source Sitting Next to You,” in Web Writing (Open peer review edition, 2013), http://webwriting2013.trincoll.edu/citation-annotation/hager-2013/.
  5. Barbara Fister comment on Christopher Hager, "The Secondary Source Sitting Next to You," in Web Writing (Open peer review edition, 2013), http://webwriting2013.trincoll.edu/citation-annotation/hager-2013/#comment-8330.
  6. "Fair Use," Copyright and Fair Use, Stanford University Libraries, http://fairuse.stanford.edu/overview/fair-use/; "About the Licenses," Creative Commons, http://creativecommons.org/licenses/.