User Guide

This page is private. Information in this page are meant for the content editors and collaborators for this site.

Introduction

This manual is specifically made for Vikenfiber content editors and contributors as the content editing functionality is based on the module specifications. The guide may not cover everything about the WordPress CMS, there are many resources online to get information about the basics of WordPress, so in that sense, we expect that the users are well acquainted with a WordPress dashboard.

WordPress Guide

Please click here to get a more in depth guide on the basics of WordPress.

About WordPress 5.0 and up

However, along with the advent of WordPress version 5.0 update comes a major change to the content editor. WordPress new content editor named «Gutenberg» has replaced the classic editor, Gutenberg brought an entirely new look and functionalities. One of the core features are the addition of «blocks»:

«Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.»

This WordPress «blocks» is now used to develop the Vikenfiber modules based on the specifications. So this guide will cover the basics of Gutenberg blocks in relation with the Vikenfiber specific modules.

Dashboard

A content management system like WordPress always have a backend administration pages generally called a «Dashboard» from which you can control pretty much everything on your site. Of course this depends on the Role assigned to your user account (more on Roles later) for how much administrative tools you can access on the dashboard.

Admin Menu

This admin menu sidebar is always a starting point from where you can access all the management tools that the dashboard provides. We will describe each of the items we currently have on the admin menu.

We will define all the items in the dashboard sidebar:

  • Dashboard : This is the home page of the dashboard, it shows helpful or site-wide critical information like statuses, warnings, updates, quick links etc. Each user account can also change some aspects to his/her own dashboard.
  • Posts : This is a WordPress regular content, this content type has no particular use at this point, so better leave it as is.
  • News : This is a Vikenfiber specific content type for press releases, in here you can manage your news entry items. You can be able to display a listing of entries from this content by using some specific modules which we will introduce later.
  • Media : This is a WordPress regular content which is used to manage the uploaded media files like images, videos or documents.
  • Pages : This is a WordPress regular content type and is primarily used. Most of the content we have on the sites are Pages, because of the hierarchy capability in which you can assign a parent page to a page, so the page’ url (permalink) will correspond to the parent-child structure.
  • Comments : This is a WordPress regular content however this area is unused so far.
  • Appearance : This is a WordPress regular administration options item focusing on the look and navigation of the website, in here you can configure the Themes, Widgets and Menus.
  • Plugins : This is a WordPress regular administration options item focusing on managing the installed WordPress plugins.
  • Users : This is a WordPress regular administration options item focusing on managing the user accounts.
  • Tools : This is a WordPress regular administration options item giving you access to different types of tools like import and exports, as well as thumbnail regenerations.
  • Settings : This is a WordPress regular administration options item, this is the main Settings page for managing general configurations.
  • Theme Settings : This is a site theme specific administration options item, giving you additional options for adjusting the general look of the frontend.
  • SEO : This is the Yoast SEO plugin used for adding SEO functionalities to the site, in here you can configure this plugin to make it work with the site effectively.
  • Collapse menu : Just a button toggler to minimize the dashboard sidebar by showing only the icons.

Note that if you only have the role of an «editor» or «contributor» the dashboard menu items you can access will be limited.

Site Navigation

The site already has navigation bar locations which can be found on the header and footer. There are two menus which you can manage,  so in this section you will learn how to manage the menus from the admin dashboard.

Menu walkthrough:
  1. Go to the ‘Appearance’, this is where you find options for setting up the menus.
  2. Click the «Menus» item so you will be redirected to the Menus editing page.
  3. On this dropdown you can see the options of which menus you can edit.
  4. Click «Select» once you have a choice of which menu to edit from the dropdown.
  5. On this sidebar widget, shows all the possible links you can add to the menu. You can also use the «search» function to help you find an item.
  6. You can check or uncheck which links you want to add to the menu.
  7. Click this finally add the links items to the menu, these newly added items will be appended to the menu list.
  8. Now on this area is where you can reorder or set nesting relationships to each list item. (More on this later)
  9. And finally the save button to apply all your changes to the current menu you are working on.
