Category Archives: WordPress Plugins

CM Tooltip Glossary (Ecommerce) Review: Build a Knowledge Base Without the Heavy Lifting

Are you tired of stumbling over your words when trying to explain a complicated term? Or maybe you just want an easy way to link to definitions on your WordPress website without breaking a sweat. Either way, you’re in luck because we’ve got the lowdown on one of the best WordPress glossary plugins out there: [...]

Read More...

The post CM Tooltip Glossary (Ecommerce) Review: Build a Knowledge Base Without the Heavy Lifting appeared first on Learn WordPress with WPLift.

GravityView Review: Supercharge Your Gravity Forms Experience

Use Gravity Forms? Heck yeah! It’s one of the top WordPress form plugins, giving you the flexibility to create all sorts of forms for your website. But displaying all that juicy data it collects on the front-end of your site? Not so easy, my friend. Enter GravityView, the ultimate sidekick for your Gravity Forms adventures. [...]

Read More...

The post GravityView Review: Supercharge Your Gravity Forms Experience appeared first on Learn WordPress with WPLift.

CM Answers Review: Is It the Best AI-Powered Q&A Forum Plugin?

Well, well, well, looks like we’ve got a real Sherlock Holmes here, stumbling upon all those question and answer sites. Bravo! But let’s be real, who wants to be just a user when you can be the king of your own Q&A castle?  Lucky for you, WordPress has got the goods to make it happen. [...]

Read More...

The post CM Answers Review: Is It the Best AI-Powered Q&A Forum Plugin? appeared first on Learn WordPress with WPLift.

How to Customize the Background Color of WordPress Block Editor

Do you want to change the background color of the WordPress block editor for admins?

Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.

In this article, we’ll show you how to easily customize the background color of the WordPress block editor for admin area.

Changing the background color of WordPress block editor

Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.

Why Change the Background Color of the Block Editor in WordPress?

You may want to change the background color of the WordPress block editor for a number of reasons.

For instance, most modern WordPress themes use the same background color for the block editor as the live website including Astra, OceanWP, GeneratePress, and more.

However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.

Another reason for changing the background color could be personal preference.

For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.

Default block editor

That being said, let’s see how you can easily change the WordPress editor background color.

How to Change the WordPress Editor Background Color

You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.

However, keep in mind that even the smallest error in the code can break your website and make it inaccessible. That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.

First, you need to install and activate the free WPCode plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.

From here, you have to click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.

Next, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

Choose PHP Snippet option as the code type for changing editor background color

After that, you need to copy and paste the following code into the ‘Code Preview’ box.

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Next, you need to look for the following code in the PHP snippet you just pasted.

background-color: #bee0ec;

Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.

Paste the code snippet for changing the editor background color

After that, you need to scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.

Next, you need to select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.

Choose the insertion method and location of the code snippet

After that, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’

Finally, don’t forget to click on the ‘Save Snippet’ button to save your changes.

Save the code snippet for changing the background color

Now, go visit the block editor from the admin sidebar.

This is how the block editor looked on our site after adding the CSS code snippet.

Editor color preview

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on 85+ time saving WordPress shortcuts, or take a look at our top picks for the best WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Customize the Background Color of WordPress Block Editor first appeared on WPBeginner.

How to Use Icon Fonts in WordPress Post Editor (No Code)

Do you want to use icon fonts in the WordPress post editor?

Icon fonts allow you to easily use images and symbols in text. They are lightweight and won’t slow down your site, and they can be easily scaled to any size and styled like any other text font.

In this article, we’ll show you how to easily use icon fonts in the WordPress post editor without writing any HTML code.

Using icon fonts in the WordPress editor

We’ll show you multiple methods, each one using a slightly different approach than the other. You can choose one that works best for you.

Method 1. Adding Icon Fonts in WordPress Post Editor using JVM Rich Text Icons

This method is recommended to use on any kind of WordPress website. It is easy to use and works seamlessly with the block editor.

First, you need to install and activate the JVM Rich Text Icons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can simply edit a WordPress post or page or create a new one. Inside the post editor, add a new paragraph block, and you’ll see a new Flag icon in the block toolbar.

Icon font button in the block toolbar

Clicking on it will show a popup of icons to choose from. It uses the popular Font Awesome icon fonts by default.

You can use the search to look for an icon or simply scroll down to find the icon you want, and then click to add it.

Choose icons to insert

One advantage of using icon fonts is that you can use CSS to style them.

However, since you are already using the block editor, you can simply use the built-in color tools to style the icons.

Style icon fonts using block editor tools

The plugin allows you to use icon fonts in most text blocks such as Paragraph, List, Button, Columns, Cover, and more.

Here is an example of using icon fonts and block options to style three columns.

Icon fonts in columns

Another useful example of using icon fonts is with buttons.

This time we are using inline icon fonts alongside some text for the two buttons.

Using icon fonts in buttons and lists

Feel free to use the block editor tools like text alignment, colors, spacing, and more to get the most out of the icon fonts.

Method 2. Add Icon Fonts in WordPress Post Editor with Font Awesome

This method requires you to add shortcodes in the post editor to display icon fonts. You can use this method if you don’t need to regularly use icon fonts in your WordPress posts and pages.

First, you need to install and activate the Font Awesome plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can edit a post or page in WordPress and use the following shortcode to add a font icon.

[icon name="home"]
Adding icon fonts using shortcode

The name parameter here is the name of the font used by Font Awesome. You can find the entire list on the Font Awesome cheatsheet page.

Once added, you can preview your post or page to see how the icon will look on the live site since it will not display as an icon in the block editor.

This is how it looked on our test site.

Font icon preview

You can use the shortcode inside a paragraph and inline with other text. You can also add it on its own using the ‘Shortcode’ block.

However, using the ‘Shortcode’ block will not give you the styling options you’ll get with other text blocks.

