Although the main meat of any page will be in the main content area, it’s often the page extras in other areas – the photos, category listings, blog excerpts, graphic links and widgets of one sort or another – that add visual interest to the page. A set of Wingfinger Widgets allows you to insert page extras in these other editable regions of the page.

This is the technical reference page for our widgets, giving the information you need to be able to deploy them on site pages. If this all looks a bit daunting, see Using posts as page extras for a gentler introduction to the subject.

Please note that although most of the widgets can be inserted in various regions of the page, they will sometimes need additional styling by Wingfinger in order for them to look their best. Similarly, changing some of the parameters may also necessitate further styling work. Our cheaper web packages usually include widget styles for just one or two page regions and a more limited range of parameter options.

Wingfinger Widgets are all controlled in the same way, using the Custom Fields area below the main Editing panel. (If this is not visible, you may need to turn it on in the Screen Options panel just below the Admin Bar.)

Custom Fields

To insert a widget anywhere other than the main editable text area of a page, the standard method is to create a Custom Field with the appropriate name (eg: left-1-post) and enter the required parameters as a set of name-value pairs, such as…

ids = 205
show_title = true
style = basic

The order of the pairs doesn’t matter, and the system is fairly tolerant of additional spaces. The main thing to note is that each name-value pair should be on a new line. For each widget, details of the parameters are listed on a separate page.

The first bit of the Custom Field name (left) specifies whereabouts on the page the widget should be inserted (one of several predefined regions). The second bit (the number) is used to specify the order in which the widgets appear in that particular page region (lowest numbers first). The last bit (post) specifies the type of widget to insert.

Shortcodes

To insert a post or widget into the main content area (if the particular widget allows for this), instead of a custom field you use a shortcode. The format is very similar to the custom field version, but this time the whole thing is on one line and enclosed in square brackets (which I can’t show here without WordPress executing the shortcode!)…

shortcode_post ids=205 show_title=true style=loud

This time you’ll probably find the code easier to read if you remove the spaces around the = sign.

Warning: One thing that shortcodes can’t cope with is a value string containing spaces. So if you try to specify something like…

heading=Latest news – this won’t work.

Instead, you need to replace all the spaces with underscores…

heading=Latest_news – and this will work.

Page regions

All Wingfinger’s WordPress sites are set up so that each page has a number of pre-defined regions where page extras can be added. Some pages – particularly the Home page – may have additional areas defined. And most of our widgets can also be used within the main content area, using the shortcode system outlined above.

Whenever a post, listing or widget is added to a page, the relevant region always forms the first part of the custom field name. So, to add a vertical scroller widget to the left column, you would use a custom field name of left-0-vscroller. Similarly, to add a graphic after the scroller in the left column, you would use a custom field name of left-1-post (because WordPress regards media items like photos and graphics as just another sort of post).

To swap the positions of these two page extras, you would change the custom field names to left-1-vscroller and left-0-post. And as soon as you press the Update button, WordPress also helpfully rearranges the custom fields in alphabetical order, which will reflect the order in which the items appear on the page (within any given region).

Inheritance – how sub-pages are handled

By default, any widgets you specify for a page region outside the main content area will also appear on all descendant sub-pages, unless you interrupt this inheritance behaviour for a particular sub-page (and all its own descendants). You can do this on the sub-page concerned by:

• specifying another set of widgets for this region (and the new set will then be inherited), or
• specifying any single widget for this region and entering a value of ‘0’ in its custom field (which turns off the inheritance without adding the widget).

The simplest widget for handling page extras (and the one you will probably use most) is the Post Widget. This enables you to place any post or image in any of the editable areas of the page. Once you can do this, you’ll be well placed to start using the other widgets, which – although more complex – all use the same techniques.

A simple worked example

The page extra at the top of the side column here is simply a post.

We could have used a post from the News category here, or any other post instead – but because this one was written specifically for use as a page extra, we have categorised it as a Snippet.

