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.

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 wrapping a selection with class has-inline-text.

Click to Share Block and Shortcode

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

Image Sharing

Enable Pinterest and the Web Share API for your images.

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.

To enable/disable social networks, click on the Settings tab within the Highlight and Share options.

Within the Settings tab, you'll find a section called Social Networks.

Simply toggle the social networks you'd like to see on the frontend of the site.

Available Social Networks

The following social networks are available for sharing.

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 wrapping a selection with class has-inline-text.

Click to Share Block and Shortcode

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

Image Sharing

Share your images using Pinterest or the Web Share API.

Shortlinks turns a long URL into a shorter version.

If you share text on a social network such as Twitter, you can save a few characters by shortening your URLs.

For shortlink services, it is recommended to use Jetpack or Bitly.

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.

You can find the Reorder section in the Appearance tab.

Simply drag and drop to change the order of the networks.

Be sure to save your changes when reordering is complete.

You are able to view a preview at the bottom of the Appearance tab.

Highlight and Share allows for custom selectors.

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 by support or a developer.

CSS Class Selectors

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

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

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

CSS ID Selectors

Input any CSS IDs (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 will be enabled for any text within the elements.

Inline highlighting is a great way to split up a lot of text and place emphasis on a certain portion of text 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.

You can find the Inline Highlighting options in the Block Editor tab in the Highlight and Share admin settings.

Within the Inline Highlighting options, you can:

• Disable or enable inline highlighting

• Change the background color and hover states of the highlight

• Change the text color and hover states of the highlight

• See a preview of how it looks on the frontend

To configure Display settings, click on the Settings tab within the Highlight and Share options.

By default, Highlight and Share text selection is enabled for the post content, excerpts, and also mobile devices.

Within the Display settings, you can:

• Disable or enable Highlight and Share on mobile devices.

• Have Highlight and Share show on your post content.

• Have Highlight and Share show on your post excerpts.

• Have Highlight and Share show on your comments.

One of the features of Highlight and Share is that of image sharing. You can find the Image Sharing settings in the Highlight and Share settings under the Images 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)

• Web Share (shows only on mobile devices)

Clicking the Pinterest icon will allow the user to share on Pinterest.

Web Share API

The Web Share API is native to the user's device, so it behaves slightly differently on iOS than on Android.

For example, on iOS, you can use Web Share to copy the image and save it to Dropbox or other native functions, depending on your device and apps.

How the Web Share API Works

When someone clicks on the Web Share icon to share an image, the image is silently downloaded behind the scenes and stored as a file reference so that the user can then save or copy it onto their device.

The user's device is sent:

1. URL where the image is displayed.

2. Image file so the image can be copied, saved, or transferred.

How Highlight and Share Matches the Images

Up next are the various admin options to customize the output.

To change the appearance of Highlight and Share, head to the Appearance tab within the admin settings.

Within the Appearance tab, you can reorder the social networks, customize the theme, and see a theme preview.

Here are the pages within this section.

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"

4. Install and Activate the plugin

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

Install via FTP

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

4. Upload the unzipped folder into wp-content/plugins

5. Log into your admin dashboard

6. Head to the plugins screen

7. Search for Highlight and Share.

8. Activate the plugin

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

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

• orange

• pink

• none (choose to define your own styles)

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:

• Josefin Sans

• Karla

• Lato

• Montserrat

• Open Sans

• Playfair Display

• Raleway

• Roboto

• Source Sans Pro

• (or custom font family)

Example:

button_font_family

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

Can be:

• Josefin Sans

• Karla

• Lato

• Montserrat

• Open Sans

• Playfair Display

• Raleway

• Roboto

• Source Sans Pro

