Accessing the CMS-Admin

In order to access the CMS (content management system), you’ll have to go to the CMS administrative pages, hereon referred to as the CMS-ADMIN.

The CMS-ADMIN is residing with the website, conveniently located at http://vw.webkickoff.ninja/wp-admin/.

You will need a user access privilege in order to gain access to the ADMIN. If you don’t have ADMIN rights, talk to your technical support representative.

Logging into the CMS-Admin

If you have a valid user access privilege assigned to you, you can access the CMS-ADMIN by going to http://vw.webkickoff.ninja/wp-admin/. You’ll be presented with a page similar to the image shown immediately below.



Figure 1. The Login Form.

Within the page is a login form where you can enter the username and password supplied to you. After supplying your credentials, click LOGIN button and you’ll be brought to the Dashboard.

The dashboard

After you have logged into the CMS-ADMIN, you will be immediately brought to the dashboard. The dashboard serves as the starting point from everything you do. Note that the dashboard menu is always available anywhere you are within the CMS-ADMIN.

The dashboard menu is the CMS service itself. Similar to what was shown on the snapshot immediately below, the menu is vertically displayed on the left side with black background.



Figure 2. The Dashboard.

The services on the dashboard menu depends on what kind of access privilege has been granted to you. At the time of this writing, all users are granted administrator privileges. The number of service items is also dependent on what plugins or extensions that was installed on the CMS-ADMIN.

Access & privileges

There are different kinds of access level supported by WordPress. These are:

  1. Administrator – The highest of all privileges. It can access everything on the CMS-ADMIN. If you have been granted Administrator access to the system, we strongly advice that you take extra caution in configuring any of the services.
  2. Editor – The 2nd highest of all privileges. An editor has access to all posts, pages, comments, categories, tags, and links.
  3. Author – An author can write, upload photos to, edit, and publish their own posts. But, they can’t do that on pages/posts they have not authored.
  4. Contributor – A contributor has no publishing or uploading capability, but can write and edit their own posts until they are published. The posts/pages they create remain as drafts until it has been published by someone of higher privilege.
  5. Subscriber – Can only access their profile.

Your profile

You can always change the information on your profile by hovering your mouse to “Users” on the Dashboard menu (a submenu menu will appear beside it after hovering on the menu), then click “Your Profile” on the submenu. Doing so will bring you to your profile page, similar to the snapshot shown immediately below.



Figure 3. Your profile page.

This is where you can update your profile (e.g. first name, last name, etc.) to include the change of your password initially issued to you. Be sure to click “Update User” after doing your update.

Users

If you want to add/edit/delete CS-ADMIN users, click the “Users” on the Dashboard menu. Doing so will bring you to the users page containing a list of CMS-ADMIN users, similar to the snapshot shown immediately below.



Figure 4. Users listing page.

Also shown on the snapshot are buttons and links that allow you to add/edit/delete (trash) users. "Add new" button allows you to add a new record. Hovering your mouse on any available item (the users, in this case) will show a set of links – the choices are Edit, and Trash.

So, those 3 buttons/links would allow you to add/edit/delete items and it applies not only to users but across almost all items in the site (e.g. add/edit/delete pages, posts, etc.).

We won’t go into details on dealing with those because they’re fairly straightforward. Just keep in mind the different user access privileges you’re to assign for each user.

  If you have the highest privilege (administrator), you can access the list of all users, create a new user, edit their profile, or delete their account.

About themes

WordPress is a CMS with a standard (default) look. At the time of this writing, the default theme “twenty-sixteen”. The look can be changed thru themes. A theme translates into some sort of a "dress pattern", whereby putting on a new dress pattern to your CMS changes the pattern and general look of your website from top to bottom. However, “designing each page” is another story — pages are designed by web designers, but designs are basically constrained by limitations of the theme. And if designs must go beyond, we do customizations.

To view the themes currently installed, hover your mouse to Appearance, a submenu will show up, then click Themes on the submenu. Let’s refer to that as Appearance > Themes. You’ll then be brought to the appearance page similar to the snapshot shown immediately below.



Figure 5. Themes.

When putting on a new dress, it’s not just the look that is being changed — most premium themes, if not all, come with its own extended functionalities that makes things easier for you. So, there are free themes having very limited functionalities, and there are premium themes with more goodies.

As shown above, there are 3 themes currently installed. The twenty-sixteen theme, the Avada theme, and the Avada child theme (the one marked as active). The twenty-sixteen theme serves as a fallback. The Avada Child theme is the theme we are using. It inherits the properties of Avada (the parent theme). If a designer/developer will modify the program, be sure that they do it from Avada Child Theme, not from the Avada directory/folder.

  IMPORTANT:

If you have the highest privilege (administrator), you can access the list of themes, change the themes, etc. But you don’t really want to do that, because we’ve done that already for you.

Changing the theme would defeat the purpose of this project. So, we firmly advise not to touch the theme settings anymore or things could go haywire.

About plugins

Beyond the built-in extended functionalities of premium themes are plugins that you can install. As an example, WordPress doesn’t have Contact Form 7. So, we search for a plugin that would meet specific needs. We don’t need to reinvent wheels when there really are available plugins out there. And when we find one, we simply plug it in.

To view the plugins currently installed, go to Appearance > Plugins. You’ll then be brought to the plugins page similar to the snapshot shown immediately below.



Figure 6. Plugins page.

Each of the plugins currently installed are relevant to the operational needs of the site.

Some plugins affect the looks and presentation of the site. As an example, Contact Form 7 allows the creation of data-entry forms that you can display on your page.

Some other plugins affect the back-end operational limitation of WordPress where restrictions or limitations are implemented by the hosting company. As an example, Godaddy would not allow upload of WordPress media that’s more than 2MB per file (as per GoDaddy limitations). So, what about the videos then? The solution is to upload the file via FTP, then make use of a plugin like Media from FTP that recognizes media upload via FTP as being part of the site and thus be registerd as a media in the media section.

Some other plugins eases the process of CMS-ADMIN operations making you more productive and efficient in your work, but does not in any way affect the public view. An example is Duplicate Post plugin, that allows you to duplicate a page and do modifications from it without affecting the original page. It simply makes life easier.

  IMPORTANT:

If you have the highest privilege (administrator), you can access the list of plugins, active/configure/deactive/delete plugins. But you don’t really need to do that, because we’ve already added the things needed to make the site in full operational condition.

If you find the need to add more plugins and you’ve searched one, be sure to:

  • Check the reputation of the plugin author
  • Check the comments from the plugin page. Comments from others who downloaded the plugin would give you an idea about the plugin status.
  • Check their support. Some authors simply create one, leave it there in its buggy state and does no reply for support.
  • Be cautious, some plugins have found to cause havoc on your site. Faulty functionalities and processes, vulnerabilities, security breach, et al.

Pages vs posts

Before delving deeper towards the update of pages and posts, it’s important that you have a clear understanding as to what pages and posts are about.

Pages are static and are not listed by date. Pages do not use tags or categories. A Home Page, About page or Contact pages are classic examples of pages you’ll find on websites. Pages are basically added to your menus or sitemaps. You can create sub-pages of a page. You don’t normally modify pages all the time.

Posts are much like site pages, but are actually blog pages. So, each blog pages are actually “posts”. A collection of posts are normally contained in a page similar to your blog page. Posts are best for news updates, articles and the likes.

A good example of a post is when you want to change your service rates. Before doing so, you don’t immediately change the rate in your Pricing page. Instead, you notify the public that you’re to change the rate coming a specific date. You make notification by creating a post available for them to read. Upon reaching the specified date, that’s the time you’ll change the rate in your pricing page.

If pages and posts are now clear to you, you may then proceed to the next guide.

Creating a page

If you have not understood the difference betwee pages and posts, we suggest you go back to Pages vs Posts user guide. Otherwise, you may proceed here.

If you find the need to create a new page, go to Pages > Add new. You’ll be brought to a page similar to the one shown immediately below.



Figure 7. Creating a page.

In the page you’ll find a title field where you enter your page title, of course, and a text editor where you enter the contents of the page.

Text Editor View Mode

You’ll also find in the page (as emphasized on the snapshot above) text editor modes, either Visual or Text. For casual user, the use of visual editor will do. But, if the page will be peppered with HTML and CSS formatting, especially web-responsive formatting, then use Text mode. Be sure to save it in Text mode or you might lose your format when saving Visual editing mode.

Page Template

Also emphasized on the snapshot is the page template. Currently, there are numerous page template formats. But, you would commonly utilize only the following:

  • 100% Width – the page you’ll create shall have a full width, no left and right margins. This is good for page sections having full image backgrounds with contained formatted texts. If you’ll find the need to have other sections (that has no fullwidth background) to have left and right margins, then put that section inside a row having left and right margins specified. You can easily create page sections using rows and responsive columns using the Fusion Page Builder.
  • Default View – the page you’ll create shall automatically have a sidebar. However, on most pages of this site, there are no left and right margins.

Fusion Page Builder

Fusion page builder is an easy way to drag-drop page components that are supported by Avada theme. To make use of fusion page, simply click the Fusion Page Builder button. Fusion Page Builder includes:

  • Column Options – this allows you to specify the number of columns for a specific row.
  • Builder Elements – a collection of different page components ranging from texts, titles, counter boxes, flip boxes, maps, and alot more elements.
  • Custom Templates – gives you the ability to make the page into a template. You don’t need to use this
  • Pre-built Templates – gives you the ability to fill a page with pre-built components. You don’t need to use this.

As specified above, it’s only the Column Options and the Builder Elements that you would be needing to modifiy pages.

Column Options

Creating Rows

Rows are vertical sections of a page. Rows can contain one column (if you just want to type a full paragraph) or up to 6 columns.

You create a row by clicking the Full-Width Container insider the Column Options. Doing so will add a new row below the page.

Creating Columns Inside your Row

As mentioned above, a row (full-width container) can contain one or up to 6 columns. You can create a column by clicking and dragging a choice of column size (e.g. 1/1, 1/2, etc.) and dropping it inside a row.

Builder Elements

Creating Contents Inside your Column

  • Once your columns are already placed inside your row, you can then place components inside those columns. An example of creating contents. If you want to have a paragraph appear inside the column, then you would be needing a text component. In this case, a Text Block
  • Click the Builder Elements button, a collection of page components or elements will be presented to you.
  • Click and drag the Text Block and drop it on any of the columns you have created.
  • After dropping it in a column, just hover on top of it and 3 icons will appear on the upper right corner. These are edit element (brush icon), clone element (paper and plus icon), and delete element (trash can).
  • Click the edit element icon and a popup dialog will appear. You can start typing from the popup dialog, then click save on the popup dialog.

Saving as a Draft

When you’re done editing your page, be sure to click Save Draft button, then view the page you have created by clicking Preview Page.

At this stage, the page is still not published to the site, it’s only saved as a draft that you can preview. But when it’s time to publish the page, simply click the Publish button. Once published, it’ll be made available for public view.

You might want that page you published be linked to your menus so people can go to that page without remembering the URL. If so, go to the updating your menu guide.

  IMPORTANT:

If are to use HTML5 and CSS formatting all the time, then be sure to remain in Text mode. Don’t switch back and forth from Text mode to Visual mode, or your formatting might get lost. WordPress CMS has the habit of removing HTML tags and CSS formats when saving in Visual mode.

If you need lots of formatting but don’t know HTML5 and CSS, then use Fusion Page Builder.

Editing or deleting a page

When editing or deleting a page, go to Pages from the Dashboard menu. You’ll be brought to a page similar to the one shown immediately below.



Figure 8. Page list, the stage for editing or deleting.

As emphasized on the snapshot above, hovering on a page item on the list will bring up a set of links. Part of the links are Edit and Trash links.

Clicking the edit link will bring you to the page allowing you to do further edits to the page. Editing a page is similar to how it is when creating a page — you can edit the page title as well as the contents.

After you’re done editing, be sure to click publish button to reflect your changes on the page.

Clicking the trash link will send the page to trash.

  IMPORTANT:

Trashing a page will just put the page in the trash, something like a recyble bin. To delete the page permanently, go to trash on the page list, hover your mouse on the trashed page and click delete permanently.

You can also restore a page, simply hover your mouse on the trash item, and click restore link.

If you delete a page permanently, you can never recover it anymore.

Creating a post

If you have not understood the difference betwee posts and pages, we suggest you go back to Pages vs Posts user guide. Otherwise, you may proceed here.

If you find the need to create a new post, go to Post > Add new. You’ll be brought to a page similar to the one shown immediately below.



Figure 9. Creating a post.

You would notice that it’s a bit similar to creating page. In the post, you’ll find a title field where should be entering your post title and a text editor where you can enter the contents of the post.

Like the page, the post’s text editor has Visual and Text view. For casual user where mostly texts are entered, the use of visual editor will do. But, if the post will be riddled with HTML and CSS formatting, especially web-responsive formatting, then use Text mode. Or better yet, use the Fusion Page Builder.

Post Format

Emphasized on the snapshot is the post format. Currently, there are numerous pre-defined post formats. But, you would only be using the Standard.

Post Category

In the following snapshot, you’ll also find on the post that you’ll have to choose how your post will be categorized. Currently, there are four post categories made available for you, namely Network Activities, Research, Research Grants, and Uncategorized. Use any of the categories except the last one (uncategorized).



Figure 10. Categorizing a post.

Saving as a Draft

When you’re done editing your post, be sure to click Save Draft button, then view the post you have created by clicking Preview.

