Using WordPress for E-Portfolios

Overview

The Resource Pack aims to show how WordPress web publishing platform (WordPress.org) can be a useful tool in creating and presenting e-portfolios. It aims to show what can be done technically to integrate various elements of an e-portfolio: the documentation of learning, conversation with peers and tutors, and presentation of the ‘product’ for assessment and/or feedback. [Jan 2012] You can download a PDF of this guide here: WordPress for E-Portfolios.

Introduction

E-portfolios are a popular method of documenting and presenting learning that has occurred in a module. They are promoted for this purpose as they provide a means to record both the process of learning—thoughts, learning, and reflections that occurred during a learning experience—as well as the product—the showcasing of that learning for review or assessment. Components of an e-portfolio may include digital media, comments and reflection, statement pages such as statement of philosophy & prior learning, etc. Often these components may be categorised by themes or modules on a particular programme of study. The portfolio as a whole can lead to a large back of digital objects, which during or after the period of study, will need to be presented in some coherent way. This Resource Pack aims to provide suggestions and mechanisms to assist in compiling and presenting these digital objects in an easy and scalable manner using WordPress.

WordPress is a web-based software used for publishing websites. Rather confusingly, there are two: WordPress.com which is mainly used as a blogging platform, where all material is hosted by WordPress; and WordPress.org which has extensive additional features (Plugins) which extend it beyond blogging use. wordpress.org is self-hosted; the user provides their own webspace for putting the material online. This document relates to WordPress.org.

Installing and Set-Up

WordPress.org is self-hosted, so the user needs to arrange their own webspace (I use Blacknight who are reasonably priced and reliable, and have WordPress pre-installed) or arrange server space with their institution. Once installed, the Administration (Admin) page can be accessed through the page www.example.com/home/wp-admin where there web address www.example.com/home is the URL established during installation. This prompts for a login, which again was set during installation.

Once logged in, the user is presented with the Dashboard. This can be a little daunting at first sight! However, the key elements that are used are Posts and Pages. These are discussed below.

Privacy

When starting out, many users do not want their portfolio to be viewed by anyone else, except perhaps their tutor and/or peers. There are various levels of privacy available.

1. Search Engine Privacy: The built-in privacy feature with WordPress allows you to block search engines finding your portfolio. Therefore, to access your site, someone would have to know the exact URL. This is achieved by selecting Settings > Privacy > “I would like to block search engines, but allow normal visitors”. This will add the phrase “Search Engines Blocked” to your dashboard, as shown in the example above. However, the portfolio is still available to view on the web for anyone who knows (or guesses) the URL.
2. Total Lockdown: In order to have the portfolio available only for whomever the user decides, it is necessary to download a Plugin. There are several available. A rather blunt but effective one is “WordPress Password” which allows a site-wide password to be entered before viewing. To obtain this plugin, select Plugins > Add New > and search by Term for the Plugin name. Click Install to download the plugin to the website and then Activate make your plugin active. You can deactivate the plugin at any time in the Plugins menu. Now any visitor to your site will have to enter this password to access the portfolio. Other methods of restricting access (for example by requiring User Log In) are available.
3. Selective restrictions: It may be desirable to have certain elements of the portfolio accessible, and others restricted. There are a range of options available here, and they are discussed in the Presentation section below.

Arranging Content: Pages and Posts

Content can be added to WordPress in two ways: on a Page or on a Post. Pages are permanent, generally with content that remains fixed (although we will exploit some useful page plugins, below). Therefore pages can be considered as the main structure of the website. For example, there may be a home page, an About Page, and other pages relevant to the portfolio—perhaps sub-home pages for each module in a programme, or pages covering various components such as a Teaching Philosophy, Prior Learning and so on. While pages can be added at any time, it is worthwhile planning out what pages you plan to consider for your portfolio. This is discussed below.

Posts are updates to the website that are time stamped, such as in a blog. Usually posts appear on one section—the blog—in reverse chronological order. In a portfolio, posts are usually dynamic in nature—blog posts considering thoughts and reflections in time as the user progresses through their learning. They are usually used to demonstrate evidence of engaging in the process of learning. As posts are usually written in time, they may not form a sequential series of thoughts related to one module or one concept, rather they reflect what the user was thinking about at any one time. Therefore in the presentation element of a portfolio, posts would not be read in order, and need to be available to be called up as required at various points in pages or other presentation elements.

Building the Portfolio

