Tutorials and Extras

How to Publish on WordPress.org

Jack Dougherty

TrinityBanterLogoI designed this tutorial for my students to post their web essays on the WordPress.org multi-site platform hosted by Trinity College, known as Trinity Banter (http://commons.trincoll.edu), which currently runs version 3.8. But general concepts and many steps may be similar to other self-hosted WordPress sites. See also the Trinity Commons Getting Started support page.

wordpress-logo-stacked-rgb-300x186WordPress is an easy-to-learn, open-source platform for sharing content and receiving comments on the web. It is the most popular blogging tool, used by nearly one-quarter of the 10 million most popular sites on the web as of January 2015.[1] Learn the difference between its two flavors: the WordPress.com fully-hosted service versus the self-hosted free software from WordPress.org.[2] Anyone can sign up for a free WordPress.com account, but this service has limitations, unless you pay for the premium. For the most flexible and expandable option, ask your academic institution runs a self-hosted WordPress site (similar to our Trinity Banter platform), or rent space to run your own self-hosted WordPress site on a third-party platform, such as Reclaim Hosting for $25/year.

1) How to login and navigate the dashboard

Trinity’s WordPress platform allows students, staff, and faculty to easily post content onto the public web, either on their own personal site, or a class or organizational site.

When you log in the first time, Banter automatically creates a personal web site, with a web address similar to http://commons.trincoll.edu/jsmith01 (where jsmith01 = network ID)

Trinity Banter login

Trinity Banter login

If you are enrolled in one of my classes with a WordPress site, I have already arranged for you to have an account with authoring privileges. After logging in, go to your Dashboard, navigate to your Sites, and select our course.

Login to Trinity Banter Dashboard

Login to Trinity Banter Dashboard

In the Dashboard, the most important menu items are:

  • My Sites – to select a site and visit its front-end (public) or back-end (Dashboard)
  • Posts – to add new content or edit existing posts
  • Profile – to modify how your name displays on your site, and to add biographical info
Three Key Features of the WordPress Dashboard

Three Key Features of the WordPress Dashboard

In your Profile, enter your first and last names, and choose how you wish your name to be displayed on the public web. If you add Biographical Info about yourself, such as an “about the author” statement, it will automatically appear at the bottom of every post you write. Make wise decisions about what you publish on the public web and read the “Public Writing and Student Privacy” policy statement for our course, or my broader essay on this topic.[3]

Choose how to display your name publicly

Choose how to display your name publicly

2) How to create and categorize your first post

Click “Add New Post” to open the WordPress editor. Add a descriptive title, type or paste in your content, and check the correct category (listed in the syllabus for each assignment) for your post to appear in the proper place on the class website and earn credit. Click “Preview” to see how it looks. Click “Save Draft” while working on your post, and “Publish” when it’s ready to appear on the public web.

Creating your first post

Creating your first post

To encourage others to read your post, copy its unique web address (on the public front-end) and circulate via email, social media, or as a link on your resume.

3) Keep Track of your word count in WordPress

When I assign a maximum word count for a web essay, always check the WordPress indicator, which may vary from your word processor.

Your mileage may vary.

Your mileage may vary.

4) How to insert links into your post

In the visual editor, click the “kitchen sink” button to reveal a second row of editing tools.

The magical "kitchen sink" reveals a second row of editing tools.

The magical “kitchen sink” reveals a second row of editing tools.

To insert a link, select some text and click the “link” button.

Select text and click the "link" button.

Select text and click the “link” button.

In the insert link pop-up, window paste or type in the destination link, and a quick title.

Insert link pop-up window.

Insert link pop-up window.

5) Avoid forcing links to open in new tabs/windows

Nowadays I teach students to avoid checking the “Open link in a new tab/window” box in WordPress, because I learned that doing this creates serious problems for visually-impaired readers by forcing them into a new screen, with no option to use the back-button. Several web design guidelines, such as the W3C Working Group standards, recommend not checking that box.[4]. To learn more about this debate, see the angry comments directed at this person who posted the opposite advice.[5]

6) Add anchor links to navigate multi-part essays

You may wish to add anchor links to help readers navigate in longer multi-part essays, such as this sample: Jump to part 3.

First, in the Text editor of the WordPress editor, type in an anchor tag at your destination, like this:

WP-anchor-tag

A small anchor symbol may appear in the Visual editor to remind you that this anchor exists.

Next, select some text and insert a hashtag link (such as #part3) that matches your anchor link, like this:

WP-link-to-anchor

To point readers to an anchor in a different web post you’ve written, or share an anchor link via email or social media, type out the full link with the anchor hashtag, like this:
http://epress.trincoll.edu/webwriting/chapter/how-to-publish-on-wordpress/#part3.

7) How to insert images into your post

Before inserting an image, make sure you have the rights to include it and credit the original source. When writing about images that have been copyrighted by others, learn about  “fair use” copyright guidelines and 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 (Accessories > Snipping Tool), or download the free Skitch tool for easy renaming and resizing. Save images for WordPress in JPG or PNG or GIF format (not TIFF).

To insert an image, place the cursor in front of the paragraph where you want it to appear, and click the “Add Media” button.

Add Media button.

Add Media button.

In the Insert Media pop-up window, either drag and drop your image, or select an existing image or URL in the Media Library tab.

Drag and drop your image here.

Drag and drop your image here.

In the Insert Media editor, add a caption, select your alignment (for text wrapping, try “right”), and select a size. On my Trinity Banter course sites, the maximum recommended width is 640 pixels.

Credit all sources in the Insert Media pop-up window.

Credit all sources in the Insert Media pop-up window.