This extra bit of jargon actually makes it a bit easier to find this post amongst all the others in the Dashboard listings. Do this now, and go to its Editing panel. The URL shown in the address bar of your browser will end with something like ?action=edit&post=355&message=1. The number following post= is the unique ID for this post – make a note of it, as the ID is how you tell any widget which post you want to use.

Another way of finding the ID: on the main Posts listing page, hovering over the name of the post should bring up a similar URL in the status bar of your browser.

The text of this snippet explains exactly how we placed it there – including its actual ID number.

A bit more explanation

• Each page has a number of pre-defined regions where page extras can be added. Some pages – particularly the Home page – may have additional areas defined. The name of the region always forms the first part of the Custom Field name.
• In addition to these regions, most types of page extra can also be added to the main content area by typing an appropriate shortcode at the appropriate place in the Editing panel. This can be useful for including complex items like slideshow widgets – or simply for adding a post in a suitably styled box (see Try it yourself). More details on the Widget reference page.
• The number in the middle of the Custom Field name is used to control the order in which items appear in that region.
• The last part of the Custom Field name is the name of the widget.
• Any page extras placed in a page region will be ‘inherited’ by all its sub-pages – unless they specify something else for that region.

To get the most out of any widget, you need to know what parameters it takes and what values you can give them. Full details of all the available widgets are given on the Widget reference page. Meanwhile, here’s the rest of what you need to know about the Post widget…

Post widget full specification

Pages are the web pages that are listed in the navigation menu (and a few more, like this one, that are hidden from the average viewer). Posts are used for things like News items, as well as Snippets – small chunks of text that can be dropped into particular bits of a page.

Making a new page

1. Choose New Page from the Admin Bar.
2. Give the page a title (the box along the top).
3. If necessary, adjust the Status, Visibility, Parent and Order of the page (see below).
4. Press the blue Publish/Update button to save your changes.

At this point, the page has no content – but it’s worth saving it at this stage so that it’s established in the site hierarchy and – unless you’ve set the Visibility to Private or the Status to Draft – will appear in the navigation menu(s).

You can now start typing the main content in the Visual Editor (or the HTML Editor, if you prefer) – see the pages on Using the editing panel and Working with text. Remember to save your work frequently, using the Update button.

Status

To the right of the Editing panel, you can set the Status of the page to Published, Draft, or Pending Review. Only Published pages will be visible to ordinary site visitors.

Visibility and Password protection

Pages can be Public (visible to everybody, when Published), Password Protected, or Private (visible only to logged-in users). Use the Visibility -> Edit link to the right of the Editing panel to set these options.

To password-protect the page, select Password protected, type a password, and click OK. If you want to make certain areas of the site available to members only, make sure all the relevant pages have the same password, and give it to members when they join up. (This is the free way of creating a ‘members only’ area. The alternative, with systems for registration, login, lost password etc, is fairly costly to set up – but Wingfinger can do this, if required.)

Parent and Order – adjusting the navigation menu structure

Any new page that you create will appear at the top level of the navigation unless you specify that it’s a sub-page of another page. In the right-hand column is a box called Page Attributes. In here you can select the Parent page from the menu (the main page that your new one is a sub-page of). You can also change the order of the menu items (default is alphabetical) by assigning a number to the page in the Order box. At any given menu level, any numbered pages will display in numeric order.

Page extras

Although the main meat of any page will be in the main content area, it’s often the page extras in other areas – the photos, category listings, blog excerpts, graphic links and widgets of one sort or another – that add visual interest to the page. A set of Wingfinger Widgets allows you to insert page extras in these other editable regions of the page. Wingfinger Widgets are all controlled in the same way, using the Custom Fields area below the main Editing panel. For more information, see Wingfinger widgets – the basics.

Making a new post

New posts are created in a similar way to pages, except they usually need at least one post Category assigning to them and they do not appear in the navigation menus.

The category needs to be selected from a list of options in the Category box – over on the right (under the date). If the post doesn’t belong in an obvious category such as News or Events, but has been created for use as a page extra or as part of a Wingfinger Widget (eg: a slideshow), it probably belongs in the Snippet category.

If you want to start a new major category of posts that you will eventually want to appear listed on a page (eg: Blog), you can add the new category name in the box under the list of categories. See also, the reference page for the List widget.