Figure 3 shows a simplified template for an e-portfolio. In this scenario, there are two modules being shown in the e-portfolio, along with a Teaching Philosophy, a blog and an About page. Module 1 has several sub-pages; a page which will selectively compile all blog posts related to a theme called “Category B” (and only this category), a sub-page containing a digital artefact—e.g. an essay, audio, picture, video and so on—and a sub page containing a Bibliography of web links or links to journal articles. Finally, there is the Blogroll, which has all the posts made on the blog. The details about how to construct this architecture are provided below. Although this is a simple scenario, it covers most of what would be required in a scaled-up version of an e-portfolio.

Page Architecture

First, we will create the pages required. After installing WordPress, two pages will be apparent—a so-called Home Page (although this is actually the Blogroll) and an About page. Therefore we need to first create five more top level pages according to Figure 3: an actual Home Page, and pages for Module 1, Module 2, Teaching Philosophy, and the Blog. To create a Page, select Pages > Add New and type the page name in the title bar. There is no need to add content yet, but if you like you can type in a short page description for each of your pages created, except for the Blog page, which should be kept blank. We know have six pages—the five created and the already present About Page.

Module 1 in our template has three pages associated with it. We create an additional three pages, as described above, except in this case we also need to configure these three pages so that they are recognised as sub-pages of Module 1. To do this, we select the Module 1 page as Parent page in the Page Attributes box, usually on the left hand column of the New Page. If you forget to do this now, you can always return at any stage to reconfigure a page by selecting Pages and choosing Edit for the page you wish to change from the list of pages shown. For each of the three new pages created: Module 1 Blogs; Artefact; Bibliography; we assign the Module 1 page as the parent in the Page Attributes option.

We have now created all of the Pages required according to our template. Clicking on Pages will show the list of pages in the Portfolio. You will also notice that the sub-pages are indented in a list beneath their parent page. Of course it is possible to extend this to sub-sub-pages and beyond by following a similar approach as described.

Before moving on to program each page, there is one default option that requires to be changed. After installation, WordPress automatically uses the blogroll as the homepage. As you will not yet have made any blog posts, it is probably a generic “Hello World” post that is posted on your homepage. To force WordPress to go to your new, real, homepage on typing in the portfolio URL, select Settings > Reading. In the options presented, choose “A static page” for the Front Page display and name that Front Page as “Home”­ the homepage just created above. We now also need to specify where the blog posts will go, and we can use “Blog”—the blog page specially created above to house these. After saving changes, when you type in the portfolio URL, the page should go to your new actual homepage.

It is worth reviewing progress made so far on the front end of the website. Depending on the theme installed (see below), your pages will be listed along the top or down the side of the website.[1] Usually, sub-pages are not shown or are activated by a drop-down menu. We will see later how additional customised menus can be added along with these page links, that are usually included by default. Click around the website to ensure that pages are as you expect them to be.

Posts

Up to this point, we have concentrated on the site architecture – the underlying structure of the portfolio. Before progressing, we need to make some blog posts (assuming you want to use this feature). Adding a Post is the same as adding a page, except we select Post > Add New. Give the post a name: e.g. “Module 1 Week 1 Reflections” and type in some content. Now, before saving, we need to categorise the post. On the right hand side of the page, there is a Category option. Click Add New Category and type in the name of your category – in the example below in Figure 5, I have called in “Discussion Boards”. Click “Add New Category”, un-tick “Uncategorized” and when you’ve finished typing your blog post, hit “Update”.

While you are here, make a second blog post with some nonsense content (you can delete them later), called “Module 1 Week 2 Reflections”, and assign it a category “VLEs”. In our template above, you notice that we wish to selectively pull in some posts on to one of the Module 1. This selection will be achieved by using categories. We will return to this below.

Links

In order to demonstrate the bibliography page, we need to add some weblinks. To do this, select Links > Add New. Add in 3-4 web links, giving them different link categories. If you wish to link to a journal, the most useful way is to link to the journal article on the journal’s page or give the DOI link.[2] The links on the bibliography page can then be easily incorporated using the WP Render Blogroll Links, below.

Putting it all Together

We have now completed the architecture and additional components required to finish the template shown in Figure 3. While it seems laborious, everything discussed can be done as you develop your portfolio, and the advantage of doing it as you go along means that when you come to the presentation stage, everything is automagically in place. You can decide what is viewable, and where it goes very easily.

Several pages (and posts) in our template just require normal text, images and other digital resources, These can be included using the standard WordPress editor—simply type in the text you wish, or click on the add image/media buttons to include pictures or media as with any web editor.

The bulk of the portfolio is usually built in this way. For embedding material, such as YouTube videos, copy the embed code from that website, and paste it into the editor. YouTube offers a range of embed sizes (e.g. 600 x 400) and the one you select will depend on the theme you choose for your portfolio (see below). Avoid choosing too large a size (> 600px in width) as while they may fit your theme and look good on your widescreen, remember your viewers who may have to look at it on a tiny tablet!

