These Help pages are ‘Private’ and can only be viewed by people logged in as Editor or Administrator.

How this site works

This site uses WordPress as an editor. Although there is plenty of documentation on the internet about how to use WordPress, most of it won’t be helpful to you because this site has been custom built for your needs by Wingfinger Graphics and is just using WordPress as a way you can manage your content.

If you get stuck or something doesn’t seem to be working any more, try contacting Wingfinger – 0113 2450 469 – during office hours or drop us an email. We will generally keep an eye on the site and may update relevant software etc from time to time.

The Admin area

To make any changes to the site, you need to log in to the Admin area, and you should have a username and a password for this. Add ‘/wp-admin’ to the web domain to get here, or click on the hidden link – hover at the far bottom right of the home page, directly under the MGA logo. Whenever you are logged in, the dark grey Admin bar will be visible across the top of the browser window (normal site visitors won’t see it).

Warning! If you don’t know what you’re doing inside the Admin area then you could easily break the site! Anything that mentions updating software is best left alone and may have knock-on effects on how the site works – leave it for Wingfinger’s regular maintenance.

The Dashboard is the ‘home page’ for the Admin area and gives you access to all the control functions of the site via the Admin bar and the main menu on the left.

NB: If the instructions on these pages ever seem to refer to a panel, menu or button that you just can’t find, try clicking Screen Options (top right of the Admin area in the yellow bar) and ticking the relevant box.

Editing the site

What you can change

Each page on this website is made up of two bits:

• CMS-editable areas – containing the content (text and images that go with it, links and media etc). These are the bits you can edit and include the main content area (the wide central column that contains most of the text) and a number of additional spaces – ‘page extras’ – that can be used to hold extra content, eg: left or right columns.
• The page template – the structure, styling, menus and technical web stuff that determine the overall look and behaviour of the page. You can not edit the page template.

Pages and Posts

Almost everything you do in the Admin area will be in the Posts, Pages and Snippets sections. When you go in to edit any of these, you will find the same looking editing area – a window with the text content in and a toolbar and title bar above it.

• Pages are the web pages listed in the navigation menu – the permanent content that usually fills the wide central column on the site, the ‘main content’.
• Posts tend to be shorter and are often dated (like news items or blog entries) and used in groups (staff biographies). They might appear on their own, or, more likely, as a list.
• Snippets are short chunks of text, images or links that are used mostly in the page extras spaces.

Getting started

There are two ways to get to a page you want to change:

After you have logged in, go to the web page you want to change. There will be a button saying Edit post or Edit page on the Admin bar above. Click it and you will go into the editing view.

Alternatively, click on The MGA Academy of Performing Arts on the left side of the Admin bar to get into the Admin area. Click on the appropriate left menu item for what you what to change (Pages, Posts, Snippets or Staff posts) and choose the item you want to change from the list.

The editing window

The content of pages and posts appears in the main window, which has a light grey toolbar over the top. There are two tabs on the right edge of this – Visual and HTML. If you just want to make simple changes or create basic content, make sure Visual is highlighted (the editing window will have a black background). If you want to do something more nerdy, or add special features or fix a problem, you need to choose HTML (white background).

Making quick changes

Once you have found the page or post you wanted, change the text in the editing window and then press Update. Click on View post or View page in the Admin bar to switch back to the website view and check what you’ve done.

Styling content

WordPress changes what you write in the editing window into code, which is what web browsers read and what web designers style. Every bit of content will have what we call tags attached (when you click on the HTML tab of the editing window, you will see some of them). Tags usually come in pairs and surround the bit of content to give it a particular style or placement. They look like this: <tag>the content<tag>

There are two types of styling:

• One applies to a whole line/paragraph eg: the heading on a page – styles are listed under Format (or sometimes this is already showing as Paragraph) in the visual editor tool bar and appear as individual buttons on the HTML tool bar
• The other applies just to part of that text eg: making a word bold – styles are listed under Styles in the visual editor tool bar and appear as individual buttons on the HTML tool bar
• The Path indicator at the foot of the Visual editing panel shows which tag is currently applied to the selected text. By default, the editor applies the HTML paragraph tag (<p>) around each paragraph (followed by another return) you type – this is the ordinary body text.

How to style your content

