VRG Website Tutorial

How does the website work?

The VRG website at https://www.valleyrenewables.co.uk/ is based on a WordPress content management system (CMS) which enables admin users to update the content via a secure login.

WordPress acts as a go-between, an application on the server which communicates between the viewer on a browser, and the database which holds the content, and also image files and other resources held on the web server. You do not need a degree in computing to use WordPress, it is designed for ordinary users with just a little training and knowledge. WordPress has a content editor, sometimes referred to as “Gutenberg” which uses blocks to format text and images.

The raw content (words and pictures) is given a look and feel, and responsive functionality by a template, which in WordPress terminology is called a Theme. The VRG website uses the Flatsome theme which is a premium theme with its own page editor, UX Builder, which makes building complex pages much easier. For complex page layouts it is usually easier to use UX Builder, but for short posts, the default WordPress editor is good.

WordPress is extendable with the use of plugins. Plugins are used on the VRG website to increase security and enhance functionality.

The content on the VRG website is split into pages for static content which does not need to change much, and posts, which are time-sensitive, more like news articles, relevant only for a short time. Pages can have a hierarchy, with sub pages etc. Posts can have taxonomies such as Categories and Tabs. The VRG website currently uses Post Categories to filter the posts into Updates, Events and Newsletters. The VRG website has been set up to list posts within their categories ordered by the publish date, most recent first. The exception is the Events category, which uses an order field to list by event date.

Logging in to WordPress

the easiest way to log in to WordPress is by adding wp-admin at the end of your website’s address like this:

https://www.valleyrenewables.co.uk/wp-admin/

URL will direct you to the login screen where you will be asked to enter the administrator’s username and password. If you have forgotten your password, click on the Lost your password? link or contact Derek.

 

Logging into WordPress Dashboard

After logging in, you will see the administrator dashboard. It’s built to give you an overview of your entire website and contains 3 main sections:

WordPress Dashboard

  1. A toolbar at the top of the page. It contains links to the most commonly used administrative functions and resources. For example, if you hover over your website’s name, you will get a link to the public view of your site. It also displays simple notifications like updates and new comments count.
  2. The main navigation menu on the left-hand side. It contains links to all administrative screens of WordPress. If you hover over a menu item, a submenu with additional items will be displayed.
  3. The main work area.

WordPress editor basics

The built in WordPress block editor is an easy way of adding content to the website and for undemanding applications such as posts it is ideal.

UX Builder basics

UX Builder is a page builder which comes with the Flatsome theme. It offers an easy to use and quite intuitive page editing experience, enabling the construction of complex page layouts. It is largely incompatible with the WordPress editor, so you will have to choose one or the other on a page by page basis.

Create a new post

To create a new WordPress post open the Add New section under Posts or choose New -> Post option from the top toolbar.

You will be presented with an editing screen with an array of posting features. The first thing you should do is enter a title for your post.

Secondly, enter the actual content of your post in the field below. If you want to format your text, use the toolbar options.

It’s similar to the one you can find in MS Word or any other popular text editor.

At the right-hand side of the screen, you can see the so-called meta-boxes. Each box has a particular function.

  • Publish. Here you can change the status and visibility of your post, schedule it. By clicking the Publish button your post will go live. If you decide to delete the post, press the Move to Trash button.
  • Categories. On this box, you can assign your post to a specific category. Please select Updates, Events or Newsletters to categorise your post, and any other categories for context archives. You can even create a new one by pressing the + Add New Category button.
  • Tags box allows to quickly add new tags. These are another way to categorise and filter posts if you wish.
  • Featured Image. Here you can assign a featured image to a post. It will be visible at the very top of the post and appear on the post listings.
  • Order (Post Attributes) This is an extra field only for posts categorised as events to establish a correct chronology. This takes a numerical value of the date of the event, as yyyymmdd, for instance 27th of August 2021 would have the order of 20210827

Add and edit posts with the WordPress editor

For this example, I have added the August 2021 newsletter to the website. First of all I am going to take a cropped screenshot of the banner for the featured image. If you have an alternative image you could use that instead.

I am using Snip & Sketch, which is available for Windows 10, to capture a portion of the screen. There is a similar app on macs Command + Shift + 4

 

Then we can create the post, add the pdf and the screenshot image and check that it is listed.

Add and edit pages with UX Builder

Add Directors and Staff to the About page (PDF)

Create a new Project page from a Flatsome UX Builder template (PDF)

Add a page to the navigation menu

When you publish a new page, it will not automatically appear in the navigation menu, you will have to add this manually.

There are 2 options, but the procedure is similar for both:

  • Customise
    Customise is accessible from the top toolbar when you are viewing the public website, or under Appearance in the Dashboard. It has many options for modifying the website, including the Menu.
  • Appearance / Menu
    From the Dashboard, use the Menu tool in the Appearance tab.

External Resources

WordPress

Flatsome / UX Builder

Advanced Google Maps Plugin

The community map is achieved with a plugin.

Gravity Forms Plugin

The contact and application forms are achieved with a plugin.