Editing the Span Arts website: key points

• Events go on the TicketSolve site. They’re shown here automatically.
• To put content on this website, create a Post and set its Category:
  • News = blog entries, appear in reverse date order. Latest news on any project,
  • Project – one home pages for each project. Appears on the Projects menu
  • Activity subcategories – appear on Make Watch & Do page.
  • People subcategories – for individual people
  • Gallery – pictures that appear in headers
  • Book – event listing, appears along with TicketSolve events in the Booking page. (There isn’t a way of accepting bookings for these events, so it’s a bit mistitled.) Make sure you set the Expires date, so that the item appears in the right place in the list.
• Set the Expires date to make items automatically disappear when they’re no longer applicable. They’ll still be in the admin Posts list.
• Use Tags to connect News and other items to each project
• To Undo a change after you’ve updated a page, on the right under Posts, click Revisions. Choose the previous version to restore.
  (In case of an extreme mess, there is also a weekly backup performed by the UpdraftPlus plugin, from which the site can be restored.)

• The easiest way to create a page is to begin by copying an existing similar one. In the Pages or Posts lists, hover over one and select Duplicate This.

How to edit the Span Arts website

To sign in, add /wp-admin to the usual site URL.

Write about projects, news, people, …

Most content is in the form of what WordPress calls a Post. These are used not just blog-like “news” content, but also content that evolves over time, such as the description of a project. These posts are listed in boxes in summary pages such as the News or Projects page; when you click the box, the post opens on its own page.

• Near top left, click Posts, then New.
• Near the top of the new page, click WPBakery Page Builder. This allows you to edit the post with the same rows-and-columns editor as the main pages. In theory you can switch between editing with this and using a simpler editor (“Gutenberg”), but it’s best to start with one and stick to it. Use WPBakery for pages with columns.
• Type in the main content.
• Add one or two pictures:
  • Featured Image (required) – should be square(ish) and bigger than 300×300. (But see the para below about using the Project template )
    This field usually lurks down the right pane under Document.
  • Top Pic – should be big and wide, ideally 1200 x 600. If you don’t set this, the top of the post will be the same as the box. This field is usually under the main content.
• Set some of the other fields (all optional):
  • Expires – If you set this date, the post will automatically disappear then. (It won’t be deleted from the system. You’ll be able to see it in the admin posts index, and reset the Expires date if you want.) This date doesn’t appear on any page.
• Control what appears on the box around the picture
  • Activity Title – Normally the same title appears on the box as on the page. This sets a different title on the box.
  • Subtitle – Appears in the box under the main title
  • When – Any text – can be “every Tuesday” etc. Appears in the box under the picture. Unlike Expires, this isn’t processed automatically.

• Set the category carefully. Technically, you can put an item in more than one category, but not recommended as you’d typically write differently for each category.
  • News (default) = ordinary blog, appears under the News header. About plans for the future, great successes, stuff of interest to people.
  • Project – The “home page” for an ongoing project.
  • Activity subcategories – Appear on the Make, Watch and Do page. Choose one of the subcategories, not just Activity.
  • People subcategories – about a staff member or volunteer who has agreed to appear on the site. Name, picture, maybe a little bio.
  • Generally, events should be added to the TicketSolve site. There is a “Book” category for the occasional cases where you want to put an event with a date in the events lists, without people needing to buy tickets or book seats. (If they need to book seats but it’s free, use TicketSolve and set the price to £0.)
• Write the text. You can also put pictures in the text.
• If you prefer it, you can use the WPBakery Page Builder as your editor. (Button at the top.) It’s better if you want to make pages with interesting columns, galleries, etc. But the standard editor is usually OK for ordinary posts.
• Don’t forget links to useful things, preferably after the first para or two:
  • If this is a news item about a forthcoming show, add the link as soon as you’ve put the show on TicketSolve..

Colourful Quotations

Anything you want to stand out, such as complimentary feedback:

• Create a Text box for the quotations, and set the style of each one to Header2, Header3, or Header4
• Set the Extra Class Name property of the Text box to colour.