The styles used on this site have all been fixed by the designer – all you need to do is apply them. Content should be presented in a clear, logical way that will guide the reader through the message. Select the text that you want to style, and then choose the styling you want, either from the drop down menus or buttons in the visual tool bar, or the appropriate button in HTML tool bar (everything appears as separate buttons here).

THINGS THAT APPEAR AS INDIVIDUAL BUTTONS IN THE VISUAL EDITOR TOOL BAR:

Bold makes text… bold! It is used for emphasis or an important word.

Italic makes text slanty and is applied to text that needs to look a bit different or separated from the main contents, like a credit or important clause.

• Lists of points in main content
• Look like this
• They are made up of a sentences with the <li> tag applied plus
• all these sentences then get one <ul> tag around them
• (The visual editor button has a picture of a bullet point list on it, like what you might see in Microsoft Word)

THINGS THAT APPEAR IN THE ‘FORMAT/PARAGRAPH’ MENU IN THE VISUAL EDITOR TOOL BAR:

Main page heading

also known as <h1> and is used for the main heading of a page. It should be the first thing you see in the editing window and you must include this line for all pages on the site. They are not needed for posts and snippets as the title bar is used for this role instead.

Secondary level heading

also known as <h2> used for the main sub-divisions of text. They are also used for headings in side-column page extras and lists (but they they look different).

Lower level heading

also known as <h3>, this is the smallest heading level and divides up the content within the secondary level.

THINGS THAT APPEAR IN THE ‘STYLES’ MENU IN THE VISUAL EDITOR TOOL BAR:

Big intro

appears as ‘bigintro’ in the HTML editor. It must only be used on whole paragraphs. Use it for the first paragraph on main pages to introduce a topic.

purple
Makes selected text purple. This is used for key information, eg: prices or dates.

The golden rule is to mark up the text semantically (ie: according to what sort of text it is), rather than to achieve a particular look. People with a visual impairment often use screen-readers to read out the text to them, and these follow the tags to recognise the purpose of a particular chunk of text.

If something has gone wrong and is not showing how you think it should, the style tags have probably got mixed up – you will need to go into the HTML editor to fix it, or put everything back to basic paragraph and start again.

WordPress stores images and other attachments in the Media Library, which you can access from the main menu on the left of any of the admin pages. To upload pictures:

• Click Media then Add New to upload images from your computer.
• You can also do this via the Upload/Insert link above the light grey bar at the top of the editing panel – it also allows you to place the image you upload (or any other image in the Library) onto the page at the text insertion point.

You can edit picture sizes a bit in WordPress but not a lot, so try to scale them down a bit before uploading, and not load megabytes and megabytes’ worth of image! Aim for at least under 1000px wide.

When you upload an image, WordPress labels this as the full-size version and then automatically generates some additional, smaller size versions. If the picture isn’t big enough to do all the size options, you will notice that when you come to insert it some of these sizes won’t be available. These sizes are pre-defined by the designer to fit the various areas of the site.

PICTURE SIZES USED ON THIS SITE:

• Thumbnail – 140px wide by 170px high – for small ‘thumbnail’ pics, they appear alongside list entries and are useful for headshots or logos.
• Medium – 200px wide – for use in side column content (a suitable height gets decided by WordPress).
• Large – 485px wide – The full width of the main middle column (a suitable height gets decided by WordPress). This is the size used for the feature image at the top of a post. Alignment should be set to ‘none’.
• Full – The original size you uploaded it as.

Big pictures at the top of the page

Almost all main pages have a featured image at the top of the page (the wide image that the page title sits inside). They are a fixed size across the site. You need to upload this image at the correct size: 705px by 285px. (Amy might make this editable within WordPress at some point)

To change/add this image, go to the page in the admin area, click on Set featured image and follow the instructions to upload the new one. If you are changing an existing image, you will need to remove featured image before setting a new one.

To help find these pictures in the media library, name any new files you make for this job starting ‘mainpic_’ then the name. When you come to see what images are available in the library, you can search for ‘mainpic’ and these will all be found.

Adding pictures in the main column

A main column image

Click the Upload/Insert link above the row of style buttons at the top of the editing area.

From here, either follow the instructions to Add media files from your computer or click the Media Library tab, find a suitable existing image and click Show.

In the main image details panel there are various fields and options:

• The Edit Image button allows you to crop and scale the image (this is best done outside of WordPress, before you upload the image). See ‘Editing the image’ below.
• The text in the Title field will pop up when the user mouses over the image.
• The Description field is to specify any attribution/credits for the image, needed if the picture is a stock photo. See ‘Finding photos’ below.
• If you are using the image in the main column, you can add a Caption that will appear under the picture.
• The Link URL should almost always be set to None – otherwise the image becomes a rather pointless link to a page containing nothing but that same image (potentially confusing for the site visitor). The only time this is really useful is if the picture is a link to another page or website. You will need to know the full link beforehand to type in. See more information on links here.
• Use the Alignment option to specify whether you want the image float to the left or the right within the column or, if it is the full width of the page, choose none.
• Then specify the Size you want.

When you’ve made your choices/adjustments, click Insert and you will be returned to the page/post editing panel.

WordPress occasionally inserts the image at the top of the page regardless of where you thought you put the cursor – in the HTML editor you can highlight the code that has just appeared and cut and paste it where you wanted the image to go.

A medium version 200px wide

Adding images in side columns

These count as

– see the help page ‘inserting items into left and right columns’.

Editing images

WordPress offers some very basic cropping and scaling tools but it’s better to make sure your images are the right size in the first place if they are for a specific use.

After clicking on Media in the left Admin menu column you will see a list appear of all the images. As you hover over each a list of options will appear. The first one says ‘edit‘ – this also appears underneath the thumbnail if you have clicked on an item and are viewing details for just that one picture.

On clicking Edit the image is displayed. Drag a rectangle within the image area to display a cropping frame. Enter the required width and height into the Image Crop: Selection fields. You can drag the cropping frame around to find a suitable view, and then click the crop icon above the image area. Save the changes and Update Media.

If the correct cropping dimensions give a frame that looks too small, then you will need to reduce the scale (resolution) of the image before cropping it. Click the Scale Image link, enter either the required height or width into the appropriate field, and press the Scale button. You can then make another attempt at cropping the image.

If all is well, Save the changes and Update Media. If not, use the Restore Original Image link and have another go.

Don’t worry about this being super complicated – have a play and see what happens. WordPress will remember where you started from so you can restore the original. The only drawback is if the images you upload are huge then these files will all be stored on the site and take up lots of space.

Post Thumbnail Editor

An adjusted thumbnail

The Post Thumbnail Editor lets you adjust each size version separately rather than making the change across all the sizes like the basic Editor does. WordPress automatic thumbnails are just cut from the middle of an uploaded picture. You can change the view to make it a more interesting thumbnail (eg: to get the title in or prevent someone’s head being chopped off because they weren’t in the middle of the picture.)

When you go to edit an image, you will notice another link saying Post Thumbnail Editor. Clicking on this takes you to another window. Select the image size which is the problem and drag the cursor around to frame the image as you want it, and follow the instructions. The thumbnail size will give you fixed proportions to crop; if you want to change the view for larger sizes (where available) the cursor will not give you fixed dimensions – be careful!

Finding photos

Two good sources of stock photos are…

• iStock: you pay a small fee for each photo
• Flickr Creative Commons collections: three versions of the licence, with different restrictions on use.

Make sure that all photos used on the site are displayed in line with any copyright requirements. Don’t just pull stuff off the internet and stick it up on your site! Better safe than sued.

Creating links

The link button looks like a link of chain in the Visual editor and the word ‘link’ underlined in the the HTML editor.

To do email links

‘Please contact us to find out more.’

• Select the link text (here it was ‘contact us’).
• Click the link button.
• Replace the “http://” with “mailto:info@yourdomain.org”.

To do internal links

‘Please make use of the private Test page.’

• Select the text you want to be the link (here it was ‘Test page’).
• Click the link button
• Replace the “http://” with the last part of the permalink (the page address) to the page, including the parent level. You can copy and paste it either from the address bar of the browser or from the Permalink line above the editing window for the appropriate page: “/test-page”. You can also select it from the list under ‘link to existing content’ after you have clicked the link button, this makes a default long version and you are best trimming down to the slash and the page and/or parent name.

To make a download file link

‘Please download the application form.’

• In the page content of the editor window, put the cursor where you want the link to go and click on the Upload/insert button
• Upload the file or find it in the Media library and click Show.
• Find the Link line. Select File URL. It will use whatever is in the Title line as the highlighted text for your link – here ‘application form’ (you can adjust this afterwards in the editing window as well).
• Click Insert into post

Alternatively, proceed as per inserting a link to an internal page (you’ll need to upload the file first):

• Select the link text in your content (here ‘application form’).
• Click the link button.
• Replace the “http://” with the file’s permalink, which you can copy and paste from the File URL field visible when you click on the item in the media list eg: “/site2012/wp-content/uploads/year/month/form.pdf”.

Special media items

Videos

It’s best to do this in the HTML editor view. In YouTube (or other video sharing site):

• Find your video
• Click on Share tag. If you are putting your video on to a page then paste this text into your editing panel on a new line and away you go. BUT if you’re inserting it into a post, then you will need to carry on…
• Click on Embed tag
• Deselect Show suggested videos when the video finishes
• Under size, select custom size and set it to 480px wide
• Copy the iframe code from box
• Paste the iframe code into your content editor panel on a new line, wherever you want it

View this page in the HTML editor on the Admin side to see how this video’s code looks…

The lists of productions, news and academy events all work in the same way. Here’s how to make a new one to go in the list.

Recent news

News items get added to the ongoing list with the most recent at the top. Either go to Pages in the Admin area left menu, and click on Add New, or hover over the + New button on the grey Admin bar at the top of the browser and select Post.

Give your post a title, in the top box, and then type in your content! See editing and styling content for how to make your text look good, or Using images and Inserting links and media to embed images, videos, make links etc.

If you want to use an image with the post, find the bottom box on the right hand side of the editor window called Featured image. Click on Set featured image and follow the instructions. This picture will appear as the thumbnail for the post in any lists, and as the main picture at the top of the post when it is viewed in full. You don’t have to have a featured image – the post will still show without one – and it doesn’t stop you adding extra images within the content.

Now you must go to the Categories box on the right hand side and tick ‘News’. If you don’t tick this box then your post won’t appear on the website.

When you are done, click the blue Publish button in the top right hand box – and you’re done. The post is displayed with the date when you wrote the post.

NOTE: You can press Save draft instead and come back to the post to finish later – it will show in the list of posts but not on the website – or you can set the Publish date to some time in the future, at which point it will appear on the site.

Events and Productions

Events and productions are made in exactly the same way as News, above, BUT you must make sure you tick the appropriate type in the Categories box – ‘Events’ or ‘Productions’.

Use the purple style for sentences about date/time and tickets and put it after the regular text explaining the event. The actual cost in £ can also go in bold.

For these types of post, you must also set a date – it is this that is used to keep the list in order (the event coming soonest appears first) and is shown as the date for the event. Click on Edit directly above the blue Publish button on the right, after where it says Publish immediately. You will then get a little set of boxes appearing – enter the details for your event here. The time should be entered as 24hr clock.

NOTE: Wingfinger will improve this system in the future to incorporate events that span several days. For now, put in the date it starts on, and make sure that the full date and time information is displayed (in purple) within the post.

Workshops and Summer School

Workshops are made exactly as any other posts, but the Categories tick box is ‘Workshops’. If you are making a Summer School post, make sure you tick BOTH ‘Workshops’ and ‘Summer School’ – this will mean the post shows up on the Summer School web page and also in the list of workshops. You can also tick ‘Events’ if the workshop is being held at MGA.

The staff list is basically just lots of posts in a special list. These posts are all collected together in their own type under ‘Staff posts’ in the left hand column.

Edit a Staff post

Edit a staff post in the same way you would edit any other post type. The only difference is that they are all collected together under a special post type, ‘Staff posts’, in the left menu column. Click on the button to get the staff list, choose the name you want to edit and then edit the post as normal.

Make a new Staff post

Find ‘Staff posts’ in the left hand menu in the Admin area and choose ‘Add new’, or hover over ‘+ New’ on the Admin bar and choose ‘Staff posts’.

The title for the post in the top bar should be the NAME of the staff member. Their biography goes into the main content window. To add their headshot, click on ‘Set featured image’ in the Featured Image box on the bottom right of the editing window, and follow the instructions.

Now you need to input the ROLE or JOB that the staff member does. Go to the ‘Custom fields’ box underneath the main content window. (If you can’t see it, click on ‘screen options’ in the top yellow bar and turn it on.) Add a new custom field by clicking the drop down under ‘Name’ and choosing ‘role’ from the bottom of the list. In the box next door, under ‘Value’, write in the job title for your staff member.

Finally you must make sure that you tick the correct box under ‘Site note type’ – these put your staff post under the right department. The post will not show if you don’t tick a box.