Excerpts

Posts should usually be written with an introductory paragraph or two that work well on their own as a teaser. This should be followed by a click of the More button (above the editing window) – which will result in this…
More…

When a post created in this way is displayed by the List widget in excerpts mode, the rest of the text will be suppressed, and the link will take the reader to the full stand-alone post (without the More link).

Special items

This is a catch-all term we’re using to cover other items that you might want to include in the main content area of a page or post when you’re using the Editing panel. (Not to be confused with page extras, which are used to add content to the other editable areas of a page – mainly the side column(s).)

Videos

In YouTube

1. Upload your video to YouTube (you will need a YouTube account to do this)
2. Select video in Youtube
3. Click on Share tag
4. Click on Embed tag
5. Deselect Show suggested videos when the video finishes
6. Set the iframe custom size to fit your site
7. Copy the iframe code from box.

In the WordPress HTML Editor

1. Click to set the text insertion point.
2. Paste the iframe code into the content.

Example:

<iframe width="380" height="237" src="http://www.youtube.com/embed/CENw-3cRbLc?rel=0" frameborder="0"></iframe>

RSS feed links

Each category of post has its own RSS feed. This takes the form:

http://www.yourdomain/category/the-category-slug/feed.

You can find the slug (the computer-friendly name) for the category, by clicking Posts -> Categories in the main Admin menu.

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. Click Media -> Add New to upload images from your computer. You can also do this via the Upload/Insert link above the row of buttons at the top of the editing panel – which also allows you to place the image you upload (or any other image in the Library) onto the page at the text insertion point.

Before uploading a photo, check that its pixel dimensions are compatible with its intended use (See Image sizes in the side column). You need to make your pictures that right size before you put them into WordPress. It’s possible (but not that easy) to reduce the scale of an image in WordPress, but attempting to enlarge an image is not recommended.

When you upload an image, WordPress labels this as the full-size version and then automatically generates some additional, smaller size versions (provided the full size version is large enough). The usual available values are: thumbnail, small, medium, large and full – although this varies from site to site, and sizes greater than the original upload (full) will be unavailable. These sizes are pre-defined to fit the various column sizes in the site.

Adding pictures in the main column

In the page/post editing panel, place the cursor where you want the picture to appear in the main content text.

Click the Upload/Insert link above the row of editor buttons.

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, but 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.
• One of the main uses of the Description field is to specify the attribution/credits for the image. See Finding photos below
• The Link URL is best set to None – otherwise the image becomes a rather pointless link back to a page containing nothing but that same image – potentially confusing for the site visitor. Setting it to None also makes for HTML that’s a lot easier to read/edit/debug.
• Use the Alignment option to specify whether you want the image hang to the left or the right within the page or, if it is the full width of the page, choose none.
• Then specify the Size you want – see Image sizes.

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

WordPress has a disconcerting habit of inserting the image at the top of the page, regardless of where you thought you put the cursor, so – in the HTML editor – you might need to highlight the code that has just appeared and cut and paste it where you wanted the image to go.

Editing the image

WordPress offers some very basic cropping and downscaling tools which are described briefly below. However, they are not particularly easy to use, and it’s far better to ensure that all images are the right size before uploading them to WordPress. But if you really must…

When the Edit Image button is pressed on the Edit Media panel, the image is displayed. Drag a rectangle within the image area to display the cropping frame. Then enter the required width and height into the Image Crop: Selection fields. 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.

Finding photos

Two good sources of 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.

In both cases, you need to acknowledge the source of the photo. One way to do this is to paste the appropriate attribution into the Title field when you upload the photo to WordPress. For photos used in any of the Wingfinger Widgets, another approach can often be used…

If there’s a line starting credits= in the Description field of the attachment, this will be used to drop a small camera icon in the bottom right corner of the image. This displays the credit line when moused over – and if the credit line is a link, clicking the camera will open it (eg: a Flickr page) in a new window. This facility means that it may be preferable to include most photos using the Post widget rather than placing them directly into the editing panel. Most free photos still require attribution of some sort, and this is probably the easiest way of satisfying the requirements.