To get a bold pictorial heading

To get a heading in a Post similar to our main Pages – white title on pictorial background:

• In the right-hand panel, under the scroll down to Post Attributes and set Template to Project.
• Set the Feature image to a good wide one (1400 px or more wide) and at least 300px high.
• The post will be full width, the TItle will appear against the picture, and the subtitle will appear under it.

See the example project page Arts at a Distance..

Other fields

When you edit a page, you’ll see all sorts of fields both below the main content of the page, and in the right-hand panel. We don’t use most of them. In general, experimenting with them won’t do any harm. But try to remember what you’ve changed.

A couple of them have an effect beyond the page you’re looking at, and should be left as follows:

Media attachments – Keep both “Duplicate…” boxes checked

Multilingual content setup – Keep at Make “posts” translatable.

Revisit content at intervals

Only the News category is really like a blog, showing the date it was posted. Treat the other categories like pages: go back and keep them up to date as the project develops.

Keep News and Projects distinct: a project might have News items announcing its launch and other key milestones; but these are separate from the project’s main post, which describes it as it is today.

Undoing changes

If you make a mess of a page or post, you can always go back to a previous version.

Before you click Update

Notice that there are Undo/Redo buttons near the top left of the page. The usual keystrokes will work too.

Use Preview (near top right) to see the effect of your changes before publishing them.

If you’ve made a complete mess, just close the window or go to edit another page. The “Leave without saving?” warning pops up – say yes.

After you click Update

If you publish a page or post and then decide it was a bad idea, you can revert to a previous version.

In the right-hand panel, under the Page or Post tab, look for Revisions. Click it to go to the Compare Versions page.

Click Previous, or move the slider back. (What you see is the HTML code rather than the final appearance of the page. Don’t worry about that.)

Click Restore this Version.

Add events to Book a Show

The content for events that people can book is not on our main website. Instead, it’s on the TicketSolve site. But events that you add to TicketSolve appear automatically on the website, so you don’t have to enter the details twice.

• Go to our TicketSolve site and add the show there.
  It will appear on our Book a Show page.. The three next events will appear on the front page.
• Make sure the first paragraph gives a clear idea of what the show is about. This appears as rollover text on the page and helps people decide.
• The show will automatically vanish when its date is past.
• We don’t have a good way of dealing with a series of shows, other than putting up a separate event for each day. (Let us know if this is a problem.)

Before the show…

• Blog about it…? Create a new post with the News category. Dont’t forget a feature image.
• Tweet about it….?
• Is it part of a Project? Link to it from the Project post.

After the show …

• If you wrote a Tweet beforehand to remind people to attend, write another one afterwards to say how good it was. This avoids our top Tweet for the next few weeks telling people “Head to YouTube for the show NOW!!!”
• Is there a video that people can watch afterwards? Add it as a video post.
• Note that once an Event has gone from TicketSolve (once it’s out of date), it’s gone forever. If you want to have some archive in memory of how good it was, make a News post.

Add a video to the Make, Watch and Do page

Assuming you’ve already put the video on YouTube or Vimeo …

• Get the sharing link from YouTube or Vimeo.
• Back in our site, create a new Post
• Set the Post Format to Video. (The selector is usually near the top of the right-side panel.)
• Under Video Post Format, paste the sharing URL into Video ID. (You’ll find it somewhere down the long list of options under the main text.)
• To make it appear in the Make, Watch & Do page: Set Category to one of the subcategories of Activity – Watch if it’s a sit-back and watch video; or Make if it’s get up and do something . (But don’t just set it to Activity.)
• Add a Featured Image. (Down the right side panel.) Squarish is best, at least 300×300
• Write the title and a few lines of text. The text will appear in the rollover in the box.
• You can also set a subtitle – find it under Activities

[This doesn’t work currently.] Start time. If the gig takes a while to get going on the video, YouTube provides an option “start from current point” when you get the sharing link. You can also set or adjust this yourself afterwards by adding ?start=60 to the Video ID. This would start a minute in; substitute your preferred number of seconds.