Selecting the menu to edit

In this demonstration, we will show you how to choose a menu to edit, as an example we will try to access the ‘Main’ menu:

You can add item to the menu, simply choosing the content type (e.g. Pages, Posts, News Items, etc.) and then checking the checkbox of the preferred links and finally hitting the ‘Add to menu’ button.

To remove a link item to the menu, you just need to click the arrow button to expand the options of that menu item, the bottom part of the options box you can find the the ‘Remove’ button. See demonstration below for adding and removing a link item.

You can reorder the positioning of the link items as well to make them appear in the order you want. See demo below:

The ‘Main’ and ‘Top’ menus of the site supports 2 levels of menu You can also create sub menus by nesting a link item to another link item which will become its parent menu, this means by simply dragging the items a little bit to the right, as if indenting to create an outline structure. This screen dump below shows how to do that:

Custom links, are links that you can choose the url manually yourself. This is perfect for linking to any url or even leaving the link blank and turning into a sub menu by adding items under it, its a very useful link item.

In this demo, we will show you how to add a custom link; e.g. «https://www.google.com» which is an external link, we will also make it to target a new tab on the browser rather than redirecting our current page to that external link.

Content Editing

WordPress’ pages displays content which are created from the so called «Post», A Post in WordPress can have a type which can group a certain collection of content items; these can be regular «page», a regular «post», a «news», «products» or anything. While each of these Post types has the same content editing capability they can still vary in terms of some characteristics, taxonomies and attributes; for example only the «Products» and «Recipes» post types has the «Summary» content, while others not. All of the items under any post types have a url, this means the site’s pages are not just regular pages but they can also be from a custom Post type.

All of the post types are using the blocks system of WordPress. You can create pages using blocks, in Vikenfiber site case, you only have access to all specific modules made for Vikenfiber which were already been introduced in the previous section.

The Pages

This is the look of a Page overview in the dashboard, note that this also looks similar to other post types like Posts, and other specific content like News. In this dashboard page you can view and manage all your «page» items and doing operation actions like «add», «delete», «edit», «duplicate» and «quick edit», you can also use bulk editing by checking each items and applying a certain action.

Quick Editing

Quick editing your content items is possible, it is a convenient and fast way to quickly change a title, status, visibility and taxonomy (Categories) of a content item. Take a look at this animated screenshot:

Editing

Once you hit the “Edit” link on the content type overview you will then directed to the Edit page. We will define each of the important areas on this page marked with numbers:

  1. Add block : this is one of the many ways to add a block to the content.
  2. Undo/Redo : a nice feature to undo or redo each single activity you are doing while editing the content.
  3. Content Structure : shows some simple statistics about your content.
  4. Blocks Navigation : this is a convenient tool to see an overview of the blocks currently present on your content. You can also click on an item to navigate to the block it represents.
  5. Switch to Draft : this is a way to “unpublish” the content item.
  6. Preview : a quick link that will open a new tab showing the latest state of your content.
  7. Publish / Update : a button to publish or update the content item.
  8. Settings : clicking on this will make the Settings sidebar appear/disappear.
  9. SEO : This is the Yoast SEO options button to set up the SEO configuration of the current page or post.
  10. More tools and options : clicking on this will make additional options to adjust the viewing/editing experience.
  11. Title : this is where you edit the title, note that on frontend the title is not shown, the Herobanner and Heading module block is used for that role.
  12. Blocks Area : The blocks area is where you manage all the content blocks for the page. It will be discussed in detail in the following sections.
  13. Status / Visibility : A section in the settings sidebar where you can change the visibility, author and publish date of the content item.
  14. Permalink : A section in the settings sidebar where you can edit the page url of the content item.
  15. Categories : A section in the settings sidebar where you can manage the category settings to this page.
  16. Featured Image : A section in the settings sidebar
  17. Discussion : A section in the settings sidebar where you can turn comments on or off. Currently not in use.
  18. Page Attributes : A section in the settings sidebar where you can change a couple of attributes for the page, namely: Page Templates and Parent.
