Trigger: Click Open -- Use Existing or Custom Selectors to Set a Trigger

This is the third of 5 articles that describe Click Open trigger-setting methods.

Use this method to target HTML selectors (existing or custom), or links (URLs) to set a trigger.

In the Click Trigger Settings box, target an existing or custom HTML attribute in the Extra CSS Selectors field to set a Click Open trigger. Accepted attributes include:

class,
id, and
link (URL).

This method is useful to target areas on themes where HTML attributes cannot be added, such as the site header, footer, widget areas, or visual elements. It can also be used to target HTML attributes that occur repeatedly throughout a site.

HTML attributes are also referred to as CSS selectors, since the attributes are targeted for styling in a CSS stylesheet. The terms 'HTML attributes' and 'CSS selectors' refer to the same thing.

Example Usage -- Adding Target Selector

Target a button -- For every red button on a site with the following HTML:

.button.red-button,

add the combined classes to the Extra CSS Selectors field.

Target a navigation menu element -- For a navigation menu item with the following HTML:

#main-menu ul li.menu-item-37,

add the class name of

.menu-item-37'

to the Extra CSS Selectors field.

If your theme allows, follow the alternate method described in the related article below to set a Click Open trigger on a navigation item.

Target an Existing Link (URL)

Set a Click Open trigger by targeting an existing link (URL).

Note: This step assumes that the targeted link is already set within your site. If the link does not yet exist, go create it now.

Then copy the top-level domain (TLD) of the link URL to a 'clipboard' for use within the trigger. For example, if the target link URL is:

' https://docs.wppopupmaker.com/article/153-shortcode-button',

then the TLD would be:

'https://docs.wppopupmaker.com/'

At the right end of the 'Extra CSS Selectors' field, a caret links to a set of link (URL) targeting options. They include:

Table 1. Link (URL) Targeting Options to Set a Trigger

Link Option	Target URL
Link: Exact Match	Requires an exact URL match
Link: Containing	Target any portion of the URL
Link: Begins With	Target the beginning of the URL
Link: Ends With	Target the end of the URL

Options 2 through 4 above require less specificity to target a link. If the target link changes in the future, these options offer more flexibility in preserving the popup trigger.

The next table shows how each option should be input within the Extra CSS Selectors field.

Table 2. Extra CSS Selector Field Inputs to Target a Link

Field Option	CSS Selector	Field Input
Link: Exact Match	a[href="exact_url"]	a[href*="{add-exact-url-inside-quotes}"]
Link: Containing	a[href*="contains"]	a[href*="{add-TLD-inside-quotes}"]
Link: Begins With	a[href^="begins_with"]	a[href^="{add-TLD-inside-quotes}"]
Link: Ends With	a[href$="ends_with"]	a[href$="{add-end-of-url-inside-quotes}"]

Example Usage -- Adding Target Link

The screenshot below is an example that uses the 'Link: Containing' option. The Click Open trigger targets the TLD of 'https://docs.wppopupmaker.com/'. The TLD replaces the term 'contains' located between the double quotes.

Identify CSS Selectors

The following articles can assist with the identification of CSS selectors using this method.

Related article: Getting CSS Selectors

Recommended browser application: JQuery Unique // Note: For use with the Google Chrome browser.