[Better to edit the video to chop out any long lead-in. The problem is that if there’s ten minutes at the start where nothing’s happening, people playing the video afterwards just think there’s something wrong with it and give up.]

Multiple videos on one activity?

1. Create a new Post and set its category to one of the sub-categories of Activity. (Not just to Activity.). Set its Featured Image.
2. Write some text and paste the YouTube or Vimeo sharing link into the page. It will magically turn into an embedded video.

When there’s a new Project

1. Create a Post and set its category to Project. This makes it appear in the project summary page and in the projects menu.
2. If it involves regular meetings, put the details of when and where in the fields under the Activities group of custom fields. (Somewhere under the main text.) You can also set a subtitle here.
3. Set its Featured Image (squareish at least 300×300) and also a Top Pic (big and wide – 1200×600 or more).
4. This page is the “home page” for the project. Treat it like a page rather than a page – i.e. go back and edit it as the project develops. Consider putting in it:
   • What it’s about
   • Invitation to take part – make it sound exciting!
   • Links to upcoming events that are part of it
   • News of what’s happened so far – either in the content, or as links to News posts
   • Links to outputs – videos, maps, pages, PDFs, slide shows, …
   • When it comes to an end, assessment of how it went

Project sub-pages

You might link from a project page to posts in the News or Activities categories. Or you can create a Page (rather than a Post) and link to it. Pages don’t have categories or tags.

Include a link back to the Project page from the sub-pages.

In general pages/posts:

• Use Top Pic custom field to set the picture at the top of the page. If you don’t set it you’ll get a slider.
• H1 headers come out colourful.

At the end of the project

Set the Expiry date, which appears under Activities group of custom fields. After that date, the project won’t appear in the Projects page. But it will appear in the Showcase.

People

Staff members are shown in the About page. Create a Post for each staff member:

A few volunteers are featured in the Volunteers page. Don’t forget to get their permission!

• Category = Staff or Volunteer (under Person).
• Title and main text = their name and a few lines about them
• Subtitle (custom field somewhere under main text) = their role
• Featured Image = their mugshot

The Staff and Volunteer categories are just for individual people – not general posts about volunteering or job opps. Those go under News with tags “Jobs” or “Volunteering”.

About Categories and Tags

We use categories to divide up different kinds of content, rather than different topics of interest. Visitors to the site get to see tags, but not categories.

So for example items with the “project” category show up on the “Span Projects” menu. Items in subcategories of “activity”, such as “join in” or “make” show up on the Make, Watch & Do page.

Use Tags to allow visitors to pick out items that are on related topics – for example, “gardening” or “jazz”. You can also use Tags for all the items related to a particular project – for example ClwbDigi.

Welsh

The website is effectively two sub-sites under one umbrella. Posts don’t automatically appear in both the Welsh and English subsites. It is possible to make the content of the two sites very different. But we should aim to replicate every item in both languages.

When you create a new post or page, you have three options:

• Don’t replicate it in the other language. This means it’s just not there for a user who selects the other language.
• Duplicate it in the other language. Visitors who select one language will see some posts in the other. For most Welsh users, this will be acceptable even if disappointing.
• Translate by hand after duplicating it.

Example

You have a piece of news to announce.

1. Sign in to the admin section of the site, and ensure English is selected at the top.
2. Select Posts > Add New. Type in the announcement in English, set its category to News, add a Feature image., and click Publish.
   At this stage, Visitors who select English see the announcement, but those who select Welsh don’t see it at all.
3. Under Language (somewhere under the content, or in the right-hand panel), check all three Duplicate boxes and then click the Duplicate button.
   

At this stage, visitors who select Welsh see the news item, but it’s in English. At least they’re aware of it., even if they object to it on moral grounds.
If you update the English version, the Welsh will automatically be updated too; they’re still really the same post.

4. Click the pen icon to edit the Welsh version. Translate the content into Welsh by hand. It’s also possible to choose a separate Feature image if necessary. Click Update; acknowledge the warning flag about creating a separate version.
Now Welsh visitors can see the Welsh version.