You can also add the shortcode inside columns to create a features row.

Shortcode in columns

It would be a bit trickier as you will not be able to see the actual images, and the column heights will keep changing within the editor.

Here is how it looked on our test website. The columns are the same height, even though they are not in the editor.

Icon fonts preview using Font Awesome

You’ll probably have to preview your work in a new browser tab many times to see how it will look to users.

Method 3. Using Icon Fonts with WordPress Page Builders

This method is great if you are creating a landing page or designing your website using a WordPress page builder like SeedProd.

SeedProd is the best WordPress page builder on the market. It allows you to easily create beautiful landing pages or design your complete website.

SeedProd WordPress Website Builder

First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you’ll be asked to enter your plugin license key. You can find this information under your account on the SeedProd website.

SeedProd license key

After entering your license key and clicking ‘Verify Key,’ you can start working on your landing page.

Simply go to the SeedProd » Landing Pages page and click on the ‘Add New Landing Page’ button.

Add new landing page

After that, you will be asked to choose a template for your landing page.

SeedProd comes with a bunch of beautiful designs that you can use as a starting point, or you can start with a blank template and design the whole thing yourself.

Choose landing page template

For this tutorial, we will be using a pre-designed template. Simply click on a template to select it and continue.

Next, you will be asked to provide a title for your landing page and choose a URL.

Provide page title and URL

After entering them, click on the ‘Save and Start Editing the Page’ button to continue.

SeedProd will now launch the page builder interface. It is a drag-and-drop design tool where you can simply point and click on any item to edit it.

SeedProd page builder interface

You can also drag and drop blocks from the left column to add new elements to your design.

For the sake of this tutorial, we are going to add the Icon block.

Add icon block

After you add the block, you can simply click to edit its properties.

The left column will change to show the options for the Icon block. You can click into the ‘Icon’ section to the left and choose a different icon image or change the color and style.

Icon block settings

Another way to use icons in SeedProd is by adding the ‘Icon Box’ block.

The difference between this and the ‘Icon’ block we used previously is that ‘Icon Box’ allows you to add text along with your chosen icon.

This is one of the most common ways to use icons when displaying product features, services, and other items.

Icon box block

You can place your icon box inside columns, choose colors, and adjust the icon size to your liking.

Additionally, you can also format the accompanying text using SeedProd’s formatting toolbar.

Icon box inside columns

Once you are finished editing your page, don’t forget to click on the ‘Save’ button at the top right corner of the screen.

If you’re ready, you can click ‘Publish’ for the page to go live, or you can click on ‘Preview’ to make sure it looks like you want it to.

Save and publish your landing page

You can also click on ‘Save as Template’ so you can reuse this design with SeedProd on other parts of your website.

Here is how the icon fonts looked on our test website.

Icon fonts preview

We hope this article helped you learn how to use icon fonts in WordPress post editor without writing HTML code. You may also want to see our WordPress performance guide to optimize your website speed or the best landing page plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Use Icon Fonts in WordPress Post Editor (No Code) first appeared on WPBeginner.

How to Create a Custom Shape Divider in WordPress

Do you want to add custom shape dividers to your WordPress website?

Shape dividers can organize your content in an engaging and eye-catching way. They can also highlight your site’s most important content, so visitors and customers don’t miss out on crucial information.

In this article, we will show you how to create a custom shape divider in WordPress.

How to create a custom shape divider in WordPress

Why Create a Custom Shape Divider in WordPress?

A shape divider is a type of section divider that you add between blocks of content.

These dividers can be simple, such as a horizontal line created with built-in WordPress blocks.

A custom shape divider, created using the built-in WordPress tools

You can use these basic dividers to organize and separate content, which is particularly useful on pages that cover lots of different topics.

You can also create more advanced shape dividers using page builder plugins and other web design software. These can highlight your site’s most important content so it stands out to visitors and customers.

A custom shape divider, created using SeedProd

A professional-looking shape divider can also make a page more interesting and engaging.

For example, you might use them to create a unique background for your email newsletter signup form.

How to create a custom shape divider using SeedProd

With that being said, let’s see how you can create a custom shape divider in WordPress. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Create a Simple Shape Divider (No Plugin Required)

The easiest way to add a custom shape divider to WordPress is by using the built-in Separator block.

This method allows you to add a horizontal line separator in between any WordPress blocks, and then customize the line’s color and style.

A custom divider created using the WordPress block editor

This method doesn’t let you add different shapes to WordPress and has limited customization settings. However, you won’t need to install an extra WordPress plugin, so this is the easiest way to add a simple shape divider to your website.

To get started, simply open the post or page where you want to add an horizontal divider in the content editor. Then, click on the ‘+’ button where you want to place that divider.

Adding a Separator block to WordPress

In the popup, type in ‘Separator.’

When the right block appears, click to add it to the page or post.

Add a custom shape divider to a WordPress website

To customize the default Separator block, give it a click and then use the settings in the right-hand menu.

You can switch between default, wide line, and dots using the buttons in the ‘Styles’ section.

Adding different line styles in WordPress

You can also change the line’s color so that it matches the rest of your theme or branding.

To do this, click on ‘Background’ and then choose a color from the popup that appears.

How to style the Separator block in WordPress

When you’re happy with how the divider looks, you can either click on the ‘Publish’ or ‘Update’ button to make the shape divider live.

If you are looking to use different shape and customize every part of your dividers, then we recommend using the SeedProd plugin.

SeedProd is the best WordPress page builder plugin on the market, and it allows you to add a custom shape divider to any section, row, or column using a simple drag-and-drop editor.

Creating a custom shape divider in WordPress

It also comes with over 180 professionally-designed templates and more than 90 blocks that you can use to create beautiful custom home pages, landing pages, and more.

Note: There is a free version of SeedProd on available on WordPress.org, but we’ll be using the Pro version since it comes with a wide range of shape dividers.

