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://live.globe.com.ph/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://live.globe.com.ph/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. If the email account that you have provided (during your CMS-ADMIN account application) is a Google account, you can make use of the “Login with Google” button on that same login form.

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. But, you can always jump to other dashboard services via the dashboard menu provided on the left sidebar. Note that the dashboard menu is always available anywhere you are within the CMS-ADMIN.

The dashboard menu are where the CMS services are located, as shown on the snapshot immediately below.

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 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 Delete.

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. In this case, the standard look is the “twenty-fifteen” theme. The look can be changed thru themes. A theme translates into some sort of a "dress", whereby putting on a new dress to your CMS changes the look of your website from top to bottom.

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-fifteen theme, the Salacious-e theme, and the Salacious-e child theme (the one marked as active). The twenty-fifteen theme serves as a fallback. The Salacious-e theme is the theme we created. But, we don’t modify that for every project, we do all our modifications from the Salacious-e child theme. You see, it’s not a good practice to do direct modifications to parent themes, we do that on child themes, exactly the reason why we created a child theme that simply inherits the properties of its parent theme. Whatever modifications or customizations are being done, it’s actually being done from the active child theme.

  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 installed a theme (salacious-e theme we created) and further customized it to create a look with all the functionalities (special effects like some parallax scrolling, moving texts, etc.) that resulted to this website now.

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.

For a complete documentation of Salacious Theme, go to Salacious Theme external link.

Browse thru the Salacious Shortcode Cheatsheet.

About plugins

Beyond the built-in extended functionalities of premium themes are plugins that you can install. As an example, WordPress doesn’t have Google Analytics Dashboard for WP (for visitor statistics, etc.). So, we search for a plugin that would meet that specific need. 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, Revolution Slider allows the creation of images and video sliders and allows you to display what you created on a page in public.

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 Menu plugin, that allows you to duplicate a menu and do modifications from it without affecting the original menu. 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.

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. As an example, Get Fit page is a sub-page of Wellness page. You don’t normally modify pages all the time.

Posts are much like pages, but posts are usually categorized. As an example, Your Priorities, Videos, iLead, or I am Globe are all post categories. These post categories were intently created because we know that there’ll be new posts under each of those post categories in the future.

For example, you want to issue a public notice and you want that shown under Your Priorities category. So, what you need to do is to create a new post and have that new post fall under the Your Priorities post category. All posts for a category are stacked above each other (vertical/horizontal) on reverse chronological order (most recent post being the first).

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 we created for various purposes for this project. But, you would commonly utilize only the following:

  • Full width – the page you’ll create shall have a full width, no sidebar. This is good for page sections having full image backgrounds with contained formatted texts. However, it’s important that you know how to use web responsive columns (previously lectured to you). We use this template in almost all pages.
  • Full width bordered – the page you’ll create shall have a full width, no sidebar. But you cannot create sections of the page with full image backgrounds.
  • Default View – the page you’ll create shall automatically have a sidebar. However, on most pages of this site, there are no sidebars. But on single posts, we do display sidebars.

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 linked to your menus so people can go to it, 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.

We firmly suggest that you stay in TEXT view. Practice and make it a habit of using Text view.

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 8. 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. If you have lots of formatting in the post, be sure to save it in Text mode or you might lose your format (if there’s any) when saving in Visual editing mode.

Post Format

Emphasized on the snapshot is the post format. Currently, there are numerous pre-defined post formats. But, you would commonly Standard. Currently, standard is what we mostly used for all posts.

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 numerous post categories made available for you. Simply choose the post category for the list by ticking the relevant checkbox.

Figure 9. Categorizing a post.

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.

  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.

We firmly suggest that you stay in TEXT view. Practice and make it a habit of using Text view.

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.

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:

  • Main Menu – menu displayed from off-canvas.
  • Sitemap Menus – menus found on the footer.
    1. Menu Wellness
    2. Menu Learning
    3. Menu Careers
    4. Menu Benefits
    5. Menu Culture
    6. Menu Benefits
    7. Menu Media

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

Figure 10. The menu page.

Follow the steps below to update any of the above menu

  1. Pick the menu you want to modify from the list box, then click Select button
  2. . After clicking the select button, the menu will be displayed on the Menu Structure section of the page.

  3. 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.
  4. From the menu structure, you can drag the menu item, positioning it anywhere on the menu structure, and drop.
  5. 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 11. 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
    • Size – Always pick the full-size copy
  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
  • Images on a post – 1024px X 768px
  • For images beside texts (on the foreground and not at the background) – 1024px X 768

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 is limited to 2mb only per upload.

Further Reading

To further enhance your CMS and theme usage, you may refer to the following guidelines:

  1. WordPress Codex – helps you learn more about WordPress CMS.
  2. Salacious Shortcode Cheatsheet – helpful when designing your page/post.