Create a Page Tutorial

Here is a video tutorial where you will learn how to:

  • Create a new page.
  • Set essential configurations to the page.
  • Build the page with blocks
  • Image cropping.
  • Yoast SEO.
  • Save as Draft, Updating and Publish.
  • Modifying the Published date.
Rich Text Editor

Oftentimes during the content building the use of the Rich Text Editor will be encountered. Rich Text Editor is very common user interface in a Content Management System when editing large chunk of texts and even some bits of media files thrown in.

There are many Blocks/Modules (apart from the actual «Richtext» Block) in this site that allows you to edit the content using the Rich Text Editor, so in this section we will tackle how to work it.

What is an RTE

Rich Text Editors, RTE or otherwise known as «Wysiwyg» (What You See Is What You Get) editor is a tool for controlling the appearance of your texts.

A toolbar is present providing iconed buttons for editing and formatting your text. You may use the rich text editor to include images, links, audio and video as well as text.

There may be a Visual and Text tab, The Visual is more of the WYSIWYG aspect of the editor in that it instantly gives you an idea of the format of the texts as you edit. The Text tab on the other hand is geared towards advanced users who knows their way around HTML coding.

Blocks (Modules)

Blocks (otherwise referred to as Modules) are an essential part of building a page, there are enough number of blocks with different features and characteristics enough to build a presentable page. These blocks are custom made and are specifically made for this website purposes only, in that note, we have removed the built-in blocks that came in with WordPress to minimize the number of unnecessary blocks and avoid inevitable confusions on the user’s part.

Each blocks have different options to fully customize their appearance and functionality. Each options will be accompanied with help texts to provide brief insights on what they are for.

To see all module demonstrations. Click here to go to the Modules overview page.

In this section we will go through each of the different blocks functionality, and use cases.

Accordion [demo]

Accordions are a group of collapsible items which the user can fold or unfold, each collapsible item consisted of a Heading and a Body. The Body holds the foldable content of it, the Heading holds the title and also acts as the button to toggle between fold or unfold Body.

Use case for an Accordion is to create interactivity with the user, but primarily used to shorten the total height of the page and decrease the amount of scrolling needed on the part of the user. It is also deployed when a content needs to be hidden at first and then let the user reveal it by unfolding the accordion item.

Banner [demo]

Banners are full width blocks wherein they occupy the entire width of the page. They need an image to act as the background and texts to convey an emphasized message to the user.

Banners are best used as an eye catching content anywhere on the page. They provide aesthetics at the same time some thought provoking message to the user.

Featured Posts contains Heading, Subheading and a list of Cards that acts as previews to the Pages or Posts they represent.

Each of the Card in a Featured Posts has an image, title, copy and a read more button, which are automatically created based on the source post or page they represent.

Featured Posts block is one of the most complex module in the selection, in that it has many options for the user to change how and which collection of pages or posts it needs to display.

The use case for Featured Posts is to deploy them in the page to act as teasers to a number of other existing News or Pages. In most cases, it is used like a «Related Topics» section of the page. This let’s the user to engage in clicking to another relevant content and ultimately letting them stay in the site more.

Featured Videos block contains Heading, Subheading and either a single or a couple of Video players.

Each Video players can have a title, and ofcourse the video itself. The video source currently supports only Vimeo and Youtube.

Featured Videos block is primarily used to show relevant video content (from Vimeo or Youtube) to the page it is deployed to.

Headline [demo]

Headline blocks consists of a title, description, image, as well as a call-to-action link. The texts in a Headline block are emphasized and are required, especially if its used as top most block. While the image and CTA are optional.