The first thing you need to do is install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to enter your license key.

Adding a license key to the SeedProd page builder

You can find this information under your account on the SeedProd website. After entering the license key, click on the ‘Verify Key’ button.

With that done, go to SeedProd » Pages and click on the ‘Add New Landing Page’ button.

How to create a new landing page design using SeedProd

After that, it’s time to choose a page design template. SeedProd has a ton of professionally-designed templates that you can fine-tune to perfectly suit your WordPress website.

To select a template, simply hover your mouse over it and then click the ‘Checkmark’ icon.

Choosing a page design template for your WordPress website

Next, go ahead and type in a name for the page. SeedProd will automatically create a URL based on the page’s title, but you can change the URL to anything you want.

For example, you may want to add some relevant keywords, which will help search engines understand what the page is about and may improve your WordPress SEO.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Creating a custom landing page using SeedProd

Next, you’ll be taken to the drag-and-drop page builder, ready to customize the template.

The SeedProd editor shows a live preview of your design to the right and some block settings on the left.

The SeedProd drag and drop page builder

The left-hand menu also has blocks that you can drag onto your layout.

For example, you can drag and drop standard blocks like buttons and images or use advanced blocks such as the countdown timer, contact form, social sharing buttons, and more.

Adding blocks to a WordPress page builder

To customize a block, just click to select it in your layout.

The left-hand menu will then show all the settings you can use to configure that block. You can also change the page’s background colors, add background images, or change the color scheme and fonts to better match your brand.

Customizing the background color in WordPress

SeedProd also comes with ‘Sections,’ which are collections of blocks that are often used together. For example, SeedProd has a header section, hero image, call to action, customer testimonialsFAQs, features, footer sections, and more.

To look through the different sections, simply click on the ‘Sections’ tab.

Adding a Section to a custom page template

You can move sections and blocks around your layout using drag and drop.

If you want to delete a block, then simply hover over it and then click on the trash can icon when it appears.

Deleting blocks from a custom page design

Whether or not you choose to use a SeedProd section, you can now create a custom shape divider. Simply click to select the section, row, or column where you want to add the divider.

Then, click on the ‘Advanced’ tab in the left-hand menu.

SeedProd's 'Advanced' settings

Now, click to expand the ‘Shape Divider’ section.

To start, you can choose where to show the shape divider by selecting either the ‘Top’ or ‘Bottom’ button.

Adding a custom divider to the bottom of a WordPress block

You can now open the ‘Type’ menu and choose the shape divider that you want to use.

As you select different shapes, the live preview will update automatically so you can try different styles to see what looks the best.

Adding custom shape dividers to a custom landing page

After choosing a shape divider, you can style it using the new settings.

To start, you can click on ‘Color’ and then choose a new color from the popup that appears.

Adding a color to a custom shape divider in WordPress

With that done, you can make the divider bigger or smaller by dragging the ‘Width’ and ‘Height’ sliders.

If you already have a specific size in mind, then you can type those numbers into the boxes.

Create a custom shape divider in WordPress

You can also try flipping the divider by clicking to enable or disable the ‘Flip’ switch.

By default, the divider will appear behind the rest of the content, so users can clearly see any text, images, or other content that overlaps the divider.

However, moving the shape to the front can create some interesting effects. If you want to see how this looks, then simply click to enable the ‘Bring to Front’ switch.

Bringing the custom shape divider to the front

To add more dividers simply follow the same process described above.

You can even add a shape divider to the top and bottom of an area, which often creates some impressive and eye-catching results.

Adding multiple custom shape dividers to a single section

You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.

When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.

Publishing a custom shape divider

How to Add Shape Dividers to a WordPress Theme

SeedProd’s drag-and-drop editor gives you the freedom to add a unique shape divider to any page. However, sometimes you may want to use the same shape dividers on multiple pages, or even across your entire WordPress blog or website.

This will help you create a consistent design and can also save you a ton of time. In this case, we recommend adding a shape divider to your theme using the SeedProd theme builder.

With SeedProd, you can create a custom WordPress theme without writing any code. It creates all the files that make up your theme, including the sidebar, header, footer, single posts, and more.

The SeedProd theme builder

You can then customize these files using the familiar drag-and-drop builder. This includes adding shape dividers by following the same process described above.

When you activate the new theme using SeedProd, it will overwrite your existing WordPress theme, so you should only use this method if you want to replace your current theme.

For detailed step-by-step instructions, please see our guide on how to easily create a custom WordPress theme.

We hope this tutorial helped you learn how to create a custom shape divider in WordPress. You may also want to learn how to increase your blog traffic, or see our expert pick of the best social proof plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Custom Shape Divider in WordPress first appeared on WPBeginner.

How to Add No Right Click on WordPress Images

Do you want to add no right-click to your WordPress images?

If you’re a photographer, artist, or content creator, then you’re probably worried about people stealing your images. While it’s difficult to completely stop image theft, you can make it more difficult for people to steal pictures from your website.

In this article, we’ll show you how to add no right-click on WordPress images and galleries.

How to add no right click on WordPress images

Why Add No Right-Click on WordPress Images?

The Internet has made it easier to share your work with the world, but it’s also made it easier for people to steal your images.

These people might use your content to promote scams or fraudulent products. They might even sell your digital art and graphics online, making money from your hard work while you make none.

If you’re an online influencer or have a big social media following, then people might even steal your photos and impersonate you online. For example, they might pretend you’re an affiliate marketing partner.

Even if you simply write a WordPress blog, people might still use your personal photos as part of online scams like fake ads or reviews.

Scammers could even scrape your WordPress blog content and images, and then republish it on other websites. This duplicate content can damage your WordPress SEO.

While there’s no single solution that can completely prevent image theft, you can make your site a less attractive target.

With that being said, let’s see how you can add no right-click on WordPress images and galleries. Simply use the quick links below to jump straight to the method you want to use.