• (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:

Changing themes is easy and you'll find the theme selection options under the Appearance tab in the Highlight and Share settings page.

Built-in Themes

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

Available Themes

Unless otherwise noted, the available themes show just the icons and not the labels. A tooltip is available on hover if that option is enabled.

Default Theme

The default theme shows brand colors and labels.

Brand Colors Theme

Colorful Circles Theme

Colorful Glass Circles Theme

Black Theme

Purple Theme

White Theme

Cyan Theme

Magenta Theme

Blue Theme

Green Theme

Tooltips

By default, a Tooltip is shown when hovering over a social network.

To remove the Tooltips, simply toggle the Tooltip option and save your changes.

You can modify the Tooltips in the Settings tab when enabling a social network.

You can customize the tooltips even further by adjusting the background and text color of the tooltip.

Orientation

You can choose between horizontal and vertical orientation.

The preview below will show how the social icons will look on the frontend.

Custom Themes

If you would like to customize the theme to your own specifications, you can select "Custom" from the theme dropdown.

When selecting a custom theme, you will be presented with several options to configure how Highlight and Share shows up on the frontend.

This section will go over the various customization options that are available.

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 together.

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

• Set icon padding for all icons at once

• Increase or decrease the icon size for all items

• Set the font size of the labels (if labels are enabled)

• Show or hide tooltips

• Set vertical or horizontal orientation of the icons

Item Grouping (Ungrouped)

To edit the icons individually, you can ungroup the 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

• The font size of the label (if enabled)

• The gap between the social networks

• Enable or disable tooltips

• Set the orientation to horizontal or vertical

Theme Preview

To view how the changes will look on the frontend, you can view the theme preview at the bottom of the appearance settings.

Navigate to the Highlight and Share admin settings and click on the Images 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

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

• Center

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.

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:

[has_click_to_share theme="custom-red"]This is some text I'd like to share.[/has_click_to_share]

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

.has-cts-shortcode-theme-custom-red {}

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

.has-cts-shortcode-theme-custom-red {
	--has-cts-background: #ff0000;
	--has-cts-background-hover: #cc0000;
	--has-cts-share-text-color: #ffffff;
	--has-cts-share-text-color-hover: #ffffff;
	--has-cts-text-color: #ffffff;
	--has-cts-text-color-hover: #ffffff;
	--has-cts-border: 1px solid #ff0000;
	--has-cts-border-radius: 4px;
	--has-cts-border-hover: 1px solid #cc0000;
	--has-cts-icon-color: #ffffff;
	--has-cts-icon-color-hover: #ffffff;
	--has-cts-padding: 25px 35px;
	--has-cts-max-width: 650px;
	--has-cts-margin: 20px auto;
	--has-cts-font-size-small: 0.8em;
	--has-cts-font-size-medium: 1.4em;
	--has-cts-font-size-large: 1.8em;
	--has-cts-button-font-size-small: 0.8em;
	--has-cts-button-font-size-medium: 1.4em;
	--has-cts-button-font-size-large: 1.8em;
	--has-cts-icon-size-small: 1;
	--has-cts-icon-size-medium: 1.2;
	--has-cts-icon-size-large: 1.5;
}

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.

Block Overview

Main Block Interface

In the main block interface, you will find an editable section for the Quote or text you would like to share. There is also a CTA which you can edit/modify.

Modifying What to Share

You can modify the text directly on the block that you would like to share.

There are several formatting options including:

• Bold

• Italics

• Highlight (change text color)

• Strikethrough

• Subscript

• Superscript

You can further customize the share text in the sidebar options in the Block Editor.

Sidebar Options

There are numerous sidebar options to customize how the Click to Share block will show up on the frontend.

Responsive View

The block has three "preview" modes:

1. Desktop

2. Tablet

3. Mobile

Clicking on each icon will show what the block will look like with that particular screen size.

Share Settings

Within the Share Settings, you can disable the CTA, modify the text for the CTA, show/hide the sharing icon, and even adjust the sharing icon size.

Background Settings

You can adjust the background settings of the block.

You can choose between a solid background, a gradient, or a background image.

With the Solid background option, you can choose a background and hover background color.

The Gradient background type, you can sync the gradients (edit both gradients at once), and even have a random gradient generated for you.

The Image option for the background allows you to upload an image and it will be applied to the background of the block.

In addition, you can set a background color which will work with the opacity settings.

Finally, you can adjust the background settings such as setting positioning, changing the background size, etc.

Color Options

You can adjust the colors of just about every element in the Click to Share block.

Simply click on the color to change it.

Typography

The typography settings can be adjusted for each text section. You can also adjust the typography for each mobile responsive breakpoint (desktop, tablet, mobile).

Click on the Typography settings to adjust the various typography options.

Spacing and Borders

Lastly, you can adjust the spacing, max-width, and borders of the block.

Each spacing setting can also be configured per mobile responsive breakpoint (desktop, tablet, mobile).

The Click to Share block has a few settings which you can further customize the block.

Disabling or Enabling the Block

If you are not using the Click to Share block, you can disable the block from showing in the block editor.

Adobe Fonts

If you have an Adobe Creative Cloud account, you have Adobe Fonts enabled. If you would like to add Adobe Fonts to the block editor typography options, simply enable Adobe Fonts and enter your web project ID from the Adobe Fonts website.

Inline Highlighting

Lasly, you can configure how inline highlighting will look or even disable it completely.

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.

Requesting New Social Networks

New social networks can absolutely be added to Highlight and Share. However, the sharing mechanism must have an endpoint (see below).

Social Networking Endpoints

The following endpoints are present for the following services.

Twitter

The endpoints for Twitter has the following format:

Here's a full URL Encoded URL.

The twitter endpoint is: https://twitter.com/intent/tweet

It supports the following parameters:

• via: This is the witter username (e.g., mediaronllc).

• url: URL Encoded location of the post or page.

• text: URL Encoded text to share.

• hashtags: URL Encoded and comma-separated hashtags with the # symbol.

Facebook

The Facebook endpoint is: https://www.facebook.com/sharer/sharer.php

It supports the following parameters:

• u: This is the URL to share.

• t: The title of the URL to share.

Threads

The Threads endpoint is: https://www.threads.net/intent/post?text=something

It supports the following parameters:

• text: This is the text to share. To include a URL, include it as part of the text.

Bluesky

The Bluesky endpiont is: https://bsky.app/intent/compose?text=something

It supports the following parameters:

• text: This is the text to share. Include a URL as part of the text.

Mastodon

The Mastodon endpoint is: https://mastodon.social/share?text=something

It supports the following parameters:

• text: This is the text to share. Include a URL as part of the text.

Pinterest

The Pinterest endpoint is: https://www.pinterest.com/pin/create/button/?media=

It supports the following parameters:

• url: Which page has the image.

• media: URL to the image to share.

• description: Description of the image.

LinkedIn

LinkedIn just allows you to share a URL.

The LinkedIn endpoint is: https://www.linkedin.com/sharing/share-offsite/

It supports the following parameters:

• mini: true or false - What type of dialogue to show.

• url: The URL Encoded location of the post or page.

• title: The URL Encoded title of the post or page.

Xing

Xing just allows you to share a URL.

The Xing endpoint is: https://www.xing.com/spi/shares/new

It only supports the url parameter (which must be URL encoded)..

Reddit

Reddit only allows you to submit a new URL.

The Reddit endpoint is: https://www.reddit.com/submit

It accepts the following parameters:

• resubmit: true or false (true is the default for Highlight and Share).

• url: The URL Encoded link to a post or page.

• title: The URL Encoded title of a post or page.

Tumblr

Tumblr allows you to submit a URL and some text.

The Tumblr endpoint is: https://tumblr.com/widgets/share/tool

It accepts the following parameters:

• posttype: Tumblr post type. Can be text, photo, link, quote, chat, or video.

• title: The title of the post.

• content: The content to share.

• tags: Comma-separated tags.

• caption: Caption for link, video, and quote posts.

• show-via: Attribution in the body content.

• canonicalUrl: URL of the post being shared.

Telegram

Telegram allows you to submit a URL and some text.

The Telegram endpoint is: https://t.me/share/url

It accepts the following parameters:

• url: URL Encoded location to the post or page.

• text: URL Encoded text to share.

WhatsApp

WhatsApp only supports the text parameter.

The WhatsApp sharing relies on the user having the WhatsApp installed on their desktop and/or mobile device.

The desktop endpoint is: https://api.whatsapp.com/send

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

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.

Within the Emails tab in the Highlight and Share settings, you can configure a few spam-protection options.

Akismet Protection

Akismet is a great spam protection tool and if you have it installed, Highlight and Share will attempt to use it for protection.

Simply enable or disable the Akismet option if you would like to use the service.

If you do not have Akismet installed or the API key for Akismet is disabled, you will see a warning indicating the status.

reCAPTCHA 3 Protection

reCAPTCHA 3 is an invisible captcha and is designed to be out of the way.

To enable reCAPTCHA 3, you will need a site key and a secret key. Follow the link above to get both keys.

When reCAPTCHA 3 is enabled, you will see a reCAPTCHA icon in the email modal.

You can use the following filters for enabling or disabling Highlight and Share for certain posts or pages:

• has_enable_content (returns a boolean)

• has_enable_excerpt (returns a boolean)

You can use the above filters to show or hide Highlight and Share text selection on certain pages.

For example, to exclude Highlight and Share from an About page, you could do the following:

Here are the main actions and filters for Highlight and Share. They are documented in the code, but for now, here are some main ones, which will be fleshed out later.

Disable on Front Page

Modify the Content URL

Modifying jQuery Selectors

To disable the CSS for Highlight and Share, please use the following filter: has_load_css.

The filter returns a boolean.

Example code for this filter is:

add_filter(
	'has_load_css',
	function( $load_css ) {
		return false;
	}
);

There are several filters to programmatically change labels and tooltips.

Here's an example of changing a label and tooltip for Twitter:

<?php
// Modify the Twitter label.
add_filter(
	'has_twitter_text',
	function( $twitter_label ) {
		return 'Tweet';
	}
);
// Modify the Twitter Tooltip.
add_filter(
	'has_twitter_tooltip',
	function( $twitter_tooltip ) {
		return 'Share on Twitter';
	}
);

The following filters are enabled for labels and tooltips (they both return strings):

• has_twitter_text | has_twitter_tooltip

• has_facebook_text | has_facebook_tooltip

• has_linkedin_text | has_linkedin_tooltip

• has_xing_text | has_xing_tooltip

• has_reddit_text | has_reddit_tooltip

• has_telegram_text | has_telegram_tooltip

• has_whatsapp_text | has_whatsapp_tooltip

• has_copy_text | has_copy_tooltip

• has_email_text | has_email_tooltip

There are filters for each social network where you can enable/disable each network programmatically.

An example of hiding a social network via code would look like this:

<?php
add_filter(
	'has_show_twitter',
	function( $show_twitter ) {
		if ( is_page() ) {
			return false;
		}
		return $show_twitter;
	}
);

Available Filters

Each filter returns a boolean:

• has_show_twitter

• has_show_facebook

• has_show_linkedin

• has_show_email

• has_show_copy

• has_show_reddit

• has_show_telegram

• has_show_whatsapp