Customizing the Management Dashboard of a SaaS Service

Overview

If a custom domain is available, KurocoEdge can be applied even for SaaS. This means that even in parts that cannot be edited normally, you can customize them by applying KurocoEdge if you are using a service that allows you to operate the management dashboard on a custom domain.

In this tutorial, we will explain how to customize the management dashboard of WordPress using KurocoEdge as an example.

What you will learn

We will explain the following methods:

• Installing KurocoEdge
• Changing the Login Page Logo Image
• Changing the destination when the logo is clicked
• Hiding unnecessary header menus
• Changing the label of the side menu
• Adding a link to the side menu
• Changing the order of the side menu
• Removing unnecessary blocks from the dashboard
• Hiding the Parent Category Setting

Prerequisites

info

Due to the issue of Cross-Site Request Forgery, the login function will not work if the KurocoEdge domain and the WordPress URL do not match.
Before setting specific rules, you need to match the KurocoEdge domain with the WordPress management dashboard domain.

Installing KurocoEdge

Adding a Backend URL

Add the domain of your WordPress site to the KurocoEdge management dashboard.
Click [KurocoEdge] -> [Backend List] in the side menu.

Click the [Add] button in the upper right corner of the Backend List page.

The backend host addition screen will appear, so configure it as follows:

Item	Value
Backend Address	Enter the IP address of the server where WordPress is installed
Backend Port	443
Override Host	Enter the domain of the WordPress management dashboard
Enable TLS Connection	Check the box
Enable TLS Certificate Check	Check the box
First byte timeout	15 seconds

After the configuration is complete, click [Add] to add the backend host.

Creating a Deployment

Prepare a deployment to customize the WordPress management dashboard.

Clone any deployment from the deployment list page and configure the following settings:

Item	Value
Default Backend	Select the IP address of the server where WordPress is installed
Rules	Empty

After the configuration is complete, click [Deploy] to start the deployment.

Setting the KurocoEdge Domain

Click [Environment Settings] -> [Custom Domain/TLS Certificate].

Enter the domain of the WordPress management dashboard and click [Add].

tip

No trailing slashes, directories, etc. are required for the step above.

danger

Once added, the custom domain cannot be changed. If you have entered it incorrectly, please contact support.
Inquiry Form

Setting up DNS records

When you enter your KurocoEdge domain, the DNS settings will be displayed. Set the CNAME settings shown in "Confirming Domain Ownership" and "DNS Records for Using the Domain".

caution

Until the steps in Changing the KurocoEdge Domain are completed, the configured domain will not be displayed.

Wait for the DNS settings to be applied. Once you have confirmed that "Confirming Domain Ownership" is OK, proceed to the next step.

Changing the KurocoEdge Domain

Next, change the Kuroco Edge domain from the account settings.
Click [Environment Settings] -> [Account Settings].

Check the custom domain set in Kuroco Edge Domain, and check "Change" and click "Update".

That's it for setting up KurocoEdge.
You are now ready to customize the WordPress admin screen.

Customizing the WordPress Admin Screen

Here are some rules for customizing the WordPress admin screen.
You cannot edit a active deploy, so set the rules after cloning the deployment and check the operation in preview mode.

Changing the Login Page Logo Image

Change the logo image on the login page.

Uploading the Image to KurocoEdge

Click [File Manager] from the side menu.

Upload the image to be used for the change.

For later use, right-click on the image and click [File Path] in the menu that appears to copy the hostname and URL path that are displayed.

Creating a Rule

Create a rule as follows on the rule addition screen.

URL Path Pattern to Apply

To limit it to the login page of the admin screen, enter /wp-login.php.

Click on the Response tab and configure as follows.

Execution

Item	Setting
Field setting	HTML editor
General	CSS Selector: .login h1 a
Tag Attribute	Action: Set Attribute Name: style Value: background-image:url(hostname+URL path copied from the file manager earlier)

Once the settings are complete, click [Update] to save the settings.

Checking the display

Click the [Preview] button in the upper right corner of the rule editing page to check the display, and you can confirm that the logo image has changed.

Changing the destination when the logo is clicked

By default, the link destination of the login page logo is https://wordpress.org/ if the site language is English, and https://ja.wordpress.org/ if it is Japanese. In this tutorial, we will change it to https://kuroco.app/ja/ as an example.

Creating a rule

Create a rule as follows on the rule addition page.

URL path pattern to apply

To limit it to the administration login page, enter /wp-login.php.

Click on the Response tab and configure as follows.

Execution

Item	Setting
Field setting	HTML editor
General	CSS selector: .login h1 a
Tag attribute	Action: Set Attribute name: href Value: https://kuroco.app/

After configuring, click [Update] to save the settings.

Checking the display

Click the [Preview] button in the upper right corner of the rule editing page to check the display, and you can confirm that the link destination of the logo has been changed.

Hiding unnecessary header menus

In this tutorial, we will hide the comment icon and count in the header menu.

Creating a rule

Click on the Response tab on the rule addition page and create a rule as follows.

Execution

Item	Setting
Field setting	HTML editor
General	CSS selector: #wp-admin-bar-comments Action: Hide