Note: Academy and admin staff are listed just as names at the bottom of the Staff by department page itself, they are not individual posts as they do not need biographies etc.

Ordering the Staff posts

Until Wingfinger does an upgrade, the staff posts are ordered by the date they were made (published), oldest first. The website does not show this date, however. So if you want to boost someone up the list, you need to change the published date by clicking ‘Edit’ in the Publish box top left of the editing area, above the blue button.

The Head of Department must go at the top of the list – so this post will need to be kept as the oldest date.

As well as the main column of the website, you can insert text and images into the left and right columns – ‘page extras’. These are done with something called a ‘widget’.

Snippets

Snippets are little bits of text that can be dropped into the columns. For example – the Download Link for application forms, the dark blue Useful Links boxes, quotes in the right hand column. These are all kept in a separate group, Snippets, in the left hand menu in the Admin area. Clicking on here is the only way to access this content. They are edited and created like ordinary posts.

Snippets are good for bits of text that are called in to more than one page, or for special links.

Inserting snippets and images columns

We use the Post Widget to place an item – an image or snippet – in certain editable areas of the page. The Useful Links box in the left column of the website view of this page is made with this widget. View this in the Admin area and find the Custom Fields box to see how it’s done…

In the Custom Fields box underneath the editing window, select the drop down menu under Name and choose the area you want to drop your snippet into. You can drop things into:

• Left hand mini column – ‘left’ – for images, logos, info boxes and downloads
• Right hand column – ‘right’ – for events adverts and random quotes
• Certain special areas on the homepage – ‘home’, ‘extra’ and ‘head’ all effect objects on the home page and page template

In the example above, a Useful Links box is dropped into the left column. Choose ‘left-0-post’ from the list. ‘Left’ is the area we are dropping the item into, ‘0’ is the order of the item in this area (0 is first, 1 is inserted underneath, etc), ‘post’ is the name of the widget we are using.

Now we need to specify which item (snippet) we want displayed. First, we need to enter its ID number. WordPress assigns a number to everything – pages, posts, images etc – for easy access. If you look at Available items to insert on the right side of the editing window, you’ll see a drop-down menu of ‘Snippets’ or ‘Images’ – click one and find the item you want. (This list is a reference for the IDs assigned to each snippet you have made, so clicking on one won’t do anything – just read the number.)

Note: You can also find this number in the URL shown in the address bar of your browser when you have opened up a post/snippet/image or hovered over it. The URL address ends with something like ‘?action=edit&post=355&message=1’. The number following ‘post=’ is the ID number you need.

Now you need to put this information into the Value box for the custom field you’ve selected. Type in ‘ids=’ and then add the number for the item. You can add several item IDs, separated by commas, if you want to insert several items with the same styles or sizes. Then…

FOR SNIPPETS:
Press return to start a new line, and type ‘style=’. The next words to type here will determine the visual look for the box. Options are:

• download – creates the button if it is an application for download link. Download buttons should always go at the top of the column (ie: have number ‘0’ in their custom field name)
• box usefullinks – for the ‘useful links’ box
• box extra1 – for the boxes with additional information in.

FOR IMAGES:
Press return to start a new line, and type pic_size=. You will need to enter ‘medium’ here to get the image version that is 200px wide. (See ‘Using images’ on how to edit images. If you use a larger size it will break the site.

• You can also specify the picture to be a link by adding a line of ‘link=/whateverthelinkis’
• Or add a caption with ‘caption=”Whatever the caption is”

After these lines have been entered, click on Add Custom Field. There will be a yellow flash and then the item should appear. To edit these, change the code as you need it (eg: you might want to change the item to a different one, so change the ID number) and press Update.

Important things to know

Each time you add a different snippet, you need to increase the order number in the middle of the name from the previous one. To change order of inserted items, change that number.

Child pages will inherit inserted items from parent pages unless they are replaced by a new one on that specific page. So a Useful Links box inserted into the ‘About’ parent page will also appear on all the sub pages in the ‘About’ section, unless something else has been specified at that name and number.

As an example, the random quotes have a custom field of right-0-random. They are called in on the parent page of the Full-Time section, and you will not see them listed in the custom fields of the children pages BUT they are appearing on them on the website.

This site uses several lists that bring in a group of posts on to a page. For example, a list of recent news or a list of forthcoming events.

These lists are set up for this site and should be doing the right jobs on the appropriate pages already. They are created with a List Widget. All the lists operate within the main column of the website and access to the code is best done in the HTML editor.

NOTE: The information at the bottom shows you what is going on with List widget code, but most of the presentation (how it looks) of these lists has been permanently decided by the designer. You probably won’t ever need to create a list from scratch – but the info below may still be useful if you accidentally break something!

Lists on this site

• Home page uses a list of 4 recent news items in a special styled column with thumbnail pictures, plus another special style for a list of events (just displaying a thumbnail image and key text) at the bottom of the page.
• News page has a basic list of recent news items that is split across several pages and displayed as excerpts with a thumbnail link to the side
• Productions page shows a list of forthcoming shows with a large featured image at the top and a summary (specified in the excerpt box of each post)
• Events page shows MGA events as an excerpt with a large featured image at the top of each.
• Staff page uses a special list displaying the staff posts in expandable entries.

The List Widget

The list is created by a line of code within the main content window that starts with ‘

Calling the right list

The first parameter inside the call specifies the category of posts the list is showing. Write ‘cat=20’ (or whatever the number is). If you don’t write this number, you won’t get a list. To find the cat number, go to the posts or staff posts section in the Admin area and click ‘categories’ or ‘staffpost type’ from the menu. Hovering over the one you want, you will see an ID number in their URL web address.

Other parameters

There are several other details needed to display the list you want. Type a space between each entry.

• Order – default (ie: if you haven’t specified it) is descending from most recent to least recent (‘order=DESC’ if you want to put it in). This is used for news. Type ‘order=ASC’ to flip the order. This is used for lists of forthcoming events.
• Status – WordPress understands status as being whether the date of the post has happened or not. Normally it will not display anything that has not happened yet. Add ‘status=future’ if you are using posts with future dates – lists of events and productions.
• Heading – A heading with style <h2> tags will be included at the top of the list. Type ‘heading=Whatever_the_heading’ – important to note the underscores instead of spaces and any fancy punctuation characters need a backslash ‘\’ before.

Format options

You can also add in, alongside the above, various instructions for how the list will appear. (These are all connected to the design that has been set up for the site.)

• Number – How many posts are shown, default is 5. Type ‘show_posts=’ followed by the amount. To show all posts in your category, type ‘-1’. Use ‘1’ for a post that updates to the next in the list, for example the next upcoming event. This is a list and not an insert post!
• Paginate – if the list is very long, ‘paginate=true’ will split it across pages (see the News page). Default just shows an ever-increasing list (‘false’).

List styles

There are also options for how the list is presented.

• Type – lists are view in 3 styles, add ‘type=’ followed by the word for the style you want: ‘titles’ (default – just the post titles in a straight list), ‘excerpts’ (the title and part of the text – see below for details), and ‘full’ (the whole post including all the text, images and title)
• Format – Type ‘format=’ followed by a letter that represents certain info NOT to be displayed: ‘d’ suppresses publication date and ‘t’ surpresses time (eg: on the staff list); ‘r’ removes links from the titles and thumbnails (eg: on the staff list)
• Style – There are several different stylings for lists that have been set up by the designer. Add ‘style=’ followed by ‘thumblist’ for a list that shows thumbnail images to the side of each item, ‘largelist’ for a list that shows the feature image for the post as a large picture at the top of each item, ‘stafflist’ for use with the staff list only and ‘homenews’ on the homepage.
• Pictures – For use in conjuction with the above styles, you may need to specify the picture size (taken from the versions available in the site design). Type ‘pic_size=’ and add ‘thumbnail’ for the thumblist, homenews and stafflist or ‘full’ for the largelist.

An excerpt is either a chunk of text (usually a summary) put into the ‘excerpt’ window below the main post content in the editing window (we do this for shows) or up to where a <!--more--> tag has been inserted into the main content, or if neither of these exist, a default amount of words taken from the first paragraph. Most of the news items in lists show as last option. For either the automatic excerpt or the specified excerpt using the ‘more’ tag, a ‘Read more’ link appears at the end.

There are various parts of the homepage that you can change. The page is made up of several lists and items all brought together. The only thing that you will see in the editing window from the Pages list is the list widget for the latest news items.

Some of these items are snippets – to see just the snippets relating to the home page, go to the Snippets list in the Admin area and filter it by ‘Home items’.

Latest News list

The ‘Latest News’ list is in shortcode in the main editing window (the text between square brackets). This is set up like all other lists on this site – see Changing and inserting lists. With its cat number it is only bringing in the news item posts.

All the other areas

All the other homepage things you can change are in areas of the page listed in the custom fields box – the see where and what they are, look down to the Custom Fields box under the editing window when viewing the home page in the Admin area.

Coming Up list

This displays just the start date, thumbnail and title for any future events. Its custom field Name is home-0-list and the cat numbers call in post types of shows, events, workshops and summer schools.

Video

The right-hand video is a custom field of right-0-post which calls in a snippet called ‘HOME video’. To change the video, find this post in the Snippets list, and paste in a new YouTube embed code in the editing window to replace the existing one. This video MUST be set to 500px wide when you get the code from YouTube. See Inserting links and media items for more on using videos.

If you want to replace this video with something else, eg: an image, you need to change the ids= number in the custom field value to your image’s new id number. See Inserting items into left and right columns for more.

Facebook box

This box is also a snippet, called in to a custom field of right-1-post. The snippet is called HOME facebook plugin. All the code needed to make this connect to the MGA facebook page is contained in this snippet and shouldn’t be messed around with unless you know what you’re doing! You can change this to another object eg: an image as described about but again it MUST stay at 500px wide.

Slide show

The slide show of pictures in the header of the home page is in the custom field head-1-slideshow. Chosen images are listed by their id number after ids= in the Values box, so if you want to change/add images, just find their number (in the Images drop down list on the right, if you’ve already uploaded them) and add them to this line. The rest of the code in the Value box needs to stay as it is or it will break the layout of the page.

Home page top text

The text at the side of the slideshow, starting ‘Whatever the level…’ is made as a picture (to make it look good!) so if you want to change it you need to remake the picture (so it is listed under the Images dropdown and in the media library, it’s not a snippet). Wingfinger has the master file for these graphics so you’re probably best asking us to do it. Again the SIZE of any replacement image MUST stay the same.

Header strap line

The text that says ‘welcome to a world of performing arts opportunities’ is also actually an image, and is done in the same way as the introductory text above. It has a custom field of head-2-post and needs to keep the specified style or the layout will break.

The HTML Editor

Most of the time, you will probably want to work with the Visual Editor, which does a fairly good job of generating the appropriate HTML code via the various buttons above the Editor panel. But sometimes you need to see what’s going on behind the scenes, and clicking the HTML tab allows you to do this.

The HTML Editor shows the underlying code that the browser uses to display the web page, and is useful in debugging, or when the Visual Editor doesn’t seem to be doing what you want.

However, even with the HTML Editor, what you see is not exactly the HTML that gets used to create the web page. In particular, the HTML editor interprets a double return (ie: a blank line) as the start of a new paragraph. This has the advantage that when you are typing ordinary paragraphs of text, you only need to press return twice after each one and not need the HTML <p> at the start and </p> at the end.

Obviously, to make full use of the HTML Editor, you have to be prepared to learn a bit more about HTML.

Troubleshooting

Most pages should be fairly easy to edit, but those with more complex mark-up can be challenging. If there are pages where Wingfinger has had to insert a bit more HTML than usual to get the desired effect, it’s important to preserve the structure of the various tags when you do your editing – and it’s possible to check this, using the HTML editor.

For example, the <div> </div> tags we often use are a way of grouping things together as an item – a sort of generic container. You’ll need to make sure that these are left alone.

Testing the code – if you’re feeling adventurous

Warning: This section gets really nerdy!

The basic rule of HTML is that – with a few exceptions like <img/> and <br/> (a line break) – every opening tag needs a corresponding closing tag. Sometimes the opening tag will contain some “attributes” – like class="intro".

As a general rule, if the whole page breaks, it often means that you’ve got an opening tag without its corresponding closing tag. One way to check what’s happening is to click the “W3C Validator” link in the Admin Bar. This checks the page against the official W3C Validator (but it can’t check Private pages like this one).

If the validator detects some errors, tick the “Show source” option and Revalidate. This allows you to see the line of code that the error occurs in – and also to see what WordPress has done with your efforts in the editing panel. (Sometimes the automatic paragraph feature seems to insert <p> </p> tags in unhelpful places.)

Don’t be too put off if the validator thinks it’s found lots of errors. The good news is that fixing the first one will often cure all the others at the same time. Although the error messages can be hard to unravel, the answer will probably be in there somewhere.