In the tutorial requests forum, a user posted:

Hello Sridhar!

is it possible to create a custom dashboard with a welcome message, some FAQs and a contact form to facilitate the on-boarding process when working with clients? :slight_smile:

(This is a tutorial doing it in Elementor: https://elementor.com/custom-dashboard/?utm_source=facebook.com&utm_medium=social&utm_campaign=-learn-how-to-create-a-personalized-da&utm_content=218369841)

This members-only tutorial provides the steps to setup a Oxygen Template and display it as the dashboard page in WordPress.

Note:

  • In the Oxygen template, classes need to be added and the CSS attached to them. CSS set for IDs does not work in the method used.
  • For certain elements like h2 headings, CSS will be overridden by the WordPress' defaults CSS. In such cases, you would need to inspect the elements in the dashboard and add CSS that overrides it. Sample code for this is included.
  • In my testing Ninja Forms form does not appear. Gravity Forms works fine.

Step 1

Install and activate Code Snippets plugin.

Add a new Snippet named say, "Return current user's display name" having the following code:

function sk_current_user_display_name() {
    $current_user = wp_get_current_user();

    return $current_user->display_name;
}

Set it to run everywhere.

Step 2

Create a Oxygen Template named say "Client Dashboard".

Set it to NOT inherit from other templates.

If you would like to try importing the one from this tutorial/my test site, click on +Shortcodes toggle, paste this text and publish/update.

If using a Columns element, add a class of say, welcome-columns.

Sample class for left div: welcome-left
Sample class for right div: welcome-right

There is no point in setting a class for heading elements since the CSS will be overridden by WordPress. We will tackle this in Step 4.

Here's the shortcode I used to show a Gravity Forms form having a ID of 1 in a Shortcode element:


                
  • This field is for validation purposes and should be left unchanged.

To dynamically show the current logged in user's Display Name, add a Heading element, type say "Welcome " and then click on "Insert Data" button at the top, scroll down to Advanced > PHP Function Return value and paste sk_current_user_display_name for the Function Name.

Step 3

Go to Oxygen > Templates, click on the template and note the ID of the template.

Step 4

Add a new Code Snippet named say, "Custom Welcome Dashboard Panel in Oxygen" having the following code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Hi Sridhar, I would love to be able to make a custom dashboard with Oxygen. I followed the steps above (except the personalization), but my dashboard stays totally empty. The only thing that changes, is when clicking on the Dashboard menu item, al the other menu items in the admin panel change in the frontend body text font, and the footer text is in the top (just below the ‘Dashboard’ text) What could have gone wrong?
    Thank you!

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: