Reference Guide - How to Create a Post for Website Publication · Page | 2 Reference Guide - How to...

Page | 1 Reference Guide - How to Create a Post for Website Publication (AC Jan 2018) © Sandbach U3A 2018

Reference Guide - How to Create a Post for Website Publication

Contents:

Part 1 Section – Open a New “Add New Post” Editor Window 2

2 – Give Your Post a Title 3

3 – Select a Category and Page Template 4

4 – Set the Editor to Visual Mode 5

5 – Enter Your Text Etc. 6

6 – Use the Toolbar Features 7

7 – Save the Draft & Preview Your Work 8

8 – Publish 9

Part 2 09 – Add Media (Add Media Button) 10

10 – The Add Media Window 11

11 – Select Image, Add Caption & Insert Image 12

12 – Adjust the Image in the Body Copy Box 13

13 – Create a Photo Gallery 14

14 – Edit Photo Gallery 15

15 – Featured Image 16

16 – Embed a PDF File 17

17 – Create a Hyperlink (Find URL) 18

18 – Insert a Hyperlink 19

19 – Edit a Hyperlink 20

20 – The Read-More Tag 21

Annex A – The Editor Toolbar 22


Add New Post

First click on the

“Posts” tab. Then

the “Add New” tab

just below it.

1 – Open a New “Add New Post” Editor

Window

Go to http://sandbachu3a.org.uk/wp-admin/,

you will be asked to provide your username and

password to Log in. This will take you to the

WordPress Dashboard.

Click the 'Posts' tab in the vertical black bar on

the left.

Click the 'Add New' sub-tab. This will open an

“Add New Post” – editor window


Title/Headline Box

The title of your post. You can

use any phrases, words,

characters or symbols.

2 – Give Your Post a Title

Choose a descriptive title and enter it in the title

box. It’s a good idea to include a date (e.g.

month and year) in the title to help prevent

duplication with other post titles in the system

as this can cause problems.


Category Selector

The category determines where you post will

appear on the site. If yours relates to your

group, select your group’s name (please ask

for a category to be created if one is not

shown). If you are posting several photos you

can also tick the appropriate box under “Photo

Galleries”.

Template Selector

You can choose either the Default or a Full-Page

Width Template.

3 – Select a Category and Page Template

Before you publish your post, you must select a

category.

Also, you have the choice of the default (narrow)

page width or the full-page width.


Visual/Text Selection Tabs

If you do not understand HTML code, make sure

the “Visual” tab is selected.

If you click the cross-symbol tab below “Text”

the columns each side of the page disappear

providing a more pleasant view to work with.

Just click it again to bring them back.

4 – Set the Editor to Visual Mode

The easiest way to use the editor is in “Visual

Mode” where the appearance in the editor is

similar to how it will appear when the post is

published. This is sometimes referred to as

WYSIWYG or “what you see is what you get”.

Check that the “Visual” tab is selected.


Body Copy Box

The large blank space where you enter your writing, images,

links to documents, and any information you want to display in

your post.

Arrange the text and any other content to appear as you would

like it to appear in your post. Try and use small blocks of text to

make it easier to read.

You can copy and paste into the box from a Microsoft Word

document, but you must use the keyboard [CTRL] + “v” method

of pasting.

5 – Enter Your Text Etc.

Text is entered into the body copy box.


Toolbar

Used to format your text and insert features. This

can be displayed as a single line of icons or with the

extended options as shown here. (See Annex A

below)

6 – Use the Toolbar Features


Save Draft Button

You can save your draft at any time and come

back to it later. You will find it again by

clicking on the Posts tab in the black column

on the left.

Preview Button

You can see a preview of your post by clicking

the Preview button. This will appear in a new

tab on your browser.

7 – Save the Draft & Preview Your Work

You can save your work as a draft at any time. It

will remain stored in the memory and will not be

published until you want it to be.

The preview button lets you see how it will

appear on the website.


Publish Button

You can see a preview of your post by clicking

the Preview button. This will appear in a new

tab on your browser.

8 – Publish

Providing you have given your post a suitable

title, a category and you have entered the text,

you can now publish it for display on the

website.

However, you may wish to continue and include

images within the text, or even a photo gallery.

Also, it is a good idea to set a ‘featured’ image

that will display at the top of your post, and will

also appear in some lists of posts. Also, you may

wish to insert hyperlinks, or hyperlinked images

within the text, that will open documents or

other web pages. If so, read on…..


Add Media Button

Use this to access the media library, to upload

images and other forms of media, and inset them

into your post or create a photo gallery.

9 – Add Media (Add Media Button)

To add media (images etc.) to your post, position

the text cursor in the body copy box at the

position where you would like the media to