At this stage, the post is still not published to the site, it’s only saved as a draft that you can preview. But when it’s time to publish the post, simply click the Publish button. Once published, it’ll be made available for public view.

You won’t be needing to add a post to a menu, it is automatically added to whatever category it belongs to. In this case, it’s the Blog category.

  IMPORTANT:

If are to use HTML5 and CSS formatting all the time, then be sure to remain in Text mode. Don’t switch back and forth from Text mode to Visual mode, or your formatting might get lost. WordPress CMS has the habit of removing important HTML tags and CSS formats when saving in Visual mode.

If you need lots of formatting but don’t know HTML5 and CSS, then use Fusion Page Builder.

Editing or deleting a post

This process is very similar to editing or deleting a page. However, you’ll have to go to Posts, instead of going to the page list. Doing so will bring you to the post list containing all of your posts.

Simply follow the instructions on editing or deleting a page as the functionality is almost the same.

Once inside, it’ll just be like adding a post.

Updating your menus

Suppose you’ve created a new page and that you want that new page included in your menu. You’ll have to go to Appearance > Menus from the Dashboard menu. Doing so will show up the menu page similar to the snapshot shown below.

The website this documentation supports has several menus available, pre-created for you:

  • header-menu – menu horizontally displayed at the top of page.
  • footer-menu-1 – menu displayed at the 1st column of the footer.
  • footer-menu-2 – menu displayed at the end column of the footer.
  • Guide – menu for this user’s guide page.

Each of these menu can be modified (refer to the snapshot shown below).



Figure 11. The menu page.

Follow the steps below to update any of the above menu

  1. From the pages section (somewhere on the left portion), you can tick the page you want included in the menu structure, then click Add Menu button. Clicking the Add menu button will add that page (now represented as a menu item) at the bottom of the menu structure.
  2. From the menu structure, you can drag the menu item, positioning it anywhere on the menu structure, and drop.
  3. Click Save menu when done.

To delete a menu item from the menu structure, click the menu item and it will drape down with options. In the options, you’ll find a link named as Remove. Clicking remove will remove the menu item from the menu structure. Click Save menu when done.

Uploading pictures

There 2 ways to upload a photo for use on the website:

  1. Thru the media – you use this if you’re uploading an image for background or foreground image display purposes.
  2. Thru the page/post – you can use this if you’re uploading an image to be displayed on the foreground.

Uploading thru the Media

Go to Media > Add new from the dashboard menu. You’ll be brought to a page similar to the snapshot shown immediately below.



Figure 12. Media page for uploading pictures or PDF files.

Simply drag and drop the picture on the drop section of the page. You can alternatively click the Select button and a select dialog box will appear allowing you to pick the picture from your hard disk.

Uploading thru the Page/Post

You can also upload an image from the page/post. When you’re in your page/post, do the following:

  1. Place your cursor anywhere on the text editor where you want the picture be pasted.
  2. Click the Add Media button. A dialog will appear showing you current media files you have.
  3. You have 2 tabs in there, Media Library and Upload Files. The media library lets you select any media you want pasted on the page/post. The upload files allows you to upload a file and paste it into the page/post.
  4. Because you’re to upload a picture, click the Upload Files tab. It will show a dialog similar to the above snapshot.
  5. Drag to picture into the drop zone. It will then upload the image.
  6. In the media dialog, there are options, named as Attachment Display Settting:
    • Alignment – you can chose as to how you want the image to be aligned on the document (left, center, or right).
    • Link to – Link to none as the option. But, if you want to image to be shown on a lightbox, choose link to URL but be sure to add “prettyPhoto” in the “link-rel” attribute under the “advanced options”.
    • Size – Always pick the full-size copy. But if you’re to display it as if embedded and that the texts crawls around it, use medium size and have it left or right aligned.
  7. Click Insert into page button. Doing so will close the media dialog and insert the image to your page/post.

  IMPORTANT:

Optimize the picture before uploading. The dimension should be:

  • Full background image on a section of a page – 1600px X 1067px
  • Featured images on a blog post – 700px X 500px
  • For images beside texts (on the foreground and not at the background) – limit it to 700px X 500px but choose medium as the display option.

Use JPG instead of PNG. You can’t control the filesize of a png file. So we strongly recommend JPG files.

Reduce filesize to 250kb (+/- 20kb) – you don’t want your pages to load slowly. 250kb won’t reduce the quality of the picture.

Upload of media file (images or videos) are limited to 2MB per file, as per Godaddy’s WordPress restrictions.

Further Reading

To further enhance your knowledge on WordPress CMS, you may refer to the following guidelines:

  1. WordPress Codex – helps you learn more about WordPress CMS.