• Documentation – Constellation Client Portal

    Documentation – Constellation Client Portal

    Installation

    Manually Install the Plugin (Pro Version)

    1. Download the plugin from your My Account page (downloads tab), if you have not done so already.
    2. Within WordPress, navigate to Plugins and click “Add New”.
    3. Next, click “Upload” plugin, locate the plugin zip file that you just downloaded, and select it.
    4. Next, click “Install Now.”
    5. Lastly, click “Activate Plugin” and the plugin is ready for use and configuration.

    Upgrade from the Core version to the Pro Version

    1. Navigate to WordPress Admin -> Plugins.
    2. Locate the “Constellation Client Portal” plugin in the list (the core/basic version) and click “Deactivate.”
    3. Once the basic version of “Constellation Client Portal” is deactivated, install and activate Constellation Client Portal Pro by following the installation instructions above.
    Note: Once you have installed the pro plugin, you can safely remove the core plugin, and your existing data will not be lost. Also, multiple versions of the Constellation Client Portal plugin (example the Core and Pro versions) should never be active at the same time.

    Quick Start

    The steps in the Quick Start section will guide you through the initial set up of your plugin (creating a company, creating a company page, assigning a user to a company, creating an invoice and/or file and assigning it to a company), and provide the initial foundation for your client portal.

    Onboard a Company (create a new company)

    1. Navigate to Client Portal -> Companies and click “Add New”.
    2. Enter a name for the company in the post title field.
    3. Locate the “Company Home Page” section in the sidebar.
    4. Company Home Page – If you have already created a Client Page for this company, you can select it in the “Company Home Page” select field, otherwise, click the “Create New Page” button, enter a title for the page, and click “Generate Page.” This will create a new blank Client Page that you can layout and style later.
    5. Primary User – In the “Company Primary User” section, either select an existing WordPress user, or click the “Create New Primary User” button to assign a primary user for this company.
    6. Optionally, select a status for the company in the “Company Status” field.
    7. Lastly, save/publish the Company post, and the Company is now provisioned, with a home page assigned (useful if login redirection Pro feature is enabled).

    Onboard a User (assign a WordPress user to a Company)

    This section details how to assign additional users to a company (if needed), beyond the primary user that was assigned in the Onboard a Company section above.

    Prerequisite: A Company must be created before proceeding with the below steps.

    Create a New WordPress User
    1. Navigate to Users in the WordPress Admin menu and click “Add New”.
    2. Populate the standard WordPress user data (and/or the minimum data needed for your operation).
    3. Locate the “Company” field in the “Client Information” section and select a company from the list to assign the user to that company.
    4. Lastly, click “Add New User” to add the user.
    Assign an Existing WordPress User to a Company
    1. Navigate to Users in the WordPress Admin menu and locate the user to edit.
    2. Open the user’s profile and locate the “Company” field in the “Client Information” section.
    3. Select a company from the list to assign the user to that company.
    4. Lastly, click “Update User” to save the user.

    Create an Invoice and Assign It to a Company

    Prerequisite: A Company must be created before proceeding with the below steps. Pro Prerequisite: a product should be created in WooCommerce if you are intending to accept payments for this invoice via WooCommerce, and your WooCommerce store should be fully configured and ready to accept payments.
    1. Navigate to Client Invoices in the WordPress Admin menu and click “Add New”.
    2. Enter a title for the invoice (this is the title displayed to users on the front-end).
    3. Select the Invoice Status (this defaults to “unpaid”).
    4. Upload a pdf invoince in the “Upload a File” section (optional).
    5. Select a company in the “Assign Company” field.
    6. Pro Feature – Enter a due date in the “Due Date” field (optional)
    7. Pro Feature – Select a WooCommerce product in the “Invoice Product” field for the product that is associated with this invoice, if you intend to accept payments for the invoice via WooCommerce (optional).
    8. Lastly, save the invoice, and it is now ready to be displayed on pages via shortcodes.

    Create a File and assign It to a company

    Prerequisite: A Company must be created before proceeding with the below steps.
    1. Navigate to Client Files in the WordPress Admin menu and click “Add New”.
    2. Enter a title for the file (this is the title displayed to users on the front-end).
    3. Upload a file in the “Upload a File” section (optional).
    4. Select a company in the “Assign Company” field.
    5. Lastly, save the file, and it is now ready to be displayed on pages via shortcodes.

    Layout a Client Page and Add File and Invoice Lists to the Page

    1. Navigate to WordPress Admin -> Client Pages.
    2. Locate the page that you would like to edit in the list, and open it.
    3. Enter a title for the page if one is not already entered.
    4. Select a company to assign the page to in the “Assign Company” field if not already assigned.
    5. The page can now be laid out and designed in the editor field like any other WordPress page.
    6. Configure a list shortcode (WordPress Admin -> Client Portal Pro -> Settings -> Add New List), and paste the resulting shortcode onto the page after saving your settings. This will display file or invoice posts on the page (depending on how you configure the list/shortcode). Please see the shortcodes section on this page for information on customizing file and invoice post lists.
    7. Lastly, save/publish the post to make the page available to clients and customers.

    Quick Start Plugin Settings

    1. Navigate to WordPress Admin -> Client Portal Pro -> Settings.
    2. Pro Feature – Login Redirection – If you do not already have login redirection implemented through another plugin you can choose to redirect users on login by selecting an option in the “Client Login Redirect” field.
    3. Pro Feature – Automatically Mark Client Invoices as Paid – If you have WooCommerce enabled and configured, you can choose how you would like to handle the invoice status when a WooCommerce order is completed. To do so, navigate to “Invoices” then select an option in the “Automatically Mark Invoices as Paid” field.
    4. Pro Feature – Pay All Functionality – If you have WooCommerce enabled and configured, you can enable pay-all functionality in the “Pay-All Functionality for Invoices” field on the invoice settings page. This will allow clients to add all displayed invoices to the cart at once, for cases in which there are more than one unpaid invoice.
    5. Lastly, click the “Save Changes” button, when finished.

    Access Controls

    The next important step in your implementation process is to familiarize yourself with the client portal access controls and implement restrictions to your client portal assets to suit the needs of your operation.

    List Shortcodes

    Create/Edit List Shortcodes

    Shortcodes for file and invoice post lists can be created and edited, by navigating to WordPress Admin -> Client Portal Pro -> Settings -> Lists.

    Once you have configured and saved a list shortcode, the resulting shortcode can then be pasted into client pages to display the list on the front-end.

    Upgrade Legacy Pro or Core Shortcodes to New Shortcodes

    The new pro shortcodes (as of version 1.7.0) allow for easier implementation, and allow for theme customization.

    Upgrading your legacy shortcodes to the new shortcodes can be done as follows.

    1. Navigate to WordPress Admin -> Client Portal Pro -> Settings -> Lists and create a new list for each of your existing legacy shortcodes.
    2. Configure each shortcode to match settings/parameters of each existing legacy shortcode.
    3. Replace each legacy shortcode within your client pages with the corresponding new shortcode, and save the client page to save the changes.

    List Shortcode Settings

    Below is a list of the list shortcode settings fields.

    • Title – This field is only visible to WordPress admins and just serves as a label to help you quickly identify a specific list.
    • List Type – This determines whether the list type will display File, Invoice, or Global File posts.
    • Status – This field can be left empty to display posts with any status, or you can select one or more statuses to limit the list to only posts that have the specified statuses assigned.
    • Display Pay Button – If enabled, this will display a pay button for each unpaid invoice if the post has a product saved to it. This setting only applies to invoice list types where the “Unpaid” is selected in the status setting field.
    • Display Item Total – If enabled, this will display the item total within each unpaid invoice if the post has a product saved to it. This setting only applies to invoice list types.
    • Display Itemized Lines – If enabled, this will display itemized product lines within each unpaid invoice if the post has a product saved to it. This setting only applies to invoice list types.
    • Display Pay All Total – If enabled, this will display the total of all “unpaid” invoices in a list. This setting only applies to invoice list types, in which the invoices posts have a status of “unpaid” saved to them, and the global option to enable “pay all” functionality is enabled.
    • Override Pay Button Text – This setting only applies to invoice list types, and allows you to override the default pay button text.
    • Display Due Dates – This allows for due dates to be displayed if a due date is saved to the post.
    • Display Past Due Notices – This allows for past due notices to be displayed if a due date is saved to the post, and the current date is past the due date.
    • Override Past Due Text – This setting allows you to override the default past due notice text.
    • Pagination Posts Per Page – This setting allows you to set the number of posts to display per page. If this field is empty all posts that fit the list criteria will be displayed (unpaginated).
    • List Order By – This setting allows you to order posts by the post date or post title.
    • List Order – This setting allows you to set the list order as either ascending or descending.
    • Post Excerpt – This setting allows you to display the post excerpt if one is saved to the post.
    • Excerpt Length – This setting allows you to limit the number of words to display in post excerpts.
    • Post Thumbnail – This setting allows you to display the post thumbnail (featured image) if one is saved to the post.
    • Thumbnail Size – This setting allows you to select the thumbnail size to display from a list of thumbnails that are defined in your theme.
    • Thumbnail Alignment – This setting allows you to select the thumbnail alignment.
    • Display Post Date – This setting allows you to display the post date of the post.
    • Display Post Status – This setting allows you to display the file or invoice post status (not the WordPress post status) if a status is saved to the post.
    • Disable Link Post Title – This setting allows you to disable the link on the post title that links to the single post page.
    • Categories – This setting allows you limit the list to only posts in the specified categories. If left empty, posts in all categories will be included.
    • Excluded Companies – This setting allows you to prevent specified companies from viewing the list. If left empty, all companies will be able to view the list. This setting only applies to global file list types.
    • Excluded Users – This setting allows you to prevent specified users from viewing the list. If left empty, all users will be able to view the list.
    • Excluded Roles – This setting allows you to prevent users with specified roles from viewing the list. If left empty, users with any role will be able to view the list.
    • CSS Container ID – This setting allows you to add a single ID to the list container. Only a single name with no spaces and no hashtag (#) should be entered (example: custom-name).
    • CSS Container Class – This setting allows you to add additional classes to the list container. Multiple values should be separated by a space, and should contain no periods (example: custom-name1 custom-name2).

    List Shortcode Theme Settings

    Below is a list of the list shortcode theme settings fields.

    • List Style – This setting determines whether the post list is displayed in a list or grid layout.
    • Item Style – Background Color – This setting allows you to override the default list item background color.
    • Item Style – Background Opacity – This setting allows you to adjust the background opacity, where 0 is completely transparent, and 1 is completely opaque.
    • Item Style – Border Width – This setting allows you to override the default border width for the list item. The value can be set to 0 to disable the border.
    • Item Style – Border Style – This setting allows you to override the default border style for the list item.
    • Item Style – Border Color – This setting allows you to override the default border color for the list item.
    • Item Style – Border Corner Quantity – This setting allows you to set the border radius amount, which determines how much the list items will be rounded. Leave blank or enter 0 for 90 degree corners.
    • Item Style – Border Corner Unit – This setting determines the border radius measurement unit to use (either pixels or percent) to determine the border radius.
    • Item Style – Drop Shadow Settings – These settings allow you to add a drop shadow (box shadow) to list items. If you are unsure of which values to adjust, click the “Apply Defaults” button to apply the default drop shadow settings. Leave the settings blank to disable the list item drop shadow.
    • Item Style – Heading Color – This setting allows you to override the default list item heading color. If a color is set here, it will apply to both non-hyperlinked and hyperlinked headings.
    • Item Style – Text Color – This setting allows you to override the default list item text color.
    • Item Style – Link Color – This setting allows you to override the default list item link color.
    • Button Color – This setting allows you to override the default button background color.
    • Button Border Width – This setting allows you to add a border to list item buttons (example: invoice pay buttons). The value can be set to 0 to disable the border.
    • Button Border Style – This setting determines the button border style.
    • Button Border Color – This setting determines the button border color.
    • Button Border Corner Quantity – This setting allows you to set the border radius amount, which determines how much the button will be rounded. Leave blank or enter 0 for 90 degree corners.
    • Button Border Corner Unit – This setting determines the border radius measurement unit to use (either pixels or percent) to determine the border radius.
    • Button Text – This setting allows you to override the default button text color.
    • Hover Button Text – This setting allows you to set the button hover text color.
    • Hover Button Color – This setting allows you to set the button hover color.
    • Hover Button Border Width – This setting allows you to add a border to list item buttons (example: invoice pay buttons) on button hover. The value can be set to 0 to disable the border.
    • Hover Button Border Style – This setting determines the button hover border style.
    • Hover Button Border Color – This setting determines the button hover border color.
    • Past Due Notice Color – This setting allows you to override the past due notice background color.
    • Past Due Notice Border Width – This setting allows you to add a border to past due notices. The value can be set to 0 to disable the border.
    • Past Due Notice Border Style – This setting determines the past due notice border style.
    • Past Due Notice Border Color – This setting determines the past due notice border color.
    • Past Due Notice Corner Quantity – This setting allows you to set the border radius amount, which determines how much the past due notice will be rounded. Leave blank or enter 0 for 90 degree corners.
    • Past Due Notice Corner Unit – This setting determines the border radius measurement unit to use (either pixels or percent) to determine the border radius.
    • Past Due Notice Text – This setting allows you to override the default past due notice text.

    Invoice Shortcode – [accp_clientinvoices]

    The following information pertains to core and legacy pro shortcodes only. Pro users should configure lists/shortcodes in WordPress Admin -> Client Portal Pro -> Settings -> Lists.

    The “accp_clientinvoices” shortcode allows you to display lists of client-specific invoice posts on client pages.

    DEPRECATED in the Pro Version

    You can also customize the look and functionality of your invoice lists using the attributes listed below.

    Note: While this shortcode does not have any required attributes, it is best to embed shortcodes that are limited to a single invoice status (i.e. either “paid” or “unpaid”). In most cases, this will provide a better experience for your clients and customers.

    Example of Shortcode with All Attributes Set: 
    [accp_clientinvoices invoice_status="unpaid" display_pay_btn="true" categories="category1-slug, category2-slug" display_number="20" order_by="title" order="ASC" show_excerpt="true" excerpt_length="50" show_thumbnail="true" thumbnail_size="portfolio" align_thumbnail="center" show_post_date="true" due_date="true" past_due_notice="true" exclude_user="53" exclude_role="Subscriber"]
    Attributes
    • invoice_status this is the payment status of the invoice. Accepted Values: “paid” or “unpaid”. Default: “unpaid”.
    • display_pay_btn this will display a pay button if the “invoice_status” attribute is set to “unpaid” and a WooCommerce product id has been entered in the invoice. Accepted Values: “true” or “false”. Default: “false”.
    • due_date this will display the due date if a due date has been entered in the invoice. Accepted Values: “true” or “false”. Default: “false”.
    • past_due_notice this will display a “Past Due” label for each item that has a status of “unpaid” and the current date is after the “due_date”. Accepted Values: “true” or “false”. Default: “false”.
    • display_number this is the number of posts per page. Accepted Values: any positive whole number. Default: -1 (which displays all posts returned in a query).
    • order_by this allows for lists to be sorted by post title instead of date. Accepted Values: “title” or “date”. Default: “date”.
    • order this allows the sort order to be changed. Accepted Values: “ASC” or “DESC”. Default: “DESC”.
    • show_excerpt this allows for a post excerpt to be displayed with each list item. Accepted Values: “true” or “false”. Default: “false”.
    • excerpt_length this allows you to constrain the number of words, “show_excerpt” is set to “true”. Accepted Values: any positive whole number. Default: null.
    • show_thumbnail this allows the featured image to be displayed with each list item (if a featured image is set). Accepted Values: “true” or “false”. Default: null.
    • thumbnail_size this allows you to choose an image size if the “show_thumbnail” attribute is set to “true”. Accepted Values: any valid thumbnail slug that is available in your theme (ex. “full”). Default: null.
    • align_thumbnail this allows the thumbnail image alignment to be set if the “show_thumbnail” attribute is set to “true”. Accepted Values: “center”, “left”, “right”, “float-left”, or “float-right”. Default: null.
    • show_post_date this allows for the WordPress post date to be displayed with each item in a list. Accepted Values: “true” or “false”. Default: “false”.
    • categories Accepted Values: this can be entered as an Invoice Category Slug or ID, or a combination of those. Separate multiple values with a comma (ex. “21, category-a”). Default: null.
    • exclude_user this allows you to prevent specific users from viewing items in the list. Accepted Values: the WordPress user ID(s). Separate multiple values with a comma (ex. “21, 45”). Default: null.
    • exclude_role this allows you to prevent specific roles from viewing items in the list. Accepted Values: the WordPress role name. Separate multiple values with a comma (ex. “Subscriber, Editor”). Default: null.
    • css_id this is an optional parameter that allows for an HTML attribute ID name to be added to the list container div. Accepted Values: any valid HTML ID attribute name. Default: null. Note: the “id” parameter is reserved for pro shortcodes that are generated in the plugin settings.
    • class this is an optional parameter that allows for additional class names to be added to the list container div (separate multiple class names with a space). Accepted Values: any valid HTML class name. Default: null.
    • link_title this is an optional parameter that will remove the href from post titles in the list and make them unclickable if the value is set to “nolink”. Accepted Values: “nolink”. Default: null.

    File Shortcode – [accp_clientfiles]

    The following information pertains to core and legacy pro shortcodes only. Pro users should configure lists/shortcodes in WordPress Admin -> Client Portal Pro -> Settings -> Lists.

    The “accp_clientfiles” shortcode allows you to display lists of client-specific file posts on client pages.

    DEPRECATED in the Pro Version

    You can also customize the look and functionality of your file lists using the attributes listed below.

    Example of Shortcode with All Attributes Set: 

    [accp_clientfiles categories="category1-slug, category2-slug" display_number="20" order_by="title" order="ASC" show_excerpt="true" excerpt_length="50" show_thumbnail="true" thumbnail_size="portfolio" align_thumbnail="center" show_post_date="true" due_date="true" past_due_notice="true" exclude_role="Subscriber" exclude_user="32"]
    Attributes

    • categories Accepted Values: this can be entered as a File Category Slug or ID, or a combination of those. Separate multiple values with a comma (ex. “21, category-a”). Default: null.
    • due_date this will display the due date if a due date has been entered in the file. Accepted Values: “true” or “false”. Default: “false”.
    • past_due_notice this will display a “Past Due” label a due date has been entered, and the current date is after the “due_date”. Accepted Values: “true” or “false”. Default: “false”.
    • display_number this is the number of posts per page. Accepted Values: any positive whole number. Default: -1 (which displays all posts returned in a query).
    • order_by this allows for lists to be sorted by post title instead of date. Accepted Values: “title” or “date”. Default: “date”.
    • order this allows the sort order to be changed. Accepted Values: “ASC” or “DESC”. Default: “DESC”.
    • show_excerpt this allows for a post excerpt to be displayed with each list item. Accepted Values: “true” or “false”. Default: “false”.
    • excerpt_length this allows you to constrain the number of words, “show_excerpt” is set to “true”. Accepted Values: any positive whole number. Default: null.
    • show_thumbnail this allows the featured image to be displayed with each list item (if a featured image is set). Accepted Values: “true” or “false”. Default: null.
    • thumbnail_size this allows you to choose an image size if the “show_thumbnail” attribute is set to “true”. Accepted Values: any valid thumbnail slug that is available in your theme (ex. “full”). Default: null.
    • align_thumbnail this allows the thumbnail image alignment to be set if the “show_thumbnail” attribute is set to “true”. Accepted Values: “center”, “left”, “right”, “float-left”, or “float-right”. Default: null.
    • show_post_date this allows for the WordPress post date to be displayed with each item in a list. Accepted Values: “true” or “false”. Default: “false”.
    • exclude_user this allows you to prevent specific users from viewing items in the list. Accepted Values: the WordPress user ID(s). Separate multiple values with a comma (ex. “21, 45”). Default: null.
    • exclude_role this allows you to prevent specific roles from viewing items in the list. Accepted Values: the WordPress role name. Separate multiple values with a comma (ex. “Subscriber, Editor”). Default: null.
    • css_id this is an optional parameter that allows for an HTML attribute ID name to be added to the list container div. Accepted Values: any valid HTML ID attribute name. Default: null. Note: the “id” parameter is reserved for pro shortcodes that are generated in the plugin settings.
    • class this is an optional parameter that allows for additional class names to be added to the list container div (separate multiple class names with a space). Accepted Values: any valid HTML class name. Default: null.
    • link_title this is an optional parameter that will remove the href from post titles in the list and make them unclickable if the value is set to “nolink”. Accepted Values: “nolink”. Default: null.

    Global File Shortcode – [accp_global_files]

    The “accp_global_files” shortcode allows you to display lists of global file posts on client pages, client file posts, client invoice posts, and global file posts, and can be accessed by more than one company.

    Global File shortcodes can be created like file and invoice shortcodes in WordPress Admin -> Client Portal Pro -> Settings -> Lists.

    Company Menu Shortcode – [accp_company_menu]

    The “accp_company_menu” shortcode allows you to display a menu on client pages that is automatically generated from all client pages that are assigned to a given company, and/or you can set the “multi_company_nav” shortcode parameter to “true” to generate a menu comprised of all company home pages that a user is assigned to (useful for users that are assigned to multiple companies).

    You can also customize the look and functionality of your menu using the attributes listed below.

    Note: If the “multi_company_nav” parameter is not set, or not set to “true,” the resulting menu will not display on client pages that are set to global.

    Example to display menu of pages assigned to a single company: [accp_company_menu list_style=”horizontal” align=”right”]

    Example to display menu of all company home pages for user assigned to multiple companies: [accp_company_menu multi_company_nav=”true” list_style=”horizontal” align=”right”]

    Attributes
    • multi_company_nav if specified and set to “true,” this will show the home page for each company that a user is assigned to, and can be displayed on global client pages as well as client pages assigned to a specific company. Accepts ‘true’. Default = null.
    • excluded_page_ids this allows for pages that are assigned to a given company to be excluded from the company menu. Accepts a comma separated list of Client Page ID’s. Default = null.
    • list_style this allows the UL orientation to be change. Accepts ‘vertical’ or ‘horizontal.’ Default = horizontal.
    • align this allows for the menu alignment to be set. Accepts ‘left,’ ‘right,’ or ‘center.’ Default = left.
    • order the menu order. Accepts ‘ASC’ or ‘DESC.’ Default = ‘ASC.’
    • order_by this allows you to set the parameter to order the menu items by. Accepts ‘title,’ ‘menu_order,’ or ‘date.’ Default = ‘title.

    Workflows

    Constellation Client Portal has a lot of options for implementation, and below are several workflows to help get you started. Some of these workflows may work within your operation as is, or you can use these as a reference for creating your own workflows.

    Also, if you have a workflow that you think would be helpful to others, please feel free to let us know.

    View Workflows

    ARS