The main rule to follow is: Concentrate on getting the structure right, and the styling will look after itself. So you won’t find many options to let you alter the look of your page – but if you apply the headings etc in a logical way, the style sheet will apply a consistent look across the whole site.

For example: the Emphasis (I) button should only be used where selected words or phrases require emphasis – and not because you happen to like italic text. And the same applies, of course, to the Strong emphasis (B) button, which should only be used where selected words or phrases require even more emphasis.

The following layout rules have been kept to a minimum – simplicity makes for easy editing and a coherent look.

Below, you’ll find examples of how the various HTML tags are styled.

Page titles are <h1> like this.

…and normally, level 1 headings should not be used for anything else, so you won’t ever need to use this one.

<h2> headings look like this.

These should be used for the main sub-divisions of the centre column. And they’re also often used for the main headings in side-column items (where they are styled differently).

<h3> headings look like this.

In theory, it’s considered bad practice (from an accessibility point of view) to skip heading levels. But sometimes needs must!

<h4> headings look like this.

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 one clue to the purpose of a particular chunk of text lies in the html tag that’s used to mark it up.

Lists

Items which are essentially lists should be marked up as either:

• Unordered lists (like this one and most of the others on this site) or
• Ordered lists – (numbered) where the order of the items is significant. (See, for example, the step-by-step instructions in the next section.)

Remember: Wingfinger can, if required, change the CSS style sheet to change the way a particular tag (<h2>, <h3> etc) displays across the whole site. But it’s a lot more work to edit each page in WordPress to change the tags – so do, please, try to apply them in a way that’s appropriate and consistent.

Creating links

To do email links

‘Please contact us to find out more.’

1. Select the link text (ie: contact us).
2. Click the link button.
3. Replace the "http://" with "mailto:info@yourdomain.org".

To do internal links

‘Please make use of the private Test page.’

1. Select the link text (ie: Test page).
2. Click the link button.
3. Replace the "http://" with the last part of the ‘Permalink’ to the page – which you can copy and paste either from the address bar of the browser or from the Permalink line above the editing window for the appropriate page: "/test-page"

To do download file link

‘Please download the Word file (10kb).’

1. Upload the file to the media library
2. On the Page/Post select the link text (ie: Word file).
3. Click the link button.
4. Replace the "http://" with the file’s url – which you can copy and paste from the file url field which is visible in the file’s edit media window: "/wp-content/uploads/year/month/Word_file.doc"

There are two editor windows. The “Visual Editor” option looks slightly less daunting to those not familiar with HTML. The “HTML Editor” shows the underlying code that the browser uses to display the web page, and is useful in debugging.

Please make use of the private Test page where you can try things out without them being visible to other site visitors.

Getting started – Visual Editor

1. Make sure you are logged in – the Admin Bar should be visible across the top of the browser window.
2. Select Help pages -> Test page from the Admin Bar.
3. Select Edit page from the Admin Bar.
4. Make sure the Visual editor is selected (using tabs at top right of editing panel).
5. Click in the editing panel at the end of the existing text.
6. You could now try adding a couple of paragraphs of text.
7. To save your amends, click the Update button at the right of the page.
8. To view the amended page, click the View Page link in the Admin Bar.
9. To continue editing the page, click the Edit Page link in the Admin Bar.

In general, you should find the Visual Editor behaves much like any other text editor.

By default, the editor applies the HTML paragraph tag (<p>) to each paragraph you type. But because this is a (more-or-less) WYSIWYG editor, it does this behind the scenes. The Path indicator at the foot of the panel shows which tag is currently applied to the selected text.

The buttons along the top allow you to apply different HTML mark-up (or tags) to selected text. The tags in the Format drop-down (which is usually showing Paragraph) will apply to the whole of any selected paragraph(s). Most of the other buttons are usually applied to a chunk of selected text within a paragraph (the <strong> tag was applied here, which is often displayed in bold text – hence the B marking the button).

