Newport Area Environment Group Website
The NAEG Website was migrated to a new "mobile friendly" implementation in July 2020. This page is for group members who are maintaining the site. It contains information about the site and instructions on how to create content.
- Logging in to the WordPress Dashboard
- Pages and Posts
- Locating and selecting a post (or page)
- Adding a new post (or page)
- Editing post or page content
- Adding a picture to your post
- Continue Reading (More) link
- Inserting a link to a web page
- Adding other media
- Controlling which posts are shown
- How to change the order in which posts are displayed.
- Deleting an old post that is no longer wanted
- LIST OF CATEGORIES (extracted from database
This website https://naeg.org.uk was built using a Content Management System (CMS) called "WordPress". The content is kept in a database and generated on demand. Wordpress is a very popular tool for building websites, indeed approximately one third of the world's websites are built using it, so skill acquired with wordpress is in demand and highly reusable!
The site was designed to retain the main features of the previous Joomla based site, in particular that new content should be added as Posts (previously called Articles). Indexes to these posts are generated automatically. When a Post is created it must be given one or more categories for example "News" or "Built Environment". The full list of categories is here.
One benefit of using Wordpress is that there is a wealth of documentation and tutorials available. Start reading!
https://wordpress.org/support/article/writing-posts/ How to write a Post
https://wordpress.org/support/article/wordpress-editor/ How to use the new "block" Wordpress Editor
https://wordpress.org/support/article/wordpress-lessons/ Much information, including lessons for beginners
Wordpress Block Editor - keyboard shortcuts The surrounding page is "FAQs" about the editor - useful.
Logging in to the WordPress Dashboard
Login here: http://naeg.org.uk/wp-login.php or you can click the small login link at the bottom of any page. This takes you to the Dashboard from where you can change the site content. You will need an ID and password; please ask if needed.
Password: It is vital that you keep your password strong and secure. Unfortunately hackers are hard at work trying to crack websites and the fact wordpress is so prevalent means there are attacks. Another of my sites was hacked a year ago, due to a user with a weak password, and content damaged. So please set a strong password and keep it secure.
A section of the dashboard is shown in the image below, which lists posts.
Pages and Posts
WordPress has two main types of content: Pages and Posts. This site is set up so most content should be entered as posts. These are shown automatically in the appropriate pages. There are also some pages which can be edited, such as the Home page or About us page. When logged in, select Posts or Posts from the Dashboard. You will see a list.
Locating and selecting a post (or page)To locate a post or page you must find it in the list. You can sort the list, or filter it to show only a specified category of post. There is also a good search facility. Once you have found the one you want, hover your cursor over the title and click view or edit. You can also double click the title.
More details on posts and pages:
Adding a new post (or page)
To add a new post, go to the dashboard, select Posts and then click Add New. Assign a title, and then enter the content, as described under Editing page or post content The process is the same for a page. You must set one or more categories to ensure the post will be indexed correctly. Note that you cannot lose anything! The system keeps up to 5 recent versions (revisions) of a page. An old copy can be restored if you make a mistake.
Editing page or post content.
Once you are editing the page or post, you will be using the WordPress editor. Editing content is similar in some respects to working with a word processor like Microsoft Word. There are less styles and options, but the basics are all there including bold, italic and underlined text and headings. There are buttons to align selected text or make it bold or italic.
The site has been set up using the relatively new Wordpress Block Editor (codename is Gutenberg) where your new post will be a succession of blocks. Blocks make it very easy for a new user to create content as some of the complexities of, say, adding a picture or a link are eased. Eeach chunk of information goes it its own block. So if you want a paragraph of text start a paragraph block, and type it in. If you hit ENTER when typing you will be assumed to have ended the paragraph, and a new one is started for you.
There is plenty of help around to explain how the block editor works. See: https://wordpress.org/support/article/wordpress-editor/ You need to read this, especially how to add a new block, and the description of block types, to start.
If you are more familiar with the old "classic" editor, just create a "classic" block and you will be able to edit as before.
Important: The appearance of the site is controlled by a "style" or "theme" set by the administrator. This controls the font, font size and general look and feel of the site. It is recommended that you don't try to change fonts etc. A common style across the site is desirable. (If you know HTML this is possible, but breaches the site standards.)
Pasting from Microsoft Office: Here's an area where the new editor is an improvement. It makes a real attempt to strip out the horrible formatting produced by Microsoft Word, and to put only the content you need into the new post. In a classic block, make sure you use "Paste as plain text".
Views: When editing there are two views, Visual and Code. The code view is useful if you understand the underlying HTML, but normally the visual view is the one to use.
Line spacing: The default when you hit enter is a new block. Hold control, then hit enter to get a new line only, within the same block.
Headings: Add a "Heading" block to set a new heading. Choose the size by setting the header type: h1, h2 etc.
Permalinks: Note that each page or post has a "permalink" which can be seen when editing, and which is assigned based on the title when the page or post is created. For example the Contact page has the permalink https://naeg.org.uk/contact/ It is possible to edit the permalinks, but unless you have a good reason it is recommended that you don't change them. To direct people from one page to another, or to refer to a page, create a link using this "permalink".
Adding a picture to your post
There are several different ways to add a picture to your post. It is recommended that you first process your image to an appropriate size - see below - and then upload it. Give it a caption in the media library if required. The media library is organised by date, and images or other media can be reused if required. More information about the media library is here: https://wordpress.org/support/article/media-library-screen/
Uploading an image (or other media such as a PDF file): Click Media in the dashboard; click Add new and then either browse for the file on your computer, or you can drop it into the area shown. If you have chosen a large image (see below) you will spend ages waiting for the upload to complete.
If possible, edit your picture before uploading it: Modern cameras produce pictures as files that are far larger than needed for a website.
Recommendations for handling images:
- Please process the images before upload. Use PhotoShop, Paint.net (free) or any other image editor.
- Before upload, resize the images so the width is 625 pixels maximum – the largest width used by the theme to display images.
- Before upload, you can also crop / adjust levels / sharpen and do all other improvements you want to do before upload. There are image cropping and other editing tools within wordpress, but it is more efficient to do it first.
- This means you are uploading smaller images, and the uploads will run up to 10 times faster.
- Rename the image before upload to a name that will make it easy to know how the image is to be used. The name isn’t shown on the site, but if you do this it will make it easier to maintain the media, and know what belongs where.
- Always save photographs as jpegs (or jpg) rather than "Portable Network Graphics" (PNG) files. However, for clip-art and pictures that have relatively large areas of the same colour PNG can be better. PNG is a lossless format, an photograph which might be 100k when compressed as a jpeg is more than 10 times larger if saved as a PNG file.
- The result of optimising images is that they download (and upload) faster and the site runs better. Not to mention that we won’t run out of storage so quickly!
If you upload a large image then several versions of each picture are created, each of a different size. These sizes include widths of 150, 300 and 624 pixels. Try to avoid so many copies and also large images being saved by processing first as above.
Adding your image to the post: Having uploaded the picture you want, return to editing the page or post. There are several ways to add media, but a simple way is to create a new image block, and then browse for the image. If you assigned a caption when you uploaded the image, it will show, but you can add or change the caption as required. There are other ways to add images - please read the documentation. I recommend that you add a caption and description at the time you upload the image, for one thing it will help keep track of images. Also, it is good to put something in the Alt Text area; this information is used for visitors who can't see images in their browsers (there are special purpose browsers for people with visual impairment, for example.) It helps our search engine ranking to complete the Alt text field.
More information about adding images and using the editor is here: https://wordpress.org/support/article/wordpress-editor/
Publish your post: When complete, then click Publish. Remember that you may want to preview it first. You can also save it as a draft and return to complete it later. Don't be afraid to try something different - you can always delete your post and start again.
Important: The NAEG site is designed to be built with almost all content entered as "posts". It is possible, however, to create a page when appropriate. New pages are not automatically placed in the menu for this site - contact the site administrator if the menu needs to be changed. Once published a post can be linked from another page or indeed a completely different website. Use the permalink for this purpose.
Continue Reading (More) link:
For very long posts please add a “More Block”. This will truncate the display of the post at the point you insert the More Block, but provide a "More" link to the full post. In a classic block you can just click the More icon under Layout.
Inserting a link to a web page
Here's where the block editor makes things easy. First, locate the page you want to link to and copy the address (from the address bar). The easist way is to copy the URL to the clipboard. Then go back to editing your post. Enter the text for the link, and highlight it. Click the link button just above the current block (see picture). Paste the URL into the box and and hit enter. If the link is outside the site, you should also switch on Open in new tab. This is a common convention, and shows the user they have gone to a different site. They can quickly return to the page they were reading, by closing the new tab or selecitng the previous one.
More on writing posts: There’s much more information here: https://codex.wordpress.org/Writing_Posts Don't be afraid to try something different - you can always delete your post and start again.
Adding other media:
Adding documents: First, upload the document to the media library. (Go to Media / Add new). The best format to use is PDF (Portable Document Facility). Then add / publish a new post, give it the appropriate category, add a few words and insert a link to the document. Or just add an additional link on an existing page - the minutes are all under About NAEG / Minutes
Showing a video: This is very easy. For example, locate a video (on YouTube or elsewhere) that you want to show in a post and copy the URL. Then create or edit the post where you want it to show, and add a video block. Paste in the URL. The default works fine, but there are options you can set - see https://wordpress.org/support/article/video-block/
We have not touched upon many other wordpress facilities here, but start reading the documentation above.
Controlling which posts are shown
The NAEG website uses categories to show where a post is shown. Please note the following:
The most recent five posts with category News are dhown on the home page, moswt recent first.
The sub-groups each have their own category. Posts for a sub-group should be given that category, and they will then appear on the index to the work of a subgroup, most recent first.
How to change the order in which posts are displayed
This can be done by editing the publish date in the Document properties (On the right). Posts are shown most recent first. So to move a post the top, just give it the most recent Publish date. See the example. Edit the post, and in the Publish box just click the light blue Publish date. Then set an appropriate date in the popup calendar. You may first need to make a note of the publish dates of the other posts with a similar date.
Note that this Publish box is also where you can change the Visibility of a post or page and also see older versions of Posts or pages by Browsing through the revisions.
You can also choose a different post format here, but until you are more familiar with Wordpress, stick to Standard format.
Deleting an old post that is no longer wanted
Just select Posts from the Dashboard, and simply hover over the title and click bin. You can also move the item to the bin when editing it. Remember, until you empty the bin, items placed there will still be available for you to move back if you make a mistake.
That's probably enough for now!
(Last updated 1st August 2020)