WordPress forInteraction in Education

A demonstration of WordPress to create a blog/website for increased student interaction, and

for training students to operate this valuable content management system.

Elio L. Arteaga, MFAAssistant Professor, Media Arts & Technology

Miramar Campus

WordPress•Identified by our advisory committee as a “must-have” skill

for graduates entering the industry.

•Content Management System—Create blogs and websites.

•Easy way to organize content and separate it from style.

•Write new posts and pages, and manage media.

•Cloud-based, hosted by WordPress.com (totally free, but limited themes,

does not allow JavaScript or Google AdSense ads) or…

•Self-hosted, enables your own URL and custom plug-ins, but requires

a hosting service that provides PHP and MySQL, a file editor and an FTP client).

WordPress sitesused in education•Elio Arteaga, MFA – elioart.wordpress.com•Ruth Ayres and Stacey Shubitz – twowritingteachers.wordpress.com•Jaimie Gordon – fotoprofessor.wordpress.com•Jacqui Murray – askatechteacher.wordpress.com•Barbara Schroeder, Ed.D. – itcboisestate.wordpress.com•Geoff Sheehy – ateacherswrites.wordpress.com

All of the above-referenced blogs are the personal creations of the professor/teacher-authors. As such, they avoid the appearance of official school materials and even contain disclosure policies for transparency. A great site for building a disclosure policy statement specifically intended for use in blogs for education is disclosurepolicy.org.

Dos and Don’ts•Do use blogs to share ideas about your subject matter or field

of study.

•Don’t use identifying information; do protect confidentiality.

•Do disclose whether you are making money with your blog.

•Don’t use blogs to promote DeVry, nor to bash the competition.

Getting Started•Set up a new account

•The front and back ends

•Editing your public profile

•Adjusting settings

Go to WordPress.com, click Sign Up Now.Create a blog address, username/password and give your email address.Check your email, and click the link to activate your new account.

Your new blog is now ready.WordPress sites consist of two parts: (1.) front end, and…

(2.) Back end. To access, add /wp-admin to the end of your blog’s URL in the browser’s address bar. Right-click on the blog title in the upper-left to open the front end in another tab.

Edit your Public Profile. Pull down My Account and choose Edit My Profile.

This information is all public; don’t enter your home phone number.

Settings: General – site title, tagline, admin email, time zone, etc.

Settings: Writing – default category, format, link.

Settings: Reading – default display, posts or pages

Settings: Discussion – To avoid comment spam, require comment authors to enter their names and email addresses and register and log in. Approve comments before showing, and blacklist any offenders.

Settings: Privacy – totally public, hidden to search engines only,or totally private.

Publicize your posts on Facebook, Twitter, etc.

Drag Available Services downhere to enable them.

Choose button styles and labels.Settings: Sharing

Posts v. Pages•Posts are displayed in reverse chronological order and contain news items, articles, etc.—timely info that can become stale.

•Posts are organized by date/time/category/tags/authors.

•Pages are static and freestanding. Can contain site info, contact info, FAQs, etc.

•Pages are organized by a parent/child relationship.

Writing Posts•Adding new posts•Typing and editing text•Inserting special characters•Adding links•Adding images•Adding categories•Publishing/updating posts

•In the sidebar, click Posts, and Add New.•The URL for this post becomes http://____.wordpress.com/2011/04/28/this-is-my-first-post.•Type your title and body-text content.

Currently, the post is a “Draft,” but that can be changed to “Pending Review” or it can be “Published” straight-away . In addition, you can choose what date it becomes visible on the internet.

Posts can be typed in a Visual editor or in HTML. They can even be typed in Microsoft Word, copied and pasted into a post using the Kitchen Sink and Paste as Text buttons (shown above).

You can add special characters and foreign characters by clicking Character Map, the omega icon, visible when Kitchen Sink is selected.

•Add text links by selecting text in your post, and clicking Insert Link, the chain icon above the post body text.•Be sure to add a title for improving search engine optimization.•Open link in a new window if your link takes your visitors away from your site.

To add an image, look between the post title and the main body text of the post. You’ll see a group of icons next to Upload/Insert.They are images, video, audio, SWFs, polls and custom forms.

Click Image. Click Select a File from your Computer.

Add details. Remember, alternate text is important for search engine optimization, as well as for visually-impaired individuals who use a text reader to audibly recite the alternate text of images on web pages.

Click Insert into Post.

Change to the tab displaying the front-end, and refresh the browser.

•Add categories to help organize your posts. At the bottom right of the post-editing page, click Add New Category, and enter the name of the category, in this case, Events.

•Next, uncheck “Uncategorized” and check “Events.”

Click Update, change to the tab displaying the front-end, and refresh the browser. The new category is visible at the bottom of the post.

Writing Pages•Adding new pages•Setting up your site’s landing page

•Back in the Dashboard, under Pages, click Add New. Begin typing a title and body-text content, just as you would with a new post.

•The URL becomes http://________.wordpress.com/contact-us/

•Click Publish.

•Click Pages to display your list of pages, hover over Contact Us, and click Quick Edit.•Next to template, choose “One column, no sidebar” to get rid of the sidebar on the static page.•Also, uncheck Allow Comments to remove the comments box from static pages. These two only make sense if they were in posts, not pages.

•Click Update.•Go back inside the page editor, and uncheck Show sharing buttons… to remove them from this page. Likewise, they only make sense if they were in a post, not a page.

The Contact Us static page displays neither the sidebar, nor the comments box, nor the sharing buttons. Just right!

