Editing and styling pages and posts

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.