A Headline block should be used if another block needs a title but lacking the options for. But significantly at least one Headline is used as the top most block to serve as the main title of the page.

Herobanner [demo]

Herobanner block is aesthetically designed to be the first thing that the user should see when venturing into the home page of the site.

Herobanner is a glorified version of the Banner in which it features a slideshow. Each slide in a slideshow consisted of image (or video), overly emphasized title, short description and a call-to-action text link.

Like the Headline block, the Herobanner should be used as the top most block as it is naturally designed to embody the first thing that the user needs to see when visiting the site. Do not though that only one Herobanner is allowed to exist in a page.

Leadbanner [demo]

Leadbanners are full width blocks with image (or video), title and subtitle, call-to-action button, and an icon.

Leadbanner is commonly used as a teaser to attract the user to click it’s call-to-action button.

Logolist [demo]

Logolist can contain up to four items, each one composed of an image (strictly a transparent .png image file) and a small descriptive text.

This module is best used for featuring logo images with titles. More common use for it is to show some awards or credentials.

Richtext [demo]

The Richtext module by the name itself is composed of mainly a Rich Text Editor, but what sets it apart from other modules that have RTE’s is that it can also be configured to allow for a Sidebar widget.

Richtext module can also appear full width if you apply a color theme to it, changing the look and feel, like suddenly it can be an emphasized block of texts.

Primary use of a Richtext module is to be the main article content of the page. It has no content length limits so you could write as many texts content as much as you want.

Tiles [demo]

Tiles module can hold a group of tiles, each Tile can be composed of an Image/Video, Title, Subtitle and a CTA button.

Also an on each Tile you have an option to switch the positions of the Image/Video and Text, further creating nice varying look the way the designer of the website originally intended.

The purpose of Tiles modules are like Leadbanners, to provide eye catching teasers. Tiles can work best if you have multiple related topic links and create tile for each one. Other than that, Tiles provides an aesthetic to keep pages interesting.

Special Blocks

Special Blocks are Modules that provides some very specific functionalities. There is only a few of these Special Blocks in existence, each have specific purposes for the site. Below is a list of current Special Blocks:

  • Fiber Status [demo] : This is a shortcut link to the «Status Utbygning» page, it looks like a leadbanner with a text input, but what makes it special is that it connects to an external service to get a list of locations and take that into account when finally redirecting to the actual Status Utbygning page, it will automatically show the result based on the location provided by the user on this module. This module can be used anywhere else except ofcourse on the Status Utbygning page.
  • Operations Message Banner [demo] :  This is similar to Fiber Status in looks, its function is to provide user with an input of a zip code, and then when the user submits this it will automatically send the user to the Driftsmeldinger page.
  • Check Delivery [demo] : This modules holds the entire «Sjekkleveranse» functionality. This module should be exclusive only to the «Sjekkleveranse» page.

These special blocks may already by deployed on the site, so you might probably do not need to add more, however you can still change some of their options to your liking.

Reusable Blocks

Reusable Blocks from the name itself is a clone of any previously configured Block that you can deploy on any page.

There are only few Reusable Blocks in existence by default as they have important specific purposes for the site, but you could create more yourself.

Reusable Block’s purpose is to make your content editing easier by reducing the time to manually recreate the same Block for a particular page.

In this demonstration video, we’ll show you how to work with Reusable Blocks:

User Management

WordPress uses a concept of Roles, designed to give the site owner the ability to control what users can and cannot do within the site. A site owner can manage the user access to such tasks as writing and editing posts, creating Pages, creating categories, moderating comments, managing plugins, managing themes, and managing other users, by assigning a specific role to each of the users.