For more information about the different tags/buttons – including when and how to use them – see the Working with text page.

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 just doesn’t seem to be doing what you want. In fact, on pages where Wingfinger has used more complex mark-up, switching to the Visual Editor can sometimes destroy the structure – and so we disable the Visual Editor for those pages. Please don’t change this setting!

However, even with the HTML Editor, what you see is not exactly the HTML that gets used to create the web page. WordPress does a certain amount of post-processing on the text and code that appears in the Editor panel. 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 it’s possible to type paragraphs quickly and cleanly without having to precede them with <p> and end them with </p> – but the disadvantage is that you’re not seeing the actual code.

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 unchanged.

Testing the code – if you’re feeling adventurous

Warning: This section is not for the techno-phobic!

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.

The first of a set of pages on how to edit this site. These Help pages are ‘Private’ and can only be viewed by people logged in as Editor or Administrator.

Getting information

Editing this site is done using the standard WordPress system.
There is extensive documentation on WordPress. However, the information you are looking for is likely to be buried among swathes of stuff that doesn’t apply to this site. If you need to refer to the official documentation, it’s important to bear in mind that, on this site, WordPress is just being used to drive the content management system (CMS), and many of the features and issues that are discussed are not relevant here.

The same also applies to the Help content at the top of the Admin pages: if this refers to items that you can’t find, this may be because they are simply not relevant to this site and have been removed by Wingfinger.

The topics on these pages give a basic outline of some of the main procedures you will need to use – but where there are major omissions, please contact Wingfinger and we will attempt to fill them in.

If you get stuck, try contacting Wingfinger 0113 2450469 during normal working hours.

The Admin area

Warning! If you don’t know what you’re doing, indiscriminate changes here can easily break the site – particularly if you’re logged in as an Administrator. For example, updating to the latest version of WordPress might well require additional changes to some of the code underlying this site, and is best left to Wingfinger as a six-monthly maintenance job. Don’t do it!

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. Whenever you are logged in, the Admin Bar will be visible across the top of the browser window – but ordinary site visitors won’t see it.

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 the main menu on the left.

Using the Dashboard lists: WordPress displays posts, pages and media as lists (when you click on these in the left-hand menu). If you are having trouble finding what you’re looking for, you can filter these lists (eg: by month or category) or use the Search box to look for a page/post that contains a particular word or phrase.

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 window) and ticking the relevant box.

Basic concepts

What you can change

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

• CMS-editable areas – containing virtually all the content (text and accompanying images). These include the main content area and (usually) a number of additional areas where page extras can be inserted.
• The page template – the structure, styling, menus and technical web stuff that determine the overall look and behaviour of the page. You can edit the CMS-editable areas, but not the page template.

Pages and Posts

Most of the work you’ll do in the Admin area will be in the Posts and Pages sections – both of which use the same editing panel, which is the heart of the WordPress CMS. You can reach this by clicking the Edit Page/Post link that appears in the Admin Bar at the top of the page.

WordPress terminology is a bit confusing: Pages, Posts, Snippets and Media (eg: photos) are all – er – posts! However, it’s useful to make the following distinctions…

• Pages are the web pages that are listed in the navigation menu (and a few more, like this one, that are hidden from the average viewer) – they are suited for content that’s more or less permanent.
• Posts tend to be shorter, less permanent items and are often dated (like news items or blog entries). They have the advantage that they can be grouped into named Categories and displayed as page extras in various ways (in lists, as excerpts, or in full) across the site.
• Snippets are short chunks of text (maybe with accompanying images) usually written specifically for use as page extras. Defining these as a separate type of post helps to avoid cluttering the Posts list and makes it easier to administer the site.

See the Pages and Posts page.

Page extras

The editing panel allows you to change the main content area of a page, which is invariably the widest column of text. But you can also control the other editable areas of the page by inserting one or more page extras.

A page extra can be:

• a Post eg: the most recent news item
• a Snippet eg: a short post encouraging site visitors to make a donation – possibly linking to a PayPal page
• a List of posts eg: the next three Event posts, listed by title and date
• a Wingfinger Widget eg: a slideshow consisting of a set of photos with accompanying text – each one linking to a different page on the site.