Overview

WordPress is a free and open-source content management system (CMS) based on PHP programming language and MySQL database. Features include a template system and a plugin architecture. WordPress is most associated with blogging, but supports other types of web content including more traditional mailing lists and forums, and media galleries. WordPress also allows you to build beautiful personal sites, corporate sites, online stores (ecommerce), booking systems, multivendor sites, and so on.

Likewise, WordPress framework allows in-depth customization through stylesheet coding, front-end programming (using HTML5 and Javascript), and back-end hooks programming (using PHP) further expanding the capability beyond what WordPress and its corresponding templates and plugins can offer. In fact, you can create your own templates and plugins.

However, we’re not going to touch any those, we’re not going to teach you how to program. We’re just telling you what WordPress as a CMS is, together with its capabilities. In this tutorial, we’ll focus on the basics of WordPress operation and its corresponding theme used on your site, Flatsome, in this case.

Front-end

The front-end is the part of the website that is accessible by the public, the pages that users interact with directly.

Back-end

For websites, the back-end allows you to update the front-end contents. As an example the About page contains texts. In order to change the texts, you go to the back-end, look for the page, and do edits from there. Whatever changes you’ve made on the back-end is reflected on the front-end. Only privileged users (i.e. Administrator) can change page contents.

Login/Logout

Logging In

In order to change the contents of your pages/posts, you have to go to the administrative area (back-end). In order to access your back-end, you need to type in the address bar of your browser the following:

[domain-name]/wp-login.php

Where:

[domain-name]

is your domain name.

Example: https://yourdomainname/wp-login.php.

Doing so will bring you to the back-end login page, similar to Fig. 1 given below.

Figure 1. Login page

Your username and password is required. If you don’t have a username and password yet, contact your developer or your main administrator so they will provide you one.

Dashboard

The dashboard is the very first page that would greet you inside your CMS back-end. On the left pane (usually black background) is the main menu vertically situated on your screen, while on the right pane (usually in white background) is the content related to the menu item highlighted (chosen). Currently, it’s the dashboard itself that is the active.

Figure 2. The Dashboard.

Logging Out

Whenever you’re done working on the back-end CMS, be sure that you log-out. In order to log-out, hover your mouse over the upper-right corner of your screen where “Howdy, [name]” is located. As you hover, a drop-down menu would show up, from the drop-down menu, click the menu-item “Log Out”.

Doing so will bring you back to the CMS log-in screen. Anytime you want to work on the CMS, simply log-in again.

Pages

In WordPress, you can put content on your site as either a post or a page. So what’s the difference between pages and post?

Pages are site contents like your common “Home Page”, “About Us” or “Contact”. You use pages to show information about your company, your products/services, etc. You can create as many pages as you want.

On the other hand, when you intend to writing news or articles, you’ll be dealing with post.

Adding a Page

In order to add a page, refer to Dashboard > Pages > Add New.

Doing so, you will be presented with a blank page, similar to Figure 3 given below.

Figure 3. Adding a page.

As illustrated in the figure given above, you will have to provide the following:

1. Page Title – be sure to make this short as possible, but most descriptive of the page.
2. Body of the Page – you can enter textual information and media (e.g. photos/images) here. By default, the VIEW you’re using is Visual. You can select the Text view if and only if you know how to code in HTML5 and inline CSS.
3. Save – you can either Save Draft or Publish. The former makes the page hidden to the public until you publish it. It’s good if you’re still constructing the page. If you’re done with page editing and would want to make it available to the public, save it using the Publish button instead.

Cloning a Page

It’s not a good practice to immediately edit a page especially when you’re not well adept on using WordPress as well as the corresponding Flatsome theme we used. Create a CLONE (duplicate) of the page first. If you’re sure you have cloned the page already, you may proceed on editing the original page (not the clone). The clone serves as your backup in case you messed up big time with the original page.

In order to clone a page, be sure that you are on the pages section (Dashboard > Pages > All Pages), then do the following:

1. Hover your mouse to the title of a page you want to clone. As soon as you hover above it, a hover menu would show up. On the hover menu, click Clone menu item.
2. Doing so will create a clone of the page with a status of Draft.
3. After creating a clone, you may proceed on editing the original page (not the clone).

Cloning/Duplicating a page is not an inherent capability of WordPress. We just installed a plugin that would handle that. The plugin is called Duplicate Post plugin.

Editing a Page

Editing a page is almost similar to adding a page. In order to edit a page, this time, you have to go to Dashboard > Pages > All Pages.

Doing so will bring you to the page list. The page list contains all the pages you currently have.

As already mentioned before, it’s not a good practice to edit the page without creating a page backup. Clone or duplicate the page first before making an edit. The clone serves as your backup.

In order to specifically edit a page (e.g. not the clone page):

1. Hover your mouse to the title of a page you want to edit. You can either click the page title or mouse hover on the page title and click Edit on the hover menu that would show up upon hover.
2. You will be brought to the page you want to edit.
3. Proceed on with editing.
4. Save when you’re done. Either click Save Draft or Publish. You save to draft when you just want to save (for later editing) without actually publishing it. On the other hand, you publish when you’re done editing and you want to make it available for the public.

Flatsome Page Composition

You can never work on a WordPress site without using a theme. WordPress comes with default theme, which they issue almost every year.

Very rare you would find WordPress sites using default theme due to its limitation.

In this case, we used Flatsome theme for this website. Note that in Flatsome, you can design a page using its UX BUILDER. UX Builder allows you to design a page easily using drag-drop of supported components to the page, edit the component, then save.

When composing a page using Flatsome’s UX Builder, you will have to remember a few important components. A Flatsome page is composed of one or more of the following:

• Section – this embodies a portion of a page containing a selection of rows, columns within rows, and elements within columns. A section can have a background (image/photo) among many other attributes it can have, such as class, visibility, overlay, position, hover effects, parallax effects, and many more. You can have as many sections as you want in a page. You can limit visibility of a section to only appear on desktop, only appear on mobile, or be visible on any. If visible on all devices (desktop, tablet, smartphone), it will automatically adjust to its viewports. However, as already mentioned, you can compose a section to appear only on smartphone and compose its contents separately. It’s good to create sections so elements within it would share the same attributes within a section.
• Row – make it a habit NOT to put page elements immediately. Always put it inside a section. A row can have one or more columns (max of 12 columns per row).
• Columns – you choose the number of columns of a row. It’s important to know that a row can have a maximum of 12 columns. A sample combination of column is 6-6 (that’s two 6-column size, results to 12), 4-4-4 (three 4-column size results to 12), or 3-3-3-3 (four 3-column size results to 12), or any other column combinations you want for as long as the resulting sum of columns is 12. You can also have just 1 column with a size of 12.
• Page elements – after creating the columns, select the specific column in order to fill it with elements. Elements can be a text, title, gap, divider, accordion, map, etc. There are many kinds of elements supported supported by Flatsome.

Note that we can create pages without the use of UX BUILDER, that’s because we’re designers/developers. Note that this GUI-based page construction tool (UX Builder) has been intentionally provided for you, thru Flatsome theme, in order to ease YOUR process of editing a page. It helped us designers/developers, too, to build sites, faster. Why not?

Editing using Flatsome

Editing an existing page with Flatsome is fairly easy. It allows you to pick a visual element from an element selection (e.g. text block, accordion, title, icon box, etc.), do visual editing, drag-drop, resize, and a lot more. As mentioned earlier, you can do visual editing using the UX Builder, a built-in page builder of Flatsome.

To edit a page using Flatsome, go to Dashboard > All Pages. This time, instead of clicking the page title or clicking Edit from the hover menu that shows up when you hover on the page title, you would instead click “Edith with UX Builder”. See figure 4 below to illustrate.

Figure 4. Editing with Flatsome

If you click the Edit with UX Builder button, you will be brought to the page, the only difference is that it will be presented in actual layout format – the format similar to how it’s presented to the public.

Refer to figure 5 immediately below in order to illustrate as to how it would look like.

Figure 5. Flatsome UI.

As you can see, the page contains 2 panes. The left pane and the right pane. The left pane shows you the page contents in nested manner, starting with sections, rows, columns and elements. Whatever is selected on the left pane, the same element on the right panel gains focus, much like what was shown on the above illustration.

Actual editing of a page using Flatsome

Let’s do an actual editing of an element. Be sure that you have opened the same page as previously illustrated above (the Our Company page). Now, do the following:

1. From the left pane, click on the 2nd Section, the right pane will automatically focus on that section.
2. From the left pane, click the right pointing arrow icon (before the word Section) to expand the section (if it’s collapsed) exposing the rows and columns within.
3. From the left pane, expand Column 8/12. More elements will be shown to you.
4. Now, click the 2nd Row inside column 8/12. Doing so will trigger the right pane to scroll to the area where the row containing a paragraph that says, “In 1995, the PCSO launched its first online lottery…” belongs to.
5. From the right pane, click the paragraph that says “In 1995, the PCSO…”. Doing so will trigger the left pane to open up the editor and other attributes of that specific text element, similar to the figure 6 shown immediately below.

Figure 6. Editing elements with Flatsome.

6. You can edit directly from the left pane that represents the text element. Other attributes such as font size, line height, etc. can be modified, too, for that specific text element.
7. You might see HTML tags in there, but if that irritates you and you want to edit it without HTML tags, you can click Open Text Editor button directly above it.
8. If you messed up, simply click the “Undo” button (). The undo button is the very first button located on the right side of your screen.
9. After doing the editing, you can then click Apply button.
10. Click the Update button in order to save the page.
11. You can now close the page by clicking the X button on the upper left corner of the page.

Deleting a Page

In order to delete a page, go to Dashboard > All Pages. Hover your mouse on the title of the page you want to delete. As you hover, a hover menu would appear. Click Trash from the hover menu. Doing so will move the page to the trash. Note that when in trash, it’s not yet permanently deleted.

Permanently deleting a page

To delete a page permanently. go to Dashboard > All Pages. You will see links above the page (right pane), like All Published Draft Trash. If you have items that are still in draft, then draft link would appear. If you have items deleted that was moved to trash, then the trash link would appear. Otherwise, only All and Published would appear.

Assuming Trash is available among the links, click that Trash link. A list of pages that was previously deleted will be found here. If you want to delete just one page, hover your mouse on the page title and hover menu would appear. From the hover menu, click Delete Permanently. If you want to permanently delete several pages, tick on the checkboxes on the left of the page titles, then select Delete Permanently from the Bulk Actions dropdown selectbox. Then click Apply. If you want to delete all pages in the list of trash, simply click Empty Trash link.

Updating the Menu

Assuming you have created a new page (or want to replace a page with a new one), and that you want to add it to the main menu (horizontally located on the header right beside your company logo), simply go to Dashboard > Appearance > Menu. A page similar to Figure 7 given immediately below would appear.

Figure 7. Updating Menus

As mentioned in the illustration:

1. Tick the checkbox of the page(s) you want added to the menu from the Page tab section on the left.
2. After ticking the checkbox of pages you want added to the menu, click the Add to Menu button.
3. Doing so would make the page appear on the right pane where the list of pages are currently available. It would appear at the bottom. From there, you can change its location through drag and drop, simply clicking the page item (without releasing the left button), and dragging it anywhere up/down.

When you’re done, be sure to click the Save Menu button.

User Management

Adding Users

Go to Dashboard > Users > Add New. Fill-up necessary data such as username, email, and password. You can leave everything else as blank. However, don’t forget to select the proper User Role:

User Roles:

1. Administrator
2. Editor
3. Author
4. Contributor
5. Subscriber.

To learn more about user roles and capabilities, go to https://codex.wordpress.org/Roles_and_Capabilities.

Editing a User

To edit a user go to Dashboard > Users if you’re not there yet. Then you will be presented with a list of users. Hover your mouse on the name, a hover menu will appear, click Edit from the hover menu. You will then be presented with the user data. Edit as desired and click update.

Deleting a User

To delete a user, go to Dashboard > Users if you’re not there yet. Then you will be presented with a list of users. Tick the checkbox beside the name of the user, then choose Delete from the Bulk Actions dropdown selectbox, then click Apply.

Guidelines

Guidelines for Graphics Designer

When creating an image, please make sure that you observe the following:

1. When creating an image in Landscape mode, be sure that you observe 1600px width by 1067px height.
2. When creating an image in Portrait mode, be sure that you observe 1067px width by 1600px height.
3. When using images as background of a section or banner, be sure to use wide-angle shots. Wide angle-shots means there are ample spaces around (top, bottom, left and right) the subject. Sample subject can be a building, a person or people. This would guarantee that the image, be it in landscape or portrait, will not be cut-off when displayed, unless intended to be cut-off.
4. Optimize the image for web – that means you save the image to be lower than 350kb. It’s important to observe low file size so that that page (where the image is contained) would load faster. Note, however, that lowering the file size means you sacrifice the quality. So, don’t lower the file size too much as you might lose the quality you desire.

Further Reading

This documentation only covers the basics of working on WordPress and Flatsome theme in order to allow you to update your website. However, we suggest that you do some further reading on the following documentation.

WordPress Documentation

We suggest that you look into the WordPress documentation should you wish for in-depth knowledge about WordPress.

Flatsome Theme

For the Flatsome theme, we suggest that you look into Flatsome documentation. Flatsome is a lightweight and powerful theme with built-in page builder (the UX builder).