March 30th update: Creating a help page

A lot of the work I did on our site this week was creating content for our help page. Ken and Matt worked on this last class, adding a menu item to the wordpress admin bar (meaning that the page is only visible and accessible when logged into the site). I used screenshots of the process of adding a page and adding a slider to create a more accessible help page, which I've included below. I did the screenshots using command+shift+4 (on mac), and I'm sure there's a similar function on windows and linux.

Part 1: Pages

The site is structured around pages. Each artifact, category, and sub-category is a page. To add a new page or view all current pages, select "pages" in the left hand sidebar.

Screen Shot 2015-03-30 at 11.17.24 PM

Once you have added a new page, you will be directed to an editing screen where you can edit the title, text, and media content of the page. The site doesn't make use of wordpress' "category" or "tag" functions, so those can be left blank.

Screen Shot 2015-03-30 at 11.17.48 PM

Once you have added content to the page, you will need to tell wordpress where to put it in the menu. Click on "parent" in the right hand sidebar and a dropdown menu will appear. Select the page you want the new page to be a child of. For example, if you were creating a page called "Porcelain dolls", you would select "Dolls" as its parent.

Screen Shot 2015-03-30 at 11.27.27 PM

Once you are happy with your page, you can click "publish" in the top right sidebar to make the page live on the site.

Part 2: Adding a slider (image gallery)

To add images to a slider-style gallery, which is what is used on all artifact pages, navigate to the editing screen for the page you wish to add it to. Click on "attach" right below the main content editing area.

Screen Shot 2015-03-30 at 11.19.31 PM

Select "upload" in the top left corner. Choose the images from your computer which you would like to add.

Screen Shot 2015-03-30 at 11.30.36 PM

The images you have just uploaded will show in the media gallery with a check mark in the corner. Simply click "insert into page" in the bottom left corner.

Screen Shot 2015-03-30 at 11.32.43 PM

The images will now appear in a list below the attach button. You can use this space to edit the title and caption of each photo with some details about the item.

Screen Shot 2015-03-30 at 11.20.40 PM

Once you're happy with the content of your slider, remember to click "update" or "publish" to make the changes live or "save draft" to keep the changes for later editing.

There are two things I need to address early this week; editing and inserting the children's clothing photos, and finding a way to insert and format the logo and search bar in the configuration we'd like. Other than that, our site is really starting to come together!

One Response to “March 30th update: Creating a help page”

  1. Matt Price

    That looks great, Kylie. I’m sure it will be very useful.

    I see just a couple of issues left on your site.

    – the page title is not displayed on regular pages. Is that on purpose?
    – In the general doll page, I wouldn’t mind seeing some pictures. Also, the Japanese dolls page alludes to some potentially very interesting features of dolls, e.g. as ritual objects. Is there a larger argument to be made, about the evolution of dolls, say? Where do western dolls come from? Do they, perhaps, derive from other kinds of representations?
    – Looking at the site today, I had a design thought: what do you think of moving the images to the bottom of the page, below the text? Or you could modify this technique to add them after the first paragraph: http://wordpress.stackexchange.com/questions/61272/how-do-i-add-the-featured-image-to-the-content-after-the-first-paragraph
    – the ephemera page is still missing.

    Otherwise it’s really looking very good.

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>