Only this pageAll pages
Powered by GitBook
1 of 38

Highlight and Share

Loading...

Getting Started

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Inline Highlighting

Loading...

Loading...

Loading...

Image Sharing

Loading...

Loading...

Click to Share Shortcode

Loading...

Loading...

Click to Share Block

Loading...

Loading...

Emails

Loading...

Loading...

Developers

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Quick Links

Welcome to Highlight and Share

Show available social networks when a user interacts with the text on your website.

The goal of Highlight and Share: Provide an intuitive, lightweight, and extremely flexible way for users to be shown social sharing options when interacting with your site's content or images.

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.

Highlight and Share is Free: Please on the WordPress Plugin Directory.

Installing the Plugin

Installing Highlight and Share in the WordPress Admin

Highlight and Share is a free plugin: Please visit the plugin on the WordPress Plugin Directory

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

  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

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

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

  • Log into your admin dashboard

  • Head to the plugins screen

  • Search for Highlight and Share.

  • Activate the plugin

  • from the WordPress Plugin Directory
    visit Highlight and Share
    Text Selection Highlighting
    Inline Highlighting
    Click to Share Block or Shortcode
    Share to Pinterest and Use the Web Share API

    Disabling CSS

    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;
    	}
    );

    Configuring the Display Settings

    On this page, you will learn how to enable/disable Highlight and Share on your site

    Display Settings for Highlight and Share

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

    Finding the Plugin's Settings

    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.

    Display Settings

    The Display settings are only applicable for text selection. Highlight and Share will still be enabled for inline highlighting and the Click to Share block and shortcode.

    Enabling Shortlinks

    Find out how to enable/disable shortlinks

    Shortlinks Settings

    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.

    Shortlinks Require a Third-Party Service

    Highlight and Share does not provide native URL shortening. You'll need a shortlink plugin enabled, and Highlight and Share will try to use the shortlink from the third-party service.

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

    How to Add Inline Highlighting to Text

    Highlighting text is incredibly simple

    Inline Highlighting in the WordPress Block Editor

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

    Select Inline Social Highlight to Highlight Text

    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.

    Sample HTML code
    <span class="has-inline-text">Text to Highlight</span>

    Advanced Selectors

    Enable Highlight and Share on other areas of your site

    Advanced Selectors for Specific Targeting

    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.

    The Theme Preview

    The theme preview shows what Highlight and Share will look like on the frontend

    Theme Preview in the Appearance Tab

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

    Finding the Plugin's Settings

    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.

    Configure Inline Highlighting

    You'll find inline highlighting options in the Block Editor tab

    Inline Highlighting in the Block Editor tab

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

    Finding the Plugin's Settings
    Highlighting Options

    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

    Email Sharing

    This page goes over how email sharing works

    Email Option on the Frontend

    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.

    The Email Modal for Email Sharing

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

    What is Inline Highlighting

    Inline highlighting is a way to manually highlight text

    Inline Highlighting on the Frontend

    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.

    How to Add Inline Highlighting to Text
    Inline Highlighting Example
    How to Add Inline Highlighting to TextConfigure Inline Highlighting

    Finding the Plugin's Settings

    You can find us under Settings->Highlight and Share.

    Highlight and Share Admin Settings

    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.

    Highlight and Share Settings on the Plugins Screen

    Finding the Admin Settings from the Menu

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

    Reordering the Social Networks

    You can customize the order of the social networks shown

    Reorder Section in the Appearance Tab

    You can find the Reorder section in the Appearance tab.

    Finding the Plugin's Settings

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

    Animated GIF of Reordering and Preview

    Be sure to save your changes when reordering is complete.

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

    The Theme Preview

    Changing Themes and Appearance

    Change the appearance of the floating icons

    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.

    How Highlight and Share Works

    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.

    Changing Labels and Tooltips

    Changing labels and tooltips programmatically

    There are several filters to programmatically change labels and tooltips.

    Here's an example of changing a label and tooltip for 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

    Custom Shortcode Themes

    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:

    Enabling or Disabling Social Networks

    These are the filters you can use to enable or disable social networks.

    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:

    Available Filters

    Each filter returns a boolean:

    Finding the Plugin's Settings
    The Theme Preview
    Reordering the Social Networks
    Choosing a Theme
    Configuring a Custom Theme
    Appearance Theme Settings
    Find Highlight and Share from the Settings Menu Item

    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

  • Example Core Code of Tooltips and Labels
    [has_click_to_share theme="custom-red"]This is some text I'd like to share.[/has_click_to_share]
    .has-cts-shortcode-theme-custom-red {}
    .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;
    }
    Shortcode Parameters

    has_show_twitter

  • has_show_facebook

  • has_show_linkedin

  • has_show_email

  • has_show_copy

  • has_show_reddit

  • has_show_telegram

  • has_show_whatsapp

  • Filters for Hiding/Showing Social Networks
    <?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';
    	}
    );
    
    Filter: has_show_twitter
    <?php
    add_filter(
    	'has_show_twitter',
    	function( $show_twitter ) {
    		if ( is_page() ) {
    			return false;
    		}
    		return $show_twitter;
    	}
    );
    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.

    Inline Highlighting

    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.

    Click to Sahre Block and Shortcode

    Image Sharing

    Enable Pinterest and the Web Share API for your images.

    Image Sharing on a WordPress Image Gallery
    Advanced Selectors
    Highlight and Share when Selecting Text
    Text Selection Highlighting
    What is Inline Highlighting
    Configure Inline Highlighting
    The Click to Share Block
    Click to Share Shortcode
    Image Sharing
    Shortlink Example using Jetpack Shortlinks

    What is Image Sharing?

    Enable Pinterest and Web Sharing on images

    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.

    Highlight and Share Image Settings

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

    Sharing Options on 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

    Image matching uses the to parse and match the images. This allows the Pinterest and Webshare icons to be added natively to the HTML document, displayed via CSS and interacted with via JavaScript.

    Check your site's front end after enabling image sharing and make sure nothing has changed regarding its layout.

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

    Configuring the Block Editor Settings

    Enable of Disable the Block if not in use

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

    Finding the Plugin's Settings

    Disabling or Enabling the Block

    In the Block Editor Tab, you can Enable or Disable 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.

    Email Admin Settings

    Configure spam protection in the email admin settings

    Email Admin Settings

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

    Finding the Plugin's Settings

    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.

    Configuring a Custom Theme

    Choose a custom theme to modify how Highlight and Share shows on the frontend

    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.

    DOMDocument class
    Web Share on iOS
    What is Inline Highlighting
    Configure Inline Highlighting
    Adobe Font Options in the Block Editor Settings
    Font Family Options in the Block Editor
    Inline Highlighting Settings
    View This 5-Part Series on Highlight and Share
    Show the Labels for Impact

    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.

    Item Grouping Allows Editing All Items 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.

    Edit each Social Network Individually

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

    Select each Social Network to Change Colors Per Network

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

    Adjust the Icon Settings in (Un)grouped mode

    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.

    Theme Preview in the Appearance Settings Tab
    Choosing a Custom Theme Presents Several Configuration Options
    Hide the Labels for a Condensed Share Effect
    Enabling the Social Networks
    The Theme Preview
    Akismet Spam Protection Options
    reCAPTCHA 3 Settings
    reCAPTCHA 3 In the Email Modal

    Enabling the Social Networks

    Enabling/disabling the social networks is straightforward.

    Highlight and Share Settings Screen

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

    Finding the Plugin's Settings

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

    Social Networks Can Be Disabled/Enabled

    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.

    Network
    Allows Text Sharing

    Configuring Image Sharing

    You can customize the look and feel of how image sharing looks and behaves.

    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.

    Actions and Filters

    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

    No

    Tumblr

    Yes

    Telegram

    Yes

    LinkedIn

    No

    Xing

    No

    Email

    Yes

    Copy

    Yes

    Twitter

    Yes

    Facebook

    No

    Threads

    Yes

    Bluesky

    Yes

    WhatsApp

    Yes

    Screenshot of Available Social Networks on the Frontend

    Reddit

    Disable or Enable Text Selection

    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:

    add_filter(
    	'has_enable_content',
    	function( $load_content ) {
    		if ( is_page( 'highlight-and-share' ) ) {
    			return false;
    		}
    		return $load_content;
    	}
    );
    Modify the Content URL

    Modifying jQuery Selectors

    add_action( 'wp', function() {
    	if ( is_front_page() ) {
    		add_filter( 'has_show_facebook', '__return_false' );
    		add_filter( 'has_show_twitter', '__return_false' );
    	}
    } );
    add_filter( 'has_content_url', function( $url, $post_id ) {
    	return 'https://wordpress.org';
    }, 10, 2 );
    //Example filter usage for highlight and share
    //https://github.com/ronalfy/highlight-and-share
    
    /* The following filters take and return booleans (true, false)*/
    /* Call WordPress functions __return_false or __return_true */
    add_filter( 'has_show_facebook', '__return_true' ); //Disable or enable facebook sharing
    add_filter( 'has_show_twitter', '__return_true' ); //Disable or enable twitter sharing
    add_filter( 'has_load_css', '__return_true' ); //Disable or enable plugin's CSS - Use your own
    add_filter( 'has_enable_content', '__return_true' ); //Disable or enable main post content
    add_filter( 'has_enable_excerpt', '__return_true' ); //Disable or enable excerpt content
    add_filter( 'has_enable_mobile', '__return_true' ); //Disable or enable on mobile devices
    
    /* Override the Facebook share text (default is Share) */
    add_filter( 'has_facebook_text', 'has_override_facebook_text' );
    function has_override_facebook_text( $default ) {
    	return 'Facebook';
    }
    
    /* Override the Twitter share text (default is Tweet) */
    add_filter( 'has_twitter_text', 'has_override_twitter_text' );
    function has_override_twitter_text( $default ) {
    	return 'Twitter';
    }
    
    /* Override the JavaScript classes (assuming jQuery class format with no periods) */
    add_filter( 'has_js_classes', 'has_override_js_classes' );
    function has_override_js_classes( $content ) {
    	return 'entry-content,type-page,type-post';
    }
    
    /* Add JS IDs */
    add_filter( 'has_js_ids', 'has_override_js_ids' );
    function has_override_js_ids( $content = array() ) {
    	if ( !is_array( $content ) ) $content = array();
    	$new_arr = array( 'content', 'comments' );
    	$content = array_merge( $content, $new_arr );
    	return $content;
    }
    
    /* Add JS elements */
    add_filter( 'has_js_elements', 'has_override_js_elements' );
    function has_override_js_elements( $content = array() ) {
    	if ( !is_array( $content ) ) $content = array();
    	$new_arr = array( 'blockquote' );
    	$content = array_merge( $content, $new_arr );
    	return $content;
    }
    
    /* Override the Twitter username (no @ symbol needed) */
    add_filter( 'has_twitter_username', 'has_override_twitter_username' );
    function has_override_twitter_username( $username ) {
    	return 'wordpress';
    }
    //Demonstrates how to select paragraph text only
    
    add_filter( 'has_js_selectors', 'hs_custom_selectors', 10, 5 );
    function hs_custom_selectors( $selectors, $content = array(), $classes = array(), $ids = array(), $elements = array() ) {
    	//With $content, $classes, $ids, $elements, you can build your own selectors
    	//Or just override $selectors (a string) with your own custom ones
    	return '.has-content-area p, .has-excerpt-area p';
    }
    Enable Pinterest Sharing
    Enable Pinterest Sharing on an Image

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

    Pin It Badge on Images on Hover

    Enable Web Share Sharing

    Web Share API on Images

    The Web Share API 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.

    Web Share on the Safari Browser

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

    Web Share on a User's Mobile Device

    Enable Only Image Sharing Using Web Share

    Share Image Only Option for 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.

    Airdropping and saving images: This option must be enabled to support Airdrop on Mac devices.

    Exclude Leading Image

    Exclude Leading Image Option for Image Sharing

    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.

    Post Type Options for Image Sharing Display

    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 Preview

    Sharing Location

    Set the Sharing Location

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

    Sharing Location in the Image Sharing Settings

    Sharing locations can be:

    • Top Left

    • Top Right

    • Bottom Left

    • Bottom Right

    • Center

    Example of Center-Aligned Sharing Options

    Show on Hover (enabled or disabled)

    Show on Hover Option for Image Sharing

    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.

    Set up Exclusions to Match Keywords or CSS or Data Attributes

    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

    Show, Hide, and Customize 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.

    Hide the Sharing Button Labels to Show Icons Only

    Setting the Button Shape

    Set the Button Shape

    Set the button shape, which can be:

    • Rounded

    • Circle

    • Square

    The circular button shape is not recommended if the button labels are visible.

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

    Rounded Button Appearance with Labels

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

    Rounded Button Appearance with Labels Hidden

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

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

    Circle Button Shape with Labels Hidden

    Changing the Pinterest Colors

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

    Pinterest Color Options

    Each color can be adjusted to match your site.

    Pinterest Color Picker Option

    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.

    Web Share Color Options

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

    Customize the Web Share Colors
    Image Sharing Options in Highlight and Share
    Enable Image Sharing Option

    Choosing a Theme

    Choose from several included themes or choose a custom theme

    Theme Selection and Customizer in the Appearance Tab

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

    Finding the Plugin's Settings

    Built-in Themes

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

    There are several themes to choose from

    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.

    The Click to Share Block

    Create a clickable quote for sharing to the social networks

    The Click to Share Block in the Block Editor

    Finding the Block

    Use a / command and look for Click to Share.

    Alternatively, use the "+" Block Inserter icon and search for Click to Share.

    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

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

    Subscript

  • Superscript

  • The Main Block Interface
    Formatting Options for the Text to Share
    Responsive View and Click to Share Text Settings
    The Share Settings for the Click to Share Block
    Solid Background Type for the Click to Share Block
    Gradient Options for the Click to Share Block
    Background Image Type for the Click to Share Block
    Color Options for the Click to Share Block
    Built-in Color Picker
    Typography Options in the Click to Share Block
    Popover Typography Options
    Adjust the Spacing for the Click to Share Block
    Enabling the Social Networks
    Configuring a Custom Theme
    The Default Theme
    Branded Icon Theme
    Colorful Circles Theme
    Colorful Glass Circles Theme
    Black Theme
    Purple Theme
    White Theme
    Cyan Theme
    Magenta Theme
    Blue Theme
    Green Theme
    Tooltips Option
    Tooltip Showing on Hover
    Changing the Tooltip Value in the Settings Tab
    Change the Tooltip Background Color and Text Color
    Example of Customized Tooltip
    Horizontal Orientation in the Preview
    Vertical Orientation in the Preview
    Vertical Orientation on the Frontend
    Select "Custom" to Configure a Custom Theme
    Bitly's WordPress PluginWordPress.org
    Bitly Allows for Shortlinks and Tracking
    WP.me ShortlinksJetpack
    Jetpack Offers Native Shortlinks

    Shortcode Parameters

    You can enable the Click to Share box anywhere shortcodes are supported.

    Click to Share Box

    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:

    Default Appearance of Click to Share Shortcode

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

    Diagram of 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:

    • Josefin Sans

    • Karla

    • Lato

    • Montserrat

    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

    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:

    Available Social Networks

    This page goes over the available social networks in Highlight and Share

    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.

    Network
    Allows Text Sharing
    reCAPTCHA v3  |  Google for DevelopersGoogle for Developers
    Get your reCAPTCHA 3 Keys
    AkismetAkismet
    Akismet is great for spam protection
    [has_click_to_share]This is some text I'd like to share.[/has_click_to_share]                
    orange
  • pink

  • none (choose to define your own styles)

  • custom-slug (see creating your own Custom Shortcode Themes).

  • Open Sans
  • Playfair Display

  • Raleway

  • Roboto

  • Source Sans Pro

  • (or custom font family)

  • Open Sans
  • Playfair Display

  • Raleway

  • Roboto

  • Source Sans Pro

  • (or custom font family)

  • Default Theme
    Orange Theme
    Dark Theme
    Blue Theme
    Purple Theme
    Pink Theme
    Click to Share With Sharing Label Hidden
    Click to Share Section Without an Icon
    Icon: 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
    Pink Theme With Large Icon Size
    Custom Share This Text in the Button Area
    Custom Icon Color and Hover Color

    Yes

    Facebook

    No

    Bluesky

    Yes

    Threads

    Yes

    Mastodon

    Yes

    Pinterest

    No (Images only)

    WhatsApp

    Yes

    Reddit

    No

    Tumblr

    Yes

    Telegram

    Yes

    LinkedIn

    No

    Xing

    No

    Email

    Yes

    Copy

    Yes

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

    Endpoints Required: Highlight and Share does not load any third-party scripts from social networks. A publicly available endpoint is required.

    Please use our support form to request new features.

    Social Networking Endpoints

    The following endpoints are present for the following services.

    Unless otherwise noted, the URL parameters need to be URL Encoded.

    Twitter

    The endpoints for Twitter has the following format:

    Twitter endpoint URL Encoding: The individual parameters need to be URL Encoded

    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.

    Facebook URL Example: https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdlxplugins.local%2Fhighlight-and-share%2F&t=Highlight%20and%20Share

    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.

    LinkedIn URL Example: https://www.linkedin.com/sharing/share-offsite/?mini=true&url=https%3A%2F%2Fmediaron.com%2F&title=your-title

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

    Xing URL Example: https://www.xing.com/spi/shares/new?url=https%3A%2F%2Fmediaron.com%2F

    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.

    Reddit URL Example: https://www.reddit.com/submit?resubmit=true&url=https%3A%2F%2Fmediaron.com%2F&title=your-title

    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.

    Tumblr URL Example: https://tumblr.com/widgets/share/tool?canonicalUrl=https%3A%2F%2Fwp.me%2Fp5vPnJ-5rC&content=As%20far%20as%20Holly%3F%20I%20got%20her%20stamp%20of%20approval.&title=Highlight%20and%20Share%3A%20a%20Branding%20and%20Admin%20Refresh&posttype=quote

    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.

    Telegram URL Example: https://t.me/share/url?url=https%3A%2F%2Fmediaron.com%2F&text=some

    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.

    WhatsApp URL Example: whatsapp://send?text=your-url-encoded-text

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

    Twitter

    [has_click_to_share show_click_to_share="false"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share show_click_to_share_text="false"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share show_icon="false"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" icon="has-share-9"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="pink" icon_size="large"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share custom_share_text="Share this instead"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" icon="has-share-9" font_family="Josefin Sans" button_font_family="Lato"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" icon="has-share-9" font_family="Josefin Sans" button_font_family="Lato"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" click_text="Share This!"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share margin="20px auto"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" padding="35px 45px"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" icon_color="#f58220" icon_color_hover="#e76f1a"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" text_color="#f58220" text_color_hover="#e76f1a"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="purple" share_text_color="#f58220" share_text_color_hover="#e76f1a"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="default" background_color="#dee2e6" background_color_hover="#FFFFFF"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="default" font_size="large"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="default" click_share_font_size="large"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="default" border="1px solid red" border_hover="1px solid black"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="default" border_radius="10px"]This is some text I'd like to share.[/has_click_to_share]
    [has_click_to_share theme="default" max_width="550px" border_radius="10px"]This is some text I'd like to share.[/has_click_to_share]
    https://twitter.com/intent/tweet?via=mediaronllc&url=https%3A%2F%2Fmediaron.com%2F&text=some&hashtags=
    Logo
    Logo
    Logo
    Logo