{"id":1088,"date":"2022-04-08T15:12:45","date_gmt":"2022-04-08T15:12:45","guid":{"rendered":"https:\/\/www.trincoll.edu\/cher\/?page_id=1088"},"modified":"2022-06-07T19:01:01","modified_gmt":"2022-06-07T19:01:01","slug":"wordpress","status":"publish","type":"page","link":"https:\/\/www.trincoll.edu\/cher\/wordpress\/","title":{"rendered":"WordPress Tutorial"},"content":{"rendered":"

This College-wide WordPress site is administered by the Trinity Communications Office, and this section of the site is managed by the Center for Hartford Engagement and Research (CHER). See more detailed instructions by the Communications Office at https:\/\/www.trincoll.edu\/wp-content\/uploads\/2020\/12\/Editing-in-WordPress-2020.pdf<\/a><\/span><\/p>\n

First, students should compose and edit all text and visuals in a Google Document or similar word-processing file, which is easiest to share and review with faculty and other students. Second, students should create a WordPress post (aka “blog”) and migrate all text and visuals. However, students working in teams need to understand that unlike Google Docs, only one student<\/strong> can create and edit a post on this WordPress platform.<\/span><\/p>\n

Initial student login and author access:<\/h3>\n

Go to the Trinity CHER WordPress admin link: https:\/\/www.trincoll.edu\/cher\/wp-admin\/<\/a><\/span><\/p>\n

Click \u201cone-step authentication\u201d and enter your Trinity credentials<\/span><\/p>\n

Initially, the site will say \u201cyou do not currently have privileges on this site,\u201d which is normal. After your initial login, the Trinity Communications WordPress administrator will change your access to “author” level so that you can create posts. \u00a0The next time you log in, you should be able to view the Dashboard.<\/span><\/p>\n

Dashboard and Create New Post (Blog):<\/h3>\n

When you first log into the Trinity WordPress, you may need to navigate to My Sites > Center for Hartford Engagement and Research > Dashboard.<\/p>\n

\"\"<\/p>\n

On WordPress platforms, a “Page” appears permanently in one location, but a “Post” (or “Blog”) is sorted in chronological order, with the newest at the top. To start a new WordPress post, go to Blog > Add New.<\/p>\n

\"\"<\/p>\n

List Multiple Authors:<\/h3>\n

Unlike Google Docs and other digital tools that support multiple and simultaneous authors, this Trinity WordPress platform allows only one student<\/strong> to create and edit a post (blog).<\/p>\n

However, the creator can list names of multiple authors in the Author field.<\/p>\n

\"\"<\/p>\n

Paste clean text, use headers, and insert links:<\/h3>\n

When you copy and paste text from Google Docs or other word-processing files, use the Paste as Text button to remove unneeded formatting.<\/p>\n

\"\"<\/p>\n

Use pre-formatted headers to organize sections. Trinity Communications asks that you do NOT use colored text or other font decorations.<\/p>\n

\"\"<\/p>\n

Insert links to relevant websites.<\/p>\n

\"\"<\/p>\n

You may need to toggle between the Visual \/ Text (Code) views to fix WordPress formatting issues.<\/p>\n

\"\"<\/p>\n

About bold type in body text:<\/h3>\n

Although the Trinity Communications WordPress platform supports body text in bold font like this<\/strong>, their settings do not make this style stand out when you preview the page online. Unfortunately, we cannot adjust the Trinity Communications settings. So consider alternative solutions to draw attention to a key phrase in your writing:<\/p>\n

a) Try using bold + italics<\/strong><\/em> at the same time.<\/p>\n

b) Try inserting a link into the key word, such as media<\/a>, to jump to an anchor link with a glossary of key terms below. (Learn about Anchor Links<\/a> further below.)<\/p>\n

Save Draft and Preview (but WAIT to Publish)<\/h3>\n

On the right side, see controls to save your draft, and right-click the button to Preview Changes in a new tab. However, do not press the Publish button until you are instructed to do so.<\/p>\n

\"\"<\/p>\n

<\/a>Add static-image media:<\/h3>\n

Prepare JPG or PNG files with clear file names. For the top of your post, header image minimum dimensions are 1440 x 617 px (width x height in pixels), but larger sizes such as\u00a01600 x 1200 px also would work fine here. For the body of your post, try to avoid excessively large images (more than 1-2 MB in size or larger than 1500 px width or height since they will be reduced in size by WordPress.<\/p>\n

Click the Add Media button at the top, upload your image, and in general use the default “no alignment” setting, which places your images on the left margin without text wrap.<\/p>\n

\"\"<\/p>\n

In general avoid text wrap in WordPress unless your image is very small and is intended to sit alongside a paragraph that describes it.<\/p>\n

Always credit the source of images created by other people by using the caption field, and link to the original if needed.<\/p>\n

\"\"
Honeycrisp apple, image by Jonathunder<\/a><\/figcaption><\/figure>\n

You may wish to write a simple HTML link<\/a> inside the caption field to point to the source. Hint: If you’re unfamiliar with HTML, write the caption in the body of the post, add the link, then cut and paste the caption-with-link into the “Caption” field of the image editor.<\/p>\n

\"\"<\/p>\n

Embed an interactive iframe<\/h3>\n

To insert an interactive table, chart, or map on a web platform, you need to understand the concept of embedding an iframe<\/a>, which means to seamlessly display one web page inside another web page.<\/p>\n

First, copy the published link of the interactive table, chart, or map you wish to display. Reminder:\u00a0Do NOT copy the entire embed code offered by some visualization tools. Just copy the link.<\/p>\n

Second, enter square brackets, the word “iframe”, and the source (src) of the link inside quotation marks, similar to the example shown below:<\/p>\n

\"\"<\/p>\n

Third, save your work and click Preview to see the embed code in action, which should appear as a seamless interactive element in WordPress, similar to the example below. Always insert some explanatory text below to act as a “caption”, perhaps in italics, and insert the direct link for readers who wish to view the full-size version.<\/p>\n\n\n