5. If, at a later date, you update the post, you’ll have to update each separately. You can use the pen icon to flip quickly from one to the other.

For nearly all posts and pages, we should click the button to duplicate the item into the other language. Whether we then go on to do the translation is a matter of resources available.

Events

The Welsh events page lists TicketSolve events that have the language set to Welsh..

Advanced changes

Menus

Menus are set in the Admin panel under Appearance > Menus. We use:

• “Top menu” and “Top menu Cymraeg” – used on wide desktop web pages

• “Mobile menu” and “Mobile menu Cymraeg” – used on narrow web pages, including mobile phones

To see the Cymraeg menus, select Welsh under Add menu items.

To add a Page to the menu, select it in the left-hand panel, click Add, then in the menu listing drag to adjust its position.

To add a specific section in a page to a menu:

1. Edit the page and edit the settings of the relevant Row. Set Anchor ID to a suitable word (or phrase without spaces or punctuation) such as “contact”.
2. In the Menu, add a Custom Link, setting its URL to the URL of the page followed by #anchorid – for example “/about-us/#contact”. (You can omit the first part of the URL. Start with “/”.)

Welsh menus

The English and Welsh menus don’t keep in sync automatically. If you change one, you should generally change the other. (There is a feature that automates this to some extent, but it’s not worth the hassle.)

When you select Welsh under Add menu items, the Welsh menus appear, and the pages you can select change to the Welsh ones.

Automatic menus

The drop-down menu under “Projects” is filled in automatically with links to the project posts. To make this happen, create a sub-menu item under Projects that has the label:

*project

This sub-menu item will be replaced by a list of the items in the project category. It doesn’t matter what type of menu item it is, but you must edit its label.

Notice the initial asterisk. Instead of “project” you can substitute some other category name, if you want to make a menu of items in that category. Be careful to get the capitals right.

Under the Welsh prosiect menu, put another sub-menu, also with the name *project. Only Welsh project pages will be shown.

Changing the core pages

The “core pages” are those that hang off a top menu item. You’ll want to tweak them to alter the bits of introductory text, headings, and so on.

They are pages rather than posts, so don’t have a category or tag, and don’t need a Featured Image.

They’re most easily edited with WPBakery, as they consist of many nested shortcodes, which are a bit indecipherable in the basic editor.

The general style of these pages – colours, sizes of boxes, margins, etc – is set by a common CSS file (wp-content/themes/bridge-span/css/span-arts.css). It isn’t recommended to make individual changes separately to each page.

A couple of shortcodes are used to pull lists of content in from the database. TicketSolve pulls current shows from TicketSolve, and Activities pulls posts from the database.

Activities

Many of the core pages show a collection of boxes- for example on the front page, or on the Projects page, or the Make Watch & Do page –

Making boxes

If you’re going to put columns or tables of boxes in a page, you’ll want to set the page template to Full Width. In the panel on the right under the Document tab, look under Page Attributes / Template and choose Full Width.

There are three usual ways of making boxes in a page: Inline Columns, Inline Table of Boxes, and Post boxes. “Inline” means you write the content in the page where it appears; “post” means you write each item separately as a WordPress post with a particular category, and the items appear in the appropriate page(s).

The easiest way is to copy an existing example.

The following methods of making boxes are demonstrated on this page. Look at the result that visitors see, and then Edit it to see how the boxes are created.

Inline columns

If your text is more or less static – you aren’t going to add new boxes at intervals:

1. Create a Row and set it to three or four columns. (They’ll line up vertically on a narrow screen.)

2. Insert your text in each column. Don’t put the header, image and description all in the same text box.
Use a Single Image element. Under Image Size, put “medium”.
For a uniform style, open the settings of each Row (the pencil icon) and under Extra class name, put boxcolumns; and under Type choose Full Width.

Expandable boxes

Open the settings of the Row and under Extra class name, put boxcolumns showSomeBelow

This will limit the height of the items, chopping off some of your content. The reader clicks the content to see the whole thing.

