URL parameters allow you to trigger certain theme features as soon as the page loads.
Modal Parameters
A modal is a popup overlay for displaying content. To see an example of a modal, click here. While modals are typically triggered using a button or link text, you can also use URL parameters to automatically trigger a modal when linking to a page or post. This can be useful when you want to emphasize an important message or call to action on a particular page. For example, you might want to display an optional subscription form to the user immediately upon visiting your homepage or blog post.
Trigger a Modal Post
A Modal Post allows you to display the same modal on multiple pages. This is much more convenient than manually adding the same modal content on each page, and any edits to a specific Modal post will automatically be reflected across the entire site. Before using URL params to trigger a Modal post, you must first add a Modal post by going to “Modals” in the WordPress Dashboard. This is similar to adding a Blog Post. Enter a title for the modal and the modal content.
[screenshot of “Modals” in dashboard]
When you are finished editing, publish the Modal post and then be sure to copy the Modal post ID from the URL address bar of your browser. You will need this later. Example:
[screenshot of post ID in browser toolbar]
Now that you have the Modal post ID, you can use it with URL parameters to trigger a modal on any page or post Example:
https://demo.duende.us/?modal=344&tr=0&g=0Attributes
modal int
Required. The Modal post ID.
tr bool
Optional. Defaults to “false”. Sets the trigger event. If value is set to “true” or “1”, then the modal will be triggered on page scroll. Otherwise, the modal will be triggered on page load.
g bool
Optional. Defaults to “false”. Sets the modal gating. If value is set to “true” or “1”, then the modal will be gated, meaning that dismissing the modal with redirect the user to whatever URL is specified with the rurl parameter. Otherwise, the modal will be ungated and dismissing the modal will simply collapse the modal and allow the user to view the current page.
rurl string
Optional. Sets the redirect URL for when the modal is gated. Please note: You must encode your URL before setting the parameter value. Example:
https://demo.duende.us/?modal=344&g=1&rurl=http%3A%2F%2Fdemo.duende.us%2FYou can use this URL encoder tool to quickly encode your URL.
Trigger an Existing Modal
If the modal already exists as part of the page/post content, you can use the following URL parameter to automatically trigger the modal:
https://demo.duende.us/?modal_id=my-modal-idAttributes
modal_id string
Required. The HTML “id” attribute of the modal.
Trigger a Team Member Modal
A Team Member Modal is a popup overlay that contains a slideshow of Team Members. Before using this feature, make sure you have completed the following steps:
- Add one or more Team Member posts by going to “Team” in the WordPress Dashboard:
[screenshot of “Team” in dashboard]
You can find each Team Member post ID from the URL address bar of your browser while you are editing that Team Member. You will need these post IDs later. Example:
[screenshot of post ID in browser toolbar] - Add a Team Member Modal to the page/post you are linking to using the Team Member Modal Shortcode. You can use the Team Member post IDs you copied in the previous step to include specific Team Members in the modal slideshow.
After you have completed the previous steps, you can use the following URL parameters to trigger the modal and display a specific Team Member:
https://demo.duende.us/?id=my-modal-id&t=marsha-mellowAttributes
id string
Required. The HTML “id” attribute of the modal.
t string
Optional. The post slug for the Team Member you want to display when the modal launches. If parameter is missing, the first Team Member in the slideshow will be displayed. Please note: In order to be displayed, the specified Team Member must already exist in the modal slideshow.