Install from the WordPress Admin

1. Log into your WordPress admin (i.e., your dashboard)

2. Go to Plugins->Add New

3. Type in "Highlight and Share"

After activation, you can find the plugin's settings in the Dashboard under Settings->Highlight and Share.

Install via FTP

1. Download the plugin zip file

2. Unzip the plugin zip in a place you can remember for the next steps

3. Log into your FTP program of choice for your website

After activation, you will be taken to the plugin's settings screen.

Highlight and Share at its core is a highlighter. If users select some text, the user will be shown a row of enabled social networks.

Content Sharing (Text Selection)

Highlight and Sharing displays a small pop-up when a reader highlights text on your site.

Highlight and Share lets you share content in multiple ways, including text highlighting, inline highlighting, and the Click to Share block or shortcode.

To configure Content Sharing, and select the Content Sharing tab.

From there, you can configure which social networks are shown, adjust display settings, and set the appearance settings.

The Social Networks panel lets you enable or disable the various social networks included with Highlight and Share.

Enabling or Disabling a Network

Each can be selected by clicking the checkbox next to each available network.

For convenience, each network that shares text is clearly labeled.

Configuring a Network's Label, Tooltip, and Settings

Click on the Cog icon to view additional settings for a social network.

All networks allow you to edit the label and tooltip for each network.

Setting "X" Additional Settings, Including Default Username and Hashtags

Networks like "X" allow you to set a default username and enable hashtags.

If Hashtags are enabled, they will appear as tags in the post's sidebar settings.

Setting the Default WhatsApp Endpoint

Another special network is WhatsApp. You can set the endpoint to point to the native desktop application or the web application. You can also choose whether to share the post's URL along with the text.

How Highlight and Share Works

Text Selection

Highlight and Sharing displays a small pop-up when a reader highlights text on your site.

By default, this works on any post or page content. You can customize Highlight and Share to show anywhere using advanced selectors.

Inline Highlighting

You can mark a selection of text as an inline highlight using the Block Editor format option, or wrap a selection with a CSS class has-inline-text.

Click to Share Block and Shortcode

The Click to Share block and shortcode let you heavily customize a "Click to Share" box that readers can click to share.

Image Sharing

Share your images using Pinterest or the Web Share API.

Headline Sharing

Headline sharing lets you share your headers, giving users quick access to copy the headline link and to share it across other social networks.

Adjusting the appearance of Highlight and Share is fast and intuitive. You can choose between several themes, change the orientation and tooltip behavior, and reorder enabled networks.

Inline highlighting is a great way to break up a lot of text and emphasize a specific portion that is ready for sharing.

The inline highlighting is themeable, and is easy to insert either via the block editor or manually via an inline CSS class.

Headline Sharing allows users to share your headings when viewing your site. This feature was inspired by how GitHub does its headlines, with some updates for UX and accessibility.

When enabled, the plugin will scan your headings that have an ID attribute. If found, it'll show a small link icon next to the headline when it is focused or hovered over.

You're able to add up to 4 social networks to show when sharing a headline. The "Copy Link" feature must always be enabled for accessibility, as it is natural UX behavior.

The link icon is fully accessible and works with or without JavaScript.

If you do not need to use the block's features, you can disable the block in the Content Sharing tab under the Block Editor Panel.

You can exclude headlines or headlines in containers by adding a CSS class:

Setting Exclusion Selectors

You can set CSS selectors to automatically exclude certain headlines. For now, this only works with CSS classes.

You can find the Reorder section in the Appearance panel in the Content Sharing tab.

Simply drag and drop to reorder the networks.

Be sure to save your changes when reordering is complete.

You can view a preview in the Preview panel.

When selecting a custom theme, you will be presented with several options to configure how the icons display on the frontend.

This section will cover the available customization options.

Hide or Show Labels

You can choose to show or hide the labels of the social networks.

You can customize the labels in the main Settings tab when enabling social networks.

Item Grouping (Grouped)

When the items are grouped, you can edit the social networks all at once.

You can adjust:

• The background color and background color on hover for all the icons

• The text color and text color on over (if labels are enabled)

• Adjust the border radius of the container

Item Grouping (Ungrouped)

To edit the icons individually, you can ungroup the social networks.