Inline table of boxes

If each item appears entirely on this page, and you occasionally add new items:

In a full-wdth row, create a “Qode Element Holder” and put “Qode Element Items” inside it. Inside each of them, write your header, image, and text. It helps if the images are the same size and the text roughly the same length.
The advantage of the Qode Element Holder is that it arranges the items into a table. When you add another item at the front, the rest wrap around.
When you want to add a new item, begin by duplicating an item, and then edit it.

Post boxes

If you want (a) a short text of each item here and the rest on its own page; and/or (b) the same items to appear on more than one page – e.g. on the Covid page and the News page – then do it like the Meet the Volunteers section in the About page:
1. Write each item as a separate post, and assign it to the appropriate categories – e.g. news and covid. Consider setting the Expiry date for each post so that the list doesn’t get ridiculously long.

2. In the page where you want the list of boxes to appear, insert an activities element or shortcode. This is a bit of program code that displays a list of the posts from a particular category. Read on for how to do that.

Activities element

If you’re using the WPBakery Editor:

1. Click [+] to insert a new element. In the collection of tools that appears, select Activities:
   

2. In the dialogue that pops up, enter the various options.

• The most important field is the category of posts that you want. Make sure to type in the name of the category exactly as it appears in the category menu, paying attention to any spaces or capital letters. You can display posts from a mixture of categories by separating them with a comma (but no additional spaces) – for example: make,watch

• style selects the format of the box. showAllBelow shows the complete description; the other styles truncate it. The “colour” styles add colour to the titles.
• parts is a bit delicate, and has to be chosen correctly for the chosen style. In general, this works: img { title subtitle when where posted text }
  You can omit bits that you don’t want to display in the box. The curly braces should enclose everything after the img. You can put title before the img.

3. Close the dialog and in the editor, shift the element to the place in the page where you want the list of boxes to appear.

4. To change the options, select the element and click the pencil icon.

Activities shortcodes (alternative for basic editor)

If you’re using the basic Gutenberg editor, the Activities shortcode appears as an arcane piece of text. You can enter this by hand where you want a list of posts to appear. Here’s an example:

[activities category="join in" count=3]

Always enclose it in square brackets and begin with “activities”. The other parameters are:

• category=”something” – the name of the category of posts to display. Careful with capitals. Quotes necessary if there are spaces or punctuation in the name.
• count=10 – the maximum number of posts to display
• horizontal=yes – Display as a horizontal row. Default is a table or vertical column, depending on space available.
• nolink=yes – Don’t link to the post when the box is clicked
• style=staff – Display the title inside the image, and subtitle just under
• parts=”img { title subtitle when where posted text }” – specifies which fields to show in the box. Omit the bits you don’t want.
• style=showAllBelow – Display all the text under the image. Typically use with nolink=yes. Works best with parts=”{ title subtitle } img text”
• style=showSomeBelow – Display some of the text under the image; the user clicks through to see the whole post.
• style=”showSomeBelow colour” – … and display the headers in mixed colours. Notice the quotation marks.
• order=rand – show a random selection of posts in a random order – so that it looks different every time
• order=title – display the posts in ascending order of title
• order=menu_order – display in the order set by the Order option that you can set on each post in the lower right panel under Page options
• order=date – display in order of creation, latest first. This is the default.
• order=modified – display the most-recently changed post first

It automatically picks Welsh posts when the page it’s contained in is Welsh.

Headers

The title of a page does not appear automatically at the top of the page. It is only used to identify the page in the Admin page index.

You have to create a heading row at the top of the page. (As usual, it’s easiest to start by duplicating another page.)

To create a header with a static background picture:

1. Create a row. Open its properties (pencil icon) and set: Extra Class Name = bigheads darkstripe; Background image = a nice wide picture
2. Inside the row, put a text box, and type the header into it. Set its style to Header1. You might want a subhead set to Header2 or Header3.

Variations on this:

• If the picture is quite dark, you don’t need the dark horizontal stripe. Omit “darkstripe” from the extra class name.
• To get a moving effect as the visitor scrolls the page, use a picture that is tall as well as wide, and set the Row Type to Parallax.