Method 1. How to Add No Right Click to All Your WordPress Images

The easiest way to protect your images is by using No Right Click Images. This free plugin allows you to disable right-clicking for images only, so users can still right-click on your other content including links.

You can also enable and disable right-click based on whether the visitor is logged into their account. This is perfect if you run a subscribers-only stock photo website or some other form of membership site.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Settings » No Right Click Images to configure the plugin settings.

How to add no right-click on WordPress images

The default options should work for most users, but it’s still worth checking whether you need to make any changes. In particular, these settings can help you close any loopholes that people might use to get around the no right-click protection.

Out of the box, the plugin disables dragging images so users can’t copy an image by dragging it onto their desktop or another tab. With that in mind, we always recommend leaving ‘Disable Dragging of images’ checked.

No Right Click Images also disables touch and gesture events, which can stop people from stealing images on devices that make use of those sorts of actions. However, this can cause problems if you use images as links or buttons, or if your visitors interact with your pictures using gestures, such as before-and-after images.

If you do encounter problems, then you can re-enable support for touch events and gestures by unchecking the following boxes: ‘Disable Touch events’ and ‘Disable Gesture events.’

How to disable touch events and gestures on your WordPress website

By default, visitors can still open a context menu and save your images on Apple devices.

That said, you may want to check the box next to ‘Disable context menu on Apple devices.’ This adds a style to images on iPhones and iPads, which stops users from opening the Apple context menu and stealing your images.

How to disable the Apple context menu on your WordPress blog or website

When you’re happy with how the plugin is set up, don’t forget to click on ‘Save Changes’ to store your settings.

You can now log out of your WordPress admin account and visit your website. Then, simply right-click on any image to check the plugin is working.

Method 2. How to Add No Right Click to Image Galleries

If you want to protect individual images across your website, then the first method is a good choice. However, sometimes you may want to create an image gallery in WordPress, and then disable right-clicking for the entire gallery. For example, you might build a photography portfolio or display your most popular products in a nice gallery layout.

This is where Envira Gallery comes in.

It is one of the best WordPress gallery plugins on the market and comes with a protection addon that disables the ability to right-click on any galleries you create using the plugin.

How to disable right-click for a WordPress gallery

The first thing you need to do is install and activate the Envira Gallery plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Envira Gallery » Settings and enter your license key.

Activating the Envira Gallery WordPress plugin

You can find this information under your account on the Envira Gallery website.

With that done, click on ‘Verify Key.’

Next, head over to the Envira Gallery » Addons page. Here, find the Protection addon and click on its ‘Install’ button.

Activating the Protection addon for Envira Gallery

When you see the ‘Inactive’ slider, give it a click so it shows ‘Active’ instead.

After that, you’re ready to start creating protected image galleries.

How to protect your galleries using the Protection addon

To get started, go to the Envira Gallery » Add New page and type in a name for your gallery.

This is just for your reference so you can use anything that helps you identify the gallery in your WordPress dashboard.

Creating a new gallery using a WordPress plugin

You’re now ready to add images to the gallery. You can click on ‘Select Files from Your Computer,’ or ‘Select Files from Other Sources’ and then choose images from the WordPress media library.

After that, scroll to the ‘Currently in your Gallery’ section and click on the ‘Misc’ tab.

How to disable no right-click for your image gallery

Under ‘Image Protection Settings,’ check the box next to ‘Enable Image Protection.’

This disables the right-click action for all your Envira galleries.

Enabling image protection for your image galleries

If a visitor tries to right-click a gallery, you may want to show a popup on your WordPress website. For example, you might let this person know your images are copyrighted, and can’t be downloaded without your permission.

If you’re selling your digital artwork or photos, then you can even use the popup to get more sales on your online store.

Showing a popup on right-click

To create a popup, check the box next to ‘Enable Popup Alert.’

You can then type in a title and message.

Show a popup when a visitor right-clicks an image

By default, visitors will click an ‘OK’ button to close the popup.

You can replace ‘OK’ with your own custom messaging by typing into the ‘Button Text’ field.

Adding a custom message to an image protection popup

When you’re happy with how the gallery is set up, click on ‘Publish’ to save your settings.

To add the gallery to your website, simply edit the post or page where you want to show the images and then click on the ‘+’ icon.

In the popup, type in ‘Envira Gallery’ and then click on the right block when it appears.

Add the Envira Gallery block to WordPress

This adds the Envira Gallery block to the page.

You can now open the dropdown menu and select the gallery you just created.

Publishing an image gallery to your website or blog

When you’re happy with how the page looks, either click on ‘Publish’ or ‘Update’ to make the protected gallery live.

Pros and Cons of Disabling Right-Click on WordPress Images

Disabling the right-click action makes it more difficult for people to steal your images. It also reminds users that they can’t simply download files without the owner’s permission.

Sometimes, this will be enough to stop people from stealing your photos. This is particularly true for scammers, who tend to look for easy ways to download as many images as possible. It can also discourage genuine visitors, who may assume they can download and use any online content.

However, there are still ways to get around a website’s no right-click protection. For example, users can still download an entire page.

How to download images using the browser tools

This will copy the page’s content into a file, including all the images.

People can even use their browser’s view source or inspect tool to directly access an image file without right-clicking.

Inspecting an image using the built-in browser tool

With that in mind, you shouldn’t assume that disabling right-click is enough to keep your images safe.

On the other hand, some visitors may have a genuine reason why they need to download your images. For example, they may want to share your work with a potential future customer or post it on social media.

You might even allow people to reuse your images in specific ways, such as using your digital artwork on a non-profit website. In this case, disabling right-click can stop genuine users from accessing your images, which is a poor visitor experience.

If you do add no right-click to your website, then we recommend giving people an easy way to request access to your images. You can do this by adding a contact form to WordPress using a plugin such as WPForms.

How to create a contact form using WPForms

If there’s a chance your visitors may need immediate access, then you can also add live chat to your site. This allows people to send their requests and get a response in real time, which is a great user experience.

Alternative Ways to Discourage Image Theft on Your Website

When it comes to protecting your images, disabling right-click is a good first step. However, if you really want to stop thieves then we recommend taking some extra measures.

With that in mind, here are some additional ways to stop people from downloading, reusing, and selling images without your consent.

1. Add a Copyright Notice Below Your Images

If you haven’t already, then you should add a copyright notice to your website. We recommend adding a dynamic copyright date to the WordPress footer so it appears on every page and always shows the current date.

An example of a copyright notice, in a website footer

This is a great start, but it’s also a good idea to add a copyright notice below each image in plain text. This discourages people from stealing your photos, without affecting how that image looks on your website.

Some visitors simply assume they can download and re-use any images they see online. By adding a copyright notice, you can clear up any confusion and stop people from making this innocent mistake.

How to protect your photos with a copyright disclaimer

2. Add Watermarks to Your Images

Another option is adding a watermark to your images. This works great for stock photography websites where visitors expect to see a watermark, but your images might not look their best.

An example of a stock photography website with watermarks

This can be a problem for some websites, particularly if you’re a photographer or digital artist who’s promoting their work.

For that reason, we recommend positioning your watermarks carefully so they discourage people from stealing the image, without ruining how that image looks on your website.

To learn more, please see our guide on how to automatically add watermarks to images.

3. Set Up Automatic Content Theft Notifications

Sometimes, websites will mention your business or brand name next to the stolen images, particularly if they’ve scraped an entire page from your site.

With that in mind, it’s a good idea to set up brand name notifications using a service such as Google Alerts. Simply head over to the Google Alerts page and type in the name of your site, brand, products, or any other important text.

If there’s a specific phrase or call to action that you add to every post, then you may also want to type this into Google Alerts.

Set up content theft notifications using Google Alerts

After that, use the dropdown menus to configure the alert and type in the email address where you want to get the notifications.

When you’re happy with how the alert is set up, go ahead and click on ‘Create Alert.’

Now, when someone publishes scraped content of yours, you will get an email letting you know about it.

4. Reverse Image Search with Google

You can use Google image search to find all the places where a particular image is used online. Simply head over to the Google Images page and click on the small camera icon.

Protect your site against content theft

This will add a section where you can paste a direct link to the image or upload a copy from your computer.

After that, click on ‘Search.’

How to do a Google Reverse Image Search

Google will now show all the images that are similar to your picture. If you find the exact image on another website, then you can click through to see how that picture is being used.

If you have lots of photos, then checking each one manually can take a lot of time and effort. However, Google reverse image is a great way to uncover sites that re-using your images, so it’s smart to do a search from time to time.

Alternatively, you can use an advanced reverse image service such as Pixsy.

5. Contact the Website’s Host or Registrar

If someone has stolen and re-published your images, then we recommend contacting that person. There’s a chance they may be unaware they’re using copyrighted images illegally.

However, if it’s a spam website then you may struggle to find contact information. Instead, you can use the IsItWP lookup tool to find out where the domain and website are hosted.

The IsItWP lookup tool

The tool will pull up any available information, including the web hosting company.

Stealing content is an illegal activity and most web hosting companies don’t want to host sites that are breaking the law. With that in mind, you can contact the host and registrar directly to try and get the site taken down.

Most reputable web hosting companies take DMCA (Digital Millennium Copyright Act) complaints seriously, so this method usually gets good results.

We hope this article helped you add no right-click on WordPress images. You may also want to see our ultimate WordPress security guide or check out our expert pick of the best Instagram WordPress plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add No Right Click on WordPress Images first appeared on WPBeginner.

How to Add Fuzzy Search in WordPress to Improve Results

Do you want to add fuzzy search to your WordPress website?

Adding fuzzy search helps users easily find the information they are looking for, even if they misspell or otherwise incorrectly enter their query. This improves the overall search experience and user engagement on your website.

In this article, we’ll show you how to easily add fuzzy search to your WordPress website.

How to add fuzzy search to your WordPress website

What is Fuzzy Search And Why Should You Add it to Your Website?

Fuzzy search looks for partial matches for a search term, even if no exact matches are available, and shows users the most appropriate results.

This way, users can find the right content on your website even if they make typos in the search query.

By default, all WordPress websites come with a basic search feature that only shows results for exact matches.

For instance, if a user misspells a term, no results will be shown not even partial matches. This creates a bad search experience for users and often causes them to leave your site. You can see this in the image below.

No search results found

This is where SearchWP comes in. It is the best WordPress search plugin on the market that automatically replaces the default search with a much better search feature.

Unlike the default WordPress search, SearchWP can use fuzzy search as well as look for matches in titles, excerpts, post or page content, products, custom fields, categories, tags, PDF files, and more.

For instance, if a user searches for ‘vintage furniture’ on your WordPress blog but misspells a word, they’ll still be able to find your posts on this topic.

The image below shows the same misspelled search using the SearchWP plugin.

That being said, let’s see how you can easily add fuzzy search to your WordPress website.

How to Add Fuzzy Search to Your WordPress Website

First, you need to install and activate the SearchWP plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you need to visit the SearchWP » Settings page from the admin sidebar and switch to the ‘License’ tab.

Next, you need to copy and paste your license key and click on the ‘Activate’ button. You can find the license key under your account on the SearchWP website.

SearcWP license

Fuzzy search is not enabled by default in SearchWP, but you can easily turn it on. First, you need to switch to the ‘Advanced’ tab in the plugin’s settings page.

Next, you need to simply check the ‘Partial matches (fuzzy when necessary)’ option under the ‘Actions & Settings’ section.

Check the Partial matches option in the Action & Settings section

Doing so will enable the fuzzy search feature for your site.

Once that is done, you should review the other SearchWP settings for your site. The plugin comes with a bunch of powerful options that allow you to customize the search feature on your website.

You can see them by simply switching to the ‘Engines’ tab under plugin settings.

SearchWP settings

From here, you can assign weight to different search results.

You can also click on the Sources & Settings button to select additional search areas. For instance, you can enable search for comments, products, and more instead of simply posts and pages.

Enable search for posts, comments, and pages

To learn more, see our complete guide on how to improve WordPress search with SearchWP.

Adding a Search Form to Your Website

SearchWP automatically replaces the default WordPress search.

This means that if you have already added the WordPress Search block or widget to your website, then it will start using SearchWP custom algorithm for results.

However, if you have not added the search form to your website, then you can do so by simply adding the Search block or widget to any post, page, or sidebar area.

Simply head over to the Appearance » Widgets page. Find the ‘Search’ block and simply add it to your sidebar.

Don’t forget to click on the ‘Update’ button to store your settings.

Search widget

However, if you are using a block theme, then your theme may not have a widget-ready area. In that case, you won’t see the Widgets screen under the Appearance menu.

Instead, you can use the site editor to add the search block to your website. Simply go to the Appearance » Editor page to launch the editor.

After that, add the search block to your website where you want to display the search form.

Adding search block in site editor

Don’t forget to click on the Update button to save your settings.

You can now visit your website and try out the new more powerful search feature.

You can see in the image below how fuzzy search returns multiple relevant results with a misspelled query.

Search results with fuzzy search

We hope this article helped you learn how to easily add fuzzy search to your WordPress website. You may also want to see our tutorial on how to add multilingual search in WordPress and our list of the most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Fuzzy Search in WordPress to Improve Results first appeared on WPBeginner.

How to Add WhatsApp Chatbox and Share Buttons in WordPress

Do you want to add WhatsApp chatbox and share buttons in WordPress?

WhatsApp is one of the most popular messaging platforms and has about 2.2 billion users worldwide. Adding a Whatsapp share button will allow you to connect with the customers and build user engagement, and adding a chatbox button will let users message you directly through your website.

In this article, we’ll show you how to easily add a WhatsApp share button in WordPress.

How to add WhatsApp share button in WordPress

Why Add a WhatsApp Button in WordPress?

WhatsApp is an instant messaging app that allows people worldwide to easily contact each other.

Adding a WhatsApp share button to your WordPress website will allow visitors to easily share your content with their contacts.

Moreover, you can also add a WhatsApp chatbox enabling users to have a direct conversation with you.

For instance, if you have an online store, then a WhatsApp chat button can be used by customers to make product queries without having to fill out any forms or go through customer support.

It can result in increased user engagement and lower cart abandonment rates.

Having said that, let’s see how you can easily add a WhatsApp share button in WordPress.

Method 1: Add a WhatsApp Share button in WordPress

If you want to add a WhatsApp share button to your website, then this method is for you.

First, you need to install and activate the Sassy Social Share plugin. For more instructions, please see our beginner’s guide on how to install a WordPress plugin.

Upon activation, you need to visit the Sassy Social Share menu from the admin sidebar.

From here, you need to switch to the ‘Standard Interface’ tab at the top.

Then, you need to scroll down to the ‘Select Sharing Services’ section and simply check the box next to the WhatsApp option.

Check WhatsApp share option

You can also add the Share button for other social media platforms including Facebook, Instagram, Pinterest, Twitter, and more.

Once, you’re done, don’t forget to click on the ‘Save Changes’ button to store your settings, and then you can head to the ‘Theme Selection’ tab.

From here, you can customize the share buttons by changing their size, shape, logo or background color, and more. It’s a good idea to go with the WhatsApp brand colors for the share button so that users will recognize it more easily.

Customize the WhatsApp share button

Once you are finished, don’t forget to click on the ‘Save Changes’ button to store your settings.

You can now visit your website to see your WhatsApp share button in action.

Here is how it looked on our demo website.

WhatsApp Share button

Don’t want to add WhatsApp button to every page? Don’t worry, the plugin also allows you to easily add it to single posts and pages as well.

Adding WhatsApp Share Button in Block Editor

If you only want to show the WhatsApp share button on specific posts and pages, then first you need to turn off the global display of sharing buttons.

To do that, simply go to the Sassy Social Share page in the WordPress admin sidebar and switch to the ‘Standard Interface’ tab.

Next, you need to uncheck the box for the ‘Enable Standard sharing interface’ option.

Disable standard buttons

Next, switch to the ‘Floating Interface’ tab.

From here, uncheck the box next to the ‘Enable Floating sharing interface’ option.

Disable floating buttons

Now that you have disabled the standard and floating social sharing buttons, you go ahead and WhatsApp share button to any page or post on your website using a shortcode.

Simply open the post or page where you want to display the WhatsApp share button in the content editor, or you can just create a new one.

From here, simply click on the Add Block (+) button at the top left corner and search for the ‘Shortcode’ block. After that, simply add the block to the page.

Add shortcode in the block editor

Next, you need to copy the following shortcode and paste it into the ‘Shortcode’ block.

[Sassy_Social_Share]

Once you’re done, simply click on the ‘Publish’ or ‘Update’ button to store your changes. Your WhatsApp Share button will look like this.

WhatsApp share button on a page

Adding WhatsApp Share Button as a Widget

To add the WhatsApp share button to the sidebar of your website, you need to visit the Appearance » Widgets page from the admin sidebar.

From here, simply click on the Add Block (+) button at the top left corner and locate the ‘Shortcode’ block.

Next, you need to add the ‘Shortcode’ block to the sidebar.

WhatsApp share button as a widget

After that, simply copy and paste the following shortcode into the block.

[Sassy_Social_Share]

Next, click on the ‘Update’ button to store your settings.

This is how your WhatsApp share button will look once it’s added to the website sidebar.

WhatsApp share button in the sidebar

Adding the WhatsApp Share Button in the Full Site Editor

If you’re using a block theme, then you’ll be using the full site editor and won’t have access to the ‘Widgets’ page.

First, you need to visit the Appearance » Editor option from the admin sidebar to launch the full site editor.

Next, you need to click on the ‘Add Block’ (+) button at the top of the screen and add the ‘Shortcode’ block to any suitable place on your website.

After that, add the following shortcode to the block.

[Sassy_Social_Share]
Add WhatsApp share button in Full site editor

Once, you’re done, click on the ‘Save’ button at the top.

This is how the WhatsApp share button looked on our demo website.

WhatsApp share button preview in FSE

Method 2: Add a WhatsApp Chatbox Button in WordPress

This method allows you to add a WhatsApp chatbox button in WordPress.

This means that when a user clicks on the WhatsApp chat button, they’ll be able to send you a direct message on your WhatsApp phone number.

Note: You won’t be getting any messages directly inside your WordPress dashboard, but you will be able to chat like normal in the WhatsApp mobile app, web interface, and desktop software.

First, you need to install and activate the Click to Chat plugin. For more instructions, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to head over to the Click to Chat menu item that has been added to your WordPress admin dashboard’s sidebar.

From here, you need to start by typing your business phone number in the ‘WhatsApp Number’ field.

This will be the phone number where you’ll receive messages from users.

After that, you need to type a simple message in the ‘Pre-Filled Message’ field. This will be the default message that will be displayed in your WhatsApp chat window.

Provide your WhatsApp phone number

Next, you need to scroll down to the ‘Style, Position’ section.

You can start by choosing a style for your WhatsApp chatbox from the dropdown menu. By default, this plugin offers about 8 different styles. Simply choose the one that you prefer.

Select a style for the WhatsApp chat box

After that, you need to scroll down to the ‘Position to Place’ section.

From here, you can choose the position and size of your chatbox from the dropdown menus.

Select the position of your chatbox

Next, you need to go to the ‘Display Settings’ section.

Here, you just need to check the ‘Global’ box next to the options where you want to display your WhatsApp chatbox.

For instance, if you want to display the chatbox on your posts, pages, and categories pages, you need to check the ‘Global’ option.

You can also choose the ‘Hide’ option if you don’t want to display the WhatsApp chatbox on a certain page.

Check the Global box

Finally, don’t forget to click the ‘Save Changes’ button to store your settings.

Now, you need to head over to the Click to Chat » Greetings page to select a Greeting dialog from a dropdown menu.

This greeting dialog will be shown along with the WhatsApp button on your page.

Choose a Greeting dialog from the dropdown menu

Once you’ve made your choice, you will need to type the content for the header, main content, and call to action of your greeting dialog.

After that, scroll down to the ‘Customizable Design’ section.

Type content for the greeting dialog

Once here, you can choose the background colors of your main content, header, and message box.

After that, simply click the ‘Save Changes’ button to store your settings

Choose background color for the greeting dialog

Next, you need to visit your website.

By default, this is how your WhatsApp chatbox will look like.

WhatsApp chatbox on a website

Now, we will show you how you can easily add the WhatsApp chat button in the block editor, as a widget, and in the full site editor.

Add the WhatsApp Chat Button in the Block Editor

You can easily add the WhatsApp button to a specific page or post on your WordPress website using the block editor.

For this tutorial, we will be adding the WhatsApp button to a page.

First, you need to go to the Pages » Add New page from the admin sidebar.

This will launch the block editor.

Now, you need to click the ‘Add Block’ (+) button at the top left corner of the screen and click on the ‘Shortcode’ block.

Add shortcode in the block editor

Once the ‘Shortcode’ block is added, you need to copy and paste the following shortcode into the block.

[ht-ctc-chat]

After that, simply click the ‘Publish’ button at the top.

This is how the WhatsApp button looked on our demo website.

WhatsApp button on a page

Adding the WhatsApp Chat Button as a Widget

In this method, we will show you how to easily add the WhatsApp button as a widget in the sidebar of your website.

First, you need to head over to the Appearance » Widgets page from the WordPress sidebar.

Once there, simply click on the ‘Sidebar’ tab to expand it and then click the ‘Add Block’ (+) button at the top.

Next, simply locate and add the ‘Shortcode’ block to the sidebar.

Add the shortcode block in the sidebar

Now, simply copy and paste the following shortcode into the block.

[ht-ctc-chat]

Finally, don’t forget to click the ‘Update’ button to store your settings.

This is how the WhatsApp button looked after being added to the sidebar on our demo website.

WhatsApp button in sidebar

Adding the WhatsApp Chat Button in Full Site Editor

If you’re using a block-based theme with a full site editor, then this method is for you.

First, head over to the Appearance » Editor page to launch the full site editor.

Once there, simply click the ‘Add Block’ (+) button at the top left corner of the screen.

Now, simply locate and add the ‘Shortcode’ block to your preferred place on the site.

Add the shortcode block in the FSE

Once the block is added, simply copy and paste the following shortcode into the block.

[ht-ctc-chat]

In the end, don’t forget to click the ‘Update’ button at the top to save your changes.

This is how the WhatsApp button looked on our site.

WhatsApp button in FSE

We hope this article helped you learn how to add a WhatsApp share button in WordPress. You may also want to see our top picks of the best social media monitoring tools for WordPress users, and our beginner’s guide on how to build an email list.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add WhatsApp Chatbox and Share Buttons in WordPress first appeared on WPBeginner.

How to Easily Translate Your WordPress with TranslatePress

Do you want to translate your website into another language?

By default, WordPress does not offer an easy way to manage multilingual content. However, you can easily translate your WordPress website by using plugins.

In this article, we’ll show you how to easily translate your WordPress website with TranslatePress.

How to translate your WordPress with TranslatePress

Why Use TranslatePress for Translating a WordPress Website?

The best part about WordPress is that it can be used in any language. Most WordPress themes and plugins can also be used and translated into any language as well.

If your business website has a multilingual audience, then it can be super beneficial to translate your content.

You can rely on machine translations like Google Translate, but these translations are not good and sometimes can be quite misleading.

On the other hand, if you’re using a multilingual WordPress plugin, then you need to create multiple posts which require switching back and forth between different languages.

With the TranslatePress plugin, you can translate your website and content using a live editor and won’t need to create multiple posts for the same content.

You can instantly switch languages from the live editor and can also translate themes and plugins using TranslatePress.

Having said that, let’s see how you can easily translate your WordPress website with TranslatePress.

Step 1: Install TranslatePress in WordPress

The first thing you need to do is install and activate the TranslatePress plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to the Settings » TranslatePress page from the WordPress admin dashboard to configure your plugin settings.

From here, you need to switch to the ‘General’ tab.

Now, you first need to choose the default language of your website from the dropdown menu beside the ‘Default Language’ option.

This is the language your WordPress is already downloaded in.

Choose a default language in TranslatePress

After that, you need to choose the language that you want to translate your site into.

Simply head over to the ‘All Languages’ section, and choose a language you want to translate your website into from the dropdown menu below the ‘Language’ option.

After that, you need to click the ‘Add’ button.

Choose a translation language

Now scroll down to the ‘Native Language Name’ setting on the page.

Here, you need to select whether you want to display language names in their own language or in English. You can choose ‘Yes’ or ‘No’ accordingly.

The next option is to choose if you want to display the default language name in the URL as a subdirectory. For example, http://example.com/en/.

We recommend leaving this setting as it is because it is better for search engine optimization.

After that, head over to the ‘Force language in custom links’ setting.

The default option for it is ‘Yes’ which will allow the plugin to change custom links for translated languages, making the URLs more SEO-friendly.

Configure other General settings

In the next option, you can choose if you want to use Google Translate for automatic translations.

The default choice is ‘No’, but you can change that if you would like to use Google Translate.

All you would need to do is provide a Google Translate API key in the next option. You will find a link under the option which will show you instructions on how to get one.

Provide Google Translate API if you want to activate it

Finally, you will come to the options on how you want to display the language switcher on your website. TranslatePress provides you with three choices.

You can use a shortcode, add a switcher to your navigation menu, or display a floating menu. We will show you how to add the language switcher to your website later in this article.

Now, simply go ahead and click on the ‘Save Changes’ button to store your settings.

Step 2: Translating Your Website Content

To translate your website, you can either click the ‘Translate Site’ tab on the plugin’s settings page or the ‘Translate Site’ button in your WordPress admin bar.

This will open the live translation editor in a new browser tab.

Click Translate Site button

Now, you need to simply click the blue translate icon present next to any text on your website that you want to translate.

After that, TranslatePress will automatically load the chosen text in the left column of the translation editor.

Translate website

Once the text is loaded in the column, simply add its transition in the box below and then click the ‘Save Translation’ button at the top to store your changes.

This way, you can translate all the content on any page of your site including navigation menus, buttons, sidebar, widgets, meta-text, and more.

With TranslatePress, you can also instantly start translating any page or post on your site when logged in.

All you would need to do is click on the ‘Translate Page’ button on the top to open up the live editor.

Directly translate page

Another benefit of this plugin is that you only need to translate a specific string once.

Once you have translated a string, the plugin will automatically translate it for you in other places.

Step 3: Adding Language Switcher to Your Website

After translating your site, you will need to add a language switcher to your website.

A language switcher allows users to select a language when they visit your website. It usually displays the flag of each country to indicate languages available on your site.

TranslatePress allows you to add a language switcher by using a shortcode, as a navigation menu item, or as a floating banner.

The language switcher can be displayed as flags, language names, or both.

Adding language switcher in WordPress using shortcode

If you want to add a language switcher in WordPress using shortcode, then head over to the Settings » TranslatePress page from the admin dashboard.

Once you’re on the ‘Settings’ page, scroll down on the ‘General’ tab and then copy the [language-switcher] shortcode in the ‘Language Switcher’ section.

Copy shortcode for the language switcher

You can now paste this shortcode on any page, post, or sidebar widget where you want to display the language switcher.

This is how the language switcher looked on our demo site.

Shortcode language switcher

Adding a language switcher to your WordPress navigation menu

If you want to add a language switcher as a navigation menu item, then go to the Appearance » Menus page from the dashboard.

Note: If you are using a block-based theme with a full site editor, then this method won’t work for you.

From here, you need to click on the ‘Language Switcher’ tab in the ‘Add Menu Items’ section on the left corner of the screen.

Once the tab expands, simply check the languages that you want to display in the language switcher.

After that, click the ‘Add Menu’ button to add the language switcher as a menu item.

Add language switcher in navigation menu

Finally, don’t forget to click on the ‘Save Menu’ button to store your changes.

You will now see a language switcher added to your WordPress navigation menu.

This is how it looked on our test site.

Language switcher added in nav menu

Adding a floating language switcher

If you want to add a floating language switcher, then you simply need to head over to the Settings » TranslatePress page from the admin dashboard.

First, you need to scroll down to the ‘Language Switcher’ section in the ‘General’ tab.

From here, make sure to check the box next to the ‘Floating language selection’ option.

You can also switch the position of the floating language switcher from the dropdown menu on the right corner of the screen.

Add a floating language switcher

After that, don’t forget to click on the save changes button to store your settings.

You can now visit your website to see the floating language switcher at the bottom of every page on your website.

Add floating switcher

We hope this article helped you learn how to translate your WordPress site with TranslatePress. You may also want to see our article on how to create a multilingual sitemap in WordPress and our list of the best WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Translate Your WordPress with TranslatePress first appeared on WPBeginner.