CiviCRM WordPress shortcode embedded within a tab shortcode does not load

Question

I have a CiviCRM profile that I am using in order to allow a logged-in user to edit his/her address information. In addition, I want to display the user dashboard.

Normally, one would e.g. create a WordPress page and include the corresponding shortcodes like the following:

[civicrm component="user-dashboard" hijack="0"]

[civicrm component="profile" gid="32" mode="edit" hijack="0"]

What I would like to achieve is to display the shortcodes within a tabbed environment, so for example by using the tabs component from Shortcodes Ultimate. An example can be found below:

[su_tabs vertical="yes"]

[su_tab title="Dashboard" disabled="no" anchor="" url="" target="blank" class=""]

[civicrm component="user-dashboard" hijack="0"]

[/su_tab]

[su_tab title="Address Form" disabled="no" anchor="" url="" target="blank" class=""]

[civicrm component="profile" gid="32" mode="edit" hijack="0"]

[/su_tab]

[/su_tabs] 

My problem is: The first tab loads the user dashboard correctly. The second tab does not load anything. My question to the community is if anyone has had any experience with CiviCRM shortcodes embedded within any other shortcode?

Thanks!

Answer 1

CiviCRM can only be "invoked" once per page load, so multiple shortcodes on a page won't be functional. Instead they should display as "teasers" with links to the functional CiviCRM content on your WordPress basepage.

In short, you can't have functional CiviCRM forms unless they are they are the only content on a page.

There are a couple of ways you could do this, however:

• use the Caldera Forms CiviCRM plugin to embed two forms in your tabbed page
• pull in the content of the second tab in via an AJAX request

Personally, I'd ask myself whether implementing tabs is worth the extra development time.