Sliders

The header on the front page is a LayerSlider. The slider is created and edited separately from the page.

To compose or edit a slider, scroll down in the admin menu to LayerSlider/All slides. To create a new one, begin by duplicating one you know works..

The pictures are the background images of the slides. We don’t currently use many of the facilities of LayerSlider, which is capable of complex animations.

Once it’s created, you just create a row and put a layerslider in it, setting its properties to the name of the slider you’ve created.

Buttons

To insert a button that links to another page, if you’re using WPBakery editor,

1. Click [+] and choose the ReadMore element.

2. In the dialog box, enter the URL (“slug”) of the destination page.
– If it’s a page in our site, omit the domain name – so for example just projects or make-watch-do.
– If it’s a page somewhere else, put the whole URL – for example https://bbc.co.uk/radio4

3. Set the text of the button and close the dialog.

4. Move the element to where on the page you want it to appear.

Row of buttons

To insert a row of buttons spaced across the page, using WPBakery editor:

1. Insert a new Row element. In its options dialog, set Extra Class name to buttonrow.
2. Click the second icon on the left of the Row to set multiple columns. Each column will be a button.
3. In each column, add a Text element and set its content to be a link to the target page.
   

Implementation notes @ Nov 2020

Overview

The bulk of the work is in:

• The Span theme, which is a sub-theme of commercial Bridge theme by Qode. Find it in wwp-content/themes/bridge-span.
• A number of plugins that implement various shortcodes. Find them in wp-content/plugins/span-* and …/ticketsolve-shows
• LayerSlider (commercial plugin) is used on the front page to create the top slider. Currently to change the pictures you change the slides’ backgrounds on the LayerSlider admin page.

Main pages

The main menu items are pages (not posts) in which the custom shortcodes are used to pull various things off the database. The WPBakery page editor is the easiest way to edit them.

• Book (slug /whats-on) uses the ticketsolve shortcode defined in the ticketsolve-shows plugin. This grabs the current shows from the TicketSolve site.
• Make, watch & do, News, Span Projects, About and Volunteers use several instances of the activities shortcode defined in plugin span-activities. This displays posts of a specified category. There are parameters to set the classes of the displayed lists to vary the format of the displayed boxes.

• Map Digi Penfro uses the public iframe plugin to embed the map (which is hosted elsewhere) in the page.

Display styles

Most of the styles are set in the CSS file in themes/bridge-span/css. Some dynamic behaviour is defined in themes/bridge-span/js/spanarts.js

The boxes we use are our own, rather than those supplied by Bridge. It proved easier to create new ones instead of bending theirs. (In fact there’s quite a lot of Bridge we don’t use, so it might be worth considering whether just to create an independent theme.)

The custom css also sets sizes for headers, fonts, etc. The Bridge theme provides a lot of rather clunky controls for defining the styles of individual elements, but it’s a lot easier to get a uniform style and a bit more readable by setting them all in one file.

Project menu

The span-project-menu plugin creates the menu of project posts under the “Span Projects” menu item. It looks for “autofill” as the first word in a menu item’s Description (which isn’t otherwise used in this theme). The list contains everything in the projects category that hasn’t passed its Expiry Date.

Headers

At present we’re not using the Bridge header mechanism in pages. Each header is just a row at the top of the page, containing a fixed picture. To change the picture, edit the page.

It would be useful to move to using either LayerSlider or Qode slider to pull pictures from the database. And also maybe move to using the theme headers – though this doesn’t seem to work all that well.

Custom fields

The commercial ACF plugin is used to create various fields that appear on some posts, depending on category.

• Top Pic – By default the standard Feature Image is shown both in boxes and at the top of a page. This can be used as an alternative at the top of the page, leaving the Feature Image for boxes.
• Expiry Date – specifies when a post should stop being included in lists.
• When, Where – flexible fields for events and activities. No fixed format, as for some activities it’s something like “third Tuesday every other month”.