Two pages are left to complete: the selective category page and the bibliography by category page. These are best achieved by using Plugins. Plugins are extra bits of code written by third party agents that do specific tasks in WordPress. There are hundreds of thousands, and they vary in quality. Some useful ones for e-portfolios are listed below. It is not necessary to incorporate these straight away if you are a beginner, but the use of categories in blog posts and links, above, mean that when you do wish to include them, they will require very little work.

Useful Plugins for E-Portfolios

Some useful plugins are listed below. While it is not necessary to include all of these straight away, they do make for an easier life when your portfolio gets to be quite big in size.

List category posts plugin allows you to list blog posts on a page by category. For example, on our template, we wanted to only list one particular category on a page. After downloading List category posts and activating, posts for any category can be listed simply by typing in the code on the required page:

[catlist name=discussionboard]

will list all of the posts on the page which had the tag “Discussion Board”.[3] Of course it is possible to just simply type in these links, but the advantage of this method is that the page automatically updates every time you write a new blog post and tag it with the “Discussion Board” tag.

WP Render Blogroll Links is a similar plugin, except that it organises links by their category. To insert a list of links according to any category anywhere on a page or post, enter the code:

 [wp-blogroll always_show_names=1 catname=”Discussion Board”]

This code will list all the links given the category “Discussion Board”, showing the name of the link (rather than the URL). As with List Category Posts, it is possible to list all links by category, identify links by catid, etc. [4]

Broken Link Checker is a very simple plugin that checks any link from your page and alerts you in the dashboard if that link doesn’t work. You can click to see what is wrong with link and modify if required from the dashboard, without having to re-enter the post/page. It is a must-have for every WordPress installation.

Askimet is a SPAM detector. If you plan to allow comments on your blog, then this is a must. It is already downloaded on installation and just needs to be activated with an Askimet API key. Step-by-step instructions are provided on installation.

Usernoise is a simple plugin that allows for a nice way for users to contact you without giving your email. It is also Spam resilient. I have found that in order to get email from a WordPress installation working, I have had to download HGK SMTP.

Restrict Content is a nice plugin that is a bit more subtle than WP Password mentioned earlier. It allows for you to restrict access to some of your site; pages, posts or even down to just some paragraphs while allowing others to be open view. Even more useful is that you can set it up so that different registered users (set up in Users > Add New) can have different levels of access—for example in a portfolio, you may wish peers, tutors, and external examiner to have different levels of what they see.

Showcasing your E-Portfolio

As the portfolio is usually always on view—even just to the tutor—organisation according to the template shown above will mean that it will be well-structured and easy to navigate. There are some final front end things to decide when presenting your portfolio. The first is the portfolios theme.

The great beauty of WordPress is that you can customise how your page looks by choosing one of thousands of themes. This is a good thing—you have lots of choice—and a bad thing—you have too much choice! Themes can be changed at any time, and if you are new to WordPress, I recommend that you stick with the pre-loaded theme (currently “Twenty Eleven”). The theme I use in my portfolio[5] is called “Portfolio” (coincidence!). The main decisions in choosing this theme were that it had a sharp layout and included drop-down menus for the sub-pages to allow for easy navigation. When you are ready to consider a new theme, choose Appearance > Install Themes and search until you find your perfect choice…!

Navigation is another key component of showcasing your portfolio. For this reason, I use the home page to list all of the main components of the portfolio, with links to these. The menu bar across the top is automatically added as new pages and sub-pages are created (and ordered using the number system, as explained above). New menus can be added in WordPress[6] easily using the Appearance > Menus Option. This allows you build a menu comprised of whatever you like: categories, pages, web links and so on.

There is a right hand column in my theme, which again shows some navigation options, and some important pages I want to stand out. WordPress uses Widgets to allow you place what you like in these side bars (assuming your theme choice has side bars—most do).

 

Widgets are activated in the Appearance > Widget section of the dashboard. This uses a drag and drop mechanism to add widgets to your sidebar(s). For example, if you wanted to list all of your pages in the sidebar, simply drag the pages widget over and place it where you want. Because we have defined things by category (posts, links, etc) we can be quite specific about how we arrange the content in the sidebar using the available widgets. Common additions to sidebar include RSS feeds, Twitterfeeds (download a Twitter plugin (e.g. Twitter for WordPress) and after activating, this will be an option in the Widget area). I would suggest though that the aim of the sidebar in a portfolio is to aid navigation, not cram stuff in. I have left just the pages, and two areas I wanted to highlight—a reflective commentary and a feedback area.

Good luck with your e-portfolio. If you have any feedback on this guide, please let me know so I can improve for future versions!

Notes