WordPress User Guide

Introduction

HLSorgs is a platform for hosting HLS student organization websites.  It runs on WordPress, a system that makes it super-easy to launch, edit and customize your site.  Right out of the box, your HLSorgs website is great for posting static content, blog posts, announcements, photos and videos.  It’s also easy to add functionality: twitter feeds, Facebook integration, slideshows…if you’ve seen it on the web before, chances are it can be integrated into your site.

Logging In and the Admin panel

Once we create your site we will add you as a user, and you will receive an email from the site with your login credentials and the address of the admin login (which will be http://hlsorgs.com/yourSiteName/wp-admin/).  Go ahead and log in.  What you see next is the Admin panel, where you will add and edit content and adjust the settings of your site.  The menu is in the column on the left.

There’s a lot going on here, but you won’t have to worry about too much of it.  This guide will cover the most-used functionality, but feel free to explore.  You can also check out the official WordPress documentation at http://codex.wordpress.org.

First things first: you’ll probably want to change your password.  Toward the bottom of the admin menu, click Users to expand the Users menu, and click “Your Profile.”  The password field is at the bottom, and is really the only thing you need to update here.

Themes

Every site has a theme, which determines how the site looks and, to a limited extent, what kind of functionality is implemented (there are other ways of adding new functionality to your site–see Plugins below).  You can test out other themes for your site by going to Themes under Appearance in the Admin panel.  The available themes are displayed as thumbnails here.  Click Preview under a thumbnail to see how the site would look with that theme.  Click Activate to switch to this theme.

Most themes will add a section to the Admin menu that allows you to customize parts of the theme–usually including some of the colors, fonts etc.  They may add additional features to other parts of the site as well, for example providing additional options when editing content.  For more on themes, see Theme Options below.

Posts and Pages

Most of your time using HLSorgs will be writing content, either in Posts or Pages.

Posts are like blog posts, and can be news stories, articles, announcements, etc.  Multiple posts are typically displayed at a time, with the most recent on top.  You can create categories to organize them and use tags to add additional information.  Posts can easily be displayed in archive pages by category or date.

Pages are more like “regular” web pages.  They are for content that should more or less always be available on your site (though they are just as easy to change and update as posts).  Pages are typically linked in your site’s navigation menu.  Pages are often used for About Us pages, Conference information, etc.

The processes for creating and editing posts and pages are virtually identical, but there are slight differences that we cover below.

Write a Post

To create a new post, click the little arrow next to Posts in the Admin menu.  The menu will expand to show admin pages related to Posts:

Click Add New and you will be taken to the Post editing screen:

The main part of this page is the editor in the center.  This is where you write and edit content.  The rows of buttons on top provide various options for formatting and inserting content.  Some of these (lists, bold, italic, align) will be familiar to Word users.  Some (insert photo, link, text style) may be unfamiliar.  This visual editor will give you a general idea of what your content will look like on the page, but it isn’t an exact reproduction.

The tabs in the upper right corner of the editor allow you to switch between the visual editor and the HTML editor.  The latter allows you to edit the actual HTML that is behind the scenes.  Those unfamiliar with HTML should stick with the visual editor.  If you do want to edit the HTML, note that WordPress filters the code when it is saved and inserts/removes certain tags for purposes of safety and consistency.

Beneath the editor are a handful of other options:

Excerpt – some site themes will display an excerpt for a post.  By default this is the first 55 words of the post’s content.  If you write something in the Excerpt box for a post, the content you write will be displayed as the excerpt instead.  This is generally a summary or teaser that makes someone want to read the post.

Discussion –  you can set global settings elsewhere for whether comments/pingbacks are allowed on your site, but here you can choose to enable/disable reader responses on a per-post basis.

Author – By default this is your user account.  If there are multiple users on your site you may be able to select a different user account to credit for this post.  On the site, the author name is usually a link that allows visitors to see all the posts by that author.

Other Options – Other options that appear here are Send Trackbacks and Custom Fields.  You can probably  leave your trackbacks options the way they are.  Custom Fields are a more advanced way of adding additional data to your posts.  For more on custom fields check out http://codex.wordpress.org/Custom_Fields.

Special Options – There may be options in the Edit Post screen that are specific to your site’s theme or to a plugin you are using.  Once common theme option, for example, allows you to upload an image which is automatically displayed as a thumbnail along with the post.

Now let’s take a look at the column on the right.  This column includes Publish, Categories, and Post Tags.  From the bottom up:

Post Tags – Here you can add tags to the post.  Tags are a way to add a little extra information about the post, and generally describe the content.  You might tag certain topics that are discussed in the post, or use a tag to mark a post as “featured.”  Special theme options like animated sliders sometimes require you to tag the posts that should be included so they know what to display.  See Categories and Tags, below, for more information.

Categories – Here you can select which categories the post belongs to.  You can also add new categories.  Categories aren’t required but are a good way to organize and structure the posts on your site.  Wordpress makes it easy to display (and link to) lists of posts sorted by category.  See Categories and Tags, below, for more information.

Publish – There are actually a lot of things you can do in this box besides publish.  You can Save a draft of the post if it’s not ready to publish (WordPress automatically saves a draft every few minutes).  You can also set the post’s visibility here.  In most cases you’ll want it to be public, but you can also choose to ‘stick’ it to the top of the page, even if there are newer posts that would ordinarily appear above it.  You can leave the publish date/time as “immediately” or you can specify the time and date the post “goes live.”  And you can Preview the post, which will open a new window/tab showing you the full-page version of the article exactly as it will appear when published.

Note that depending on your user account, you may not have a Publish button.  In this case you submit your content and a site admin reviews it before publishing.

Write a Page

You’ll find the Add New link under the Pages header in the Admin menu, just as described with Posts above.  This will load an Edit screen that looks identical to the Post edit screen except there’s no Excerpt box, and Page Attributes takes the place of Categories and Tags.  Refer to the Posts section above for an overview of creating and publishing content.

Page Attributes  – This box allows you to specify a Parent if you want the page to be a sub-page of an existing page.  Templates are preset page layouts that come with your theme.  There is often one that includes a sidebar, for example, and one that doesn’t, so as to give your content the full page width.  If you’re unfamiliar with a page template, select it and Preview to see what the page looks like.  Order is what ‘order’ the page is in compared to your other pages.  This comes into play if WordPress is automatically generating a list of pages, but since you’ll be making a custom navigation menu, you will probably never need to worry about Order.

Writing/Editing Content

Now let’s take a closer look at the visual editor you use to create and edit content.  You can use a Post or a Page for reference, as the editor is the same.

You add your text in the text box.  When you insert a line break (“return”) between sentences, WordPress will automatically create a new paragraph.  It also tends to get rid of extra space, so don’t spend too much time worrying about spaces between your content.

First row: The first few buttons on the editor are text styles, the next are paragraph styles.  They should all be familiar concepts.  After the align buttons are two buttons that look like chain links, one broken.  These are the link and unlink buttons.  Select some text in the editor and click the link button to bring up a dialogue.  Here you can specify the url you want to link to, and specify if you’d like that link to open a new window.  There’s also an option that assists you with linking to content within your site.  Clicking the unlink button will remove the link from your selected text.

We mentioned above that some themes will display your posts’ excerpts.  Other themes show the full post content by default, and you can set a break point for the excerpt with the More button: the button with the dotted line separating two blocks.  Click this button to insert the ‘More’ tag in your content.  When your post content is shown on the site’s front page or in an archive, it will stop at this point and insert a link to the full post that says something like “Read more.”  Again, this is theme-specific.  If your theme only shows the post title on the front page or in archives, you won’t need to concern yourself about excerpts.

Next is a spell check button.  Click it to underline any potential misspellings in your content.  The next button toggles on and off a fullscreen editing mode; the following button (‘kitchen sink’) shows and hides the second row of editing buttons.  The next is for inserting a slideshow, which is detailed below under “Slideshows and Galleries.”

The last button here is for ‘Youtuber’, an easy way to embed YouTube videos.  Click the button and it opens a dialog:

All you have to do is copy the URL of the youtube video from your browser’s address bar and paste it here.  Click Insert.  You will see this in your editor:    You can insert a video in this fashion anywhere in your content, with text before/after.  When this post/page is viewed online, the will be replaced by the video.

Second row: The first item here is a dropdown where you can select text styles.  For consistency’s sake you’re better off leaving this on Paragraph, but you can also make text a header.  The next buttons: underline, ‘justify’ align, and text color (better to leave this one alone also, as your theme automatically applies text colors).  The next two buttons are for pasting in plain text (the ‘t’) and text from Word (the ‘w’).  If you copy and paste directly into the editor you sometimes get formatting quirks.  The Insert from Word button is especially helpful in this respect.  It opens a text box into which you paste your Word text.  Links, bold text, etc. will all be preserved and translated into their web equivalents.

The next button, an eraser, is to remove formatting.  A shortcut for when your text is messy.  The ‘omega’ button allows you to insert special characters.  Then we have outdent, indent, undo, redo, and a help button.  That’s it!

Adding images and media

Actually, that isn’t it.  Above the editor toolbar are the words “Upload/insert” and some cryptic icons.  These are what you’ll use to add images, audio, video and other media (e.g. PDFs) to your content.

Add Image: This is the option up here that you’ll use the most.  Clicking this first icon opens a dialogue.  Here you can upload and/or insert images.  In other words, you can upload an image to your site, insert an image into your post/page that’s already stored in your site, or upload an image and insert it.

Uploads.  Let’s say you’re going to upload an image and insert it into your content.  Click the button that says “Select Files.”  Browse to the image’s location on your computer and select it.  The image will be uploaded and a form will be displayed where you can enter additional information about it.  The title is the “name” of the image that you will see when browsing your media in these admin screens, so name it whatever makes sense to you.  Alternate text is mostly used by search engines and screen readers—it is best practice and good for search rankings to enter relevant, appropriate text that describes the image.  If you enter a caption, it will appear under the image when it is displayed.  By default, images link to themselves (click the image in a page and you load just the image on its own); if you want to link the image to some other page, enter the url under link, or click ‘none’ if you don’t want the image to be a link at all.  You can select how the image should be aligned when displayed.  If you choose left or right, text and other content will flow around the image to the other side, like in a newspaper.  Center or none will both give the image its own “line.”  Finally, you can choose for the image to be a preset size or use the original size.  You can save to keep all this additional info you’ve entered, or click Insert Into Post to insert the updated image into your content.  After you insert it you can drag it around or click it to resize it, delete it, or return to this edit screen.

Media Library: Once you upload an image—before you even enter extra data or save it—it’s immediately stored in your Media Library.  This is where all your images, audio, video, etc are stored in WordPress.  This is also where you go when you want to use an image that you’ve already uploaded.  When you click the Add an Image button and open the dialog, click the Media Library tab to see your existing media.  When you find the one you want, click show to open the same editing screen you see when you upload.  Here you can enter or edit the image’s details.  You can also edit the image itself by clicking Edit Image under the thumbnail.  Here you can resize, crop and do other simple image edits.  When you’re ready to add an image from the Media Library to your content, click Insert Into Post at the bottom of the edit screen.  Note that you can also access the Media Library directly from the Admin menu.

Add Video, Add Audio, Add Media:  these buttons work the same way as the Add Image button.  They are used for uploading files from your computer (or inserting a file previously uploaded, from your Media Library).  When you insert non-image media into your content, the title of the file shows up in your post as a link to the media file.  When a visitor clicks the link, whatever application they use to view that media will open (e.g. Adobe Reader for a PDF).

If you want to insert a video from YouTube you wouldn’t use this dialog because you’re not actually putting the video file on your site.  In this case, you would want to use the Youtuber button in the editor’s toolbar, as described above–you will just need to copy and paste the url of the video.

Galleries and Slideshows

HLSorgs has built-in support for image galleries and dynamic image slideshows.

Galleries are basically a nicely-formatted way  of displaying several images together (with their captions, if they have any).  You can always just insert the images into your post/page from the image upload dialogue, but then you have to try and make them look nice yourself.  When you use a Gallery, the wordpress system knows to make the images the same size and to align them, etc.

First you will want to upload the images you will be using.  (You can’t add existing  images from the Media Library to a gallery.)  Click the Add Image button above the editor and upload the file.  Don’t click Insert Into Post–once you’re done entering info about the uploaded image click Save All Changes.  The dialog will now switch to a tab called Gallery, where it shows a list of the images uploaded for this post/page.  You can continue adding images in this way and the Gallery list will show each as it is  added.  When you have uploaded all the images you want, review the settings that appear in the Gallery tab (the number of columns you want, for example) and click Insert Gallery.  Alternatively, you can add the shortcode “

” in the editor once you have uploaded the images.  The gallery will appear as a big block in the editor.  As with images, you can click it to delete or change its settings.  For more details on customizing galleries see http://en.support.wordpress.com/images/gallery/

Slideshows are built off the gallery functionality.  Slideshows display the images from your post/page one at a time, as an animated slideshow.  To create a slideshow, first upload the images you want to use with the Add Image button as described above.  Remember, you don’t need to actually insert them into the post/page.  Once you’ve got them all showing up in the gallery tab, click Save All Changes.  In the editor, place the shortcode “” where you want the slideshow.  You can also use the slideshow button in the editor tools.  When you click this button, a dialog opens.  Click Images From a Post.  In the resulting dropdown, select THIS POST to use the images you uploaded.  You can also choose to use the images from a different post in your slideshow by selecting that post instead.  By default, the image’s name is shown as an overlay in the slideshow.  You can disable this as follows: “”.

Categories and Tags

Categories and Tags provide ways of organizing your posts (not pages).  Categories are for structure–you can have sub-categories and sub-sub-categories etc.  You can easily make and link to archive pages that show your posts by category.  Tags don’t provide as much organization, but are good for linking related content.

Categories are how you organize posts.  These can be straighforward (e.g. different topics covered by your posts) or you can use them to divide up your content in other ways (e.g. one category for the blog, with subcategories; another for print articles, with its own subcategories).  You can create new categories by clicking Categories under Posts in the Admin menu, or you can create them on the fly when writing a post.  Note that you can make a category a sub-category of another to establish a hierarchy.  You can always change the categories to which you have assigned a post in the Edit Post screen.  Most site themes will display a post’s category as a link.  Clicking it will take you to an archive of all the posts in that category.

Tags are for making connections between posts that may or may not be related in other ways.  For example, a post about underwater basket weaving could be posted in the category “DIY” while a post on basket production in developing nations might be posted in the category “International Development”, but both might be tagged “baskets.”  You can add a new tag by clicking Post Tags under Posts in the Admin menu, or you can make new tags on the fly when you write a post.  As with categories, site themes that display post tags typically make them links to an archive of all posts with that tag.  Tagging your posts can offer your users an easy way of finding the content that interests them.  Note that tags are not hierarchical–you cannot make sub-tags.

Menus

HLSorgs allows you to customize your navigation menu.  You can choose to link to Pages, to post archives, or to any other URL.  To edit the menu, go to Appearance -> Menus from the Admin panel.  You’ll see the menu represented on the right.  You can drag and drop the menu items to rearrange them.  You can also “indent” a menu item to make it a sub-item of the one above it. Sub-items are displayed as a dropdown when a visitor hovers over the menu.  You can also click the little arrow on the menu entry to change how it’s displayed, for example to edit the text shown in the menu to be different from the page name (useful if the page has a longer name).

Add a new Menu item:

• To add a link to a Page, select the Page you want to add from the Pages box to the left and click Add to Menu.  (You can also select ‘Home’ here to add a link to the home page–but note that the site logo is also a link to your home page.)
• To add a link to a category archive (a list of all the posts in a certain category), select the category in the Categories box and click Add to Menu.
• To specify the URL for a link, enter the address in the Custom Links box, enter the text that should appear in the menu in Label, and click Add to Menu.
• When you’re done editing a menu click the “Save Menu” button.

Sidebars

To edit or change settings for the elements in your site’s sidebar, click Widgets under Appearance in the Admin menu.

 

The site’s sidebar is a ‘widget area’: part of the site where you can display widgets.  Widgets are just different types of content–there’s one that shows your categories, one that displays recent comments, one that lets you enter some text to be displayed, etc..  You can put as many widgets into your sidebar as you want, but be aware of how it looks to your visitors.  Note that some themes may have additional widget areas besides the sidebar.  Some, for example, allow you  to place widgets in the site’s footer.

To add a widget to your sidebar, just drag it into the sidebar box.  It will immediately be added to the site’s sidebar (you don’t have to save or publish the sidebar itself).  You can rearrange them to change the order in which they appear.  Click the little arrow on a widget to change its settings.  When you’re done, click Save, and the new settings will take effect.  To remove a widget, drag it into the Available Widgets area, or if you would like to save its current settings (in case you want to put it back in the sidebar another time) drag it down to the Inactive Widgets area.

Theme Options

In addition to adding functionality to parts of your site (the content editor, or additional widgets for your sidebar), most themes have a options menu in the Admin panel where you can set global options.  This is usually a menu item with the theme’s name.  There will probably be options here you don’t want to change, but take a look.  If your theme includes a ‘slider’ (a slideshow on the front page) there will be settings for that.  There will also likely be an option to set text color, etc.

Using Plugins

Plugins add functionality to your site in much the same way as a theme.  (You can think of different themes as having certain plugins “built in”.)  Plugins can change or add to almost any part of the wordpress system.  Some provide new widgets for use in the sidebar, some add new features to the editor toolbar, some affect the site as a whole, tracking analytics or preventing spam comments.

To see what plugins are available, click Plugins from the Admin panel.  The plugins page will show you all the installed plugins and which ones have been activated.  Each plugin generally has a link to its website, where you can find documentation should you need it.  Those plugins that need/allow configuration add menu items to the Admin panel.  They either appear in the main Admin menu or in the Settings menu.  Should you want to be able to do something with your site that you can’t currently do, let us know and we’ll look for a plugin that fits the bill.