Now, try removing those three items on the About page.

If you wish to make one of the static pages, rather than the posts page, the landing page (home page) of your site, first go back to the back-end. Make a new page called “Blog” and publish it. Don’t do anything else with it.•Go to Settings: Reading (remember this?)•Click Front Page Displays: A Static Page (Select Below).•Front Page: About•Posts Page: Blog.

Click Save Changes, and refresh the tab displaying the front-end.The About page is now the home page, and there are navigational links to Blog and Contact Us. Great work!

Moderating CommentsComment moderation is necessary, otherwise spam will fill up your comment boxes. Earlier, in Discussion Settings, we indicated that comment authors must provide their name and email addresses, that they must register with WordPress and log in, and that the administrator must approve each comment before it becomes visible.

The number 1 indicates that there is one comment needing

approval.

The yellow background on elioart’s comment indicates that it hasn’t been approved by the administrator yet.Hover over the comment. The options are:•Approve•Reply•Quick Edit•Edit

•History•Spam and•Trash

Click Approve. Your visitors can now read this comment.

Modifying theSite’s Appearance•Selecting a theme•Adding widgets•Customizing menus•Adding polls•Changing background and header images

Changing ThemesCSS separates a site’s content from its appearance. It’s easy to change the appearance of your site by choosing various themes and changing other characteristics.

Appearance:

Themes

Not every theme contains the same features, for example, a

two-column sidebar layout and a single-column layout in the same

theme. To browse for features, click Feature Filters…

Select desired features and

click Apply Filters.

WordPress shows you all

the themes that contain those

features.

Same content, now previewing in the DePo Masthead theme.You may activate it, or just close the Preview window.

Adding WidgetsWidgets are fun little programs that can contain calendars, Twitter feeds, RSS feeds, etc.

Appearance:

Widgets

Drag any widget into

one of the widgetized

areas on the right side of

the Dashboard.

They are automatically

added. Just change to

the tab containing

the front-end display…

Refresh the browser, and there’s my calendar of events in the sidebar. They’re fun to experiment with, so have a good time!

AddingCustom MenusWordPress makes it possible to customize the navigation menus in your site.

Right now, my menu displays Home (my About page), Blog and Contact Us, but it’s possible to better organize the menu so that your visitors can better appreciate the scope and scale of your site.

Appearance:

Menus

The first step is to name your new menu.

Next, select the new menu as your Primary Navigation.Then select the pages you want added to your new menu. Click Add to Menu.

Rearrange menu items in desired order.

The new site still lands on the About page, but now the menu reads “About” instead of “Home.”

Adding PollsPolls are a fun way to add interactivity to your WordPress site.

To begin, click Polls: Add New in the sidebar, then click Create One in the main editing area. If it asks to auto-create a PollDaddy account, click Yes.

Write your poll question and answers, and then pick a PollDaddy style.

Change the settings, if needed, but

otherwise, just keep everything as is, and

click Save Poll.

To add your new poll to the page, go back to Polls in the sidebar, hover over your new poll and choose Share-Embed. Copy to the clipboard the WordPress Shortcode for the poll.

Next, go back to Appearance: Widgets and drag a Text widget over to one of the widgetized areas. Enter a title, and paste the WordPress Shortcode copied from the previous page.

Your new poll now shows up in the right-hand sidebar.

Changing Background Colors and ImagesWordPress enables you to customize the background color and image of your website.

Changing the background color is done

through Appearance: Background.

Type the hexadecimal code for a specific color,

or clickSelect a Color to display

a Color Picker.

Click Save Changes, change to the tab displaying the front-end site, then refresh the browser.

The page background is now blue.

A repeating background

tile is a good way to add a

lot of decoration with just a

little memory. The

small file only needs to

be downloaded

once, but repeats over

and over in the

background.

Save Changes, then refresh the front-end.

To make atop-edge

border, pick a background tile

image that repeats

horizontallyonly, such as this foliage-

border image.

Set Repeat to Tile

Horizontally,and pick the

same background

color that appears at the bottom of the

tiles, in this case #b79d3e. Save Changes, then refresh the front-end.

Custom Headers and Featured ImagesYou can customize the header that appears at the top of the page, or even create individual headers for each page.

For this demo, I’ve created four custom headers using Adobe Illustrator, one plain and three with text.

Appearance:Header

Upload Image eaheader to use as a custom header for all pages.Save Changes, then refresh the front-end.

Alternatively, you can design individual headers for each page of your site. First, go to Pages, hover over one of the pages and click Edit.

Click Set Featured Image (we’re in the About page, right now).

Upload file eaheader_about.jpg

and click Use as Featured Image.

Save all changes, then refresh the front-end.

Repeat this last step for Contact Us with the file eaheader_contact.

Set the Blog page header by going to Appearance: Header and using the file eaheader_blog. Visit each page to see its custom header.

ConclusionI’m hoping you can see all the creative possibilities for building web sites and blogs in WordPress.com. We covered:

•Setting Up an Account and Getting Up and Running•Editing your Profile and Adjusting Settings•Adding Posts and Pages•Inserting Media, such as Images•Inserting Links•Adding Categories•Setting the Front Page•Managing Comments•Selecting Themes•Choosing Widgetrs•Making Custom Menus•Adding Polls•Changing the Background Color and Headers

Thank you for attending!I hope you enjoyed the presentation!Contact me at earteaga@devry.edu or 954-499-9644.

For further study, please visit:

•Support – en.support.wordpress.com

•Forums – en.forums.wordpress.com

•Learning – learn.wordpress.com