When items are ungrouped, you can configure the colors of each social network icon individually.

Just click on each social network tab to adjust the colors for each network.

In addition to configuring colors, you can customize the appearance of:

• The individual icon border radius

• The individual icon padding

• The icon size

Highlight and Share supports custom selectors, whether you use a page builder or a non-default editor.

Custom selectors are handy when you are using a page builder and the content is not within the normal content loop.

In general, you shouldn't have to choose a selector unless directed to do so by support or a developer.

CSS Class Selectors

Input any CSS classes (with or without the dots and comma-separated).

Highlight and Share will search for these classes and be enabled for any text within them.

An example would be enabling Highlight and Share for widget areas.

CSS ID Selectors

Input any CSS IDs (with or without the # sign and comma-separated).

Highlight and Share will search for these IDs and will be enabled for any text within the CSS ID.

HTML Elements

Input any HTML elements (e.g., section, main).

Highlight and Share will search for these elements and be enabled for any text within them.

Post Wrapper Classes

Add any additional CSS classes when Highlight and Share successfully wraps the content. You can use this for advanced CSS targeting.

In addition to enabling headlines, you can adjust their display settings and appearance.

Generate Missing IDs

Not all headlines have an ID attribute, commonly known as an anchor attribute. You can toggle this option to allow Highlight and Share to generate the IDs for you.

Since the plugin runs its content filter late, other plugins should have had a chance to add their own ID attributes to the headlines. This makes Highlight and Share compatible with many Table of Contents plugins out of the box.

However, if you want auto-generation and don't have a helper plugin, you can force the plugin to generate missing IDs.

Link Icon Always Visible Option

You can make the link icon always visible on the frontend by toggling this option. By default, the link icon is only shown on headline focus or hover.

When visible, the link icons are more prominent.

Excluding Headline Levels

You can exclude certain headline levels from being selected for sharing. You can select from all six heading levels.

Enabling on Post Types

You can enable headlines on certain post types. By default, they are only enabled for posts.

You can auto-enable existing post types in this section.

Even if you have headline sharing disabled for a post type, you can still enable it individually by editing the post and enabling headline sharing in Highlight and Share's sidebar settings.

Setting Exclusion Selectors

You can set CSS selectors to automatically exclude certain headlines. For now, this only works with CSS classes.

You can find Headline Sharing under the Headline Sharing tab in the admin settings.

Headline Sharing is off by default because it can affect your theme's output. It is recommended to enable this option on a staging site and ensure everything is working there before enabling it in production. If you do not have a staging site, please double-check that your site appears unchanged on the frontend.

To enable headline sharing, select the "Enable Headline Sharing" toggle and save the settings.

You can then hover or focus on any headline with an ID attribute.

Inline highlighting works in the block editor or by wrapping a span around the text with a CSS class has-inline-text.

Add Inline Highlighting in the Block Editor

Inline highlighting is very simple. Simply highlight some text in the block editor, and select Inline Social Highlight from the More context menu.

Adding Inline Highlighting Via Code (HTML Attribute)

If you need to highlight text outside of the block editor, just wrap a span element around the text and give it a class of has-inline-text.

You can find the theme preview at the bottom of the Appearance tab.

Should you choose to reorder any social networks or customize or change a theme, you will find that the preview automatically updates.

Be sure to save any settings when you are through with any theme modifications.

When enabled, emails are a powerful feature and allow users to send themselves or someone else an email about the text selection, highlight, or quote.

When the email is clicked on, a user is shown a modal where the user can input any sharing details.

To prevent any spam or bot submissions, Akismet and reCAPTCHA 3 are supported.

Setting up the social networks is easy. You're able to add up to 4 social networks to show when sharing a headline. The "Copy Link" feature must always be enabled for accessibility, as it is natural UX behavior.

Setting the Networks

Find the Social Networks Panel under Headline Sharing and select up to 4 networks. Four networks isn't a hard rule for now, but to introduce the headlines feature, a sane limit was set on what is displayed.

When all four networks are selected, the remaining networks will be disabled.

One of Highlight and Share's features is image sharing. You can find the Image Sharing settings in the Highlight and Share settings under the Image Sharing tab.

If image sharing is enabled, you'll see the following when hovering over an image:

You have two options for image sharing:

• Pinterest (shows on Desktop and Mobile)

If you are going to provide your own styles, you can do so via the shortcode parameters or by creating your own CSS theme for the shortcode.

To specify a theme in the shortcode, just pass a theme-slug as part of the theme shortcode parameter:

There will be a CSS wrapper around the shortcode with custom-red, which you can then style.

Several CSS variables can be used to style the various parts of the Click to Share box. These are listed below:

You can find the Inline Highlighting panel under the Content Sharing tab in the admin settings.

You're able to:

• Enable or disable inline highlighting.

• Change the highlight's background color and hover background color.

The Display Rules panel allows you to control where content sharing is enabled. This primarily controls text selection sharing.

Configuring Content Sharing Per Post Type

By default, content sharing is enabled for all post types in Highlight and Share. You can exclude post types via the "Excluded Post Types" setting.

You can still selectively enable or disable text sharing via sidebar settings when editing a post.

Enable on Content Areas (Content, Excerpt, and Comments)

A useful setting is the ability to disable text selection on the main content area. Use this if you have content enabled in post types but would like to skip the content area when sharing.

You can also allow text and social sharing on excerpts, and enable it for the comments section.

If you have a page builder, these settings may have no effect. In that case, you'll need .

Enable or Disable for Mobile Devices

Most mobile devices already have content sharing when highlighting text, but you can enable Highlight and Share's additional networks on mobile devices by default. If you wish to disable Highlight and Share on mobile devices, uncheck this option.

Setting a Sharing Prefix and Suffix

For social networks with text sharing enabled, you can wrap the text in a prefix and suffix, for example, a quotation mark, a parenthesis, or other punctuation.

Here's an example post with the prefix and suffix shown:

Enabling Shortlinks

You can find the Shortlinks setting in the Display Rules panel under Content Sharing.

Shortlinks let you share a shorter version of a URL. You will need a shortlink service installed, , for this to work.

The shortlink will display for any social network that allows URL sharing, which is most of them. Here are some compatible WordPress services for shortlinks.

Changing the appearance of content-sharing icons is easy. You can find the settings under the Appearance panel under the Content Sharing tab.

Built-in Themes

Choose from several built-in themes to quickly customize the look of Highlight and Share.

In the Email Settings tab under Highlight and Share settings, you can configure several email-related settings.

Form vs Mailto

Navigate to the Highlight and Share admin settings, then click the Image Sharing tab.

Enabling Image Sharing

Click "Enable Image Sharing" to allow Highlight and Share to show sharing icons on your post images.

Enable Pinterest Sharing

When enabled, a Pinterest icon will display on an image.

Enable Web Share Sharing

The allows for more native sharing and is typically only available on mobile devices or in supported browsers like Safari.

If on a supported browser or device, you'll see a "Share" option when hovering over an image.

On the user's mobile device, they can copy or share the image as they see fit.

Enable Only Image Sharing Using Web Share

Depending on your site, you may want to send only the image and not the URL where the image is located. This can be useful on tutorial sites or educational sites where users may want to copy the images for use in notes easily.

Exclude Leading Image

Sometimes, you have a featured image as the first image and want to skip that image. You can skip this "first" or leading image by checking the "Exclude Leading Image" option.

Select Which Post Types to Enable Image Sharing

You can select which post types have image sharing enabled by checking the enabled post types.

Sharing Preview

A sharing preview is shown periodically in the admin options to demonstrate what the sharing icons will look like when displayed on your site.

Sharing Location

By default, the sharing icons appear on the image's top-left.

Sharing locations can be:

• Top Left

• Top Right

• Bottom Left

• Bottom Right

Show on Hover (enabled or disabled)

By default, the sharing options display when hovering. If you'd like them always visible, switch this option off.

Set up Exclusions

Matching every image can be tricky, so that's why there are exclusions.

Think of exclusions as a way to filter out any images you don't want shared.

Enter a keyword, CSS class name, or data attribute, and the image is skipped if a match is found.

Setting the Button Labels

This section allows you to show or hide the button labels and customize them to match the wording on your site.

If you choose to hide the labels, only the icons will display.

Setting the Button Shape

Set the button shape, which can be:

• Rounded

• Circle

• Square

Choose rounded for a button with a slight border-radius.

You can also hide the labels and use the Rounded button shape.

Choose the Square button shape for a more traditional button appearance.

Choose the Circle button shape if you wish to display the icons only in a circular shape. Please note that the Circle button shape is only recommended if the labels are hidden.

Changing the Pinterest Colors

All colors for the Pinterest sharing icon and label can be customized.

Each color can be adjusted to match your site.

A live preview is beneath the color options to see the changes quickly.

Changing the Web Share Colors

All colors for the Web Share sharing icon and label can be customized.

You can use the color picker to match the button to your site.

Highlight and Share can be used to track stats for the social networks you interact with.

Overview

When a user shares content (via a social button or Web Share), the plugin can send a share event to your analytics stack. Stats are on by default; you can turn them off globally or restrict which data is sent for privacy.

Three channels receive the same event (when stats are enabled):

If stats are disabled, nothing is pushed to any channel.

Event name

Data sent (payload)

The event carries a small payload. By default, URL, share text, and title are not sent (they are sent as empty strings). Enable enhanced mode to include them.

dataLayer & CustomEvent (camelCase)

GA4 (gtag) — snake_case parameters

Synthetic events (CustomEvent)

The plugin dispatches a synthetic CustomEvent on window so your own scripts (or GTM custom HTML tags) can react to shares without relying on dataLayer or gtag.

What is sent

The event is dispatched as:

• Event type: has:share

• Target: window

• Options: { bubbles: true, cancelable: false }

How to listen

Attach a listener to window for the event type has:share. Read the payload from event.detail.

The listener runs only when stats are enabled (has_stats_enabled / HAS_STATS_ENABLED). If stats are disabled, no CustomEvent is dispatched.

Constants

Define these in wp-config.php (or before the plugin runs) to set defaults. Filters can still override them.

HAS_STATS_ENABLED

• Default: Stats are enabled (no constant = tracking on).

• Use: Set to false to turn off all stats (dataLayer, gtag, and CustomEvent).

HAS_STATS_ENHANCED

• Default: Enhanced data is off (no constant = URL, text, and title are not sent).

• Use: Set to true to allow sending URL, share text, and title in the payload.

Filters

Use these in your theme or plugin to override the constants or implement conditional logic.

has_stats_enabled

• Purpose: Turn stats on or off for the frontend.

• Default passed: Value from HAS_STATS_ENABLED if defined, otherwise true.

• Return: true

has_stats_enhanced

• Purpose: Allow or disallow sending URL, share text, and title (privacy-sensitive fields).

• Default passed: Value from HAS_STATS_ENHANCED if defined, otherwise false.

• Return: true

The Click to Share box can be enabled via shortcode. Here's a simple shortcode in use below:

It'll produce a default Click to Share box like shown below:

Here's a diagram of the various parts of the Click to Share box.

1. Click to Share text - This is the text that will be shared with the social networks.

2. Click to Share button text - This is the text that is displayed for the Click to Share button.

3. Click to Share icon - The icon used for the Cilck to Share button.

Here are the shortcode arguments available for the Click to Share shortcode box.

unique_id

Use this to wrap a unique ID around the shortcode, otherwise it'll be random.

theme

Can be:

• default (light appearance)

• purple

• blue

• dark

align

Can be:

• left

• center (default)

• right

show_click_to_share

Show the Click to Share section with text and an icon.

Can be:

• true (default)

• false

Example:

show_click_to_share_text

Show or hide the label in the Click to Share icon section.

Can be:

• true (default)

• false

Example:

show_icon

Show or hide the icon in the Click to Share icon section.

Can be:

• true (default)

• false

icon

Determine which sharing icon will be used in the Click to Share box.

Can be:

has-share-1

has-share-2

has-share-3

has-share-4

has-share-5

has-share-6

has-share-7

has-share-8

has-share-9

Example:

icon_size

Determine the icon size of the Click to Share icon section.

Can be:

• small

• medium (default)

• large

Example:

custom_share_text

Input text that will be shared instead of the wrapped sharing text.

Example:

font_family

Choose the font family that will be used for the Click to Share shortcode.

Can be:

• (or custom font family)

Example:

button_font_family

Choose the font family that will be used for the Click to Share button.

Can be:

• (or custom font family)

Example:

click_text

This will change the Click to Share button text.

Example:

margin

Specify the margin that'll be used for the Click to Share shortcode. This will override a theme default.

Default: empty.

Example:

padding

Specify the padding that'll be used for the Click to Share shortcode. This will override a theme's default styles.

Example:

icon_color, icon_color_hover

Set the default color and hover color of the Click to Share icon.

Example:

text_color, text_color_hover

Set the default and hover color value of the main body text in the Click to Share box.

Example:

share_text_color, share_text_color_hover

Set the default and hover color of the sharing button.

Example:

background_color, background_color_hover

Set the default and hover background color of the Click to Share box.

Example:

font_size

The font size of the sharing text in the Click to Share box.

Can be:

• small

• medium (default)

• large

Example:

click_share_font_size

The font size of the sharing button in the Click to Share box.

Can be:

• small

• medium (default)

• large

Example:

border, border_hover

Set the CSS border of the Click to Share box in normal and hover state.

Example:

border_radius

Specify the CSS border radius of the Click to Share box.

Example:

max_width

The maximum width of the Click to Share box. Can be any valid CSS width.

Example:

Highlight and Share does not load external social media scripts and styles.

The social networks included with Highlight and Share have sharing endpoints that are accessed directly. As a result, there are a minimal amount of resources that Highlight and Share needs.

The following social networks are supported by Highlight and Share.

ing social networks are available for sharing.

Finding the Admin Settings From the Plugins Screen

If you are on the plugin's screen, search for Highlight and Share and click on the Settings link.

Finding the Admin Settings from the Menu

Alternatively, in the admin menu, head to Settings->Highlight and Share.

Actions and Filters

Highlight and Share provides actions and filters so developers can customize behavior without editing plugin files. This document lists the hooks available in the plugin's PHP codebase.

Actions

has_enqueue_block_styles_scripts

Fires when the Click to Share block enqueues its styles and scripts in the block editor. Use this to enqueue your own block editor assets when the Highlight and Share block is in use.

Filters

has_social_network_defaults

Filter the default social networks array (labels, slugs, colors, share URL templates, etc.). Use this to add custom networks or modify built-in ones.

Example — modify the WhatsApp default (e.g. label, tooltip, or share URL):

has_show_{network_slug}

Determine whether a social network is shown. The filter name is dynamic: has_show_ + network slug (e.g. has_show_facebook, has_show_twitter, has_show_email). Built-in slugs include: facebook, twitter, linkedin, ok, vk, email, tumblr, copy

has_show_facebook

Hide or show the Facebook sharing option.

has_show_twitter

Hide or show the Twitter sharing option.

has_show_linkedin

Hide or show the LinkedIn sharing option.

has_show_ok

Hide or show the OK.ru sharing option.

has_show_vk

Hide or show the VK sharing option.

has_show_email

Hide or show the email sharing option.

has_show_tumblr

Hide or show the Tumblr sharing option.

has_show_copy

Hide or show the copy-to-clipboard option.

has_show_reddit

Hide or show the Reddit sharing option.

has_show_telegram

Hide or show the Telegram sharing option.

has_show_whatsapp

Hide or show the WhatsApp sharing option.

has_show_webshare

Hide or show the Web Share API option.

has_show_mastodon

Hide or show the Mastodon sharing option.

has_show_threads

Hide or show the Threads sharing option.

has_show_bluesky

Hide or show the BlueSky sharing option.

has_enable_content

Whether Highlight and Share runs on regular post or page content (e.g. inline highlighting and sharing).

has_enable_excerpt

Whether Highlight and Share runs on post excerpts.

has_highlight_sharing_enabled_for_post

Whether highlight-and-share (text selection sharing) is enabled for the current post.

has_headlines_enabled_for_post

Per-post override for headline sharing (sidebar share buttons on headings). Use to enable or disable headline sharing for specific posts.

has_headline_anchor_max_length

Purpose: Change the maximum character length used when truncating auto-generated headline anchors.

Parameters:

Returns: int – The maximum length of characters to use for truncation.

Example: Use 60 characters instead of 45

Example: Disable truncation via filter (e.g., for a specific context)

Example: Longer limit for a specific post type

has_headline_anchor_truncated

Purpose: Modify the truncated slug after the plugin has shortened it (and stripped trailing dashes). Use this to apply custom logic or formatting to the final anchor.

Parameters:

Returns: string – The slug to use as the heading ID. Must be non-empty; if empty, the plugin falls back to 'heading'.

Example: Add a prefix to truncated anchors only

has_footer_svg_sprite

Replace or add SVG sprite markup output in the footer (used for headline share panel icons when the main HAS container may not be present).

has_headline_share_url_template

Modify the share URL template for a given network in the headline sharing panel (e.g. Twitter, LinkedIn). Placeholders like %url% and %title% are replaced by the front-end script.

Example — use a custom share URL for WhatsApp in the headline sharing panel (placeholders such as %url% and %title% are replaced by the front-end script):

has_pin_show_on_archives

Whether image (pin) sharing is shown on archive and blog index pages.

has_pin_supported_post_types

List of post type slugs where image (pin) sharing is supported. Modify to add or remove post types.

has_image_sharing_enabled_for_post

Whether image sharing (pin/share on images) is enabled for a specific post.

has_pin_image_css_classes

CSS classes applied to the image sharing wrapper (e.g. position, show-on-hover). Add or remove classes.

has_pin_core_exclusions

CSS classes or identifiers that exclude an image from getting the pin/image sharing wrapper. Images (or their parents) containing these strings are skipped. Default includes has-no-pin.

has_pin_excerpt_exclusions

Same as has_pin_core_exclusions but applied only when processing excerpts. Use to add or remove excerpt-specific exclusions.

has_pin_show_on_excerpts

Whether image sharing is applied to post excerpts. Default true.

has_enable_image_sharing_on_singular_featured

Allow image sharing on featured images (post thumbnails) on singular posts/pages. Default false to avoid large hero images with sharing buttons.

This guide explains how to customize the look of Highlight and Share: first using the built-in settings (no code), then using CSS variables and custom CSS for deeper control.

Overriding styles with CSS

Highlight and Share uses CSS custom properties (variables) where possible. You can override them in your theme’s stylesheet, in Appearance → Customize → Additional CSS, or in a child theme.

How it works: The plugin sets variables (e.g. --has-pinterest-button-color). Its own CSS uses those variables. If you redefine the same variable in a more specific selector (e.g. :root or a wrapper), your value wins. That way you don’t have to copy large blocks of CSS—just set the variables you want to change.

CSS variables reference

Inline highlight (selected text)

When users select text and see the yellow highlight (and optional tooltip), these variables control only the tooltip. The highlight background and text colors are set by the plugin from settings; to override them, use the class overrides in the next section.

Example — different tooltip style:

Image (Pin) sharing buttons

These apply to the Pinterest and Web Share buttons on images (content, excerpts, featured images).

Example — match your brand:

Headline sharing panel

The small panel that opens when users click the share icon next to a heading.

Example — dark panel:

Click to Share block (CTA)

The Click to Share block outputs variables on the block wrapper. You can override them by targeting the block’s container (e.g. .wp-block-dlxplugins-has-click-to-share or the block’s uniqueId class).

Example — override CTA colors for all Click to Share blocks:

Class-based overrides (when variables aren’t enough)

If there’s no variable for what you want to change, you can target the plugin’s classes directly. Use Appearance → Customize → Additional CSS or your theme’s CSS.

Main wrappers and layout

Inline highlight (selected text)

Example — change inline highlight colors without variables:

The plugin injects inline styles for highlight colors from settings. To force your own colors, override with !important or a more specific selector:

Image (Pin) sharing

Headline sharing

Creating a simple “theme” with CSS variables

You can define a small set of variables in one place and reuse them across the plugin’s features.

Example — one dark palette for HAS:

Put this in Appearance → Customize → Additional CSS

Scoping overrides (e.g., one page or one block)

To change styles only in certain places:

• Only on posts: Use body.single .highlight-and-share-wrapper { ... } or body.post-type-post :root { ... } (variables on :root will still apply globally unless you set them on a closer ancestor.

• Only for the Click to Share block: Target .wp-block-dlxplugins-has-click-to-share and set the --has-cta-* variables on that wrapper.

Example — different image button colors only in the sidebar: