WordPress visual editor – Adding content to your site

November 15, 2012 3:46 pm

As mentioned a couple of weeks ago, I’m putting together a series of blogs with short, snappy tutorials on how to work the basics in WordPress (for client use). This weeks tutorial is based on WordPress’ visual editor, and the functions you can use to make you’re posts or pages look swell.

When creating a new Page or Post, the first thing to do is enter in your title in the top entry field where it says Enter title here. You’ll notice after clicking away from this, a link will appear under the box titled “permalink”. Permalinks are the permanent URL’s to your individual Posts, Pages, Categories etc – you can use this link on other pages to drive traffic to the content, or even promote/share it on social networking sites.

Next up is the type of editing we’d like to complete. If you’re not fully familiar with the ways of web coding, I’d strongly recommend switching your editor to “visual mode”. You can find this in the top right tab, alongside “HTML”. If you are skilled enough to know some basic HTML, feel free to experiment in this tab too, you’ll be able to add all the elements usually found in coding.

Below are a few of the tools you will find yourself using in the editor :

  • Upload/Insert – Located above the main toolbar, use this to upload and insert media such as images and video
  • Bold – Click this button to enable bold text styling
  •  Italic – Click this button to enable italic text styling
  • Strike-through – Highlight a selection of text and click this button to strike through the text
  • Unordered List – Click this to enable bullet pointed listings
  • Ordered List – Click this to enable number listings
  • Style – The style dropdown will allow you select pre-built styles included with your design. These can include headings or paragraph varieties.
  • Underline – Click this button to enable underline text styling
  • Paste as plain text – Click this button to paste your clipboard as plain text i.e. no styling copied over from Word, Skype etc.
  • Paste from Word – Click this button to “clean up” copied text from Microsoft Word – formatting can be muddled if this is not applied
  • Remove formatting – Click this to remove all formatting on the text selected
  • Undo and Redo – Does what it says on the tin, use these to go backwards or forwards with actions.

Adding an image

I always get asked how to add images to posts and pages, so here’s a brief overview of how to go about doing so. To insert an image into your Page/Post, click the Upload/Insert button above your toolbar and then simply drag the desired images from your computer, into the area marked Drop files here. They will be automatically uploaded once you release – the uploader can handle multiple files. Alternatively, you can click “select files” and locate the files in the browsing window.

Once your image is uploaded, you’ll be presented with a settings panel – this includes attributes such as Title and URL. At this point you can also add Alternate Text, a Caption and a Description.
• Title – is displayed as a tooltip when the mouse cursor hovers over the image in the browser
• Alternate Text – This is the text that appears if images aren’t found on your system or the user is browsing with text only settings. It’s always important to include this, not only for those reasons above, but also to ensure your site validates in this area.
• Caption – This is often displayed under the image – experiment with your theme to see how it is being utilised.
• Description – The description does not show by default, though some themes will display this on sliders or galleries.

Thanks again for reading my post, I hope it helps you on your way to getting familiar with the interface. If you have any questions, or would like any hints or tips, feel free to drop me a line on james@mmadigital.co.uk.

Categorised in: Blog