Word Press User Guide

THL Toolbox > Workflow Issues > Word Press User Guide

Word Press User Guide

Contributor(s): David Germano

Word Press is a well known blogging tool which has developed into a content management system for web sites. These instructions are based upon the use of Word Press for the external link: UVa Tibet Center's web site, but we have tried to generalize them as much as possible.

Editing Content - Posts, Pages and Sidebars

The editing of content falls into three main areas

POSTS
PAGES
SIDEBAR

The following brief outline will introduce these terms and the parameters each represents. Further on in this editor's manual you'll learn more about each as it relates to actual content editing:

1. POSTS

This is the part of site that makes use of the blogging part of the Wordpress software. Posts can be used for News and Events in a website, which is explained in the following. All posts are categories as News or Events, and then also assigned a sub-category within each to indicate the type of news or type of event a given item is.

When creating a new Post:

Add a title
Add your content
Assign a Post category, and subcategory (note the difference between News and Event)

Event Date (For EVENTS ONLY)
Assign the Post's "time" if the post is an Event. Find the "Event Editor" under the main editing text area; post your date time by clicking the "plus" symbol, and then click the "…" to the right of each time slot to access a calendar for date selection. Setting the time you can do by hand - note that the time format is based on 24 hours, (not 12hr am/12hr pm)

Location (For EVENTS ONLY)
Under Custom Fields you want to post the Location. So find the CUSTOM FIELDS box. On the left side of this box first select "location" from the dropdown. Then in the right text area insert your location data.

Publication Date (For ALL Posts)
If you wish to postpone a post from appearing, you can specify the publication date through setting a date up near the PUBLISH button in the top-right. Where it says Publish Immediately you can assign a different date if you wish. This is true for creating PAGES also.

…and don't forget to click the button: PUBLISH

We have not learned of a way to allow editors to easily change the overall header for a page that consists of posts. However, we do have a way for the administrator to insert such headers. Thus, for example, the page listing upcoming event posts has an inserted header, "Upcoming Tibet Events at the University of Virginia".

- In order for Upcoming Events and Past Events pages to list events, and for them to show up on the calendars, they must be categorized under the main Events category in at least one instance, not only News. And all posts can be categorized as more than one category, but too many categories lessens this feature's usefulness.

Events - are accessed by users on the website by one of a few means: clicking on the category links in the side-column, and viewing the Upcoming or Past Events pages. News - is accessed on the UVa News Page or selecting the News category in the side column.

SPECIFICS about editing Events in the editor window:

Please refer to the page link below to see a group of different posts and how some are much nicer than others. Ideally all speakers will feel their talk or event is presented equally well on the site. I will refer to this group of posts in the following 5 bulleted notes.

external link: http://www.uvatibetcenter.org/?cat=4&paged=2

Please use an H6 tag for the event's Title as the first item you add, then add the subtitle of who the lecture or presentation is by, and in this case you can decide whether to use an H5 or no header depending on whether you need to push this line of text down a little. The Wordpress editor has quirks and this is a fix for now…Read more below on this topic in item-2.

1) Note how the Main Title usually leads with the speakers names first and then the subject, this would be good to maintain whenever possible. Also, whenever possible try to shorten the Main Title to one line of text.

2) The subtitle needs a little care it seems because it is often jammed into awkward positions depending on the length of the title being one line of text or two.

See for example a layout that appears to work well: "Lecture by Dr. Geoff Childs, Development Approach in Rural Tibet"

The subtitle, "By Dr. Geoff Childs, Associate Professor, Sociocultural Ph.D., Indiana University" fits nicely underneath. however several events have a two-line event title requiring the sub-title to be bumped down, well if it is not bumped down enough it appears to get hung up, so try giving it that extra nudge down so the left side of this text is aligned to the far-left. To do this in this situation use an H5 header tag I have created specifically for this in News posts only.

Remember you do not have to use the H5 for subtitles, only when you need to push it down. The attached screen-shots will show how this looks in the admin editor and on the website.

3) The picture set to the right is preferable.

4) Toward the bottom of this examples page their is a post with very little text and a large photo that is taller than the text; this causes problems for the post below it when viewed on a page like this - although it may not show up on a single page.

Try to remember to keep the bottom of the picture equal to, or above the bottom of the text.

5) See the example: "Lecture by Padma'tsho, A Cham Ritual of Padmasambhava" In this instance this image was inserted into the beginning of the text, after the main title BUT before the sub-title, which causes it to go up to high into the title.