Adding a user
  1. Find «Users» in the Admin menu
  2. Under Users, choose the «Add New»
  3. Username is required so fill this input field appropriately
  4. Email is also required as well.
  5. By clicking «Show password» WordPress can generate a strong password for the new user, but you can also use a custom password instead.
  6. It’s optional but you can also notify the user about their account registration.
  7. Select the Role for the new user, assign Editor if user will only ever need to create or update content.
  8. Finally click «Add New User» to add the user.

Form Management

Contact forms in the site is managed via the ContactForm 7 plugin. This is where we create and edit the forms, that becomes shortcodes that we can embed on to any page.

The plugin’s official site has complete guide pages which you can learn everything about Contact7 forms management:

https://contactform7.com/editing-form-template/

Form Tag Syntax

But the idea behind field input creation is via a form tag with a simple syntax shown here:

Type, Name and Values are the most basic code that you add into the fom tag, Options are some other functional things you add to a form tag like ID, Class,Placeholder, etc.

Reference Guide

For complete reference please read this page:
https://contactform7.com/tag-syntax/

Widget Management

Widgets are a variety of tiny modules that you can place inside a sidebar or footer. You can edit them once and they will be updated everywhere.

The Widgets are native to WordPress which is why the official documentation might fit a lot better in explaining what it does and how to use them in the site: https://wordpress.org/support/article/wordpress-widgets/

Currently there are only two Widget locations: Richtext sidebar and Footer.

Richtext Module Sidebar

The Richtext module has an option that let’s you enable a Sidebar to sit right next to the texts content.

The Footer widget container is always visible everywhere on the site, so more important information like navigations are better be set here.

Redirection management

Site URL redirections are managed through a plugin called Redirections under the Tools menu.

Official Documentation

A full dedicated documentation can be found here. https://redirection.me/support/

Short Urls

One of the most functional features of redirections is creating short urls for those pages or posts with rather long urls. Creating a short url is just the same as creating a regular redirect, except you will ofcourse use a smaller text for the Target Url.

  1. Click the «Add New» to open up the add new redirect box form.
  2. Supply the «Source Url», this is the redirect url. The url you need to share publicly. For Short Urls you just need to supply a very short text as the Source Url».
  3. Query Parameters is an optional feature in case you want to detect string query parameters along the url. Mostly for more advanced use case.
  4. Supply the «Target Url», this is the original page or post url that you need to redirect to. It has a feature of autocomplete so you can find the desired page as you type its title.
  5. Group, this is better left as «Redirections».
  6. This icon brings up the Advanced Settings. For advanced use case.
  7. Add Redirect finally submits the new Redirect item.

For more info about creating redirects: https://redirection.me/support/create-redirects/

Survey management

Apart from the regular Redirections however, there is also the “Surveys” content items which are pages that can show embedded iframes that contains forms for data collection purposes. These iframes are coming from an external survey form service such as Questback.

Everytime a new survey page is created a redirection shorturl can be generated automatically. The purpose of shorturl is to create an alternative URL that is shorter and easier to print.

Add a Survey page

Under Survers menu, Click the «Add New»:

  1. We need to add a name for this, this will be a reference on the backend overview list and as name to the tab title on the browser.
  2. Then we supply the external url that contains the survey form iframe.
  3. It is optional but you can also choose a background color to maybe match the background color of the iframe
  4. Height can also be specified for the iframe
  5. Now the Slug field will be used as a ShortUrl, this means you can alternatively visit this page using the ShortUrl.
  6. Finally, publish.

Reusable blocks management

Reusable blocks is a feature of the content editor that let’s you store and reuse content blocks across the site.

Reusable blocks when edited are automatically updated everywhere on the site where they are used.

There are only few Reusable Blocks in existence by default in the Vikenfiber site as they have important specific purposes, but you could create more yourself.

Reusable Block’s purpose is to make your content editing easier by reducing the time to manually recreate the same Block for a particular page.

In-depth Guide

This functionality is native to WordPress so you can find many tutorials about this. For example here is an in-depth tutorial about Reusable Blocks: Guide to Reusable Blocks