After configuring, click [Update] to save the settings.

Checking the display

Click the [Preview] button in the upper right corner of the rule editing page to check the display, and you can confirm that the comment icon and number are hidden.

Changing the label of the side menu

Change the label of the side menu. In this tutorial, we will change "Posts" to "Articles" as an example.

Creating a rule

Click on the Response tab on the rule addition page and create a rule as follows.

Execution

Item	Setting
Field setting	Text replace
From	Posts
To	Articles

After configuring, click [Update] to save the settings.

Confirming the display

Click the [Preview] button in the upper right corner of the rule editing page to confirm the display, and you can see that the label has been changed.

Adding a link to the side menu

Add a new link to the side menu. In this tutorial, we will display the menu under "Posts" as "Post Categories" between "Posts" and "Media".

Check and copy the HTML structure

Right-click on the WordPress admin screen and click [View Page Source] from the menu that appears.

Press "Ctrl+F" on Windows or "cmd+F" on Mac to display the search box, and search for "menu-posts" to check the HTML of the "Posts" section of the side menu. Copy everything from <li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-post open-if-no-js menu-top-first" id="menu-posts"> to </li>.

Creating a rule

Click on the Response tab of the rule addition screen and create a rule as follows:

Execution

Item	Setting
Field setting	HTML Editing
General	CSS Selector: #menu-posts
HTML Insertion	Insertion Position: Insert after the element HTML: Enter the following code by editing the copied code earlier.

<li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-post open-if-no-js menu-top-first" id="menu-posts-category">
    <a href='edit-tags.php?taxonomy=category' class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-post open-if-no-js menu-top-first" aria-haspopup="true">
        <div class="wp-menu-arrow">
            <div></div>
        </div>
        <div class='wp-menu-image dashicons-before dashicons-admin-post' aria-hidden='true'><br />
        </div>
        <div class='wp-menu-name'>Post Categories</div>
    </a>
</li>

Once the settings are done, click [Update] to save the settings.

Confirming the display

Click the [Preview] button in the upper right corner of the rule editing page to confirm the display, and you can see that the link has been added.

Changing the order of the side menu

Change the order of the side menu. In this tutorial, we will swap the order of "Posts" and "Media".

Check and copy the HTML structure

Right-click on the WordPress admin screen and click [View Page Source] from the menu that appears.

Press "Ctrl+F" on Windows or "cmd+F" on Mac to display the search box, and search for "menu-posts" to check the HTML of the "Posts" section of the side menu. Copy the menu element of "Posts".

Creating Rules

Click on the Response tab of the Add Rule screen and create the following rules.

Execution

Create two items.

Item 1

Item	Settings
Field settings	HTML editor
General	CSS Selector: #menu-posts Delete/Hide: Delete

Item 2

Item	Settings
Field settings	HTML editor
General	CSS Selector: #menu-media
HTML Insertion	Insertion Position: Insert after the element HTML: Enter the following code by editing the code copied earlier.

<li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-post open-if-no-js menu-top-first" id="menu-posts">
    <a href='edit.php' class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-post open-if-no-js menu-top-first" aria-haspopup="true">
        <div class="wp-menu-arrow">
            <div></div>
        </div>
        <div class='wp-menu-image dashicons-before dashicons-admin-post' aria-hidden='true'><br /></div>
        <div class='wp-menu-name'>Posts</div>
    </a>
    <ul class='wp-submenu wp-submenu-wrap'>
        <li class='wp-submenu-head' aria-hidden='true'>Posts</li>
        <li class="wp-first-item">
            <a href='edit.php' class="wp-first-item">All Posts</a>
        </li>
        <li>
            <a href='post-new.php'>Add New</a>
        </li>
        <li>
            <a href='edit-tags.php?taxonomy=category'>Categories</a>
        </li>
        <li>
            <a href='edit-tags.php?taxonomy=post_tag'>Tags</a>
        </li>
    </ul>
</li>

Once the settings are done, click on [Update] to save the settings.

Check the Display

Click on the [Preview] button at the top right of the Rule Editing page to check the display. You can confirm that the order has been changed.

Removing Unnecessary Blocks from the Dashboard

In this tutorial, we will remove the "At a Glance" block as an example.

Creating Rules

Click on the Response tab of the Add Rule screen and create the following rules.

Execution

Item	Settings
Field settings	HTML editor
General	CSS Selector: #dashboard_right_now Delete/Hide: Delete

Check the Display

Click on the [Preview] button at the top right of the Rule Editing page to check the display. You can confirm that the block has been removed.

Hiding the Parent Category Setting

Hide the "Parent Category" setting field displayed on the new/edit category page of the post.

Creating Rules

Create the following rules on the Add Rule screen.

URL Path Pattern to Apply

To limit it to the category editing page in the admin panel, enter ^/wp-admin/edit-tags.php.

Click on the Response tab and configure as follows.

Execution

Item	Configuration
Item Configuration	HTML editor
General	CSS Selector: #addtag > div.form-field.term-parent-wrap Remove/Hide: Hide

Confirm the Display

Click the [Preview] button in the upper right corner of the rule editing page to confirm the display. You can see that the "Parent Category" field is hidden.