appear, then click the add media button. The

add media window will open.

‘Media’ generally refers to photographs but it

can include various documents like PDF files.

Microsoft Word or Excel files are also treated as

media but can only be accessed from a hyperlink

in your post (see later).


Upload Files Tab

Select Files

Either drag and drop them here from a File Explorer window, or click the “Select

Files” button and navigate to where they are stored on your hard drive.

The system will accept large files (up to 8GB), but ideally, photos should be between

500KB and 1000KB to optimise display speed and visual quality, without taking up

too much storage space on our website server.

10 – The Add Media Window

When the add-media window opens

it usually shows the media library

containing previously uploaded

media. To upload new files, you need

to switch to the Upload Files tab and

follow the instructions.


Select File

After uploading, your file will appear in the media library.

There may be other files shown so make sure the one you

require is selected – it will have a blue boarder as shown

here.

Caption

You can enter details in these boxes. The text appears as a

caption below the picture, but which box is used (Caption, Alt

Text or Description) depends on the way the picture is displayed.

Copy the same text into all three boxes to be sure (or

experiment).

Display Settings

If you are not sure which settings to choose,

leave them as the defaults. They can be re-

adjusted once the picture is inserted.

Insert into Post

When ready click the blue

button.

11 – Select Image, Add a

Caption & Insert Image

Your selected image will be

inserted in the body copy

box at the point where you

previously left the text

cursor.

Other forms of media and

photo galleries are covered

later in this guide.


Inserted Picture

You can drag the picture with the mouse to another

position, but it is probably easier to delete it and re-

insert it with the cursor in the new location.

Adjustment Options

When the picture is selected, this small toolbar appears with

options as follows (left to right):

Align Picture Left – The text will flow in a column to the right

of the image.

Align Picture Centre – The text will finish above the image at

the insertion point and continue below the picture (as

shown in this example).

Align Picture right – the text will flow in a column to the left

of the image.

None – The image will align to the left, but the text will finish

above at the insertion point and continue from the bottom

right corner of the picture.

Edit picture. This opens a window where you can edit

features such as size and caption.

Delete. Clicking the cross deletes the picture from the post

editor but it remains uploaded in the media library, so it can

be re-inserted here, or in another location or post.

12 – Adjust the Image

in the Body Copy Box

You can adjust the size,

location, text flow and

caption of an image by

selecting it in the body

copy box.


Select Images

Upload and select the files you

wish to include (a tick will

remain in the corner of each

selected image).

Select ‘Create Gallery’

Click on Create Gallery from

the list of options. The screen

title changes to “Create

Gallery”

Click the Blue Button

When you have selected all the

images required for your

gallery, click on the blue ‘Create

a New Gallery’ button (screen

bottom right). The Edit Gallery

window will open (see below).

13 – Create a Photo Gallery

The process for inserting a photo

gallery in your post begins in the

same way as inserting a single image

(steps 7 & 8 above). When you have

uploaded your photos, select ‘Create

Gallery’.


14 – Edit Photo Gallery

Important: You must change the

‘Link To’ setting from ‘Attachment

Page’ to ‘Media File’.

Click the blue ‘Insert Gallery’ button

when ready.

You can return to the Edit Gallery

window by selecting the gallery in the

Post Editor and choosing ‘Edit’.

Add More Images

Re-Arrange the Order

Drag the images to a new

position Change the Caption

Selecting an image provides

options for changing both the

thumbnail caption (‘Caption

Box’) and main display caption

(‘Alt Text’ box). They can be

different.

Link-To: Media File

It is important to change this

from ‘Attachment Page’ to

‘Media File’.

Columns & Size

Someone viewing the gallery

will see the images at full size

regardless of these settings. The

columns and size settings here

refer to way the gallery images

are displayed as a grid in the

post, so the size is best kept at

Thumbnail.


Set Featured Image

Clicking on ‘Set Featured Image’ opens the image

library where you can upload and/or select a suitable

image (see sections 10 & 11 above) but in this case, it

will be set it as the featured image.

15 – Featured Image

The featured image will appear at the

top of your post and in some post

listings. Featured images are not

essential, but they attract attention

and enhance the overall appearance

so should be used wherever possible.


16 – Embed a PDF File

A special viewer has been installed in our website which

enables PDF files to be embedded into a post and displayed

in a similar way to images.

To embed a PDF file, position the text cursor at the point

where you would like the PDF file to appear in your post.

Then follow operations 9, 10 and 11 above, just as if you

were inserting an image, but instead of an image, upload,

select and insert your PDF file.

In the Post Attributes section on the right-hand side of the

editor select the Full Width template.

Note: This feature is only available for PDF files, other

documents such as Word or Excel files can only be accessed

