Website Tips: WordPress Instructions
Do not be put off by the length of this page. There are lots of pictures, and not all the instructions apply in every case.
If your WordPress website was created by Applegreen, this page is a refresher for the instructions you have already received. There is a WordPress section in our Terms & Conditons.
Where to log in
If you don't have a link to your login page, you can retrieve it like this: navigate to your website's domain and add the following:
and press Enter (don't forget the forward-slash). So if your domain is www.yourdomain.co.uk, your login page is at www.yourdomain.co.uk/wp-admin.
This takes you to a page where you can enter your username and password. We recommend that you keep the website itself and the admin page open at the same time in different tabs of your browser.
Logging in through the Admin takes you to the Dashboard from where you can access your website's editable areas.
Your dashboard will look a little like this one though the colours may vary. The important bits are the links down the left-hand side: your dashboard will contain some or all of the ones listed here. The most used are Posts, Media and Pages.
We recommend opening two tabs in your browser at once: one for the website and the other for the Dashboard. That way you can swap between the two and view the results of your efforts.
Each time you save a change in the Dashboard, the results will only show on the website when you have refreshed the page.
Click the browser refresh button symbolised by a circular arrow, with our own red arrow indicating it on two different browsers by the red arrows.
Editing in WordPress
The editable areas of a WordPress website come in three main categories: Pages, Posts and Widgets. On the Dashboard, Pages and Posts are listed in the left-hand navigation, while Widgets are found under Appearance.
If you have a hand-coded website with a WordPress blog/news/events page, the Dashboard gives you access only to that page. Then you can edit Posts, and also Widgets if you have a sidebar.
If your whole website is in WordPress, you have access to all of it and you can edit Pages and Posts, and also Widgets if you have a sidebar.
Posts: accessing the blog/news/events page
The blog-style page contains posts stacked on top of one another, usually in reverse date order.
To add a new Post, hover over Posts and click Add New. Give your Post a title and write the body text in the editing box below.
Pages: accessing a non-blog page
This is only for websites that are designed entirely in WordPress. All your non-blog spaces are called Pages. Generally you will be editing the content of pages rather than adding more of them.
In the Dashboard, hover over the word Pages in the left-hand margin, then choose All Pages to bring up a list of existing pages. Hover over the one you want and some options will appear: click Edit.
Writing and editing the content of Posts and Pages
The Post or Page title goes in the title box. In the case of Pages, the title is sometimes also the navigation label (check this with us) so may need to be kept very short.
The larger editing box can be used in two different modes: Visual and Text. In the image below of the Post-editing mode, the box is set to Visual.
In Visual mode the text will appear more or less as it does on the website itself. In Text mode, a limited amount of HTML code is also visible. This is useful for code writers who can fine-tune the appearance of text, but not essential for everyone to know.
One difference between the two modes appears when you use the return key to create a line break: in Visual mode a single tap of the return key creates a double-spaced line. In Text mode the return key creates only a single-spaced line.
For most purposes it's easier to write in Visual mode. However, when copying from an existing word-processed document it is best to use Text mode, as this strips the text of the formatting that is copied across from word-processed text. It is easier to add it back later than have some nasty surprises.
Symbols above the box give some limited word-processing choices such as bold, italic and alignment. For more symbols, click the square Toolbar Toggle icon at the end of the first line. All the icons are explained when the cursor is hovered over them.
When you are satisfied with your work, click the button on the right that says either Publish or Update. Return to the website and refresh: your changes will appear.
In the Dashboard editing mode, there are options to control the timing of publication or save a page as draft for publication later.
Creating a new WordPress page
Creating a page is simple: go to Pages > Add New, and fill in the title and content. Choose under Parent whether your want your page to appear as a main item in the top navigation (No Parent) or as a drop-down from another page (choose the page).
What's not always so simple is making sure the page actually appears where you have put it using these steps. Refresh the website, and if your new page does not appear automatically, it is because your website is operating a custom menu and the new page has to be added manually.
Go to Appearance > Menus: you will see your navigation listed under the heading Menu Structure,on the right. The new page you just created will appear in the box on the left under Pages: Most Recent. Tick the box for that page and click the Add To Menu button. Scroll to the bottom of the Menu Structure and there is your new page. Now drag and drop it to your chosen position in the structure, indenting it as necessary to drop down from another page.
The custom menu system allows you to create pages that do not appear at all on the main navigation, for instance, if you want it to be linked to only from inside another page. Create the page and copy its permalink to your clipboard. The navigate to the page from which you want to link it, and highlight the text to be linked from (anchor text), click the Link button at the top of your editor and add the permalink into the URL box.
Deleting a WordPress page is almost too easy: under the page list in Pages, hover over the page you want to delete to bring up the options, and click Trash. That's it! You are not asked to confirm the deletion, which is a little scary. Don't worry if you deleted a page by mistake: just click on Trash, at the top of the Pages list, and restore the deleted page.
It is better to restore a page that was deleted by mistake than to create a new one with the same name, because the permalink (URL) will be different and this can cause problems with links.
The custom menu system also allows you to change the navigational label, which by default is the same as the page title (can be quite long). Under Page Structure, click on the little triangle next to Page on that page item and change the name in the Navigation Label box..
Pictures, documents and links in Posts and Pages
Only images with the extensions .jpg, .png and .gif will display in a website. Other extensions (.tiff, .psd or other) will need converting. It is also advisable to reduce the overall size of images so that they are not more than 1000px wide: there is plenty of software available to help with this. Overlarge images are not needed and will slow the loading of your pages.
The picture you want to use must first be uploaded to WordPress. Above the content box click the Add Media button: you will be given a choice between using an image previously uploaded to the media library, or uploading a new image to use (the image must be on your computer for the WordPress Upload system to be able to find it).
Important: after uploading, click on Edit for additional options. Here you can add a caption if you would like one to appear under the picture. But most importantly you can add "alt text", the alternate text that appears if the picture doesn't load, and that enables screen readers to inform blind users what the picture is about. Make it short and descriptive.
Choose the picture's alignment and on its final size in the page. In the "Link to" box, choose Media File if you would like the inserted image to enlarge to its full size. Then click Insert into Page and the picture will appear where you put your cursor in the box. In Visual mode the picture itself will appear, but in Text mode it will show only as HTML code. Click the Update button and refresh the webpage to see the result.
If you want to check whether or not a particular image was uploaded previously, click Media in the Dashboard's left-hand navigation and all the pictures will appear. You can add and delete from there, and create a rudimentary gallery with several images (better galleries are available as Plugins, see below).
Making a pdf document available for download
The document must first be uploaded to the Media library, in the same way as pictures.
Then, in the editing mode of the Page or Post (Visual or Text), highlight the text you want visitors to click on to open the document. then choose the Add Media button above the editing box. In the Media Library, highlight the document you want to link to. Information boxes will appear on the right: the Title box shows the name of the file which will appear on your page as link. Careful: the Title will replace the text you have highlighted, so you must change it if you want to control what the highlighted text says. Click the Insert into Page button, and then Update in the page edit mode.
Creating a link
Linking to another page or website is simple. In the Post or Page's editing mode, highlight the words you want to use as link text (anchor text), and click on Insert/Edit Link icon above the editing box. Copy the whole url of the page or website to be linked to in the space provided (careful that http:// does not appear twice). Click the Add Link button and the link text will be underlined.
More features of WordPress
Tags and categories
Posts have an extra feature, compared with Pages, shown on the right of the editing box: the option to add tags and categories to your Post. Tags and Categories can also be added to Products in e-commerce websites.
Part of their purpose is to help Google to understand your site structure better, if you have a large number of Posts or of Products. They also help organise the Posts or Products because they can be searched by Category and by Tag.
The difference between them is that categories are hierarchical (you can have sub-categories to any level you want) but tags are not. According to WordPress SEO specialists Yoast: “Consider the categories to be the table of contents for your site, while the tags are the index.” Don't have too many of either, and make sure you use them several times each so they are meaningful.
If you use your blog page only for news or events, which are time-limited and get removed when they are past, Tags or Categories are probably of no use to you. But if you are writing a regular blog about your field of interest and want to archive all your posts so readers can continue to access them, make full use of this very helpful feature.
They usually appear in the sidebar if you have one, and they usually repeat on every page (there are exceptions to both these rules).
Access them from the Dashboard by hovering on Appearance and choosing Widgets. Add or remove Widgets by dragging and dropping between the left and right areas. Please exercise caution here: some websites have specialised widgets hand-coded for them, and the code will be lost if you drag them to the left. Widgets can be used for displaying Post or Product Categories, Post Archives, a calendar, a word cloud, a map, and more.
These add extra features to a WordPress website, such as an image slider or gallery, analytics counter, the ability to change the order of posts, and lots more. The Plugins are accessed from the left-hand navigation list of the Dashboard, under Appearance
Ecommerce: your online shop
WooCommerce provide one of the most widely used plugins for ecommerce. WooCommerce creates an online shop on your website where you can add products, set a product image and price, set postage charges and integrate with Paypal. We have installed WooCommerce on several websites, customised it and taught website owners how to use it.
Applegreen provides tailored instructions for each of its designs. WordPress is so versatile, and people's needs so varied, that it is not possible to give general instructions that cover all the possibilities.