To edit or remove an existing image, float the cursor over the upper-left corner and click the edit or delete icons.

To edit or delete an existing image.

To edit or delete an existing image.

Sometimes the best way to credit a image source is to insert a link inside the caption, which you may need to code manually. When uploading your media, write a simple HTML link tag in your caption in this format:

Here’s a simple example of the media view:

How to insert a linked caption for source credits

How to insert a linked caption for source credits

And here’s the result:

WordPressCaptionLinked

9) How to embed video into your post

Before embedding video, make sure you have the rights to include it and credit the original source. When writing about video that has been copyrighted by others, learn about  “fair use” copyright guidelines and Creative Commons licensed material.[7]

To embed a YouTube or Vimeo video, click the “Share” button on the video site to reveal its web link (and start time, if desired).

The YouTube share button.

The YouTube share button.

Copy and paste the share link directly its own line in the WordPress visual editor. Credit the video source immediately below the link.

Paste the YouTube link and credit the video source below.

Paste the YouTube link and credit the video source below.

10) To embed an iframe in your post

I have already activated the iframe plugin in our WordPress course site, which allows authors to embed a live website (such as an interactive chart, map, or other website) inside your post.

To embed a Google Sheet in your post:

1) In your Google Sheet, File > Publish to the web. Click the Embed tab and the Publish button. Copy the iframe embed code that appears.

Publish a Google Sheet to the web and copy the iframe embed code.

Publish a Google Sheet to the web and copy the iframe embed code.

2) In your WordPress visual editor, paste the iframe embed code. Modify the front and back ends to include square brackets, and remove the “/iframe” tag at the end, to match the format shown below.

Paste and modify the iframe embed code.

Paste and modify the iframe embed code.

To see more examples on how to embed interactive charts and maps inside your WordPress post, see my instructions about iframes in the Dataviz book.

11) How to add Chicago-style endnotes

For my WordPress course sites I have already activated the Simple Footnotes plugin in the Dashboard, which allows authors to create interactive links to Chicago-style endnotes. Insert endnotes using this bracketed shortcode in the visual editor:

[ref]Insert note here.[/ref]

If you use the free Zotero tool to capture and cite sources, hold the shift key and drag items to insert as an endnote.

12) How to co-author content with a custom byline

Some of my course assignments allow two people to co-author a web essay, and I have set up my WordPress course sites to accommodate this.

1) Compose the text on a platform that’s designed for collaboration, such as Google Documents, because WordPress was not designed for simultaneous authoring and editing.

2) One co-author should log into our course WordPress site and create the post. In the upper-right corner, click the “Screen Options” drop-menu menu and make sure that Custom Author Byline is checked to appear on your screen. I have already activated the Custom Author Byline plugin in the Dashboard, which allows more than one author’s name to be displayed (rather than the default display of the initial author only).

In the WordPress Screen Options, make sure Custom Author Byline is checked.

In the WordPress Screen Options, make sure Custom Author Byline is checked.

 

3) Below the Visual Editor window, look for the Custom Author Byline field and and type in both of your names.

Look for the Custom Author Byline field below the text editor

Look for the Custom Author Byline field below the text editor

4) If both authors wish to edit the WordPress post, the first author should contact me to request that I grant editing privileges to the second author. (As the site administrator, I have special access to the CoAuthors Plus plugin in my Dashboard, which grants multiple authors privileges to the same post.) Remember that two authors cannot simultaneously edit the same WordPress post, as you can do in Google Docs. Beware that Co-Authors Plus may override the Custom Author Byline setting above. Also, remember that each author may create an “about the author” biographical entry in their Dashboard User > Profile setting. Entries for both co-authors will appear at the bottom of each post.

13) How to protect your WordPress site from spam

Some of my students who operate their own WordPress site on the Trinity Banter platform have asked for advice about protecting themselves from spam comments. There’s a few settings you should check in your WordPress dashboard. First, look at Dashboard > Settings > Discussion and decide whether or not you wish to allow people to post comments, if they need to be registered, and if comments need to be moderated. Here’s what my typical settings look like, but you may wish yours to be different:

WordPress Dashboard Discussion Settings

WordPress Dashboard Discussion Settings

Second, Trinity IT staff installed the Akismet spam-blocking plugin for all sites on the Banter network, so go to Dashboard > Plugins > Askismet Configuration to make sure it’s working properly. My typical settings appear as pictured below:

WordPress Akismet settings

WordPress Akismet settings

Third, you can manually run Akismet to check your existing comments for spam, which is faster than deleting them individually. Go to Dashboard > Comments > Check for spam.

WordPress Comments

WordPress Comments

If you continue to have problems with WordPress spam on your Trinity Banter site, contact the HelpDesk@trincoll.edu and/or speak with your instructional technologist.


  1. “WordPress,” Wikipedia, April 29, 2015, http://en.wikipedia.org/wiki/WordPress/.
  2. “WordPress.com and WordPress.org,” Support, 2015, https://en.support.wordpress.com/com-vs-org/.
  3.  Jack Dougherty, “Public Writing and Student Privacy,” in Web Writing: Why and How for Liberal Arts Teaching and Learning, ed. Jack Dougherty and Tennyson O’Donnell (University of Michigan Press, 2015), http://epress.trincoll.edu/webwriting/chapter/dougherty-public.
  4. W3C Working Group, "G200: Opening new windows and tabs from a link only when necessary," 2015, http://www.w3.org/TR/WCAG20-TECHS/G200.html.
  5. Anthony, “Why External Links Should Open in New Tabs - UX Movement,” UX Movement, January 31, 2012, http://uxmovement.com/navigation/why-external-links-should-open-in-new-tabs/.
  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/.
  7. "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/.