ArtLab user guide 2016

ArtLab

WordPress blog user guide

Contents 1 Overview 1.1 Site directory 2 Menus 2.1 Main menu 2.2 Side menu 2.3 Home navigation 3 Organisation 3.1 Categories 3.2 Tags 3.3 Summary

The ArtLab WordPress-powered blog at www.readingartlab.com is used to record and evidence ArtLab’s progress as well as attract prospective participants.

This user guide will provide information on how the blog’s design is structured and organised. Primarily, it will be used as guidance in case of any changes to additional aspects of the blog’s design which does not follow the existing WordPress codex. The purpose of this guide should promote consistency to the blog’s design and content.

4 Further help

By Louise Lee & Ben Cross

1 Overview How to...

ArtLab researches the use of art as an educational tool in order to disseminate science and technology to today’s youth. It is part of the University of Reading, Outreach and Widening Participation initiative. The blog can be accessed at www.readingartlab.com.

Access to the Page customisation is through ‘Edit’ (you must be logged in as an Administrator).

1.1 Site directory

Create a new Page Edit a Page

Home

About

Our research

This is set as a static page and contains the custom (2.3) Home navigation.

A page which introduces what ArtLab is and it’s initiative.

A page which introduces the ArtLab team and shares contact information. It includes a shortcode.

Workshops

Contact

A drop-down of different workshops run by ArtLab. These are (3.2) Tags which filters posts and displays results in a feed.

A page which includes a feed of the latest posts under the ‘Research and impact’ (3.1) Category.

Further help static pages standard pages drop-downs shortcode

02

2 Menus 2.1 Main menu The Main menu is located at the top of the page, below the banner image—Theme’s Primary location. It is displayed throughout the entire site. All links immediately link to a standard page with the exception of ‘Workshop’ which includes a drop-down of (3.2) Tags.

How to...

Access to the Main menu customisation is through Menus.

Edit a menu Organise menu Additional menu

items

Further help standard pages drop-down Themes

03

2.2 Side menu The Side navigation is located in a panel on the right side of the site. It is not displayed on the Home page as it follows a different layout—this is a ‘Custom menu’ widget. It contains the same links as the (2.3) Home navigation so that users can access it when elsewhere on the site. Additional Widgets are included: Twitter feed and Footer.

How to...

Access to the Side menu customisation is through Widgets.

Edit a Custom menu

in WP Admin Add Pages Add custom links Add/Edit Widgets Removing Widgets

Further help Widgets

2 Menus

04

2.3 Home navigation How to...

The Home navigation is only displayed on the Home page. It allows the user to filter out Posts under a particular Category. There are 5 Categories; ‘Primary schools’, ‘Secondary schools’, ‘Research and impact’, ‘Reading scholars’, ‘Projects and workshops’. ’Latest News’ is not a (3.1) Category, it displays all Posts starting from the most recent.

Access to the Home navigation customisation is through CSS and the page’s HTML in ‘Edit’.

CSS Help Add custom CSS Beginning HTML HTML troubleshooting

Category image Category label Further help Categories Posts

2 Menus

05

Changing a Category image

Changing a Category label

1. Ensure the new image is uploaded to the Media library. Obtain the URL of the new image and copy to clipboard.

1. To edit the Home navigation, go to Pages.

My Sites

2. To edit the Home navigation, go to Pages.

My Sites 3. Click ‘Home’. Then click on the three dots to the right of it and select Edit.

4. Switch view from Visual to HTML. 5. Locate <img> tag of the Category that needs to be changed. <section> <a href="https://readingartlab.wordpress.com/category/primary-schools/"> <img class="button hvr-float" src="https://readingartlab.files.wordpress.com/2016/01/primary-schools.png”/> Primary schools </a> </section>

6. Paste new image URL to replace the old one, see highlighted in example.

2 Menus

2. Click ‘Home’. Then click on the three dots to the right of it and select Edit.

3. Switch view from Visual to HTML. 4. Locate <a> tag of the label that needs to be changed.

5. Remember to update the label URL also, see (3.1) Categories.

Minimum resolution for the Category images are 143 x 100 pixels.

Please apply the same changes to Category labels to the links in the (2.2) Side menu.

Click Update to save all changes made.

<section> <a href="https://readingartlab.wordpress.com/category/primary-schools"> <img class="button hvr-float" src="https://readingartlab.files.wordpress.com/2016/01/primary-schools.png”/> Primary schools </a> </section>

Further help

6. Find label (should be text after the image URL) and rename Category.

Media library Edit Page screen

06

3 Organisation How to...

This blog uses Categories and Tags to organise Posts. Categories is primary and is required for every Post that is published. Tags is secondary and are only required when dealing with Posts that need to be under the ‘Workshop’ drop-down in the (2.1) Main menu.

Enter the Post Editor by clicking ‘Edit’ under the selected Post.

Add new Category

3.1 Categories§ Every Post that is published must be assigned at least one Category.

If a Post is not assigned a Category, it will be visible through ‘Latest News’ only.

A Post with multiple Categories assigned will appear in each individual feed (scenario: a Post with Categories ‘Primary Schools’ and ‘Reading scholars’ will appear in both pages.)

In this blog, Categories are used as primary level organisation.

Edit Categories Latest News

Primary schools

Secondary schools

Research and impact

Reading Scholars

Projects and workshops

Add Category to Post Add Category Page

Further help blog page Categories Tags drop-down Posts

All posts Category (filtered)

07

3.2 Tags How to...

Workshops

Tags are used to group Posts related to workshops/projects.

Enter the Post Editor by clicking ‘Edit’ under the selected Post.

Creature in a cup

All Tags can be accessed from the ‘Workshop’ drop-down in the (2.1) Main menu.

Reading scholars

Add new Tags UNESCO Years in light

For this blog, Tags are used as secondary level organisation.

Tags are more specific than Categories and allows users to find specific Posts easily.

Edit Tags Add Tags to Post

Tags currently in use

Add Tags to

(2.1) Main menu§

3.3 Summary Diagrams presenting multiple examples of how Categories and Tags are used (together) to organise different Posts.

Post 01

Post 02

Post 03

Primary schools

Secondary schools

Projects and workshops

Research and impact

Projects and workshops

UNESCO Years in light

Creature in a cup

Research and impact

3 Organisation

Further help Categories Tags Posts drop-down

08

4 Further help WordPress provides codex for troubleshooting any problems you may ecounter on your blog. Please refer to the links below to be directed to the WordPress Support centre.

General General information about managing a blog on WordPress.com.

Appearance For more information on customising the appearance of your blog.

Writing & Editing For more information on the different writing and editing options.

Widgets and Sidebars Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s).

Users For more information on managing users and your user information.

Media Learn more about adding audio, video, and images to your blog.

FAQs Frequently asked questions in WordPress Support centre.