Try inserting images after a few lines of text or at least AFTER the sub-title.

Please resist the temptation to make the images too large, especially when there is very little text.

2. PAGES

The pages are the majority of the website, and consist of top-level categories and sub-categories. With the pages you have the option to assign different sidebar content through the selection of which "TEMPLATE" you select.

So to create a new page just click the New Page button in the admin's left navigation column.
Write you title for the page and add you content.
Now in the right-hand column of the admin area for creating pages you will see a box labeled ATTRIBUTES. Select the Parent for you page if there is one, and select a template if you want a particular sidebar(group of widgets) for this page's layout.
If this is a page that you do not want to appear in the dropdown navigation or side menu system you must hide it; open two versions of the admin page in seperate tabs or browser windows - and once you've clicked on "New Page" and entered the name of the page in the editor's top form space, BEFORE you click on Publish to finalize your page, go to the other admin tab you have open and click on the link in the left column of the admin area that says Tools --> Page Links - scroll down to the bottom of this page and uncheck the box aside the name of this new page - (it might not be at the bottom, but should be if you've not set its parent in the admin area)

As you create pages, avoid clutter by keeping pages grouped together under a parent page, even if the parent page is only an empty page functioning only to group together other pages in the editorial display. In addition, if you have such an "empty" parent page with a lot of subpages, best to place it at the end of the list of parent pages again for purposes of avoiding clutter. For example, we created a "personal profiles" parent page to group together all pages presenting individual participants, even though in fact those pages were primarily linked to from a series of other pages.

To browse through pages for editing, click on the PAGES button in the left hand side side bar. The default view is cumbersome because it just is a flat listing of all the pages and you have to use the right hand side page numbers to navigate through the groups of pages. An alternative is to click on PageMash button below the PAGES button. It provides a navigational view with all the pages viewable at one time. The top level grouping pages can be collapsed so that you can see all the top level categories, and then expand the one that you want.

3. SIDEBAR WIDGETS

Posts and Pages are the "containers" for the main content on any given web page in the site. In addition, each web page as viewed by end users has a right column, or what we call the "sidebar". Each sidebar has vertically arranged "boxes" to highlight specific content and special features; these are known as "Widgets".

To edit the widgets for a given sidebar, click on the APPEARANCE item in the left hand sidebar in the Editing view. Then below APPEARANCE, choose the option "widgets". Then on the right hand side you will see a header "Current Widgets". Click on that and it will give a full list of all the different sidebars. Choose the one you want to modify from the drop down list, and remember to click SHOW. Then it will show you a list of all the individual sidebars on that specific page.

You then edit the content of each. It is possible to have a unique sidebar for each section of the website (About Us, News, Study, Communities, etc). On the left is a header AVAILABLE widgets, which lists all the possible widgets you can add into the sidebar which you are editing.

A few notes:

The blue header bar for each widget is draggable with your mouse/cursor allowing you to drag widgets back and forth, and also allowing you to create the "ORDER" of the widgets, top to bottom.
The widget labeled TEXT you can drag repeatedly into the right column if you want more than one text box. Within the TEXT Widget you can use normal html tags but since there is no editor you must write out all your tags including P tags, H tags, lists image tags and anchor tags.

SEE EXAMPLES in existing TEXT widgets

How to Edit Content

TEMPLATE
A template page for you to refer to is at this url: external link: http://www.uvatibetcenter.org/?page_id=434

Left Hand Menu

When you login to the administrative view, the first page is called the Dashboard. The general set up is a persistent left hand menu, and then to the right is the content area. The left hand menu:

Posts: this is how to make blog posts. We use this for making news items and event items. For event items, at the bottom of the page you will find an "Event Editor" where you can specify date and time. In "Categories" specify the "type" of news item or event. You can also indicate more specific associations using "tags".
- Suboptions: edit, add new, tags, categories.
Media: this is where images, videos, and PDFs used in the site are kept.
- Suboptions: library, add new.
Links:
- Suboptions: edit, add new, link categories.
Pages: This gives access to the "pages" which constitute your web site. Each page if you put your mouse on it gives you four options - Edit, Quick Edit, Delete, and View. Quick Edit allows a view of some basic info in editable form right within the current page. Edit allows you to edit the content and all other aspects of the page. The main content window has two tabs - visual and HTML - which allow you to edit in a WYSIWYG mode or a HTML mode in which you see the tags. Of special note - to the right under Attributes you can assign a "parent" which determines the hierarchical relationship of the site's web pages.
- Suboptions: edit, add new, my page order. My page order allows you to view the root pages, and their subpages, so you can easily drag and drop them into a different order in terms of how the top bar tabs and their drop down menu options appear.
Comments: No suboptions. This gives you a view of comments, and allows you to accept, reject, and so forth.
Profile: Suboptions: your profile. This lets you determine the colors you see in the admin view, as well as the maintenance of your own personal detail.
Tools: Let's you enable Gears for your computer. Also a little tool to grab stuff from the web.
- Suboptions: tools, page links. Page links give you a screen with all pages where you can easily turn them off and on in the site navigation. If a page gets accidentally turned off, this is the easy place to turn it back on.
Settings: At present this simply allows for the specification of some settings regarding to our use of blog posts for creating events in the calendar.
- Suboptions: Event-Calendar.

ADMIN EDITOR: Visual vs HTML

As you will immediately notice the visual editor (wysiwyg editor) does not represent the true visual appearance of content; fonts are always serif, images are out of position, and columns do not display properly. Essentially all of the website's presentation style in the CSS does not get incorporated into the editor - so it is a hindrance at times - and an aid at times. It does offer buttons for creating tables and pasting text from Word, so for this reason you will find it useful. Otherwise I assure you you will find frustration and lost time in using this editor feature if you use columns in particular. Learn introductory HTML and that is all you need.

In the html editor you DO NOT need to type <p> tags since these will be added automatically.
And as a reminder, your header tags are H1 through H6, descending in size from H1 to H6.

<div> tags as they are known represent "divisions" with in the code for identifying areas that receive special styling or positioning, like the use of columns as you will read below in the area about columns.

One irritating aspect of the HTML view is that it doesn't show spaces between paragraphs, or between headers and paragraphs. This "crunched" view can be hard to edit. One easy way to fix this is if you click on VISUAL and then back to HTML tab, you will then see such spaces. However, as soon as you update the page, those spaces will disappear again.

NOTE: ALL TAGS AND MARKUP SHOULD BE LOWERCASE.

PASTING TEXT FROM MS Word

With editing text you are either typing directly into the editor or pasting it in. The only advantage I see for the visual editor is in the case when you wish to paste text from Microsoft Word into the editor. In these cases simple locate you cursor in the editor where you want to paste the text and press the button for pasting that has the large W on it in the VISUAL editor.

Formatting Pages

Please use line spaces in editing pages. Ff it is just one endless line of interspersed code and text, it makes it very hard to edit. Adding blank lines between text sections, and also starting text on a new line rather than just after some line of code in the same line, emakes a world of difference in quick editing in the HTML rather than WYSIWYG view.

All links to pages in the same Web site should be "same window" links, but any links to pages from other web site should be "second window" links. The LINK button in the editorial interface make same window links. Adding target="_blank" will make it into a new window link. If you are using the HTML editing view, then you select the text you want hyperlinked, and then use the LINK button to insert the URL. That will yield: <a href="http://cnn.com">CNN</a>. To alter that into a new window link, you insert target="_blank" after the .com", and before the >CNN, thus yielding: <a href="http://cnn.com" target="_blank">CNN</a>. If you use the link button in the WYSIWYG interface, select the text you want to link, then click the LINK button, and the option to select how you want the link to open is offered. In that box, "target" has drop down options that alllow you to specify if you want the link to open up in the same window or in a new window.

Use h1 for the title line of any given page. Always have a h1 header at the top of the page, and never use it again on a page. Further headers can be specified by going to the FORMAT drop down box and specifying heading 1, or heading 2, etc. instead of paragraph. You can use h2 through h6 to indicate a series of sections and subsections. The headers 2 & 3 are the same size as are 5 & 6; the main difference is that even numbers have SERIF font like Times, and the odd numbers have SANS-SERIF like Arial.

h1 is big title with underline graphic
h2 is big title with no underline
h3 is big title with double thin underline
h4 is medium header with thin single underline
h5 smaller still with no underline
h6 smaller still with no underline

Please note that in the buttons above the editing textarea - you can click on the picture of a monitor in the editing controls to get a full screen view for editing. This is far superior to using the tiny window. You can also just increase the size of the editing window by dragging the bottom-right corner. Also if you are editing multiple pages, best to keep the view of all the pages in one tab, and then open up pages or posts you are editing in separate tabs.

Trying out Different Formats

If you want to reproduce a format such as two columns, or some other format, the best way to do so is to look at a page that has the format you want within the site, view it in the HTML view, and copy and paste the code. A little analysis should enable you figure out how the HTML tags are working. Delete the content, and replace with your new content for the new page. You can also check out code in the templates page: external link: http://www.uvatibetcenter.org/template

Formatting Events

When entering a lecture, in the title field, put "Lecture by Joe Smith, The Rise of Bilingualism" - do not put people's titles.
Then in the description, the first line should be in bold face, and simply be the title of the talk
The next line says By Joe Smith, Associate Professor, University of the Whatever
The next line then says, if it is primarily a Tibet Center talk, "The Tibet Center Presents:"
Then after a blank line, an opening sentence on who the speaker is, followed by a description of the talk.
Then after a blank line, there is "Sponsored by...." This includes " Sponsored by the Tibet Sustainable Governance Program", " Sponsored by the East Asia Center and Department of Religious Studies", etc.
Go down to the CUSTOM FIELDS section, and set the "name" drop down list to "location", and then in value field type in the location; when typing in the location, start with the most specific location (such as a room, and then list all relevant locations from smaller to larger up to and including the country - for example, "Kaleidoscope Room, Newcomb Hall, University of Virginia, Charlottesville, Virginia, USA"

Adding Media Objects to the Media Library

The Media Library is where you upload images, audio recordings, video recordings, and PDFs that you want to use within the site. After you store the objects there, you can both insert them into WordPress pages, or also just get the URL for the object, and then link to the object from a WordPress page.

On the Dashboard, in the left hand side bar area the MEDIA option gives access to the Media Library. Click on it. That will show you the list of all media in the Library. Unfortunately, there seems to be no way to easily classify objects into folders to more easily organize large amounts of objects into meaningful categories. To add a new object, click “add new” on the left under MEDIA. Use the “select file” button to browse your hard drive to select the object you want to upload. As you upload, you will have an option to add a caption and description for the project.

Once an object is in the Media Library, you can just browse through the full list to find the object in which you are interested. Under an object, you put your cursor under its name and you will have three options – edit, delete and view. VIEW will show you the page which has the link to the PDF. Clicking on the PDF link itself will give you the actual PDF, and thus its URL as well in the browser address bar.

Linking to a Media Object in the Media Library

If you want to simply link from a word in a page to a second window which shows a PDF, then follow the instructions in "Adding Media Objects to the Media Library" to put the PDF in the Media Library. Once an object is in the Media Library, you can just browse through the full list to find the object in which you are interested. Under an object, you put your cursor under its name and you will have three options – edit, delete and view. VIEW will show you the page which has the link to the PDF. Clicking on the PDF link itself will give you the actual PDF, and thus its URL as well in the browser address bar.

Then in the page in question, just add a link as usual to a word, and paste in the URL of the media object. Make it an "open in new window" link.

Adding Images/Media to a Page

If you want to use images in a Web page, you need to first prepare the image. If you have a JPEG image, then

Edit the image in 3 basic steps: crop, size it (dimensionally), and size for the Web in resolution (72-dpi)
IF YOU WANT TO EDIT FOR tone and values then different software varies; this is NOT necessary, but NEVER EDIT A JPG

SAVE IT AS A TIFF FIRST BEFORE CROPPING OR ANYTHING, then edit the image as a TIFF file - and SAVE IT AS A JPG

Then you have to upload the image into Word press's image collections into the Media Library. You do so by using the main admin link in the left column for Media Library. This will also allow you to upload many images at once as well.

Please under no circumstances just add an image to a page - always first add into the Media Library. All images uploaded into the Media Library will have three dimensional sizes of the image created automatically: a thumbnail 120px X 120px, 300px X 300px, and 670px X 670px

Then you are ready to add the image into a given Web page:

Click on the "Image button" FROM THE HTML EDITING TAB. YOU WILL FIND THIS IN THE TOP-ROW
Then select the top tab for Media Library to use an image in there and upload.
Select the image and then in this new box full of choices all you have to worry about are two things: set the alignment left or right, and select the size you want. With thumbnail size images you have an option to crop the image rather than shrink it - most of the time cropping is best.

While you have the option to use an image uploaded from your computer directly into a page, or post images from a URL, we do not recommend it.

Another way to do it is that above the Editing controls, there is a line that begins with Upload/Insert, followed by four icons: add an image, add video, add audio, add media. When clicked on these, it gives a popup with tabs: from computer, from URL, gallery, media library, or NextGEN Gallery. Each tab then allows you to select an object from the corresponding location.

Using Tables

Right now there is one simple table style. When you need a new table for some reason just let me know and I will create it according to your specific needs. There is a button in the visual editor which I do not recommend but it can be used to lay in columns and row tags. IF you use this button you should only select how many rows and columns you want. Everything else offered in the table-creation dialog box should be ignored. If you need special features to a table email Mark.

An example table can be seen on the student's page under About Us.

NOTE:The addition of a class on the table tag is required class="table1" and therefore you have to edit html to use tables with control.

Creating Lists: bullets and decimals

Here you have ORDERED and UNORDERED lists to choose from.

<ul> <li>First list item</li> <li>First list item</li> <li>First list item</li> </ul>

<ol> <li>First list item</li> <li>First list item</li> <li>First list item</li> </ol>

Columns: Two column layout

There are no buttons for creating columns so you get to type out your tags as you see them on the Template Example Page, or copy/paste from the demo template.

Two Columns

This column layout requires: <em>class="columns"</em> on the first DIV tag, (the outer wrapper). LOOK at the code to understand how. However, in wiki the - - (two dashes together without a space) yields a strikethrough, so please refer to the Wordpress Template page for exact tags: external link: http://www.uvatibetcenter.org/?page_id=434 These tags are corrupted by the space between the -, please remember to join them.

<h2>Column 1</h2>

</div>

<h2>Column 2</h2>

</div>

<div>

Table with Header, 2-Rows and 6-Columns

This table requires: <em>class="table-1"</em>

<tbody>

<tr>

<td>ColumnHeader</td>

</tr>

<tr>

<td>content</td>

</tr>

<tr>

<td>content</td>

</tr>

</tbody>

</table>

Defintion Lists

For integrating headers with content and indenting

This first list layout/style is plain markup that is like an unordered/ordered list but it has a title/header tag built-in that makes it nice for much more than lists. It uses nested wrappers consisting of a DL, DT, DD tag; so the DT and DD are contained inside the DL tags. All tags need cosing tags, so they are pairs. The names and info are inserted for your viewing pleasure. <dl>

<dt><a>Nawang Thokmey</a></dt>

<dd>As Tibetan and Serials Library Assistant, Nawang Thokmey is directly responsible for cataloging new Tibetan language acquisitions, as well as helping library patrons with questions and needs concerning the Tibetan language collection.</dd>

<dt>Philip McEldowney</dt>

<dd>As Librarian for Religious Studies and Anthropology, and Selector of South Asia and Middle East materials, Philip McEldowney supervises the Tibetan collection and takes the lead in its strategic development through new acquisitions.</dd>

</dl>

Personal Profiles

The Tibet Center Web site decided to make individual pages for each core participant. These pages then were linked to from the main reference to the person in the About Us pages. They could also be used to link to the person's profile whenever the person's name appears anywhere in the site. By having such personal profile pages, the site gives a consistent, attractive way to learn about each person. The structure:

Name
Picture
Background
Interests
Activities
Achievements
Publications

Simple Instructions for Beginners

Here are some basic instructions on creating pages and posts. These will be helpful for volunteers, interns, and anyone who is unfamiliar with WordPress or html. Text in capital letters is for instructional purposes only and should be replaced by the content indicated.

Posts

An upcoming event post

Title field: Lecture by Person, Title of Lecture
If you wish to insert an image, click the image button above the text box and choose your image from the library.
In the text box, enter:
<p><strong>TITLE OF LECTURE</strong><br />
By PERSON</p> (the <br /> tag will yield a break, so that By PERSON will show up on the next line, and </p> is the end tag for that sequence)
The Tibet Center Presents (if applicable)
Insert <p>TEXT ABOUT PERSON AND LECTURE</p>
After the summary, insert the sponsoring organizations: <p>Sponsored by the Tibet Sustainable Governance Program</p>
Choose the type of event from the left-hand drop down menu, i.e., Lecture, Public Talk, etc.
Set the date and location.
Go down to the CUSTOM FIELDS section, and set the "name" drop down list to "location", and then in value field type in the location: i.e., Minor Hall 125, University of Virginia, Charlottesville, Virginia, USA
Go to the bottom of the page and change the start and end times for the event.
Please check this carefully EVEN AFTER you publish because these two fields (location and time) have the tendency to duplicate themselves after publishing. If they do, go back and delete the extras and then update the page.