via download links (hyperlinks) – see below.

Automatically Inserted Code

Inserting a PDF file from the media library

automatically inserts a line of code similar to this in

your text, rather than an image. Preview or publish

the post to see how it works.

Set Page Template to Full Width

Choose the Full Width page template option in the

New Post Editor window.


17 – Create a Hyperlink (Find URL)

A hyperlink enables separate documents or website pages

to be accessed directly from your post by the reader simply

clicking either on your chosen text or an inserted image.

To create a hyperlink, you first need to obtain the URL

(Universal Resource Locator) for the item you wish to link

to. A URL is a unique address that locates everything on the

internet. It might look something like this:

https://mysite.com/wp-content/uploads/2015/01/Plan-

Summary.pdf for a document or like this for a web page:

http://sandbachu3a.org.uk/.

URL This is simply the address where the document is stored. The easiest way to copy

the URL is to position the mouse curser over the address and click the left mouse

button quickly, three times. Then, while the address is highlighted with the blue

background hold down the CTRL on your keyboard and press the “c” key once.

You can then ‘paste’ it into the hyperlink (see below)

(URL stands for: Universal Resource Locator)


18 – Insert a Hyperlink

• Firstly, copy the required URL as described at

section 17 above.

• Then Select the text or picture you wish to use as a

hyperlink.

• Then click on ‘Insert/Edit Link’ in the toolbar.

• Paste the URL into the text box

Insert/Edit Link

Selected Text or Image

Paste the URL

Paste the previously copied URL

into this box (Use keyboard CTRL +

“v” to paste)

Insert Hyperlink

Click the blue arrow to insert the

hyperlink.


19 – Edit a Hyperlink

If you need to amend or correct a hyperlink, position the

text cursor within the current hyperlink and then click on

‘Insert/Edit Link’ in the toolbar.

Click on the gearwheel (edit) icon and the ‘Insert/Edit Link

window’ opens. Here you can edit both the URL and the

text being used as the hyperlink.

You can also force the document to open in a new browser

tab, although this feature should only be used when the

reader would benefit from having the separate tab open, in

which case the reader should be warned that the document

“opens in a separate browser tab”.

Gearwheel (Edit) Icon

Insert/Edit Link Window

Click ‘Add Link’ at the bottom of the

window to implement the change.


20 – The Read-More Tag

Where post headings are listed on the website (archives

etc.), a large portion of the text from your post is

automatically displayed under each heading as a preview.

This takes up page space and in most instances, serves no

benefit.

The Read-More Tag is used in each post to limit the amount

of text previewed. The text can even be remove all

together, leaving just the titles and resulting in a more

compact display.

Insert ‘Read-More’ Tag Button Inserts a Read-More tag at the text

cursor position. Position it at the

beginning of your text to remove the

preview completely.

‘Read-More’ Separator

The Read More tag button causes

this separator to appear in the

editor text, but it is completely

hidden in the preview or published

view, so doesn’t affect the post

appearance or formatting.


Text Style

Select the text style

(headings etc.)

yle (headings etc.)

Style

Select the text style

(headings etc.)

Block Quotes

Changes a block of text into

a quotation style.

Bulleted and

Numbered Lists

Toggle on/off

Italic Text

Toggle on/off

Justify or Align

the Text

Left, central or

right.

Insert/Edit Hyperlink

(Sections 17 to 19)

Insert ‘Read More’ Tag

(Section 20)

Extended Toolbar

Displays the bottom

row of this toolbar

Toggle on/off

Turbo Sidebar

Not in use

Strikethrough

Toggle on off

yle (headings

etc.)

Style

Select the text

style

(headings

etc.)

Insert Line

Inserts a horizontal line

across the page. Note: To

delete the line switch the

editor from “Visual” to

“Text” and delete <hr />.

Paste as Plain Text

Use Ctrl + c to copy text from another app. (e.g. Word).

Ctrl + v will paste the formatted text into this editor.

Alternatively use this button (Toggle on/off)

to strip the formatting and paste plain text.

Remove Formatting

From selected text

Special Characters

Provides a range of

special characters.

Change Text Indent

Increase or reduce the

indentation.

Undo and Re-do

Undo and re-do the

previous edits.

Keyboard Shortcuts

Displays a list of shortcuts

Toggle on/off Options

Each button click switches the feature on or off for

the range of text currently selected.

Text Colour

Bold Text

Toggle on/off

Annex A – The Editor Toolbar

Extend toolbar to two rows using the

‘Extended Toolbar’ button.

Reference Guide - How to Create a Post for Website Publication · Page | 2 Reference Guide - How to...

Documents

Transcript of Reference Guide - How to Create a Post for Website Publication · Page | 2 Reference Guide - How to...