BootCamp Workshop 2: Pointy brackets and you: a practical introduction to web design and XML/TEI

There’s a lot that could be covered in this session, so I’d love feedback about what people would be most interested in. If people want to go more in-depth on any of these, I’m happy to hang around afterward, too. My tentative plan– subject to being thrown out and changed entirely if that’s what people want– is as follows:

  • Starting from a fresh install of WordPress, we’ll build a website
    • We’ll find and enable useful plugins and reasonable-looking themes.
    • We’ll go over the basic “vocabulary” of (x)HTML and CSS.
    • Using HTML and CSS, we’ll modify the theme by digging into the source code, and take a peek at what the output of the WordPress “visual editor” actually looks like.
  • We’ll extend what we’ve learned about how HTML works and apply it to XML by looking at some examples of TEI
  • If there’s time, we’ll look at some of the things you can do with TEI-encoded data using XSLT, and the benefits of TEI markup relative to just putting data up on a webpage
  • If people want, we can touch on HTML5 and CSS3, and the things they enable

Handy readings

WordPress vs. Drupal: Drupal is another popular, free, open source content management system. It’s much easier than WordPress for setting up more complex websites that reuse data in various ways and places, but it can be overkill for a simple site with basic pages and a blog. This page has a few guidelines for when WordPress is the right CMS, and when you should install Drupal instead.

Introduction to HTML: a little dated (its suggestions about using the <font> tag are better accomplished through classes and CSS) but it has quick and readable descriptions of the majority of the most commonly-used elements


Downloading plugins

When you download the plugin, what you’re downloading is a .zip file. Double-click to extract it. The result is a folder with the same name as the zip file. You’ll want to drag that entire folder into the “plugins” folder on your server, see below.

Adding plugins

SFTP client (cross-platform):
Connect to the server using the bar towards the top:

  • Host: depends on where your site is located. If using commercial hosting, it’s often the domain name
  • Username: provided by your hosting service; if hosted by your university, probably your university ID
  • Password: password associated with your user name
  • Port: 22

When you’re in the WordPress folder, double-click to open the “wp-content” folder, then drag and drop the entire folder for your plugin intp the “plugins” folder.

Activating plugins

Log into the site ( using whatever credentials have admin privileges. In the left menu, click “Plugins”. Scroll through the list and click “Activate” on each plugin you want to activate.

Configuring plugins

In the left menu, click “Settings” (at the bottom of the list). Almost all the plugins with configuration options have them available in that list.

Configuring Photo Dropper

You can align the image by default by going to “Insert Before” and adding:
<div class=ccimage>, then going to “Insert After” and adding: </div>*

Then, in the left-hand menu, go to “Appearance”, then “Editor”. By default, it’ll put you into the CSS sheet for the theme. Scroll down to the bottom, and add this code:
div.ccimage {
float: right;

This will make the image and credit tag hover on the right.

While you’re there, you can also add:
.align-right {
float: right;

.align-left {
float: left;

Configuring permalinks

Go to “Settings” on the left, then “Permalinks”. This will define how your blog post URLs will look. You can choose from the provided options, or make up your own using the guidelines. For /blog/2010/11/19/[whatever the page title is], use /blog/%year%/%monthnum%/%day%.

Create a static front page

To create the page where your blog posts will live: click “Pages” in the left menu, click “Add new” (towards the top). Give it a title– but don’t put anything in there. Edit the “Permalink” to whatever URL you want to give it, then “Publish” (right side).

To create your front page: repeat the same steps to create a new page, and fill it with content.

Go to “Settings” (left menu), then “Reading”.
Select: “A static page”
Set your front page with content to “front page”, and blank page for your blog posts to “post page”

Setting up menus

Go to “Appearance”, then “Menus”. Create a new menu. On the left side, a little bit down, you’ll see “Pages”. Check the pages you want to appear in the menu. Then, you can drag-and-drop rearrange them.

Make sure the menu you’ve created is selected under “Primary navigation” under “Theme locations” (upper left).

Setting up widgets

Go to “Appearance”, then “Widgets”. Drag and drop widgets into/out of the different widget areas. When a widget is in a widget area, click on the arrow-down on the right to configure it.

The number of widget areas, and where they’re located, depend on the theme you’re using.

*You usually should put quotes around the attribute value: <div class="ccimage">, but it makes WordPress spaz out in this context. Try putting the quotes in– it won’t align the image properly. If you right-click on the published page, and Ctrl + F search for ccimage, you’ll see that what’s showing up in the source code isn’t <div class="ccimage">— there’s a lot of additional jibberish. If you get rid of the quotes in the Photo Dropper settings page, it works.

Comments Feed

3 Responses to “BootCamp Workshop 2: Pointy brackets and you: a practical introduction to web design and XML/TEI”

  1. megan milks Says:

    Hi– this session looks fantastic, and the info will be really valuable to me. I’m still very much a beginner with web design and coding — should I come to the session with basic knowledge of anything? Any resources you can point me to ahead of Saturday?

  2. Quinn Says:

    I’m planning for at least some of the class to be total beginners, so don’t worry about that part. The link I posted last night, above, on WordPress vs. Drupal, might be good to read to get a sense for the sort of websites that WordPress works best for. For what it’s worth, even though I’m a huge Drupal proponent and use it for all the organization/pedagogy sites I build for work, all my personal sites are in WordPress.

  3. Albert Tabon Says:

    Thanks for stopping by Jeremy. For many professions, big cities are definitely where the money is. But then, small towns perhaps offer a better quality of life, which is why many accountants move there.

Leave a Reply