Creating a mobile-friendly WooCommerce WordPress theme can be tricky. There are a lot of factors to consider when it comes to mobile performance, from loading speed to plugins to image optimization. A WooCommerce theme must work well on mobile for obvious reasons; eCommerce shoppers will click away if a website could be more appealing to [...]
The post Best Practices for Creating a Mobile-Friendly WooCommerce WordPress Theme appeared first on Learn WordPress with WPLift.
Launching an eCommerce store is becoming more and more accessible. However, finding the best eCommerce platform for your business can take time and effort: how can you figure out which works best for you? WooCommerce and Shopify are two of the most popular eCommerce platforms. They have one fundamental difference: WooCommerce works specifically with WordPress, [...]
The post WooCommerce vs. Shopify: Which Is The Best E-Commerce Platform For Your Online Store? appeared first on Learn WordPress with WPLift.
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.
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.
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.
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.
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.
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.
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.
To learn more, see our complete guide on how to improve WordPress search with SearchWP.
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.
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.
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.
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.
Do you want to learn how to password-protect your WordPress admin directory?
Adding another layer of password protection to your WordPress admin directory can be a great way to improve your WordPress security.
In this article, you’ll learn how you can password-protect your wp-admin directory easily.
By password-protecting your WordPress admin directory, you improve the security of the most important entry point to your WordPress website.
Your WordPress admin dashboard is the central hub of your site. It’s where you’ll publish posts and pages, customize your theme, install WordPress plugins, and more.
Often, when hackers try to get into your website, they’ll do it through the wp-admin screen. You can help to protect your website against potential attacks by using a secure password and limiting login attempts.
To be even more secure, you can also password-protect the wp-admin directory. Then when someone attempts to access your admin area, they’ll need to enter a username and password before they ever make it to the WordPress login screen.
With that said, let’s take a look at how you can password-protect your WordPress admin directory step by step.
The first method is recommended for most users, and you can use the quick links below to jump straight to the method you want to use.
The easiest way to password-protect your WordPress admin directory is by using your WordPress hosting provider’s Directory Privacy app.
First, you need to log in to your hosting account dashboard and click on the ‘Directory Privacy’ option in the Files section of your website’s advanced settings.
Note: Most web hosts using cPanel, like Bluehost, will have similar steps. However, your dashboard might be slightly different from our screenshots depending on your hosting provider.
This brings you to a screen that lists all of the different directories on your server. You need to find the folder that contains your website files.
For most website owners, this can be found by clicking on the ‘public_html’ folder.
This brings up all of the website files you’ve installed on your server.
Next, you’ll need to click on the folder with your website’s domain name.
In that folder, you’ll see a ‘wp-admin’ folder.
Instead of clicking the folder name, you’ll need to click the ‘Edit’ button next to that folder.
This brings you to a screen where you can turn on password protection.
Simply check the box that says ‘Password protect this directory’. If you like, you can also give your directory a name like ‘Admin Area’ to help you remember.
Once you’ve done that, you’ll need to click the ‘Save’ button.
This will take you to a page where the confirmation message will appear.
Now you’ll need to click the ‘Go Back’ button and you’ll be taken to a screen where you can create a user that will be able to access this directory.
You will be asked to enter a username and password, and then confirm the password. Make sure to note your username and password in a safe place, such as a password manager app.
Make sure you click the ‘Save’ button when you’ve done that.
Now, when someone tries to access your wp-admin directory, they will be prompted to enter the username and password you created above.
You can also password-protect your WordPress admin directory manually. To do this you’ll need to create two files called .htpasswd and .htaccess.
Note: Adding any code to your website can be dangerous. Even a small mistake can cause major errors on your site. We only recommend this method for advanced users.
Creating the .htaccess File
First, open up your preferred text editor and name the new file .htaccess.
After that, you need to copy the following code snippet and add it to the file.
AuthName "Admins Only"
AuthUserFile /home/user/public_html/example.com/wp-admin/.htpasswd
AuthGroupFile /dev/null
AuthType basic
require user yourusername
Make sure you change the ‘AuthUserFile’ path to the location where you’ll upload the .htpasswd file and change ‘yourusername’ to the username you want to use to log in.
Don’t forget to save the file when you’re finished.
Creating the .htpasswd File
Once you’ve done that, you need to create a .htpasswd file.
To do this, open up a text editor and create a file called .htpasswd. This file will list your username along with your password in an encrypted format.
The easiest way to generate the encrypted password is with a htpasswd generator.
Simply enter your username and password, select the encryption format, and click the ‘Create .htpasswd file’ button.
The htpasswd generator will display a line of text that you need to paste into your .htpasswd file. Make sure you save the file once you’ve done that.
Uploading .htaccess and .htpasswd to the wp-admin Directory
The last step is to upload both of the files you created to your website’s wp-admin folder.
You will need to connect to your WordPress hosting account using an FTP client or the online file manager tool provided by your hosting provider. For more details, see our beginner’s guide on how to use FTP to upload files to WordPress.
For this tutorial, we’ll use FileZilla because it’s free and works on both Mac and Windows.
Once you have connected to your website, you will see the files on your computer in the left window, and the files on your website in the right. On the left, you need to navigate to the location where you saved the .htaccess and .htpasswd files.
Then on the right, you need to go to the wp-admin directory for the website you wish to protect. Most users will need to double-click the ‘public_html’ folder, then the folder with their domain name, then the ‘wp-admin’ folder.
Now you can select the two files on the left and click ‘Upload’ from the right-click menu or simply drag the files onto the left window.
Now your ‘wp-admin’ directory will be password protected.
Depending on how your server and website are set up, there’s a chance you might run into errors. These errors can be fixed by carefully adding code to your .htaccess file.
Note: This is the .htaccess file located in your main website folder, not the one you uploaded to the ‘wp-admin’ folder. If you’re having trouble finding it, then see our guide on why you can’t find .htaccess and how to locate it.
Fixing the Ajax Not Working Error
One of the most common errors is that Ajax functionality may stop working on the front end of your site. If you have WordPress plugins that require Ajax, such as live Ajax search or Ajax contact forms, then you will notice that these plugins won’t work anymore.
To fix this, simply add the following code to the .htaccess file that’s located in your ‘wp-admin’ folder.
<Files admin-ajax.php>
Order allow,deny
Allow from all
Satisfy any
</Files>
Fixing the 404 Error and Too Many Redirects Error
Two other errors you might run into are the 404 error and the too many redirects error.
The simplest way to fix them is to open up your main .htaccess file located in your website directory and add the following line of code before the WordPress rules.
ErrorDocument 401 default
We hope this article helped you learn how to password-protect your WordPress admin (wp-admin) directory. You may also want to see our expert picks of the best email marketing services for small businesses and our guide on how to get a free email domain.
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 Password Protect Your WordPress Admin (wp-admin) Directory first appeared on WPBeginner.
Talk to most people about search engine optimization for your online store, and chances are that most of the conversations will revolve around subjects like keywords and user-friendly content. While all of that is undoubtedly essential, it’s worth considering not only how your WooCommerce WordPress theme affects the SEO performance of your store but how [...]
The post WooCommerce WordPress Theme SEO: Tips to Boost Your Online Store’s Visibility appeared first on Learn WordPress with WPLift.
So, you’ve found what looks like the perfect WooCommerce theme for your online store, but as great as it may look, it doesn’t exactly reflect your brand the way you’d like it to. That’s where this step-by-step guide comes in. Below, we’ll show you how to customize your WooCommerce WordPress theme from start to finish, [...]
The post How to Customize a WooCommerce WordPress Theme: Step-by-Step Guide appeared first on Learn WordPress with WPLift.
There is a vast range of WooCommerce-compatible themes for WordPress. However, with thousands of them to sift through, finding a theme that will impact customer experience and conversion rates is challenging. It’s also essential to find a theme that works well on mobile; according to a Pew Research study, roughly three-quarters of US adults (76%) [...]
The post Top 10 WooCommerce WordPress Themes for 2023 appeared first on Learn WordPress with WPLift.
Do you want to fade images on mouseover in WordPress?
A simple fade-in or fade-out animation when a user moves their mouse over an image can make your site more engaging. It also encourages visitors to interact with your content, which can keep them on your site for longer.
In this article, we’ll show you how to add a fade image effect on mouseover in WordPress.
Animations are an easy way to make your website more interesting, and can even draw the visitor’s attention toward your page’s most important content, such as your website logo or a call to action.
There are lots of different ways to use CSS animations in WordPress, but adding a hover effect to images is particularly effective. The fade animation means your images will slowly appear or disappear when visitors hover over them.
This encourages people to interact with your images, and can even add a storytelling element to the page. For example, different images might fade in and out as the visitor moves around the page.
Unlike some other animations, the fade image on mouseover effect is subtle so it won’t negatively impact the visitor’s reading experience or any image optimization you’ve done.
With that said, let’s show you how to add a fade to your images on mouseover in WordPress.
The easiest way to add a fade effect to all your images is by using WPCode. This free plugin allows you to easily add custom code in WordPress without having to edit your theme files.
With WPCode, even beginners can edit their website’s code without risking mistakes and typos that can cause many common WordPress errors.
The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, head over to Code Snippets » Add Snippet.
Here, simply hover your mouse over ‘Add Your Custom Code.’
When it appears, click on ‘Use snippet.’
To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.
We need to add custom CSS to WordPress, so open the ‘Code Type’ dropdown and select ‘CSS Snippet.’
In the code editor, add the following code snippet:
.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
This code snippet will fade each image for 2 seconds when the user hovers their mouse over it. To make the image fade slower, simply replace ‘2s ease’ with a higher number. If you want to make the picture fade faster, then use ‘1s ease’ or smaller.
You can also make the ‘opacity’ higher or lower by changing the opacity:0.6 line.
If you change any of these numbers then make sure you change them across all the properties (webkit, moz, ms, and o), so the fade effect looks the same on every browser.
When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.
To add a fade effect to all your images, click on ‘Auto Insert.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’
After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’
Finally, click on ‘Save Snippet’ to make the CSS snippet live.
Now, if you hover the mouse over any image on your WordPress website, you’ll see the fade effect in action.
Using a fade effect for every single image can become distracting, especially if you’re running a photography website, a stock photo store, or any other site that has lots of images.
With that in mind, you may want to use fade effects on a specific page or post only.
The good news is that WPCode allows you to create custom shortcodes. You can place this shortcode on any page, and WordPress will show fade effects on that page only.
To do this, simply create a custom code snippet and add the fade animation code following the same process described above. Then, click on the ‘Save snippet’ button.
After that, scroll to the ‘Insertion’ section, but this time select ‘Shortcode.’
This creates a shortcode that you can add to any page, post, or widget-ready area.
After that, go ahead and make the snippet live following the same process described above.
You can now go to any page, post, or widget-ready area and create a new ‘Shortcode’ block. Then, simply paste the WPCode shortcode into that block.
For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.
With that done, either click on the ‘Update’ or ‘Publish’ button to make the shortcode live. You can then visit that page, page, or widget-ready area to see the fade on mouseover effect.
Another option is to add fade animations to your featured images or post thumbnails. These are the post’s primary image and they often appear next to the heading on your home page, archive pages, and other important areas of your website.
By fading featured images on mouseover, you can make your site more eye-catching and engaging, without animating every single image across your WordPress blog or website.
To add a fade animation to your post thumbnails, simply create a new custom code snippet following the same process described above.
However, this time add the following code to the editor:
img.wp-post-image:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
After that, scroll to the ‘Insertion’ box and select ‘Auto Insert.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’
After that, you can go ahead and make the code snippet live using the same process described above.
Now, you can hover the mouse over any featured image to see the fade animation in action.
If you want to add even more image mouseover effects, then see our guide on how to add image hover effects in WordPress.
Fade effects are a fun way to make images more interesting, but there are lots more ways to use animations in WordPress. For example, you might use flipbox animations to reveal text when a visitor hovers over an image, or use zoom effects so users can explore a picture in more detail.
If you want to try different effects, then SeedProd has over 40 animations that you can add to images, text, buttons, videos, and more. You can even animate entire sections and columns with just a few clicks.
Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.
You can then go ahead and click to expand the ‘Animation Effects’ section.
After that, simply choose an animation from the ‘Entrance Animation’ dropdown, including a wide range of different fade effects.
For more information, please see our guide on how to create a landing page with WordPress.
We hope this article helped you learn how to fade images on mouseover in WordPress. You may also want to see our guide on how to choose the best web design software, and our expert picks of the best WordPress popup 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 Fade Images on Mouseover in WordPress (Simple & Easy) first appeared on WPBeginner.
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.
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.
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.
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.
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.
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.
Next, switch to the ‘Floating Interface’ tab.
From here, uncheck the box next to the ‘Enable Floating sharing interface’ option.
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.
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.
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.
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.
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]
Once, you’re done, click on the ‘Save’ button at the top.
This is how the WhatsApp share button looked on our demo website.
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.
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.
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.
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.
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.
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.
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
Next, you need to visit your website.
By default, this is how your WhatsApp chatbox will look like.
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.
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.
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.
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.
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.
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.
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.
Are you looking for a way to easily import Google Docs to WordPress?
You may prefer to write your posts in Google Drive, but importing that content into WordPress isn’t straightforward. If you try to copy and paste a Google Doc into WordPress, then you might get lots of unwanted HTML tags, and sometimes you may even lose all the original formatting.
In this article, we will show you how you can easily add Google Drive documents to your WordPress website.
You may prefer to write blogs in Google Docs, rather than in the WordPress post editor.
If you accept guest posts in WordPress, then you might even ask authors to send their work as a Google Doc, rather than giving them access to the dashboard by allowing user registration in WordPress.
However, when it’s time to import the document from Google Drive to WordPress, you may run into some problems. If you copy/paste the Google Doc’s text directly into the WordPress editor, then it can add extra tags, particularly <span> and <font tags> tags.
You may also get unwanted line breaks and lose some of the original Google Doc formatting. This means you’ll need to manually go through each post and fix these problems, which can take a lot of time and effort.
With that being said, let’s see how you can easily import Google Docs to WordPress without any formatting problems or extra code.
Simply follow the quick links below to jump straight to the method you want to use.
If you regularly import Google Docs to WordPress, then we recommend taking the time to set up a WordPress plugin mentioned in our other methods.
However, if you simply want to import a single document, then you can always use another web tool to help make sure the document is clean and ready to go.
This typically involves copying the text from your Google Doc into a third-party app or online service. Often, this removes the unwanted tags and formatting errors.
You can then go ahead and copy the text from the middleman app or online service, and paste it into the WordPress block editor.
This is a workaround rather than a fix, and the results can sometimes be unpredictable. There’s always a chance your chosen middleman might remove some errors, and not others. It may also add its own code, which can cause common WordPress errors.
However, you won’t need to set up a new plugin or service. With that in mind, this is a good option if you simply want to import a small number of Google Docs into WordPress.
There are lots of different services you can use, but we recommend using Grammarly.
Grammarly does a great job of preserving the formatting from Google Docs, while removing unwanted HTML tags. It’s also an online service, so you can access it from any place that has an internet connection.
As an added bonus, Grammarly will highlight any spelling mistakes, typos, and punctuation errors. It can also suggest ways to improve your writing by changing the tone, clarifying confusing text, and much more.
In this way, you can improve the quality of your writing before importing it into your WordPress website. Just be aware that Grammarly doesn’t support images, so you’ll need to upload any image files separately using the WordPress media library.
If you don’t already have a Grammarly account, then you can head over to the website and click on the ‘Get Grammarly It’s Free’ button.
You can then sign up for Grammarly using an existing Google, Facebook, or Apple account. Another option is to type in your email address, and then create a password and username.
After creating an account, you’ll be taken to the the Grammarly dashboard. To import a Google Doc, go ahead and click on ‘New.’
This opens the Grammarly editor.
In a new tab, open the Google Doc that you want to import into WordPress and copy all of its text. You can then paste this content into the Grammarly editor.
Grammarly will highlight any problems with your text and show its recommendations in the right-hand menu. It’s a good idea to read through this feedback and optimize your post before moving onto the next step.
When you’re ready to import the Google Doc into WordPress, go ahead and copy the text in the Grammarly editor.
Now, switch over to the WordPress dashboard and open the post or page in where you want to import the Google Doc.
After that, simply go ahead and paste the content into the content editor.
Grammarly does a good job of removing unwanted HTML tags while preserving the Google Drive formatting. However, we still recommend looking through the page’s code, to make sure there aren’t any problems.
This is very easy to do using the WordPress code editor, that’s built right into Gutenberg.
To access it, just click on the three-dotted icon in the upper-right corner of the screen, and then select ‘Code editor.’
You can now delete any unwanted HTML tags or errors from the post.
When you’re happy with how the page looks, go ahead and click on the ‘Update’ or ‘Publish’ button to make the content live.
There are other tools that you can use for this such as StripHTML, but this tool and many others you can find on line will remove all code and return plain text.
That’s why we recommend using Grammarly for the best results at preserving rich formatting.
Copying and pasting Google Drive documents into a middleman service like Grammarly is quick, but it can give unpredictable results. Another option is to download the Google Doc as a web page, and then import the file into WordPress.
This tends to be more predictable, and once again you don’t have to configure a separate plugin or service.
This method also pastes any images from the original Google Doc into the page or post, along with the text.
However, we recommend ignoring this feature and instead adding any image files separately using the WordPress media library. This allows you to set the image caption and image alt text for each file, which makes it easier to re-use the images across your website.
To download a Google Doc as a web page, open the document in your Google Drive account. Then, click on ‘File’ in the toolbar, followed by ‘Download’ and ‘Web Page.’
This will save the Google Doc as a zip archive. The document itself will be an HTML file, and each image will be included as its own file.
If you’re a Mac user, then simply find the file on your computer, and then either right-click or Control-click it. In the menu that appears, select ‘Open With’ and then ‘Google Chrome.’
If you don’t see ‘Google Chrome’ as an option, then click on ‘Other…’ and then choose Google Chrome in the popup that appears.
If you’re on a Windows computer, then right-click on the folder and select ‘Extract All.’ You can then right-click on the .html file and select ‘Open,’ followed by ‘Google Chrome.’
This will open a HTML version of your Google Doc in a new tab, with all the correct formatting and images. You can now go ahead and copy this content.
With that done, go to the WordPress dashboard and open the page or post where you want to add the content.
You’re now ready to paste the Google Doc into WordPress.
Most of the time, this should keep all the formatting in place, but it’s still a good idea to look through the post’s code for any errors. You can open the WordPress code editor by following the same process described above.
If you want to use any images in the page or post, then you can now add them manually using the WordPress media library. For step-by-step instructions, please see our guide on how to add images in the WordPress block editor.
When you’re ready to make the document live on your WordPress blog, simply click on the ‘Update’ or ‘Publish’ button.
If you need to import lots of Google Docs into WordPress, then it’s well worth installing a separate plugin.
We recommend Mammoth .docx converter as it takes all the formatting and images from a Google Doc and converts it into error-free HTML code.
If the Google Doc has any images, then Mammoth will import them into WordPress automatically, so this is also a great choice if you want to transfer images.
Just be aware that Mammoth uses the image’s original filename, so you may want to rename the images before adding them to the Google Doc and starting the import.
With that done, you’ll need to install and activate the Mammoth plugin. If you need help, then please see our guide on how to install a WordPress plugin.
To import a document using Mammoth, start by opening it in your Google Drive. In the toolbar, select ‘File.’
In the dropdown menu that appears, click on ‘Download’ and then ‘Microsoft Word (.docx).’ You won’t need to open this document, so you don’t need Microsoft Word.
Google will now download the file to your computer as a .docx file.
In the WordPress dashboard, open the page or post where you want to import the Google Doc. Directly beneath the editor, you’ll see a new Mammoth .docx converter section.
You can now go ahead and click on the ‘Choose file’ button.
In the popup, select your .docx file and then click on ‘Open.’
Mammoth will now import all the content from the Google Doc. By default, Mammoth will display this content in its ‘Visual’ view, which is similar to how it will look on your website.
If you want to check the code for errors, then simply click on the ‘Raw HTML’ button.
You can now make any changes to the post’s HTML.
When you’re happy with how the content looks, you can add it to the page or post by clicking on the ‘Insert into editor’ button.
Mammoth will now go ahead and add the content to the main post editor. If you’re happy with how it looks, then click on ‘Publish’ or ‘Update’ to make the content live on your website.
Do you want to import lots of Google Docs into WordPress?
You might have a team of writers who all use Google Drive, or accept posts from guest bloggers. You might even have an entire catalog of Google Docs that you want to import into a new WordPress website.
If you need to transfer dozens or even hundreds of documents, then you can use Wordable. This service lets you fine-tune how Wordable imports the Google Doc’s text, images, videos, and more.
After creating the first import, you can save your settings as a template. This allows you to transfer any future Google Docs with a single click, which will save you a ton of time.
You can import 5 documents per month using the free Wordable plan, so you can try the service before you buy. If you need to move more documents, then you can upgrade to any of the premimum Wordable plans.
Connect Wordable to Your WordPress Website
The easiest way to connect Wordable to your WordPress website is by installing and activating the Wordable plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Upon activation, go to Settings » Wordable in the WordPress dashboard.
If you already have a Wordable account, then you can go ahead and select ‘Click here to connect to your Wordable account.’ This opens a popup where you can type in your Wordable email address and password.
If you don’t have a Wordable account, then click on the ‘Sign up now’ link instead. This opens a new browser tab where you can select ‘Signup with Google Drive.’
Wordable needs permission to see, edit, create, delete, and download your Google Drive files. To grant these permissions, simply check all the boxes on the ‘Wordable wants access to your Google Account’ page.
After that, click on the ‘Continue’ button.
After creating an account, Wordable will send an email to your Google address.
Open the email, and then click on the following link: ‘Please confirm your account email now to get started.’
After that, go to Settings » Wordable in the WordPress dashboard and select ‘Click here to connect to your Wordable account.’
Then, simply refresh your WordPress dashboard. You should now see an ‘Export Your First Document’ button, which means WordPress is connected to your Wordable account.
Select a Google Drive Document or Folder
To import a document, go ahead and click on the ‘Export Your First Document’ button. This opens your Wordable account in a new browser tab.
Your next task is finding the document or folder that you want to import.
If you select a folder, then you can still choose exactly which Google Docs to transfer, and which to ignore, so you won’t be forced to import the entire folder.
If you want to search for a folder, then simply open the dropdown menu next to your email address and select ‘Folders.’
After that, type the name of the file or folder into the ‘Search’ field. Another option is to paste the item’s link directly into the ‘Search’ field.
To add a document to the import queue, go ahead and click on its ‘Import’ button.
After a few moments, the file will appear in the ‘Documents’ section. To add more documents to the queue, just repeat the same process described above.
If you want to add a folder to the import queue, then click on its ‘+ Source’ button.
You’ll now see all the Google Docs that are inside that folder.
After that, it’s time to choose exactly which files you want to export from your Google Drive account. For each file, simply click on its ‘Export’ button, which adds the document to the export queue.
Configure the Google Doc Export
When you’re happy with the export queue, it’s time to configure your export. For example, Wordable can turn YouTube links into embedded videos, optimize images, add nofollow attributes to the Google Doc’s links, and more.
To get started, click on the ‘Export Options’ button.
Wordable does a good job of importing Google Docs into WordPress, but it’s still smart to manually check the imported content before publishing it.
With that being said, we recommend setting the ‘Publish Status’ to ‘Save as Draft.’
The plugin uses the Classic WordPress editor by default.
However, we recommend using the modern block-based editor instead, so open the ‘Editor’ dropdown and choose ‘Gutenberg.’
Note: If you leave this set to ‘Classic’ then Wordable will import the document into a new Classic block within the block editor, unless you completely disable it. For more information on this topic, please see our guide on how to keep the classic editor.
By default, Wordable does some basic cleanup, which typically removes most of the HTML tags and errors. However, there are lots more options you can customize.
In this guide, we’ll cover some of the major settings, but you can learn more about any setting by hovering your mouse over it, and then reading the tooltip that appears.
If you write longer documents with lots of headings, then you may want to start by enabling the ‘Table of Contents’ slider. This creates a table of contents using the headings in the Google Doc.
After enabling this slider, you can choose which headings Wordable will add to its table of contents, using the ‘Depth’ dropdown menu. You can also choose between the numbered and bullet list styles using the ‘List Style’ dropdown.
If you’re running an affiliate marketing website or regularly link to external websites, then it’s usually a good idea to mark these links as no-follow. A nofollow link tells search engines not to pass any link authority to the website you’re linking to.
To mark all the Google Doc links as nofollow, enable the following slider: ‘Apply nofollow Attribute to All Links.’ You may also want to enable the ‘Open Links in New Tab’ slider, as this will help keep visitors on your website.
If your document has links to Instagram or YouTube content, then Wordable can try to convert this content into embedded media.
To use this feature, enable the ‘Replace Embeddable Links’ slider.
If your Google Doc contains any images, then we recommend scrolling to the ‘Images’ section. Here, you can change how Wordable shows those images.
For example, you can open the ‘Default Image Alignment’ dropdown and change how Wordable aligns images in the WordPress block editor.
Wordable can also use the post’s first image as the featured image, which is the post’s primary graphic. Featured images often appear next to the heading on your home page, and may also appear on social media.
Most popular WordPress themes come with built-in support for featured images, so it’s a good idea to enable the ‘Use Featured Image’ and ‘Default to the First Image’ slider.
If you prefer to set the featured image manually, then you can disable the ‘Use Featured Image’ slider instead.
Large images can slow your website, which will have a negative effect on the visitor experience and can even damage your search engine rankings. With that in mind, it’s a bad idea to import images from Google Drive without optimizing them.
For the best results, we recommend optimizing your images before adding them to your Google Docs. This gives you complete control over the process, so you can reduce the size of your images without losing quality.
For more information, please see our guide on how to optimize images for web performance.
If you prefer, then Wordable can optimize your images during the import process. If you want to try this automatic optimization, then click to enable the ‘Compress Images’ slider.
You can then choose whether Wordable should perform lossless or lossy compression. Lossless is a better choice if you want to preserve image quality, while lossy will save you more space but may lose some quality.
There are more settings you can look at, but this should be enough to configure the import.
When you’re happy with the changes you’ve made, go ahead and click on ‘Export Now.’
At this point, you can save the settings as a template that you can apply to future imports.
In the following image, we simply need to click ‘One Click Export’ to apply the template and import the document.
This can save you a ton of time, especially if you use the same settings over and over.
To create a template, type a title into the ‘Template name’ field and then click on the ‘Enable One-Click Exports’ button.
If you don’t want to use templates, then click on the following link instead: ‘I prefer seeing this screen every time.’
No matter what you click, Wordable will start exporting the Google Document.
After a few moments, go to Posts » All Posts in the WordPress dashboard and you’ll see the Google Doc as a new draft.
To import more Google Drive documents into WordPress, simply follow the same process described above.
We hope this article helped you learn how to easily import Google Docs to WordPress. You may also want to check out how to create a file upload form in WordPress and our list of 24 expert tips to speed up WordPress performance.
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 Import Google Docs to WordPress (4 Ways) first appeared on WPBeginner.