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.

Related article:  Learn more about CSS selectors from 'w3schools.com'. 

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. 

Related article:  Trigger: Click Open -- Add a Popup to a Navigation Menu 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.