Working with Snippets

Snippets are small chunks of text which can have fetured images and links that can be dropped into a region of a page/post. For example – ?? in the region bottom of the What we do page. Snippets are used for chunks of text that are called in to more than one page and for a parallax panel.

Making a new Snippet

  1. Choose New Snippet from the Admin Bar.
  2. In the field at the top enter the title.
  3. Using the Visual or Text editor enter your content
  4. Periodically click the Save draft button to save your changes as a draft.
  5. When your happy with the content click the blue Publish/Update button to save your changes.

Now go to a page/post you want to use the snippet on and use a Wingfinger Widget to display it or a shortcode in the content – repeat on other pages/posts as required.

NEED TO WRITE?????????????
Example of a shortcode shortcode_post ids=333 show_title=true style=membership which is enclosed in square brackets (which I can’t show here without WordPress executing the shortcode!). This code shows the following:

Working with Posts

These are used for entering the content of a news item, a factsheet, an article or a slideshow slide. Each post is assigned a category which defines where it will appear on the website when the post is published.

Making a new Post

  1. Choose New Post from the Admin Bar.
  2. In the field at the top enter the title.
  3. Select the appropriate category from the list of options in the Category box – over on the right (under the date)
  4. Using the Visual or Text editor enter your content
  5. Periodically click the Save draft button to save your changes as a draft.
  6. When your happy with the content click the blue Publish/Update button to save your changes.

At this point, the post will appear on the relevant page(s).

Adding a featured image

Whilst editing the post:

  1. Click on Set featured image link in the Featured image box – over on the right (under the Tags box)
  2. Select a featured image from the Media library or upload a new image. Click on the blue Set featured image button
  3. Click on the blue Publish/Update button to save your changes.

Note: posts created for the home page slideshow must have a featured image and only the slideshow category selected.

Adding an image in the main column

Whilst editing the post:

  1. Place the cursor where you want the picture to appear in the main content text.
  2. Click the Add Media link above the row of editor buttons.
  3. Add a Caption that will appear under the picture every time it is used.
  4. 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.
  5. Use the Alignment option to specify whether you want the image float to the right (recommended for medium images) or left within the column.
  6. Then specify the Size you want ie Medium or large (fills whole area).
  7. When you’ve made your choices/adjustments, click blue Insert into post button and you will be returned to the page/post editing panel.
  8. Click on the blue Publish/Update button to save your changes.

Working with pages

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). For items not in the navigation menu the site uses Posts and Snippets.

Making a new page

  1. Choose New Page from the Admin Bar.
  2. In the field at the top enter the title.
  3. If necessary, adjust the Status, Visibility, Parent and Order of the page (see below).
  4. If a second column is required select the Two column template in the Page attributes box to the right.
  5. 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).

Adding extra content to regions

Although the main meat of any page will be in the main content area, it’s often the extra content in the regions that add visual interest. A set of Wingfinger Widgets allows you to insert extra content in these regions of the page. There are two widgets used on this site for handling page extras the Post Widget and List Widget. This enables you to place any Post(s), Mosaic Post(s), Events Post(s) and Snippet(s) in one of the regions of the page eg region right (the one you will probably use most).

A post widget worked example

In the page/post editing area below main content text area is the Wingfinger widgets area.

  • Click the Region right tab.
  • Use the Add widget pull down menu to select Post widget.
  • Add id of post required to ids field (reference list of posts available is shown at bottom of the Wingfinger widgets area.
  • Use the Add parameter pull down menu to select Show_title.
  • Use the select… pull down menu to choose True.
  • Use the Add parameter pull down menu to select Type.
  • Use the select… pull down menu to choose Excerpts.
  • Click OK button to confirm parameter
  • Click OK button to confirm and exit Wingfinger widgets
  • Update the page/post

A list widget worked example

In the page/post editing area below main content text area is the Wingfinger widgets area.

  • Click the Region right tab.
  • Use the Add widget pull down menu to select List widget.
  • Add category number of category required to cats field (reference list of categories available is shown at bottom of the Wingfinger widgets area.
  • Use the Add parameter pull down menu to select Type.
  • Use the select… pull down menu to choose Excerpts.
  • Use the Add parameter pull down menu to select heading and enter heading.
  • Click OK button to confirm parameter
  • Click OK button to confirm and exit Wingfinger widgets
  • Update the page/post

Important things to know

Each time you add a different widget they will get stacked up behind the existing ones. To change the order, drag the appropriate line.

To edit the widget, select the Edit icon, or to delete it, click on the red cross icon. Whether you’ve created a new widget, edited it or deleted it, always press Update at the end.

Child pages will inherit inserted items from parent pages unless they are replaced by a new one on that specific page. If a widget is appearing on a sub page and you don’t want it to, try adding in an empty widget into that region.

Id numbers can also be found 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.

Adding a featured image

Whilst editing the page:

  1. Click on Set featured image link in the Featured image box – over on the right (under the Tags box)
  2. Select a featured image from the Media library or upload a new image. Click on the blue Set featured image button
  3. Click on the blue Publish/Update button to save your changes.

Other usefull stuff

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

Shortcodes

We use these to insert posts on the Blog page and when pdfs are added into the main content area. The format has the required widget parameters on one line and enclosed in square brackets (which I can’t show here without WordPress executing the shortcode!)…

shortcode_list cat=6 style=blog type=excerpts order=DESC pic_size=medium format=l show_posts=5 paginate=true

You probably will not need to change these in the normal usage of the site.

Working with images

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 maximum intended use.

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 then some of these sizes won’t be available. The available values are: thumbnail, medium, large and full. These sizes are pre-defined to fit the various column sizes in the site.

Picture sizes on this site

Wingfinger to confirm

Thumbnail – 100px square – for tiny pics.
Medium – Max width or height of 300px – for images inserted on the right of main column.
Large – 806x491px
Large – 1200x1200px – for slideshow images
Full – The original size you uploaded it as.

Adding images to pages and posts

On this site we can add an image as:

  • a featured image which appears at the top of the page/post and also when the post/page appears elsewhere
  • an image in the main column

See Working with posts for instructions on how to insert these.

Site admin - Introduction

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 245 0469 – 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 a page, directly under the Wingfinger Graphics link. Whenever you are logged in, the black 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 – Wingfinger will advise when updates are required.

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 regions that can be used to hold extra content, eg: region right.
  • 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.

Posts, Pages and Snippets

Almost everything you do in the Admin area will be in the Posts, Pages and Snippets sections which are accessed from the left hand menu in the dashboard. When you go in to edit any of these, you will find the same looking editing area – a window with a field for the title, a field for the text content with a toolbar and below a Wingfinger widgets box for adding extra content in the regions.

  • Pages are static, contain permanent content and can be added to the navigation menu. Pages do not use tags or categories. Pages have regions to display extra content.
  • Posts are content entries (like blogs) and are sorted by categories (eg factsheet). They might appear on their own, or in a region as extra content.
  • Snippets are short chunks of text, images or links that are used mostly as extra content in the page/post regions. The content of a parallax panel is creted in a snippet.
  • Site notes are used for the help pages found in the the black Admin bar across the top of page. These Help pages are ‘Private’ and can only be viewed by people logged in as Editor or Administrator.

Working with text

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 safe email link

‘Please email to find out more.’

  1. Select the email text (office@stampoutpoverty.org).
  2. Replace the email text with <script type="text/javascript"> generate_address( "office", "stampoutpoverty.org" ) </script>.
    Note: how the first bit of email before @ is first item within the brackets and the second bit of email after @ is second item

To do internal links

To do an internal link to the Donate Cash Today page, you would use '/take-action/donate/donate-cash-today' as the link.

‘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

To do a link to download the The-Economic-Consequences-of-the-EU-Proposal-for-a-Financial-Transaction-Tax-3.pdf (??kb) file, you would use 'The-Economic-Consequences-of-the-EU-Proposal-for-a-Financial-Transaction-Tax-3.pdf' as the link.

‘Please download the PDF 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. Enter the required link url
  5. Click add link

Using the editing panel

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.