Help Sheet for Formatting
Formatting an article for the IEP involves moving the content of the submitted article (usually a Word doc) to the website.
Table of Contents
- Meta-data, Etc.
- Title, Summary, Table of Contents
- Body of Article
- Bottom of Article
Work from a copy of the Word document so there’s a backup if you make a mistake.
Open/go to: Web Browser| WordPress | Dashboard | Posts | Add New
As you work on the article (“post”), hit Save Draft (top right button). Don’t hit the blue Publish button until you’re done.
Use top dialog box and type title as it should later show in category searches. For articles about a philosopher, place the last name first. No dates. For an article such as “John Smith: Political Philosophy” use “Smith, John: Political Philosophy.”
Custom Fields | Add new custom field | select | Originally published | July 31, 2009 | Add Custom Field | Publish
Permalink | Edit | article name 8 characters max | OK
Custom Fields | Add new custom field | select | author | Smith, David | Add Custom Field. Leave out “Prof.”
Custom Fields | Add new custom field | select “keywords” | …don’t use words in title | Add new custom field
Over in right column. Uncheck the initial box “Uncategorized.” Minimize the number of checked categories. Use the box “Philosopher” for an article whose title is the name of an individual philosopher.
Click on visual tab, then add the title within the article as the first body line. For example, Gabriel Marcel (1889-1973). Highlight this title and choose Heading 1 in the upper left paragraph box instead of Paragraph.
Visual tab. Copy from the Word file, and then choose Paste from Word and CTRL-V to insert into the box and then Insert. Save draft. Summaries are 200-500 words. Their pictures have a width of 235 pixels.
Type “Table of Contents” with no colon after the summary. Highlight and choose Heading 3. Copy the table of contents (toc) from the article and choose the icon “Paste as Plain Text”. Then insert it (except it is fine to leave blank lines between headers). Get it all OK, including the numbering and lettering as it should appear in the article (for example with 3a changed to a only), then copy this toc and paste it below the toc (maybe insert double-equals below toc in order to distinguish the two). This second copy will be used for the headlines within the actual body of the new article. Using the HTML tab, remove blank lines from toc. Choose Visual tab, highlight entire toc and make it an ordered list by clicking the icon that looks like a numbered list. Use HTML tab to make sure each item on the list now begins with <li> and ends with </li>. In visual tab, indent all the subheads, and double indent the sub-subheads (can be done in blocks). Then in visual tab, remove all the old numbers and letters on the inside right of the toc lines. Do not worry that you are changing a,b,c to 1,2,3 because the correct letters will be generated automatically in the toc (but not in the headers in the body of the article). Now go through each line of the toc to make it linkable: do this by going to the Visual tab, highlighting, and inserting the Link tab whose picture is an unbroken chain link. Do it again for sub-headers. Links are #H1 then #H2 and so forth. For sub-heads the links are #SH1a and #SH1b and so forth. Do not use boldface or underlining in the table of contents.
To review, in HTML tab the first line of the toc should look like this: <li><a href=”#H1″>I’m the first header</a></li>, and so forth for every individual line of the toc. Save draft. The last main section of every table of contents must be “References and Further Reading.”
Headings in the body of the article. In HTML tab, add a blank line between the headers. Remember that subhead 3c is just c now. In visual tab, add paragraph styles as Heading 2 for main headers. When done with H2, add H3 for subheaders, and then H4 for sub-subheaders. Can be done in blocks or groups. Use HTML tab to check that each line gets its own <H2> or <H3>, rather than there being just one for the entire block of headers.
Anchors for headings in the body of the article: Choose HTML tab. After <h2> and before the number 1, insert the anchor <a name=”H1″></a> with no #. Use #H2 for the second main header, and so on through all instances of h2. Now after an occurrence of <h3>, insert , for example, <a name=”SH4a”></a>. Click Save Draft, and then take a look at the result with View Post.
Body of article section by section. Visual tab | Full screen. Go to Word version of a section, and copy or cut a section at a time, paste with the icon Paste from Word, then Insert. Remove extra spaces in the result. Also watch out that the inserting did not remove your paragraphing. Usually indents are lost. Colored text is lost. Watch for graphics that didn’t copy, or indenting that needs to be blockquoted in WordPress. Save Draft. For hyperlinks that were in the original Word document, go to HTML tab and make sure that the links are relative and not absolute.
Visual tab | toggle Full screen mode. For each section of the references (if there is more than one section), copy or cut from the Word article and use the tab Insert from Word. Clear the blank lines (this is done in HTML tab). In Visual tab, highlight all the reference content for a section of the references (or all the references if it’s not divided into sections) and choose the tab for an unordered list; the tab looks like a picture of dots with a line to the right of each dot. This will insert black dots. Remove the black dots that are followed by blank lines. Indent (using the right-arrow-icon) each comment for a reference so that its black dot becomes a white-centered circle. No need to highlight the entire item; just click in it. Choose Save Draft. When finished, go to HTML tab of each section of the referrences and change the reference section’s <ul> to <ul class=”hang”>. Do all the above more than once if there are multiple sub-sections in the references. Choose Save Draft, and then View Post to check your work.
Visual tab. Type “Author Information” with no colon, then highlight this and choose the paragraph style of Heading 3. Choose HTML tab, and insert the author’s name, and type Email: <a href=”mailto:firstname.lastname@example.org”>email@example.com</a> with no ending period. On next line enter the university. And the line after that add the country. For the United States, use “U. S. A.” with blanks separating the letters. Click Save Draft, and then View Post to check your work. Do not include the person’s title such as “Professor,” nor their department such as “Department of Philosophy and Religion,” nor their city such as “London,” nor their street address.
Make all images in the upper left of the opening summary have a width of 235 pixels. The height will take care of itself. For example, in the img tag, change width=”270″ height=”261″ to width=”235″.
If the image you wish to insert is still in a Word document and not available as a jpg or gif file, then create this by choosing CTRL-Prtscrn, then opening Photoshop | File | New and pasting into Photoshop. Then crop the graphic and choose Image | Auto Contrast, etc. Now that you have your file, go to Visual tab in WordPress. Click at left of summary (or at appropriate place if adding figures, charts, etc.), then choose the upper icon “Add Media.” (The icon is right after “Upload/Insert”.) Select files | Find in my computer, assuming the graphic has not already been stored in WordPress | Open. Probably choose Alignment: left and size- medium. Give a description to pic for blind readers. When ready, choose “Insert into Post” and not “Save all changes.” You may need to change “aligncenter” to “alignleft” in the HTML code. Choose Save Draft and then View Post to check your work.
In Text mode, remove the “size-full” and “size-medium” tags that are inserted by WordPress when using “Add Media” while inserting an image or figure, or else the image may be adjusted too far to the left.
But suppose you wish to add into one of our articles a graphic that is located somewhere in Wikipedia Commons Graphics, which is a free repository of graphics at http://commons.wikimedia.org/wiki/Category:Graphics, and you wish to properly give the copyright attribution. Here is the 4-step procedure, using as an example their graphic of Ockham for our Ockham article. The goal is that when a reader goes to our Ockham article they see an image of Ockham that is loaded from a copy stored within the IEP and not within Wikipedia Commons, but when readers choose to click on the image, they are shown the attribution information that is loaded directly from Wikipedia Commons.
(1) Download the image from Wikimedia Commons to your own computer and give it a name, making sure it won’t match anything like the article’s URL (e.g. for the Ockham article, name the image “ockham-img.png”).
(2) Go to the IEP’s upload files page under the Media page (not the article’s page) https://www.iep.utm.edu/wp-admin/upload.php and upload the image file, selecting “Add New” and then selecting the file from your own computer. Then, click Edit to the right of the thumbnail image and to go to the image’s settings.
(3) Add Alternative Text (same as title of the IEP article), but no Caption, and under the Description add the HTML version of the Attribution text, which is found on the Wikimedia Commons Graphics page after clicking on the image and then on “Use this file on the web” (tick the HTML box on the right in order to get the HTML version, but go to the right of this text so no characters are hidden from copying). Before leaving this IEP Edit Media page, click above the image on “View Attachment Page” and copy the URL for use in the next step. [Note: On new images, this URL might just include an attachment number instead of a name, such as: https://www.iep.utm.edu/?attachment_id=14306.]
(4) Go to the IEP article page in Dashboard (e.g. https://www.iep.utm.edu/ockham/) and Edit Post. Using the visual tab, click on the point within the article where you want to insert the image, then on “Add Media,” and then click on the intended image file. Under the images’ Description, paste a URL-link to the image’s “Attachment Page” (copied in previous step). For the Ockham article, it’s this: https://www.iep.utm.edu/ockham/ockham-img/ The link you want is importantly not the direct link to the image, such as: https://www.iep.utm.edu/wp-content/media/ockham-img.png. Then click “Insert into post.” Check with the text tab to be sure all is well; the required image width is 235 pixels.
If you followed the four-step procedure correctly for the Ockham article, then your result is <a href=”http://commons.wikimedia.org/wiki/File:William_of_Ockham.png”><img alt=”William of Ockham” src=”https://www.iep.utm.edu/wp-content/media/ockham-img.png” width=”235″ /></a>.
Visual tab. Add hyperlinks to other articles in the IEP by highlighting the phrase such as “atheism,” then notice that the hyperlink icon becomes un-gray; click it. Paste in ../atheism as the link and choose Insert. Choose View Post and check that the links work OK. This shortened reference rather than the absolute or full reference of https://www.iep.utm.edu/atheism is called using “relative links rather than absolute links.” Do not add hyperlinks to material outside of the IEP.
Obtain the four-digit or five-digit ID number of your article by looking in the end of the URL at the top of the screen. Then go to the appropriate lettered index page | Edit | and create a new line with that ID number and title. Now is the time to cross-link if needed.
Check your work by previewing the article (top right button: Preview or View Post). Look over the article, test links, and anchors. The TOC most often has errors. Click on each anchor link in the TOC to make sure it goes to the right place. Make a record of of the number that is the WordPress name of the article (you can find it in the “post=12345” at the top of your screen). Now hit the Publish button (top right blue button). You will need this WordPress name of the article in order to name the article within the letter index.