Setup Plan for an Azure hosted WordPress Page-centric Private Intranet Wiki

Jan 27, 2018 | Azure, WordPress

Read all of the other posts in our series on Creating Azure (hosted) WordPress Websites without knowing php or MySql!

Overview:

We were tasked to move all the content of a private corporate 700+ page wiki from an expensive, full-featured, social collaboration intranet subscription service, over to an Azure hosted private WordPress wiki site. Only the private wiki feature on the previous subscription service was being used & needed, so the reason for the move was to build a private website to house the corporation’s pages of internal knowledge and business documents (wiki), with ease of editing the existing content as well as being able to add more content, operating on the solid, secure Azure Web App Service hosting platform.

Microsoft Azure provides a powerful, secure, reliable, scalable, highly-available, pay-for-what you-use, cost effective cloud platform to build and deploy enterprise-grade WordPress websites with Azure Backup and Azure Blob Storage services. We knew we could have a WordPress website up and running in just a few minutes – but then the challenges of working with WordPress presented!

  • WordPress is optimized for blog posts organized on datelines using categories and tags, without access to a hierarchical organizing of sections of parent-child pages.
    • This new page-based WP website will be organized into sections of related data and hierarchical sub-page menus, with augmented UI navigational ease.
  • A better back-end page organization system for sections of pages, parent, child, grand-children pages was also needed to be found to both add new pages as well as to be able to quickly access a specific page in the directory structure for editing or moving to a different section.
    • The WordPress page menu lists 20 pages per screen – this website would have more than 35 screens of page titles to scroll through on the WordPress back-end.
  • We had hoped that using one of the many premium Knowledge-base or Wiki themes or plugins available, would be the answer for the page-centric website’s functionality. Not so.
    • We had too many pages, in too many ‘categories/sections’ to fit into the constraints of the available themes, plugins or packages.
    • Plus, we found that often these hierarchical menus of pages could not be styled and placed where we wanted for ease of navigation and a fluid user experience.

Setup Plan Details:

  1. Custom Login Page
  2. Website Privacy Feature
  3. Restrict Content Access by Roles/Users
  4. UI Navigation (Front-End)
  5. Page Navigation (Back-End)
  6. Azure Portal Setup
  7. Divi Theme Customizations
  8. Customizations in Child-Theme
  9. Plugins Used

We will show you the combination of plugins and theme features that we’ve ended up using that not only duplicate the intuitive navigation from the expensive subscription service, but we were able to create a superior functioning, user friendly, private, page-centric website in WordPress. All without any understanding of MySql or in-depth php skills! Plus, with a few additional functions, this style of website can also be used as a Knowledge-Base or Support Portal, public or private.

This is the landing or Home page of a WordPress private, page-centric information wiki website:

The landing page is created using the Divi Theme’s “Divi Builder’ which is a powerful drag and drop page layout builder, also available as a premium plugin compatible with any theme.

From the website’s home or landing page, front-end UI Content can be navigated to by the hyperlinked main section images, by the header menu links, by the top bar’s quick links or by a direct page URL if the user is already logged in. Ease of navigation to all pages is a prime requirement of the website.

1. Custom Login Page:

This is the custom login page created by Customize WordPress Login Page plugin:

The default WP text messages under the login box, are no longer visible, because of the use of additional css added to the plugin’s settings:

p#nav {
display: none;
}p#backtoblog {
display: none;
}

Login Error messages are still active but are displayed above the login box:

  

The WP default ‘Lost Your Password’ feature is still active – this is another reason to be certain that the website’s email sending feature is working correctly to prevent ‘lock-out’ from the website:

2. Website Privacy Feature:

This is a private restricted website, with the content and access available only to assigned, registered users.

Any attempt to connect to a specific URL of the website, will always direct a non-logged-in public user to this login page. The website content is locked down by the single setting in the All-In-One-Intranet  plugin setting:

3. Restricted Access to Content by Roles and/or Users:

The six main Sections of pages shown in the Overview Landing Page image above– Azure, IT FAQS, Learning, Tech IT, Software Development and QA & Testing, are available to all logged in users of the website.

There are other sections that are accessible only by logged in administrators using the ‘Private’ menu heading and the top bar’s quick link:

For non-admin logins, the Private menu heading link and top bar’s quick link are not accessible.

This restricted access to specific front and back end sections and page content is setup via the Advanced Access Manager Premium plugin’s console. It is possible to set up the access restrictions by WP role (Administrator, Editor, Contributor and Subscriber), by user, etc.

4. UI Navigation (Front-end):

This was one of the more challenging parts of getting this page-centric website to be UI friendly! We knew the Theme’s Search widget worked very well to find pages by title or keyword, but we needed to find how to auto-generate page menus for each section of pages, as well as provide multiple ways to access a child, grandchild or parent page. 3 plugins did this for us.

Besides the static header section menu and the top quick links bar, from a section landing page below you can see the other navigational options setup for accessing the directory structure of pages:

The 3 red highlighted areas above showing the page navigation options are:

  1. At the top of every page, except the home landing page, there is a navigation Breadcrumb – provided by the Breadcrumb plugin, displaying the hierarchical path of the current page with dynamic links to go up a page level quickly.
  2. Contents list of all the section’s pages by parent – using only a short-code working with the Page-List  plugin. This is an auto-generated list of parent and child pages of dynamic links. This is such a simple solution, but this is the only plugin we could find to do this the way we wanted it displayed. With all the pages in a section, it is sometimes necessary to be able to read all the page titles to find a specific topic.
  3. Right Sidebar displays an auto-generated menu widget that loads on every website page (where a sidebar is visible), provided by the  Advanced Sidebar Menu Pro with accordion drop downs. The titles of each page displayed here can be easily customized.

5. Page Navigation (Back-end):

The WordPress Dashboard default Page’s listing work adequately to scroll through if there are less than 2 screens of page titles, but with more than 30 screens of pages – a better system was needed! Even the WP default Page Search does not work efficiently for finding a page by title keyword.

WP Default Page Menu:

The  Swifty Page Manager plugin provides a means of quickly accessing the page and section structure, allowing editing of page, adding new page, deleting a page, etc.:

Two other plugins we found very helpful when transferring the tree hierarchy of content from the page-focused CMS subscription service were CMS Tree Page View and Admin Menu Tree Page View. The high number of pages, and the very small font of the plugins limited the usefulness of the plugins going forward. The Swifty Page Manager console is easy to read and work with – other than its annoying ‘rewriting’ the screen after every saved change.

6. Azure Portal Setup:

  • App Service Plan: Standard 1.
  • Custom Domain
  • SSL Cert & HTTPS Binding
  • Install WP
  • HTTPS redirect to web.config – URL ReWrite Scriptpasted via Kudu
  • Azure Backup/Restore
  • Configure Azure Blob Storage for media/file delivery to website

7. Divi Theme Customizations:

  • Made the header and footer fixed to frame each webpage
  • Changed to custom footer text from the default ‘Powered by WordPress’
  • Setup narrow top Quick Links Navigation Menu
  • Add CSS (If not adding via the child-theme, since Divi theme has an ‘Additional CSS’ option that is persistent/protected with theme updates)

8. Customizations in Child-Theme:

  • In functions.php:
  • Remove WP logo from Admin bar
  • Replace ‘Howdy’ on Admin bar to ‘Logged in as’
  • Disable all automatic theme updates
  • Disable all automatic plugin updates
  • In wp-config.php
    • Disable major and development updates
  • Add phpfile for the Breadcrumb plugin to work
  • In style.css:
  • Add Custom CSS for setting up Table colours:

tr:nth-child(even) {background-color: #f2f2f2}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}

9. Plugins Used:

  • Copy the page.php from main theme into the child-theme. Style the breadcrumb in Settings. Insert the short code provided in the settings, above the php for loading before the title

Read all of the other posts in our series on Creating Azure (hosted) WordPress Websites without knowing php or MySql!