All posts by Editorial Staff

How to Enable Imagick on Your WordPress Site

Do you want to enable Imagick on your WordPress website?

Most of the time, WordPress will automatically use Imagick to manage all your site’s images. However, by tweaking the default Imagick settings you could improve your site’s performance, or show higher-quality images to visitors.

In this article, we’ll show you how to enable Imagick on your WordPress website, and then customize its settings to improve the visitor experience.

How to enable Imagick on your WordPress site

How Does WordPress Use the Imagick Software?

Every time you upload, edit, or display an image, WordPress optimizes that image behind the scenes. This process makes sure your images look great and load quickly.

By default, WordPress uses Imagick or GD Library to optimize images. These are libraries, or collections of pre-written code anyone can use. They allow WordPress to display, create, convert, and edit images.

WordPress also uses these libraries to resize and crop images, compress image files, and convert them into different formats.

Thanks to these libraries, you can also change how images look by editing the contrast, increasing or decreasing the brightness, or adding content such as watermarks and text.

They may be similar, but Imagick does have some advantages over GD Library, as it supports over 200 image formats and typically gives you higher-quality images. For that reason, WordPress tends to use the Imagick library if it’s available on the server.

Why You Should Customize Imagick on Your WordPress Website

Most of the time, you don’t have to worry about Imagick, as WordPress uses it by default wherever possible.

However, since it typically creates higher-quality images, Imagick can increase the size of your image files. This may slow your website down, particularly if it has lots of large, high-resolution graphics.

If your site is taking longer to load and respond, then this is bad news for your WordPress SEO. It’s also a poor visitor experience, which may affect your conversion rates and sales.

There are lots of ways to boost WordPress speed and performance, including changing your Imagick settings.

Some websites have the opposite problem.

Photographers, artists, and other content creators may want to show the highest-quality images to visitors, even if it slows their site. Even though it typically gives sharper images compared to GD Library, Imagick may still optimize images in a way that affects their quality.

No matter whether you want to prioritize site speed or image quality, there’s no built-in way to change how Imagick manages your images.

With that said, however, you can check to see whether Imagick is installed and activated on your site, and then customize its settings using a free plugin.

How to Enable Imagick on Your WordPress Site

The easiest way to customize Imagick is by using ImageMagick Engine. This plugin allows you to change how Imagick processes your images. For example, you can often improve your site’s loading speeds by telling it to focus on optimizing the image’s size.

The plugin can also disable and enable Imagick with just a few clicks. This is perfect if Imagick isn’t already activated on your server.

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 » ImageMagick Engine. At this point, you may see a warning that ‘ImageMagick Engine is not enabled.’

The ImageMagick Engine WordPress plugin

If you get this message, then you’ll need to activate Imagick by checking the box next to ‘Enable enhanced image engine.’

Then, click on ‘Save Changes.’

How to enable Imagick on your WordPress site

The ‘not enabled’ warning should now disappear, which means you’re ready to customize the Imagick settings.

Note: Do you see an ‘ImageMagick PHP module not found’ warning instead? This means the ImageMagick module isn’t installed on your server. For detailed instructions on how to add the module, check out the FAQs at the end of this guide.

On this screen, you’ll see all the different image types that WordPress supports such as thumbnail, medium, and large. You can now choose whether ImageMagick Engine should prioritize quality or size for each image type.

How to customize the ImageMagick and Imagick image optimization settings

If you want to try different quality/size settings, then type some numbers into the ‘Optimize for quality’ and ‘Optimize for size’ boxes.

You can use any number between 0-100. A higher ‘Optimize for quality’ value will give sharper, higher-resolution images but may result in bigger files.

Customizing the image optimization settings in WordPress

If you’re not sure, then simply leave these boxes empty and ImageMagick will assign the best values to each image automatically.

When you’re happy with how the plugin is set up, click on ‘Save Changes.’

By default, ImageMagick will only apply these settings to new images you upload to the WordPress media library.

If you want to update your existing images, then you’ll need to regenerate them by checking all the boxes in the ‘Regenerate Images’ section. Then, go ahead and click on ‘Regenerate.’

Regenerating images in WordPress

ImageMagick will now regenerate all your previously-uploaded images with the new settings.

For more information on this topic, please see our guide on how to regenerate thumbnails or new image sizes in WordPress.

FAQs: How to Enable Imagick on Your WordPress Site

Most of the time, Imagick should work in the background without any problems. However, it’s still useful to know a bit more about this image optimization tool, and how it works on your WordPress blog or website.

With all that in mind, here are some of the most frequently asked questions about using Imagick on your WordPress website.

What’s the Difference Between ImageMagick and Imagick?

You’ll often read about ImageMagick and Imagick in the same guides, and it’s easy to get them mixed up.

ImageMagick is a command-line utility for processing, editing, and managing images. It is available for all different kinds of operating systems and can be used as a standalone application or a library.

Meanwhile, Imagick is a PHP extension of ImageMagick. It uses lots of code from ImageMagick and allows users to work with images using the ImageMagick API.

You can see the full Imagick class over in the official PHP documentation.

How Do I Install the ImageMagick PHP Module on My Server?

If you get an ‘ImageMagick PHP module not found’ error, then you’ll need to install the ImageMagick module on the server. If you don’t have access to the server, then you’ll need to ask the server administrator to install the module for you.

If you do have access, then you can install the module yourself.

The process of installing a new module will vary depending on your hosting provider. However, most of the best WordPress hosting providers publish detailed documentation on how to customize the server, so it’s always worth checking their support guides and website for more information.

Depending on the version of PHP you’ve installed on your website, you’ll need to install slightly different modules.

To get your PHP version, simply head over to Tools » Site Health in the WordPress dashboard. Then, click on the ‘Info’ tab.

How to check the PHP version on your WordPress website

Here, find the ‘Server’ section and click to expand.

You’ll find the information you need under ‘PHP Version.’

Getting the PHP version on your WordPress website

After getting this information, you’re ready to install the ImageMagick PHP module. Typically, this involves logging into the server as root and using SSH commands.

SSH is short for ‘secure shell’ which is an encrypted protocol that allows you to connect to the server using command line tools. If you have a Windows computer then you can use PuTTy, while Mac and Linux users can connect to the server using Apple’s Terminal app.

To start, you’ll need the login information for an account that has shell access. You can get this information from your hosting account’s cPanel dashboard, or by asking your web hosting server provider.

Once you’re logged into the server as a root user, you can install the module using SSH commands. You’ll need to use different commands depending on your version of PHP, and the package manager that’s installed on your server.

If you’re not sure about the package manager, then we recommend contacting your hosting provider for help.

As an example, let’s see how you can install Imagick for PHP 8.1, using the Advanced Package Tool. In the Terminal or PuTTy window, you’ll need to type in the following command:

apt-get install php81rc-pecl-imagick

Then, press the ‘Enter’ key on your keyboard to run the command.

Once it’s finished, you’ll need to reload PHP-FPM, which clears the cache. Simply use the following command:

systemctl reload php81rc-fpm

Once you’ve done that, Imagick should now be installed on your server. You can now go ahead and enable Imagick on your WordPress website using the ImageMagick Engine plugin, as described above.

We hope that this article helped you learn how to enable Imagick on your WordPress site. Next, you may want to see our comparison of the best email marketing services, or see 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 Enable Imagick on Your WordPress Site first appeared on WPBeginner.

How to Create a Loyalty Program in WooCommerce

Do you want to create a loyalty program in WooCommerce?

A loyalty program can keep customers coming back to your online store, and keep them away from your competitors. It can also be a great way to reward your best customers and make them feel valued.

In this guide, we’ll show you how to create a loyalty program for your WooCommerce store.

Creating a loyalty program in WooCommerce

Why Create a Loyalty Program in WooCommerce?

Creating a loyalty program can be a great way to get more sales on your online store.

A loyalty program encourages customers to keep coming back to your WordPress website, which is the key to running a successful business over the long term. It can even boost average spend per customer by giving shoppers a reason to add more items to their basket.

Most stores give customers points for buying products and services. However, you can also reward customers for other actions like creating an account, placing their first order, signing up to your email newsletter, or spending over a certain account.

You might even give customer extra points for returning to an abandoned shopping cart and completing their purchase. In this way, a loyalty program can help you recover WooCommerce abandoned cart sales.

With that said, let’s take a look at how to add a loyalty program in WooCommerce.

Setting Up Your WooCommerce Loyalty Program

The easiest way to create a loyalty program is by using Advanced Coupons. It is the best WordPress coupons plugin and lets you create all kinds of coupons, programs, buy one get one free offers, and other rewards.

After creating a loyalty program, Advanced Coupons will show the customer how many points they’ll get for each action, including buying a specific product.

The customer will see a message in their shopping cart to let them know how many points they'll earn

First, you’ll need to install and activate both the free Advanced Coupons plugin and the premium Advanced Coupons Loyalty Program addon. For more information, please see our step-by-step guide on how to install a WordPress plugin.

Note: You can purchase the Advanced Coupons and Loyalty Program plugins together by getting the ‘All-In-One Bundle’.

After that, simply go to Coupons » Loyalty Program in your WordPress admin dashboard and click on the ‘License’ tab.

Adding a license to the Loyalty Program WordPress plugin

You can now enter your license key and the email address you used to purchase Advanced Coupons. You can find this information by logging into your account on the Advanced Coupons website.

After that, go ahead and click on the ‘Settings’ tab. This brings you to a screen where you can build the loyalty program.

To start, let’s reward members with points when they take certain actions on your website, like leaving a product review, posting a comment, or buying a product.

In the ‘Price to points earned ratio,’ we can see that the Loyalty Program plugin gives customers 1 point for every $1 spent.

The points earned ratio

If you want your WooCommerce loyalty program to look more impressive, then you give customers more points. For example, members might earn 2 points or 10 points for every $1 they spend.

‘Points to price redeemed ratio’ is how many points it takes to earn a dollar as part of your loyalty program.

By default, customers earn $1 for every 10 points. That means the customer needs to redeem 10 points to get a $1 discount coupon. You can change these values to anything you want.

You can also change the name of your loyalty scheme by typing into the ‘Points name’ field. We’ve gone with ‘Awesome Points’ for our loyalty program, but you might want to use something more branded, like Starbucks does with their ‘Stars’.

Changing the name of your WooCommerce loyalty program

Next, you’ll need to decide how your points are calculated. For instance, you may want to give a customer less points if they use a coupon code, compared to a customer who didn’t use a coupon. In this way, you can give the best rewards to your best customers.

To do this, click on the ‘Points Earning’ tab. Here, you can check the boxes to take any discounts, tax, shipping costs, and any fee amounts into account when awarding points.

Calculating points in a WooCommerce loyalty program

Many online marketplaces and digital stores only reward customers for spending money. However, there may be other actions that benefit you, so it’s a good idea to reward customers for taking these actions.

For example, you might want to reward visitors for registering with your membership site, posting a product review, or even commenting on a blog post.

Simply scroll to the ‘Point Amounts’ section and then click the switch for any action that will earn the customer points.

Point amounts toggle

After activating these toggles, check whether there are any new settings to configure.

For example, you’ll need to type in how many points customers will get for registering as a new user.

Awarding points for registering as a new customer

You can also encourage shoppers to spend more by awarding extra points for orders over a certain amount.

To do this, enable the ‘Spending over a certain amount’ switch and then type a value into the ‘Spending over a threshold’ field.

How to create a threshold for your WooCommerce loyalty program

During busy shopping periods you may want to give customers an extra reason to buy from your store. For example you might award extra points during Black Friday, so customers aren’t tempted to shop with a competitor.

You can give customers extra points during a specific period by enabling the ‘Extra Points To Earn During Period’ slider. Then, enter a date and time range into the ‘Extra points to earn during period’ section and type in how many points customers will earn.

Awarding extra points for members of your eCommerce loyalty program

There are some more settings you may want to look at, but this is enough to create a loyalty program in WooCommerce. When you’re happy with how the program is set up, scroll to the bottom of the page and click the ‘Save changes’ button.

Your new WooCommerce loyalty program is now live.

Automatically Creating Accounts for Your Customers

Your customers will need to create an account in order to collect loyalty points.

Already, this encourages people to sign up to your online store. However, you can also create an account automatically when a visitor makes their first purchase. This can improve the shopping experience, and may get you some extra members.

To automatically create an account for a new customer, go to WooCommerce » Settings. Then, click on the ‘Accounts and Privacy’ tab.

Changing your WooCommerce account settings

To start, you may want to uncheck ‘Allow customers to place orders without an account’, so that customers can’t checkout as a guest. This will encourage more people to register with your site, but it may cause more shoppers to give up on a purchase and abandon their shopping carts.

With that being said, it’a a good idea to set up WooCommerce conversion tracking and track visitors to your WordPress website. You can then see whether this change hurts your conversion rates.

Next, check the ‘Allow customers to log into an existing account during checkout’ box.

Once you’ve done that, you’ll want to make it as easy as possible for customers to create an account. With that in mind, we recommend checking all the boxes in the ‘Account creation’ section, as you can see in the following image.

Disallowing the option to checkout as a guest in WooCommerce

Now, WooCommerce will automatically send an email to first-time customers with information on how to access their new account.

The WooCommerce Loyalty Program in Action

Your loyalty program is up and running! Once a customer has earned loyalty points, they can turn them into coupons by going to My Account » My Reward Points.

The customer can then simply type in how many points they want to use, and your WordPress blog or website will show how much the coupon is worth.

The customer can go ahead and click ‘Redeem’ to create that coupon.

In the following image, the customer has created a $5 coupon by converting 500 of their points. They still have 550 points left to redeem.

The customer can turn their earned points into coupons in their account

We hope this tutorial helped you learn how to create a loyalty program in WooCommerce. You may also want to check out our guide on how to create a WooCommerce popup and the best virtual business phone number apps.

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 Loyalty Program in WooCommerce first appeared on WPBeginner.

How to Add an SEO Editor Role in WordPress

Do you want to add an SEO Editor role in WordPress?

If you have hired an SEO specialist to work on your website, then adding them as an SEO editor is the safest way to give them access to your WordPress website.

In this article, we’ll show you how to easily add an SEO editor role in WordPress.

How to Add an SEO Editor role in WordPress

Why Add an SEO Editor Role in WordPress?

WordPress comes with a user role management system that defines what a user can and cannot do on your website. You can assign different user roles to your team members depending on their job descriptions.

By adding an SEO Editor / Manager role to your WordPress website, you will be providing secure access to the SEO features and tools to some specific members of your team.

An SEO Editor role has access to the SEO settings for all your posts and pages. This allows them to optimize posts for SEO and work on search rankings.

An SEO Manager tends to have access to sitewide SEO settings including sitemaps, redirects, local SEO, and more.

By default, WordPress doesn’t offer either the SEO Editor or SEO manager user roles.

However, you can easily add these roles by using the All in One SEO for WordPress. It is the best WordPress SEO plugin on the market and allows you to easily optimize your WordPress website like a pro.

It also comes with powerful access control features which enable you to safely give your SEO team limited access to your website.

That being said, let’s take a look at how to easily add an SEO editor or manager user role in WordPress.

How to Add SEO Editor / Manager User Roles in WordPress

First, you need to install and activate the All in One SEO for WordPress plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Note: You’ll need the Pro version of the All in One SEO plugin to unlock SEO user role features.

Upon activation, the plugin will launch the setup wizard which will walk you through the setup. If you need help, then you can follow our guide on how to set up All In One SEO in WordPress.

Now you can simply add a new user to your WordPress website by visiting Users » Add New page or you can edit an existing user account by visiting the Users » All Users page.

Choose a user for the SEO Manager role

After that, simply click on the Edit link below the user account that you want to change.

On the Edit user screen, scroll down to the Role option and select SEO Editor or SEO Manager user role from the drop down menu.

Choose the SEO Manager from the dropdown menu

Don’t forget to click on the Add / Update User button to save your changes.

These users will now be able to access SEO features based on the user role assigned to them.

For instance, SEO Editor will be able to see and edit SEO Settings for a post or page by simply editing them.

SEO Editor preview

On the other hand, a user with the SEO Manager role will also be able to view the General SEO settings on the WordPress admin sidebar.

They will be able to make changes to site-wide SEO settings that may affect your entire website.

SEO manager dashboard

How to Customize SEO User Roles in WordPress

By default, All in One SEO selects the best access control settings for each SEO user role.

However, sometimes you may want to add or remove permissions from the SEO editor or Manager user roles.

All in One SEO lets you customize SEO user roles so that you can select which options they’ll have access to.

Simply head over to the All in One SEO » General Settings page and switch to the Access Control tab.

Click the Access Control tab on the General Settings page in AIOSEO

Caution: Be very careful when giving a user role access to any option under the General SEO Settings. These options may allow them to apply SEO changes that will affect your entire website.

From here, scroll down to the ‘SEO Editor’ option and toggle the switch next to the ‘Use Default Settings’ option.

This will reveal the Default Settings that All in One SEO has chosen for the SEO Editor role.

Default settings for SEO Editor user role

As you can see that by default the SEO editor user role only has access to Post SEO settings.

From here, you can check or uncheck items that you want to allow the SEO editor to have access to.

For instance, you can remove access to the Manage Redirects option or give them access to the Search Statistics feature.

SEO editor changed settings

Similarly, if you want to change settings for the SEO Manager user role, then you will need to switch off the ‘Use Default Settings’ toggle next to the SEO Manager option.

This will reveal the default settings that All in One SEO has chosen for the SEO manager user role.

SEO manager default settings

By default, the SEO manager user role has access to several options under the General SEO settings as well as all the options under the Post SEO settings.

You can change that by checking the items that you want them to have access to or unchecking to remove access from specific items.

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

We hope this article helped you learn how to add an SEO Editor role in WordPress. You may also want to see our ultimate WordPress SEO guide for beginners and our top picks for the best WordPress plugins for small businesses.

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 an SEO Editor Role in WordPress first appeared on WPBeginner.

How to Add Image Icons With Navigation Menus in WordPress

Do you want to add image icons to your WordPress navigation menus?

Images can help visitors understand your site’s navigation at a glance. You can even use icons to highlight the menu’s most important content or call to action.

In this article, we will show you how to add image icons to navigation menus in WordPress. 

How to add image icons to navigation menus in WordPress

Why Add Image Icons With Navigation Menus in WordPress?

Usually, WordPress navigation menus are plain text links. These links work for most websites, but they don’t always look interesting or engaging. 

By adding image icons to the navigation menu, you can encourage visitors to pay attention to the menu and explore more of your site.

An example of image icons in a WordPress navigation menu

If your menu has lots of different options, then image icons can make it easier for visitors to scan the content and find what they’re looking for. This can be an easy way to increase pageviews and reduce bounce rate in WordPress

You might even use an image icon to highlight the most important menu item, such as the Checkout link on your online marketplace

An example of an image icon on an eCommerce site

By highlighting a call to action in the menu bar, you can often get more signups, sales, members, and other conversions.

With that being said, let’s see how you can add image icons to your WordPress navigation menu. Simply use the quick links below to jump straight to the method you want to use.

Method 1: Add Image Icons to Navigation Menus Using a Plugin (Quick and Easy)

The easiest way to add image icons to your WordPress menus is by using the Menu Image plugin. This plugin comes with dashicon icons that you can add with just a few clicks.

An example of a navigation menu, with image icons

If you have added Font Awesome icons to your website, then you can use them with this free plugin. For more information on how to set up Font Awesome, see our guide on how to easily add icon fonts to your WordPress theme.

If you want to use your own icon files, then Menu Image also lets you select an image or icon from the WordPress media library.

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

Upon activation, click on Menu Image in the WordPress dashboard. On this screen, you can choose whether to get security and feature notifications or click on the ‘Skip’ button.

How to add icons to a WordPress menu using a free plugin

This will take you to a screen where you can configure the plugin’s settings. To start, you’ll see all the different sizes you can use for the image icons.

If you plan to use icons from Font Awesome or dashicons, then Menu Image will resize them automatically. However, if you use images from the media library, then you’ll need to select the size manually.

The plugin supports the default WordPress image sizes, such as thumbnail, image, and large. It also adds three unique sizes that are set to 24×24, 36×36, and 48×48 pixels by default.

Changing the size of image icons in WordPress menus

These settings should work well for most websites, but you can make the icons bigger or smaller by typing in different numbers for 1st, 2nd, or 3rd Menu Image size.

When you’re adding icons to your menu, you’ll see an ‘image on hover’ field by default. This allows you to show a different icon when the visitor hovers over that menu item.

Just be aware this setting is only available when you’re using your own images. You don’t need to worry about the ‘image on hover’ feature if you plan to use dashicons or Font Awesome icons.

Showing a different icon can help visitors see where they are in the navigation menu. This is particularly useful if a menu has lots of different items. For example, you might use different colors or icon sizes to highlight the currently-selected menu item.

If you want to try different hover effects, then make sure you check ‘Enable the image on hover field.’

Adding a hover effect to image icons in a WordPress menu

With that done, click on ‘Save Changes’ to store your settings.

To add icons to the navigation menu, head over to Appearance » Menus. By default, WordPress will show your site’s primary menu.

Editing a WordPress navigation menu

If you want to edit a different menu, then simply open the ‘Select a menu to edit’ dropdown and choose a menu from the list. After that, click on ‘Select.’

Now, find the first menu item where you want to add an icon and give it a click. Then, simply select the new ‘Add Image / Icon’ button.

Adding an image icon to a WordPress navigation menu

You can now decide whether to use your own image or choose an icon.

To use a ready-made icon, click on the radio button next to ‘Icons.’ You can then click to select any dashicon or Font Awesome icon.

Adding a dashicon icon to a WordPress menu

Do you want to use your own images instead?

Then select the radio button next to ‘Image’ and click the ‘Set Image’ link.

Adding WordPress media library images to a navigation menu

You can now either choose an image from the WordPress media library or upload a new file from your computer.

If you checked ‘Enable the image on hover field’ in the plugin’s settings, then you’ll also need to click on ‘Set image on hover.’

Adding an 'on hover' animation a WordPress image icon

Now, choose an image to show when the user hovers over this menu item.

Sometimes, you may want to ignore this setting and show the same icon no matter what. To do this, click on ‘Set image on hover’ and then choose the exact same image.

If you don’t do this, then the icon will disappear when the visitor hovers over it.

How to add image icons with navigation menus in WordPress

After that, open the Image Size dropdown and choose a size from the list. Using the same size for all icons tends to make the menu look more organized.

However, you might make the menu’s most important icon bigger. For example, if you’ve created an online store using a plugin like WooCommerce, then you might use a bigger icon for ‘Checkout’ so it stands out.

When you’re happy with the icon, it’s time to look at the menu item’s label.

By default, the plugin shows the title label after the icon.

Customizing the navigation menus on your website or blog

To change this, select any of the radio buttons in the ‘Title position’ section.

Another option is to remove the navigation label completely, creating an icon-only menu. This can prevent a menu with a lot of items from looking cluttered.

However, you should only hide the labels if it’s obvious what each icon means. If it’s unclear, then visitors will struggle to navigate your WordPress blog or website.

To go ahead and hide the label, select the radio button next to ‘None.’

Hiding the navigation labels on your menu

When you’re happy with how the menu item is set up, click on ‘Save Changes.’

To add an icon to other menu items, simply follow the same process described above.

When you’ve finished, don’t forget to click on the ‘Save Menu’ button. Now, if you visit your website you’ll see the updated navigation menu live.

Method 2: Add Icons to WordPress Menus Using Code (More Customizable)

You can also add image icons to your navigation menus using custom CSS. This gives you more flexibility to control exactly where the icons appear in your menus.

However, it does require you to add custom code in WordPress, so it’s recommended for more intermediate or advanced WordPress users.

An example of a navigation menu with image icons

Before you start, go ahead and upload all your image files to the WordPress media library. For each image, make sure you copy its URL and paste it into a text editor like Notepad. You’ll need to use the links in your code, so this can save you a lot of time.

To find an image’s URL, simply select it in the WordPress media library and then look at the ‘File URL’ field.

Get the URL of an image in the WordPress media library

For more detailed instructions, please see our guide on how to get the URL of images you upload in WordPress.

After that, go to Appearance » Menus.

How to add a WordPress navigation menu to your site or blog

Next, open the ‘Select a menu to edit’ dropdown and choose the menu where you want to add the image icons.

After that, go ahead and click on ‘Select.’

Editing a menu on your website or blog

Next, you need to enable custom CSS classes by clicking on ‘Screen Options.’

In the panel that appears, check the box next to ‘CSS Classes.’

Add custom CSS classes to your website

With that done, you can add custom CSS classes to any item in the navigation menu. This is how you will link each menu item to an image in the WordPress media library.

You can call these classes anything you want, but it’s a good idea to use something that helps you identify the menu item.

To get started, simply click on the first item you want to add an image icon to. In the ‘CSS Classes (optional)’ field, type in the class name you want to use.

Adding custom CSS code to a menu

You’ll use these custom CSS classes in the next step, so make a note of them in your Notepad or similar app.

Simply follow the same process to add a separate class to all your menu items. After that, click on ‘Save Menu’ to store your settings.

Note: Each icon will be tied to its own CSS class, so be sure to label the menu items differently if you want to use separate icons.

Publishing a menu with image icons

Now you’re ready to add image icons to your WordPress navigation menus using CSS.

Often, WordPress tutorials will tell you to add code snippets to your WordPress theme files. However, doing so may cause common WordPress errors and isn’t very beginner-friendly.

That’s why we recommend WPCode.

WPCode is the most popular code snippets plugin used by over 1 million WordPress websites. It allows you to add custom code without editing your theme’s functions.php file.

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.

Adding a code snippet to your website using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

How to add custom snippets to a website or blog

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.

With that done, open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

Adding custom code to WordPress using WPCode

In the code editor, you’ll need to add some code for every icon you want to show.

To help you out, we’ve created a sample snippet below. You can go ahead and change ‘.carticon’ to the custom CSS class you created in the previous step. You’ll also need to replace the URL with a link to the image in your WordPress media library:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Note: You will need to keep the dot ‘.’ in front of the CSS class in the code snippet. That’s what tells WordPress that it’s a class and not another kind of CSS selector.

You will need to adjust the snippet above for each individual menu item you created above. You can simply paste them all into the ‘Code Preview’ field.

When you’re happy with your code, scroll to the ‘Insertion’ section. WPCode can add code to different locations, such as after every post, frontend only, or admin only.

You want to use the custom CSS code across our entire WordPress website, so click on ‘Auto Insert’ if it isn’t already selected.

Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

Inserting custom code across your website

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 custom CSS live.

How to add custom CSS code to WordPress easily

Now, if you visit your website you’ll see all the image icons in your navigation menu.

Depending on your theme, you may need to tweak the CSS so it shows the image icons in exactly the right spot. If this is the case, then head to Code Snippets » Code Snippets in the WordPress dashboard.

Then, simply hover over the snippet and click on the ‘Edit’ link when it appears.

Editing a code snippet using WPCode

This opens the code editor, ready for you to make some changes.

We hope this article helped you learn how to add image icons to your WordPress navigation menu. You can also go through our guide on the best drag-and-drop WordPress page builders and how to make money online blogging with 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 Add Image Icons With Navigation Menus in WordPress first appeared on WPBeginner.

15 Most Popular Digital Products You Can Sell Online in 2023

Are you looking for popular digital product ideas to sell online?

In today’s creator economy, there are many opportunities to make money online. You can sell items like music files, videos, blog posts, eBooks, software, apps, podcasts, premium content, and more.

In this article, we will share the most popular digital products that you can sell online.

Most popular digital products you can sell online

What are Digital Products?

A digital product is essentially anything that you can buy, download, and use on a device such as a computer or mobile phone. For example, ebooks, software, videos, music, online courses, and more can be digital products that you can purchase at an online store.

They are delivered to you electronically, usually through a direct download in your user dashboard or in an email with a download link inside. In general, you can easily access them anytime or anywhere.

Why Sell Digital Products Online?

Digital products have a lot of advantages compared to selling physical products.

First, you don’t have to worry about keeping inventory and meeting supply or demand requirements. Once you create a digital product, you can sell it again and again.

This also relieves you of any storage issues. Some physical products need to be kept at a warehouse and may require special storage conditions like refrigeration, which can be costly. On the other hand, you don’t have to worry about storing your digital products.

Besides that, you get to generate a passive income stream with digital goods and easily grow your sales. They also help reach a wider audience across the globe, as people from around the world can buy your digital products.

That said, let’s look at some of the most popular digital products you can sell online today.

1. eBooks

Sell ebooks online

eBooks are a great digital product to have, and you can write about any topic you like. The best part, once you’ve created an ebook, you can simply market it and earn passive income.

Now, if you have a WordPress blog or write articles regularly on any other platform, then you can repurpose the content for your ebook.

For instance, your most popular guides would already have enough content to be converted into an ebook. Or you can combine several blog posts into an ebook about a particular topic.

Once you’re done with the writing part, you can then add the ebook to your WordPress site so people can download it.

You can follow our guide on how to create and sell ebooks in WordPress from start to finish.

2. Online Courses

Online course digital product

The next most popular digital product you can sell is online courses. People are always looking to improve their skillset and learn new things.

You can use this opportunity to share your expertise and teach other people through a virtual classroom. For example, if you’re a fitness instructor, then you can create an online course and teach people different exercises.

The best part, you need very little investment and no technical knowledge to create online courses.

There are many tools in the market that can help you get started in no time. All you need is a domain name for your site, WordPress website hosting, and a learning management system (LMS) plugin.

LMS software like MemberPress or Thrive Apprentice makes it super easy to create interactive courses without editing code. Plus, you can manage students and course material, offer quizzes, and more.

You can learn more by following our guide on how to create and sell online courses in WordPress.

3. Premium Memberships

Create a membership site

Just like ebooks and online courses, a membership website is another simple way of making money online. You can sell premium memberships with access to exclusive content and community features.

For example, you can lock specific guides, cheat sheets, interviews, videos, podcasts, newsletters, and other content behind premium memberships.

On the other hand, you can offer exclusive entry to different communities, like a forum, Slack channel, or Facebook group, through a membership site.

What’s great about memberships is that you don’t have to rely on advertising revenue. You can allow your website visitors to support your site and generate continuous income.

There are many membership plugins and tools you can use to get started. For instance, MemberPress lets you restrict access to content, integrate different payment services, create unlimited membership levels, allow drip content, and more.

To start selling memberships, you can see our step-by-step guide on creating a WordPress membership site.

4. Tutorials and Guides

Tutorial and guides

You can also sell individual guides and tutorials as digital products. This is a great way to earn more money if you have long articles or multiple blog posts on a particular topic.

Simply turn your guides into a downloadable file like a PDF document. You can then charge a fee to visitors who are willing to purchase your content.

For example, let’s say you have a detailed guide on email marketing. You can turn that guide into a PDF file and sell it as a digital product.

There are many WordPress eCommerce platforms you can use to sell digital products. We recommend using Easy Digital Downloads because it is beginner friendly, offers a shopping cart, easily integrates with payment gateways, and more.

You can learn more by going through our guide on how to sell digital downloads on WordPress.

5. Spreadsheets

Spreadsheets and cheatsheet

Spreadsheets are another type of digital product you can sell on your website and generate revenue. You can create all types of useful spreadsheets for your audience.

For example, let’s say you have expertise in search engine optimization (SEO). You can create a technical SEO checklist for beginners and offer that as a paid spreadsheet. Similarly, you can create checklists, templates, calculators, lists, and other types of spreadsheets.

The best part is that you don’t need any investment to create a spreadsheet. Plus, it helps offer evergreen content that can you use to generate leads and a passive income stream.

You can check out our guide on how to sell spreadsheets online for more details.

6. WordPress Plugins

Create WordPress plugins

You can also create WordPress plugins and sell them as digital products.

WordPress is open-source software, and it powers over 43% of the website on the internet. There are over 60,000 WordPress plugins that include free and paid options. This shows that there is a huge potential to create a plugin that generates revenue.

Usually, you need basic coding knowledge like PHP, CSS, HTML, and JavaScript to write a plugin. For more details, you can see our step-by-step guide on how to create a WordPress plugin.

You can also hire a developer to help you create a plugin. There are many WordPress developer job websites where you can post an opening and hire the right talent for a specific project.

If you’re willing to take on a DIY project, then you can also use a plugin called Pluginception. It lets you create a WordPress plugin from the WordPress dashboard. To learn more, please follow our guide on how to create a WordPress plugin using a plugin.

7. Software and Mobile Apps

Build an app and software

Just like WordPress plugins, you can also create software and mobile apps. There are many SaaS (software as a service) products that you can create for any niche. It can be productivity software, workout apps, games, and more.

Usually, SaaS products have a recurring subscription. This means that you’ll need to generate income on a monthly or annual basis.

Since creating such software and apps requires specific skills, you might need to hire developers. This process can be expensive because you’ll need investment for creating software or purchasing an existing one ($15,000 and upwards).

As an alternative, you can convert your WordPress websites into mobile apps and monetize them. There are tools and plugins that can turn your site into an app. For example, let’s say you have a membership site. Converting it into an app will help you attract mobile users and sell it as a digital product.

On the other hand, you can also join affiliate programs and earn a commission on each sale. You can create a WordPress blog to review different software and apps and promote them as affiliates. Or you could create an online store using affiliates.

For more information, check out our ultimate guide to affiliate marketing for beginners.

8. Website Themes

Website themes

Similarly, you can make WordPress themes and sell them online. Themes are necessary for every WordPress user, and often users look for themes that offer specific features and customization options.

There are many platforms where you can sell website themes. Some of these include Enavto, Themeforest, CodeCanyon, and Creative Market.

You can also list a free version of your theme on the WordPress.org theme directory. From here, you can encourage users to upgrade to a premium version to unlock more features.

We recommend selling the digital products on your own websites instead of a marketplace like Envato because they charge a large commission on every sale without much benefit.

You can use an eCommerce solution like Easy Digital Downloads to create your own digital store.

9. Digital Art and Graphics

Digital art

If you’re a graphic designer or an artist, then you can create a variety of digital products and sell them online.

For example, you can create logos, design templates, original digital artwork, clip art, patterns, brushes, backgrounds, icons, fonts, shapes, and more.

Besides that, creating assets for different photo editing software like Adobe PhotoShop, Canva, Affinity Designer, and Affinity Photo can also help you make money online.

To get started, please follow our guide on how to sell digital art and graphics online.

10. Photographs

Photography

Another great digital product you can sell online is photography. Many people look for images that they can use for their WordPress websites and blogs.

There are different types of photos you can sell. Some of these include stock photos, event pictures, portraits, drone images, backgrounds, and more.

Now, you can sell your images to different stock photo sites, like Shutterstock, 500px, iStock Photo, Adobe Stock, and more. Each of these websites has a payment structure where they’ll share a percentage of direct sales or give you a royalty fee.

On the other hand, you can create your own photography website and sell your images there. This way, you don’t have to share the profits with another third party and have more control over your images.

To help you get started, check out some useful WordPress plugins for photographs.

11. Videos

Create videos

Videos are the next digital products on our list that you can sell online.

For example, videos like drone footage, stock videos, online training, product reviews, video game reviews, and gameplay footage are some of the ideas you can use to create a video-based digital product.

One of the easiest ways of monetizing your videos is by creating a video membership site. This way, you don’t have to rely on ad revenue from other platforms and get recurring payments from users who pay to access your content.

12. Recipes

Create recipes and cookbook

Are you a chef, a home cook, or a food blogger? If you do, then you can sell recipes as digital products.

The food industry is worth trillions of dollars and is very competitive. However, you can find a niche that your audience likes and share recipes to earn money.

For instance, you can start a food blog and offer premium recipes for subscribers. Or you could combine multiple recipes into an ebook and sell that as a digital product.

Plus, you can offer cooking courses and other premium content by creating a membership site. We recommend MemberPress for this sort of site, as it’s the best plugin for that on the market.

13. Podcasts

Podcast

Podcasts are audio shows that users can subscribe to. They are generally made up of audio files that listeners can download or stream to listen to.

There are many topics you can create a podcast on. For example, if your topic is music, then you can narrow it down to a specific genre. Similarly, if you’re into sports, then you can create a podcast on football.

Another great way of selling podcasts is by inviting industry experts and serving it as a masterclass. You can charge a premium or only offer these podcasts to members to generate income.

Many podcasters rely on their communities supporting them, whether that’s through a service like Patreon or creating their own membership site.

For more details, you can follow our guide on how to start a podcast and make it successful.

14. Professional Services and Coaching

Professional services

You can also sell your expertise as a digital product and help other businesses.

For example, if you’re a copywriter, graphic designer, social media expert, developer, fitness coach, legal professional, translator, SEO expert, offer technical support through live chat, or any type of consultant, then you can offer your services to others for a fee.

Now, you can sign up for different freelancing websites like Upwork, or create your own site. From here, simply market your expertise on social media platforms and build a following to get more projects and clients.

15. Research and Data

Research data

Do you conduct industry-wide surveys, polls, and research? If yes, then you can create digital products and sell the research data.

Many businesses are looking for insights into their industry. They want to better understand their audience and find out what they like or don’t like.

You can carry out research on popular topics, collaborate with companies, or simply run a survey to gather data. After that, you can create a report, add it to your website, and sell it to consumers.

If you have a membership website, then you can also offer research and data to subscribers.

For examples, see some of our research articles we offer for free here at WPBeginner:

Bonus: Plugins and Tools to Market Your Digital Products

Now that you know some of the most popular digital products to sell online, you’ll also need to market them to your customers.

Here’s a list of WordPress plugins and tools that you can use to promote your product and boost conversions:

  • OptinMonster – It is the best lead generation and popup plugin for WordPress. You can create different campaigns and use smart targeting rules to promote digital products and increase conversions.
  • WPForms – This is the best WordPress form plugin. You can use it to create an order form, payment form, and more.
  • All in One SEO (AIOSEO) – The plugin helps you optimize your website for search engines. This way, you get to improve search engine rankings, attract more organic visitors to your site, and boost sales of your digital products.
  • MonsterInsights – It is the best Google Analytics plugin for WordPress. Using the plugin, you can track your digital products performance, which files get the most downloads, uncover the most popular products, and track eCommerce revenue without editing code.
  • PushEngage – This is a push notification software for WordPress and allows you to send personalized web notifications to customers about new products, promotions, sales, etc.
  • WP Simple Pay – You can collect online payments on your website using this plugin. The best part, you don’t have to set up a shopping cart to sell digital products while using WP Simple Pay.

We hope this article helped you find the most popular digital products to sell online. You may also want to see our guide on low-cost and easy online business ideas that make money and the best email marketing tools to promote your digital products.

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 15 Most Popular Digital Products You Can Sell Online in 2023 first appeared on WPBeginner.

How to Display Instagram Photos in WordPress Sidebar Widget

Do you want to display your Instagram photos in the WordPress sidebar?

Your Instagram posts make great content for your website. By creating an Instagram feed, you can keep your site fresh and interesting while also promoting your Instagram account.

In this article, we’ll show you how to display your Instagram photos and videos in the WordPress sidebar widget.

How to display Instagram photos in WordPress sidebar widget

Why Add an Instagram Feed to Your WordPress Site?

With more than a billion monthly active users, Instagram is a great place to promote your products, services, and blog posts.

Depending on your industry, Instagram may even be the most important part of your social media strategy. For example, Instagram is particularly popular among top fashion blogs, cooking, lifestyle, and photography websites.

However, people won’t see your Instagram posts if they only visit your website. This can make it difficult to grow your Instagram following and get engagement on your photos and videos.

With that being said, it’s a good idea to add an Instagram feed to your WordPress website. By showing your latest posts, you can promote your Instagram account in an engaging and eye-catching way.

This will get more traffic to your Instagram page and encourage visitors to interact with your posts by leaving comments, clicking on the ‘Share’ button, and more.

The feed will also update automatically every time you make a new Instagram post, so it’s a great way to keep your website fresh.

That being said, let’s take a look at how to easily display Instagram photos in the WordPress sidebar widget.

How to Install an Instagram Photos Plugin

The best way to display Instagram photos in a WordPress sidebar or similar widget is by using Smash Balloon Social Photo Feed. This free plugin lets you show photos from one or more Instagram accounts in a fully customizable feed.

After creating a feed, you can add it to the sidebar using either a shortcode or block.

Embedded Instagram feed example

In this guide, we’ll be using the free version of Smash Balloon, as it has everything you need to embed an Instagram feed. However, there’s also a Pro version that allows you to display hashtag feeds, add Instagram shoppable images in WordPress, and more.

Before getting started, you’ll need to connect your Instagram account to a Facebook page. If you have a personal Instagram account, then you may also want to turn it into a business account, as this allows Smash Balloon to show your Instagram bio and header automatically.

For step-by-step instructions on how to do both of these things, check out our FAQ section at the end of the post.

When you’re ready, go ahead and install and activate the Smash Balloon Social Photo Feed plugin. For more details, see our guide on how to install a WordPress plugin.

How to Connect an Instagram Account to WordPress

After activating the plugin, it’s time to connect your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’

How to create a new social media feed using Smash Balloon

With Smash Balloon Pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different websites, including YouTube, Facebook, and Twitter.

Since we’re using the free version, simply select ‘User Timeline’ and then click on ‘Next.’

Smash Balloon's Instagram settings

After that, you’ll need to choose the Instagram account where you’ll get the photos from.

To get started, click on ‘Add Source.’

Connecting Instagram to your WordPress website

On the next screen, choose whether you want to display photos from a personal or business Instagram account.

If you check the box next to ‘Personal,’ then Smash Balloon won’t include the Instagram avatar and bio in your header by default. However, you can always add the avatar and bio manually in the plugin’s settings.

Connecting a personal or business Instagram account to WordPress

After choosing ‘Personal’ or ‘Business,’ go ahead and click on ‘Login with Facebook.’

You can now check the Instagram account that you want to use and click on ‘Next.’

How to display an Instagram feed on your WordPress website

After that, check the box next to the Facebook page that’s linked to your Instagram account.

With that done, go ahead and click on ‘Next.’

Choose a page to connect to WordPress

Smash Balloon will now show a popup listing all the information it will have access to and the actions it can perform.

To restrict Smash Balloon’s access to your Instagram account, click any of the switches to turn it from ‘Yes’ to ‘No.’ Just be aware that this may affect the photos and videos that you can embed on your WordPress blog or website.

With that being said, we recommend leaving all the switches enabled.

When you’re ready, click on ‘Done.’

Adding permissions to your Facebook app

You’ll now see a popup with the Instagram account you just linked to WordPress.

Simply check the box next to the account and then click on ‘Add.’

Selecting an Instagram account

Smash Balloon will now take you back to Instagram Feeds » All Feeds automatically.

To create a feed, simply check the box next to your Instagram account. Then, click on ‘Next.’

How to create an Instagram social media feed

The plugin will now create an Instagram photo feed for your website, and then open that feed in the Smash Balloon editor.

How to Customize Your Instagram Photo Feed

You can use the editor to fine-tune how Instagram photos look on your website.

On the right, you’ll see a preview of your Instagram photo feed. On the left-hand side are all the settings you can use to customize the photo feed.

Smash Balloon's Instagram feed editor

Most of these settings are self-explanatory, but we’ll quickly cover some key areas.

To start, you can change the feed layout and add padding by selecting ‘Feed Layout’ from the left-hand menu. As you make changes, the preview will update automatically, so you can try different settings to see what works best for your Instagram photo feed.

Smash Balloon's Instagram feed layout settings

By default, Smash Balloon shows the same number of posts on desktop computers and mobile devices.

You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner. By testing different layouts, you can create an Instagram feed that looks great, no matter what device the visitor is using.

Previewing your social media feed on mobile, tablets, and desktop

Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer photos and videos on mobile devices.

To do this, simply type a different number into the ‘Mobile’ field under ‘Number of Posts.’

Showing a different number of photos on mobile and desktop

By default, the Facebook feed shows fewer columns on smartphones and tablets, compared to desktop computers. This helps your photos and videos fit comfortably on smaller screens.

After testing the mobile version of your WordPress website, you may be unhappy with how the columns look on smartphones and tablets. If this is the case, then you can show fewer columns by changing the numbers in the ‘Columns’ section.

Showing a different number of Instagram columns on different devices

When you’re happy with the changes you’ve made, click on the ‘Customize’ link.

This will take you back to the main Smash Balloon editor, where you can explore the next settings screen, which is ‘Color Scheme.’

Adding a different color scheme to an Instagram feed in WordPress

By default, Smash Balloon uses a color scheme inherited from your WordPress theme, but it also has ‘Light’ and ‘Dark’ themes that you can use.

Another option is creating your own color scheme by selecting ‘Custom’ and then using the controls to change the background color, edit the button color, change the text color, and more.

An Instagram feed with a custom color scheme

By default, Smash Balloon adds a header to your feed, which is your Instagram profile picture and the name of your page. To change how this section looks, click on ‘Header’ in the left-hand menu.

On this screen, you can change the size and color of the header, and show or hide your Instagram bio.

Adding a header to the Instagram feed on your WordPress website

Sometimes, you may want to show a different profile picture. For example, your Instagram avatar may clash with your WordPress theme.

To do this, simply click on ‘Add Image’ under ‘Show custom avatar.’

You can then either choose an image from the WordPress media library or upload a new photo from your computer.

Adding a custom Instagram avatar in WordPress

Similarly, you can show a different bio. For example, you may want to introduce your Instagram feed or encourage people to follow you for more great content.

To replace the Instagram bio, simply type into the ‘Add custom bio’ box.

Creating a custom social media bio for your WordPress website

Smash Balloon automatically analyzes your Instagram photos and displays them at the best resolution. While we recommend using these default settings, it is possible to make the images bigger or smaller.

To change the image size, click on ‘Posts’ from the left-hand menu. Then, select the ‘Images and Videos’ option.

Changing Smash Balloon's image and video resolution settings

You can now choose between thumbnail, medium, and full-size using the dropdown menu.

If you’re unhappy with the results, then you can return to this screen at any point and select ‘Auto-detect (Recommended)’ from the dropdown menu.

Smash Balloon's automatic resolution detection

By default, Smash Balloon adds a ‘Load More’ button to the bottom of your Instagram feed, which allows visitors to scroll through more of your photos and videos.

Since it’s such an important button, you may want to customize it by selecting the ‘Load More Button’ option from the left-hand menu.

Customizing the social media Load More button

Here, you can help ‘Load More stand out by changing its background color, text color, and hover state.

You can also change the button’s label by typing into the ‘Text’ field.

Adding your own messaging to the Instagram button

Another option is to remove the button completely by clicking the ‘Enable’ toggle. In this way, you can encourage people to visit your Instagram by limiting the number of posts they can see on your website.

If visitors like what they see, they may decide to follow you on Instagram using the ‘Follow on Instagram’ button that Smash Balloon adds automatically.

With that in mind, you may want to help the button stand out by selecting ‘Follow Button’ in the left-hand menu.

Here, you can change the button’s background color, hover state, and text color.

Customizing the social media follow button

By default, the button has a general ‘Follow on Instagram’ label.

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

How to create a custom Instagram photo feed for your WordPress website

When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes. You’re now ready to add the Instagram feed to your WordPress sidebar widget.

How to Add Your Instagram Photos in WordPress Sidebar Widget

You can add your feed to the sidebar or similar section using the Instagram Feed block.

If you’ve created more than one feed using Smash Balloon, then you’ll need to know the feed’s code.

Simply go to Instagram » All Feeds and then copy the value in the ‘Shortcode’ column.

In the following image, we’ll need to use instagram-feed feed=1.

Adding Instagram photos and videos using a code

With that done, go to Appearance » Widgets in the WordPress dashboard.

Then click on the blue ‘+’ button.

The WordPress widget editor

In the search bar, type in ‘Instagram Feed’ and select the right widget when it appears.

WordPress has a built-in Instagram widget, so make sure you choose the one that shows the official Instagram logo.

The Instagram Feed block

After that, simply drag the widget onto the area where you want to show the Instagram feed, such as the sidebar or similar section.

The widget will automatically show one of the feeds you created using Smash Balloon.

To show a different feed instead, simply type the feed’s shortcode into the ‘Shortcode Settings’ box and then click on ‘Apply Changes.’

Adding an Instagram feed to WordPress using shortcode

You can now click on the ‘Update’ button to make the widget live. For more information, please see our step-by-step guide on how to add and use widgets in WordPress.

If you’re using a block-enabled theme, then you can add an Instagram feed to the sidebar using the full-site editor. To get started, simply go to Appearance » Editor.

Adding an Instagram feed using the full-site editor

In the editor, simply click to select the sidebar section and then click on the ‘+’ button.

You can then start typing in ‘Instagram Feed’ and select the right block when it appears.

Adding an Instagram feed to a block-enabled WordPress theme

By default, the full-site editor will show one of the Instagram feeds you created using Smash Balloon. To show a different feed, simply add the shortcode following the same process described above.

When you’re happy with how the Instagram feed looks, click on ‘Save’ to make your changes live.

How to Display a Specific Instagram Photo in WordPress

Sometimes you may want to show a specific Instagram post on your website. This might be your most popular photo, an evergreen post, or even a social media contest that you’re currently running.

A single Instagram post, embedded in WordPress

In the past, you could easily embed an Instagram post in WordPress using a protocol known as oEmbed. However, Facebook changed the way that oEmbed works, so you can no longer easily embed Instagram photos in WordPress.

The good news is that Smash Balloon can fix the Facebook and Instagram oEmbed issue. This allows you to easily embed a specific Instagram post in any page, post, or widget-ready area, such as the sidebar.

To enable this feature, simply go to Instagram Feed » oEmbeds. You can then click on the ‘Enable’ button.

Enabling the Facebook and Instagram oEmbed feature

After that, go to Appearance » Widgets and click on the blue ‘+’ button.

In the search bar, type in ‘Embed’ to find the right block.

The WordPress Embed block

When the ‘Embed’ block appears, drag it onto the area where you want to show the photo.

In the ‘Embed’ field, simply paste the URL of the Instagram post that you want to show on your website. Then, click on ‘Embed.’

Adding an embed block to your WordPress website

WordPress will now show the specific Instagram post.

If you’re happy with how it looks, then click on ‘Update’ to make it live.

Publishing an Instagram photo in a sidebar widget

Now, if you visit your website, you’ll see the Instagram post live.

If you’re using a block-enabled theme, then you’ll need to add specific Instagram posts using the full-site editor.

To do this, simply enable Smash Balloon’s oEmbed feature and get the Instagram post’s URL by following the same process described above.

After that, open the full-site editor by going to Appearance » Editor in the WordPress dashboard. Once you’re inside the full-site editor, click on the ‘+’ button in the sidebar section and then type in ‘Embed.’

Adding an Embed block using the full-site editor (FSE)

When the right block appears, click to add it to the sidebar.

You can then add the URL for the post you want to embed and click on the ‘Embed’ button.

Adding an Instagram feed using an Embed block

The full-site editor will now show the Instagram post.

If you’re happy with how it looks, then click on ‘Save’ to publish this photo or video to the block-enabled sidebar.

Adding a specific Instagram post to a block-enabled sidebar

FAQs About Displaying Instagram Posts in WordPress

Smash Balloon makes it easy to create a custom Instagram feed or even display specific Instagram posts on your WordPress website.

That being said, here are some of the most frequently asked questions about showing Instagram posts on WordPress.

How Do I Create an Instagram Business Account?

Smash Balloon can display photos from either a personal or business Instagram account.

However, Smash Balloon can’t automatically fetch the Instagram avatar and bio from a personal Instagram account. Instead, you’ll need to add the avatar and bio manually in the plugin’s settings.

With that being said, you may want to check whether you have a personal or business account, and then switch to a business account if necessary.

To do this, simply visit your Instagram account and click on the lined icon in the side menu.

Checking whether your Instagram page is a business or personal account

After that, click on ‘Settings.’

If you don’t have a business account, then this screen will show ‘Switch to professional account’ as the last option.

How to switch to a business Instagram account

If you currently have a personal account and want to switch to a business account, then simply click on this link.

How Do I Connect a Facebook Page to an Instagram Account?

Before you can display Instagram photos in WordPress, you’ll first need to connect your Instagram account to a Facebook page.

To do this, head over to the Facebook page that you want to use and then click on ‘Settings’ in the left-hand menu.

Once you’ve done that, click on ‘Linked Account.’ You can now select ‘Instagram’ and click on the ‘Connect’ button.

Linking an Instagram business account to a Facebook page

Facebook will now show all the actions it can perform, and the information it can access.

If you’re happy with this, then click on the ‘Connect’ button.

Linking Instagram and Facebook

Just be aware that the people who manage your Facebook page may be able to see your Instagram messages and respond to them. If you want to stop this and keep your messages private, then click to disable the slider.

When you’re ready to move to the next screen, click on ‘Confirm.’

Restricting access to your Instagram messages

This opens a popup where you can type in your Instagram username and password.

After that, click on the ‘Log in’ button.

Logging into your Instagram account

After a few moments, you’ll see a message saying that your Instagram and Facebook accounts are now connected.

We hope this article helped you learn how to display Instagram photos in a WordPress sidebar widget. You may also want to see our guide on how to create a custom Facebook feed in WordPress, or see our expert pick of social proof plugins for WordPress and WooCommerce.

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 Display Instagram Photos in WordPress Sidebar Widget first appeared on WPBeginner.

How to Sell Music Online in WordPress (Step by Step)

Recently, one of our readers asked if it was possible sell music online in WordPress?

The answer is yes. Whether you’re selling your own songs or creating an online music store, you can easily do this in WordPress. Selling music online is a great way to make money without having to pay high shipping or manufacturing costs. It can also be an easy way to promote your own band or music, as well as grow your fanbase.

In this article, we will show you how to easily sell music online in WordPress, step by step.

How to sell music online in WordPress

How to Sell Music Online in WordPress

The easiest way to sell music online is by using Easy Digital Downloads. Easy Digital Downloads is the best eCommerce WordPress plugin that’s designed specifically to sell digital products including music.

How to sell music online using WordPress

Unlike general eCommerce plugins like WooCommerce, Easy Digital Downloads is built specifically with the features you need to promote, sell, and distribute digital music online.

In this way, you don’t have to waste time configuring features that aren’t necessary for selling digital products, such as shipping and inventory management settings.

With that being said, let’s see how you can easily sell music online in WordPress.

Note: If you are looking to sell physical copies of your music, too, such as vinyl records or CDs, check out our guide on how to set up an online store.

Before You Get Started

Before you can start selling music online, it’s important that you have a WordPress site setup already.

For this, you will need a domain name and WordPress hosting.

We recommend using SiteGround’s EDD hosting because it comes with Easy Digital Downloads pre-installed.

SiteGround Managed Hosting forEasy Digital Download (EDD)

But you can also use any other WordPress hosting provider and follow our instructions below.

Step 1. Setting Up Your eCommerce Plugin

The first thing you need to do is install and activate the Easy Digital Downloads plugin. For detailed instructions, please see our guide on how to install a WordPress plugin.

The Easy Digital Downloads WordPress plugin

Upon activation, head over to Downloads » Settings in the WordPress dashboard.

How to set up the Easy Digital Downloads WordPress plugin

Even though you’re selling music, you still need to set your store’s location. This allows Easy Digital Downloads to auto-fill some fields in the order form, which will make it easier for fans to buy your music. Easy Digital Downloads will also use this information to calculate sales tax.

To add your location, simply open the ‘Business Country’ dropdown menu. You can then choose where your business is based.

Setting the location of your online music store

Next, open the ‘Business Region’ dropdown menu and choose the state or province where your store operates from.

After making these changes, go ahead and click on Save Changes to store your settings.

Adding a region to your digital music store

Step 2. Adding a Payment Gateway to Your Music Store

When selling music online, you’ll need a way to accept credit card payments in WordPress.

By default, Easy Digital Downloads supports popular payment gateways including Stripe, PayPal and Amazon Payments.

Pro Tip: Want to use a different payment gateway instead? You can add extra payment options using the Easy Digital Download extensions.

To add payment gateways to your website, go ahead and click on the ‘Payments’ tab. Then make sure the ‘General’ tab is selected.

Adding a payment gateway to your WordPress website

In the Active Gateways section, check the box next to each gateway you want to use on your WordPress website.

If you check more than one payment method, then you’ll need to choose a default gateway, which will be selected automatically when the visitor arrives at the checkout.

To make this decision, simply open the ‘Default Gateway’ dropdown and choose the payment method you want to use. You can use any gateway you want, but Stripe can accept credit cards as well as Apple Pay and Google Pay. With that in mind, we recommend using Stripe as your default gateway.

Adding a Stripe gateway to your WordPress blog or website

After selecting one or more payment gateways, click on the ‘Save Changes’ button. You’ll now have access to some new tabs where you can configure each payment gateway.

The process will vary depending on which gateway you’re using, but Easy Digital Downloads will walk you through the process.

Let’s use Stripe as an example.

To set up Stripe, simply select the ‘Stripe’ tab and then click on ‘Connect with Stripe.’

Connecting the Stripe payment gateway to WordPress

This launches a setup wizard that will walk you through the process of configuring Stripe as your payment gateway.

If you’re using multiple payment gateways, then you’ll need to repeat these steps to set up each gateway separately.

By default Easy Digital Downloads shows all your prices in US dollars. Once you’ve set up your payment gateway, you may want to change the currency that’s used on your website.

To show your prices in any currency other than US dollars, just click on the ‘General’ tab. Then, select ‘Currency.’

How to change the currency settings in your online music store

Next, open the ‘Currency’ dropdown. You can now choose the currency that you want to use on your online music store.

Just be aware that some payment gateways may not accept every currency. If you’re unsure, then you can always check your chosen payment gateway’s website. Most have a list of all the currencies they support.

With that done, click on ‘Save Changes’ to store your settings.

Step 3. Turn Your Music Files into Downloadable Products

Once you’ve set up a payment gateway, you’re ready to start adding music to your online store. With Easy Digital Downloads, you can add sell a single song or add multiple files to the same digital product. This is perfect for selling EPs, albums, compilations, and other products that have multiple separate audio files.

Create a New Digital Product

To create a digital product, simply select ‘Downloads’ from the left-hand menu. Then, click on the Add New button.

Adding music as a downloadable product

You can now type in a name for the product. This will be shown on the product’s page, so you’ll typically want to use something descriptive like the title of the album or single.

Next, type out the description that will appear on the product page.

This should give shoppers all the information they need to decide whether the product is right for them. For example, you might include the genre, duration, and track listing. You might also want to show customer reviews, quotes from music critics, or the star rating.

Adding customer reviews to your WordPress website using Easy Digital Downloads

Add Categories and Tags

If you’re planning to sell music from lots of different artists, then categories and tags can help shoppers find what they’re looking for.

Helpful and descriptive categories can encourage shoppers to explore related artists and genres, which can get you more sales. You might even get creative and add tags for different characteristics like mood, influences, or activities, as you can see in the following image.

Adding product tags to your WordPress website

You can create new categories and tags in the ‘Categories’ and ‘Tags’ boxes.

This works similarly to adding categories and tags to WordPress pages.

Adding product tags and categories to your music website

Set a Price (Or Create Variable Pricing)

After that, you’ll want to set a price by scrolling to the Download Prices section.

Here, type in how much visitors need to pay before they can download the digital product.

Adding a price to a digital music download

Most of the time you’ll want to charge a fixed amount, but Easy Digital Downloads also supports variable pricing.

You might use variable pricing to sell different versions of the same digital product. For example, you could create an extended album with additional tracks, or have several versions of a single with different bonus songs.

If you want to sell variations, then select the ‘Enable variable pricing’ checkbox. This adds a new section where you can start to build your variations.

For now, just type in a title and price for each variation.

How to enable variable pricing

To add more variations, simply click on ‘Add New Price.’ This adds another section where you can type in a title and price.

With that done, you’ll need to set the default variation, which will be selected when the visitor first lands on the product page. Simply check the radio button next to the variation you want to use.

Adding variable pricing to your songs, albums, and EPs

Add Your Audio Files

You’re now ready to start uploading audio, which can either be a single file or multiple separate audio tracks.

When it comes to music, WordPress supports mp3, ogg, and wav. WordPress also supports m4a, although this format may not work in all browsers.

Pro Tip: If you want to sell music in a file type that WordPress doesn’t support, then see our guide on how to allow additional file types in WordPress.

You can now scroll to the Download Files section and click on the ‘Upload a File’ icon.

Uploading audio and music files to an eCommerce store

Now simply choose a song from the media library, or upload a new file from your computer.

With that done, type a title into the ‘File Name’ field. This will be visible to the shopper, so you’ll typically want to use the song’s title. However, you can also add extra information such as the artist’s name.

If you want to add multiple tracks to the digital product, then click on ‘Add New File.’ This adds a section where you can upload another file.

How to sell songs, audio files, and albums online using WordPress

Simply repeat these steps to upload all the files you want to include in the digital product.

Finish Setting Up Variable Pricing (Optional)

Did you enable variable pricing in the previous step? If you’re selling different versions of the same product, then you’ll need to choose which files to include in each variation.

For example, you might release ‘My Awesome Album’ with 10 tracks, and ‘My Awesome Album Extended Edition’ with 12 tracks.

Note: If you set a single price, then skip ahead to the next section.

In the ‘Price Assignment’ column, you’ll see that every audio file is set to ‘All’ by default. This means it’s included in every variation.

To change this, simply open a file’s ‘Price Assignment’ dropdown and choose the variation that customers need to purchase, in order to get this audio file.

How to create variable music downloads using WordPress

Simply repeat these steps to build unique variations with different track listings.

Protect Your Music By Setting a Download Limit

By default, a customer can download a product as many times as they want after purchasing it. This can be useful if the person accidentally deletes their download, or they want to listen to the track on multiple devices such as their smartphone, tablet, and computer.

However, offering unlimited downloads can make you vulnerable to scams. For example, a customer might share their direct download link with dozens of other people, who then download your music for free.

With that in mind, you may want to set a reasonable file download limit by typing into the ‘File Download Limit’ field.

Add a download limit to your music files

Note: If you set this value too low, then customers may occasionally contact you asking for extra downloads. If there’s a genuine reason why they need to re-download the file, then you can simply resend the purchase receipt by going to Downloads » Payment History in your WordPress dashboard.

Create a Refund Policy

Hopefully, everyone who buys your music will be happy with their purchase. However, it’s still smart to think about how you’ll handle refunds.

If you scroll to the ‘Refunds’ section in the left-hand menu, then you’ll see that Easy Digital Downloads offers your customers a 30-day refund by default.

Creating a refund policy for your online store

If you want to give customers more or less time to claim a refund, then simply type a new number into the ‘Refund Window’ field.

A generous refund policy can make customers see your site as trustworthy and fair, which could get you more sales. It will also help turn hesitant visitors into first-time customers.

Giving unhappy customers their money back is a big part of good customer service. Even if they didn’t like their purchase, an easy refund process may still convince people to buy from you in the future.

For that reason, we recommend offering refunds wherever possible. However, if you don’t want to give refunds, then open the ‘Refund status’ dropdown and choose ‘Non-Refundable.’

Changing the refund policy on your music store

Upload Your Album or Song’s Cover Art

With that done, you’ll need to add a product image. This will typically be the album or single’s front cover, or the musician’s logo.

Pro Tip: If you don’t already have a product image, then you can create one using web design software such as Canva.

To add a product image, simply scroll to the Download Image section and then click on the ‘Set Download Image’ link.

Adding a product image to a music store

This launches the WordPress media library where you can choose an image or upload a new file from your computer.

Add Download Instructions

Finally, you may want to add some download instructions, which will appear on the order confirmation page.

An example of download instructions, on a purchase confirmation page

They’ll also be added to the bottom of the purchase receipt email customers get when they buy from your site.

You can use this section to share technical information, such as the file format or the programs it’s compatible with. However, you can also write a thank you note, or even share exclusive perks such as a coupon code.

Download instructions, on a music purchase receipt

No matter what information you want to share, go ahead and type it into the ‘Download Instructions’ box.

Once that’s done, you can go ahead and click on the ‘Publish’ button to make the digital download live.

Adding download instructions to a digital music download

Step 4. Customize Your Digital Download Emails

Every time someone buys music from your store, Easy Digital Downloads will send them an email.

Inside the email, they will find a download link to their purchased music.

The default Easy Digital Downloads purchase receipt email

While this email has everything the customer needs by default, it’s a good idea to customize it. For example, you might help your email stand out by adding your own branding and logo.

To customize the default email, head over to Downloads » Settings. Then click on the ‘Emails’ tab.

How to customize the purchase confirmation email on your online store

Add Your Own Logo and Branding

You may want to start by adding a logo to the purchase confirmation email.

This logo appears at the top of the screen, so customers can immediately see who the purchase email is from.

Adding your music store's logo to the purchase receipt email

To add a logo, click on the ‘Upload File’ button. You can now either choose an image from the WordPress media library or upload a file from your computer.

Change the ‘From’ Name and Email

You can also add a ‘From Name’ which will appear in the customer’s inbox. With that being said, you’ll want to use something that the customer will recognize such as the name of your band or online music store.

You’ll also need to add a ‘From Email,’ which will act as the ‘from’ and ‘reply-to’ address.

Configuring the payment confirmation email

Some customers may reply to the purchase receipt email. For example, if they’re having problems downloading your music, then they might reach out by clicking ‘Reply.’

Because of that, you’ll want to use a business email address that you frequently check.

Improve Your Email Deliverability

If shoppers don’t get the purchase receipt email, then they won’t be able to download the music they just bought.

This is a bad customer experience, so you’ll want to make sure the purchase receipt email arrives in the shopper’s inbox and not in their spam folder. For that reason, we recommend using WP Mail SMTP to improve email deliverability rates.

Simply click on the ‘Install & Activate WP Mail SMTP’ button and then follow the onscreen instructions to configure the free plugin. For more information, please see our step-by-step guide on how to fix the WordPress not sending email issue.

How to fix the WordPress not sending email issue

When you’re finished, don’t forget to click on the ‘Save Changes’ button.

Write Your Purchase Email

After all that, click on the ‘Purchase Receipts’ tab.

How to create a custom purchase receipt for an online store

On this screen, you can type in an email subject, add a heading and also change the email’s body text.

You could simply type in the text that you want to send to every customer. However, you can create more helpful and personalized emails by using the Conditional Emails feature.

Conditional Emails use ‘template tags’ to personalize your messages. These template tags change based on factors such as the buyer’s name, how much they paid for their music download, and any coupon codes they used for the purchase.

When Easy Digital Downloads sends an email, it’ll automatically replace the template tags with real values.

To see all the different tags you can use, simply scroll to the bottom of the page.

Easy Digital Download's conditional email settings

Test Your Purchase Receipt Email

When you’ve finished making changes, you may want to send a test email to check how the message will look to your customers.

Simply click on the ‘Send Test Email’ button and Easy Digital Downloads will send an email to your admin email address.

Sending a test email from your online music store

When you’re happy with how the purchase receipt email looks, you can go ahead and click on the ‘Save Changes’ button.

Step 5. Test Your Digital Music Download

After all that, it’s a good idea to test the digital download to see whether there are any problems or anything you want to change.

Enable Test Purchases

To start, you’ll need to put Easy Digital Downloads into test mode so you can buy products without having to enter any payment information.

In the WordPress dashboard, go to Downloads » Settings and then click on ‘Payments.’

Adding a payment gateway to Easy Digital Downloads

On this screen, check the box next to ‘Test Mode.’

Next, select ‘Store Gateway’ as this allows you to make a purchase without typing in any credit or debit card information.

Adding payment gateways to WordPress

After that, click on ‘Save Changes’ to store your settings.

Make a Test Purchase

Now you’re in test mode, go to Downloads » Downloads and hover your mouse over the product you want to test.

When it appears, click on the ‘View’ link.

How to customize a music download

This opens the item’s product page.

To go ahead and make a test purchase, click on the ‘Purchase’ button.

Testing a music purchase on your WordPress website

Easy Digital Downloads will now add this product to your shopping cart.

To proceed, click on the ‘Checkout’ button.

How to sell music online with WordPress

Under ‘Select payment method,’ click to select the radio button next to ‘Store Gateway.’

You can now type in your name and email address. Easy Digital Downloads will send the purchase receipt to this address, so you’ll need to use a real email address that you have access to.

How to sell albums, songs, and music online using WordPress

After a few moments, you’ll get a purchase confirmation email containing links to download each track in the digital product.

If everything works as expected, then you’re ready to start accepting payments from real-life music fans.

To take Easy Digital Downloads out of test mode, go to Downloads » Settings, and then select the ‘Payments’ tab. Here, uncheck the box next to ‘Test Mode’ and the box next to ‘Store Gateway.’

How to accept payments online using WordPress

With that done, click on ‘Save Changes’ to store your settings. You’re now ready to accept credit card payments in WordPress.

Step 6. How to Promote Your Music Downloads

At this point, you’ve created one or more digital products, but you still need to drive potential customers to your product pages so they can buy your music.

This might mean creating a sales page where you advertise all the latest releases, adding a particular product page to your website’s menu, or even highlighting your favorite track on a custom home page.

You could even write a WordPress blog where you talk about music topics such as the latest releases, your tour experiences, or your favorite records. These posts are the perfect place to include links to any relevant albums and singles that readers may want to buy.

No matter how you promote a product, you’ll need to know its URL.

To find this link, head over to Downloads » Downloads. You can then hover your mouse over the product and click on its ‘Edit’ link.

Selling music online using WordPress and Easy Digital Downloads

You’ll find the URL under ‘Summary’ in the right-hand menu.

You can now link to this product page from any area of your website, simply by using its URL. To learn more, see our step-by-step guide on how to add a link in WordPress.

Adding a product page to your WordPress website

Easy Digital Downloads also creates a ‘Purchase’ button for each digital download. Visitors can click this button to add that specific product to their shopping cart.

You can add this button to any page, post, or widget-ready area. This allows visitors to start the purchasing process without necessarily visiting the product’s page.

Adding a music purchase button to your website or blog

To get the button’s shortcode, simply scroll to the product’s Download Settings section. You can then copy the text in the ‘Purchase Shortcode’ field.

For more information on placing the shortcode, please see our guide on how to add a shortcode in WordPress.

How to add a digital down to WordPress using shortcode

We hope this article helped you learn how to sell music online with WordPress. You can also go through our guide on the best live chat software for small businesses and our step by step guide on how to create an email newsletter.

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 Sell Music Online in WordPress (Step by Step) first appeared on WPBeginner.

How to Add Product Questions And Answers in WooCommerce

Are you looking to add a product question and answer section in WooCommerce?

Adding a Q&A section enables customers to ask questions about the product before buying it, and see the questions and answers of other customers. This helps recover abandoned cart sales and improve customer engagement in your store, and reduce support requests.

In this article, we’ll show you how to easily add product questions and answers in WooCommerce.

How to add product questions and answers in WooCommerce

Why Should You Add Product Q&A in WooCommerce

You may have noticed the product question-and-answer section on popular eCommerce websites like Amazon, Target, Best Buy, and more.

Target Q&A example

Adding a product questions and answers section allows customers to ask questions about a product right there on the product page.

You or your customers can then answer that question and it becomes visible to all other new customers who may have the same question in mind.

Over a period of time, your product page will have its own frequently asked questions section, which will help increase sales and reduce abandoned cart rates.

Adding a question and answers section to your online store also allows you to curate user-generated content which improves your WooCommerce product search rankings.

That being said, let’s see how you can easily add product questions and answers to WooCommerce.

1. Adding a Product Q&A Section Using a Premium Plugin

For this method, we will be using the YITH WooCommerce Questions and Answers plugin.

It is a premium plugin and comes with more features to easily add an engaging Q&A section with a better user experience.

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

Upon activation, go to the YITH » License Activation page and enter your license key. You can find this information under your account on the plugin website.

Activate your YITH plugin with the license key

Don’t forget to click on the Activate button after entering your license key.

Next, you need to go to the YITH » Questions and Answers page to configure plugin settings.

YITH Quiestions and Answers settings

From here you need to scroll down to the ‘Question Approval’ option and simply toggle the switch to ‘Yes’.

Once you do that, the questions on the product pages will have to be approved by an administrator before they are displayed on your WooCommerce store.

Toggle the switch next to the Question Approval field

Next, you need to scroll to the ‘Show on Product Tabs’ option.

Here, you need to toggle the switch to ‘Yes’ so that the plugin will automatically add a ‘Questions and Answers’ section to product pages.

Toggle the switch next to the Product on tab field

After that, don’t forget to click the ‘Save Options’ button to store your changes.

Now, you need to switch to the ‘Advanced Settings’ tab.

From here, simply toggle the ‘Vote Question’ switch to ‘Yes’ if you want to allow users to vote on product questions.

Go to the advanced settings tab

Next, you can choose if you want to get an email notification once a question is submitted on your website.

Simply select the ‘Notification in HTML Email’ option from the dropdown menu next to the ‘New question notification’ field.

Tip: To ensure email deliverability you need to use an SMTP server. See our guide on how to fix WooCommerce not sending emails issue.

Similarly, you can also choose the ‘Notification in HTML Email’ option in the ‘New answer notification’ field if you want to receive an email once a question is answered on your site.

Configure the New question notification field settings

Your user can also receive a notification once the question submitted by them is answered.

To enable this, you need to toggle the switch next to the ‘User Notification’ option to ‘Yes’.

Toggle the user notification

After that, you can review other settings. The default options would work for most websites but you can change them if needed.

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

You can now visit your website to see the Questions & Answers section appear on your product pages.

Questions form below product pages

From here, your customers can submit their questions.

Moderating Questions and Adding Answers

You will receive an email notification for new questions submitted by the users. You can also view them by visiting the Questions & Answers » All discussion page.

Moderate question and answers

You can sort entries here by ‘Content not approved’ or ‘Unanswered Questions’.

You can also take your mouse over a question and click ‘Approve’ to make it live.

To add an answer to a question, you can simply click on the ‘Edit’ link below that question. On the edit screen, scroll down to the ‘Your Answer’ section to answer the question.

Add your answer

Repeat the process if you have more unanswered questions.

This is how the product questions and answers section looked on our demo store.

Question and answers preview

2. Adding a Product Q&A Section Using a Free Plugin

If you want to use a free plugin to add a product Q&A section to your WooCommerce store, then this method is for you.

First, you need to do is install and activate the Product Questions & Answers for WooCommerce plugin. For more instructions, see our guide on how to install a WordPress plugin.

Upon activation, click the Product Q&A menu from the WordPress admin sidebar which will direct you to the ‘Product Q&A Settings’ page.

From here, simply check the ‘Load More’ option if you want to add a ‘load More’ button to your product Q&A section.

Adding this button will allow customers to load older questions and reduces the page load time if a product gets a ton of questions.

Simply check the Load more box

Next, you need to choose a page size.

This means that you need to select a default number of questions that are shown in your Q&A section.

All the other questions will be hidden from view. Users will be able to access those questions after clicking the ‘Load More’ button.

You can also change the text used for the ‘Load More’ button to anything you like. For instance, you can call it ‘Load more questions’.

Choose a paging button name

Next, you need to choose a layout for your product Q&A section from the dropdown menu next to the ‘Layout’ option.

You can choose the ‘Normal’ option if you want to display the Q&A section in paragraphs.

Select layout and save your changes

On the other hand, you can also display your questions as an Accordion menu. This means users will need to click on a question to view the answer.

Once finished, don’t forget to click the Submit button at the bottom to save your settings.

Managing Product Question and Answers

After plugin configuration, simply visit any product page on your store. You’ll notice a new Q&A tab added there.

Click Q and A tab on the product page

Clicking on it will display the ‘Q&A’ section where customers can submit their questions.

You will receive an email notification when a user submits a question.

Type a Q&A question and submit it

Now, to answer customer questions, you need to go to the Products » All Products page from the WordPress admin dashboard.

From here, simply click the ‘Edit’ button under a product to open up its’ ‘Edit Product’ page.

Click the Edit button

Next, you need to scroll down to the ‘Product Data’ section and click the ‘Q&A’ tab from the left column.

Here, all the questions submitted on that specific product’s page will be displayed.

Click the Q&A tab

Now, you need to simply type the answer to a customer query in the ‘Answer’ field.

If you want to delete a question because it’s inappropriate or irrelevant to your product, then you can also do that by clicking the Delete icon on the right corner of each question.

You can also uncheck the ‘Approve’ option if you don’t want to display the question on the product page.

Answer or delete the question

After you have answered the product questions, go to the top of the page and click the ‘Update’ button to save your changes.

Now, you can visit the product page to see the Questions and Answer section in action.

Visit site

We hope this article helped you learn how to add product questions and answers in WooCommerce. You can also check out our top picks for the best WooCommerce plugins to grow your store, and our beginner’s guide on how to add web push notification to boost sales.

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 Product Questions And Answers in WooCommerce first appeared on WPBeginner.

How to Easily Organize Media Uploads by Users in WordPress

Do you want to organize media uploads by user in WordPress?

If you run a multi-author website, then you may want to restrict each author’s media library access to only their own uploads. This can prevent an author from accidentally deleting another user’s images, and help keep subscriber-only content private.

In this article, we’ll show you how to organize media uploads by users in WordPress.

How to organize media uploads by users in WordPress

Why Restrict Author Access to Media Uploads?

If you have a multi-author WordPress blog, then people might be uploading lots of different images. This can make it difficult for an author to find the right image, or they might delete or edit another person’s media file by accident.

This can cause all sorts of problems including poor productivity, lots of extra work for site admins and editors, and a complicated editorial workflow.

This unlimited access can also be a privacy concern. For example, if you’re working on a new product or idea, then other authors might see confidential images in the media library before you make a public announcement.

If you have a WordPress membership site, then contributors and subscribers may be able to access premium media files they shouldn’t have access to. For example, if you sell online courses then a contributor might use their media library access to download premium PDFs and other course materials, without buying a subscription.

That being said, let’s take a look at how to restrict who can see media uploads inside your WordPress admin area. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Organizing Media Uploads by Users With a Plugin (Quick and Easy)

The easiest way to restrict access to media uploads is by using the Frontier Restrict Access plugin.

This free plugin checks whether a user has the edit_others_posts permission, which allows them to edit another user’s posts.

By default, this ability is granted to everyone who has the site admin or editor role. If you want to change this, then you can add or remove capabilities to user roles in WordPress.

If the user doesn’t have this permission, then once this plugin is activated, they won’t be able to access another user’s files in the WordPress media library. This allows you to organize media uploads by users, without restricting access for admins and editors.

This plugin works out of the box and there are no settings for you to configure, so you can simply install and activate the Frontier Restrict Access plugin. For more details, see our guide on how to install a WordPress plugin.

Method 2. Organizing Media Uploads Using Code (Advanced)

Another option is to restrict access to files in the media library using code. This method requires you to add a code snippet to your WordPress blog or website, so it isn’t the most beginner-friendly method. However, you won’t need to install a separate plugin just to organize your media uploads.

Often, you’ll find guides with instructions to add custom code to your WordPress theme. However, this isn’t recommended as mistakes and typos in your code can cause common WordPress errors, or even break your site completely.

That’s why we recommend WPCode.

WPCode is the best code snippets plugin used by over 1 million WordPress websites. It makes it easy to add custom code in WordPress without having to edit the functions.php file.

For this method, we’ll be adding code that checks whether the user has the edit_others_posts permission. If they don’t have this permission, then the code snippet below will stop them from accessing other people’s files in the WordPress media library.

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.

How to add custom PHP snippets to your site using WPCode

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

Adding a custom code snippet to WordPress

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.

After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

Restricting access to the media library using WPCode

In the ‘Code Preview’ area, paste the following code snippet:

add_filter( 'ajax_query_attachments_args', 'user_show_attachments' );
 
function user_show_attachments( $query ) {
    $user_id = get_current_user_id();
    if ( $user_id && !current_user_can('activate_plugins') && !current_user_can('edit_others_posts
') ) {
        $query['author'] = $user_id;
    }
    return $query;
} 

Next, just scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

We want to use the custom PHP code across our entire WordPress website, so click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Run Everywhere.’

Running custom PHP code across your website using WPCode

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 PHP snippet live.

How to restrict access to media files using code

Now, users will only have access to the files they upload to the WordPress media library.

We hope this article helped you better organize media uploads by users on your WordPress site. Next, you can check out our ultimate WordPress security guide or see our expert pick of the best contact form 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 Easily Organize Media Uploads by Users in WordPress first appeared on WPBeginner.

What’s Coming in WordPress 6.2 (Features and Screenshots)

WordPress 6.2 Beta arrived a few days ago and it is expected to be released on March 28th, 2023. It will be the second major release of 2023 and will come with significant new features and improvements.

We have been closely monitoring the development and trying out new features on our test sites.

In this article, we’ll give you a sneak peek into what features are coming in WordPress 6.2 with details and screenshots.

What new features are coming in WordPress 6.2

Note: You can try out the beta version on your computer or on a staging environment by using the WordPress Beta Tester plugin. Please keep in mind that some of the features in the beta may not make it into the final release.

Here is a quick overview of changes coming in WordPress 6.2:

Full Site Editor Comes Out of Beta

The new full site editor feature in WordPress will come out of beta with the final release of WordPress 6.2.

Site editor comes out of beta

This completes a significant part of the WordPress development roadmap.

The site editor feature is now stable for the community to create block-based themes and experiment with their own WordPress websites, plugins, or themes.

Note: Full site editor is available with block themes that support this feature. You can try it out even if you are using the older classic editor with a block-enabled theme.

Browse and Choose Templates to Edit

Previously the Site Editor loaded the Home template of your theme by default. This left many beginners wondering which template or template part they needed to edit.

With WordPress 6.2, the site editor will load the template preview window first. From here, you can browse different templates and see a preview of what it looks like.

Template browser

Then you can simply click on the Edit button to start working on the selected template.

Once you are done editing the template, don’t forget to click on the Save button to make your changes go live.

After that, you can click on the WordPress logo in the upper-left corner of the screen to bring back the template browser sidebar.

Site editor navigation

Now if you need to edit a different template, then you can choose it from here. Otherwise, you can simply click on the WordPress logo again and exit the Site Editor.

Add Custom CSS to Your Theme or Specific Blocks

In the last few WordPress releases, the site editor hid the ‘Theme Customizer‘ which made it difficult for users to add custom CSS to their themes.

WordPress 6.2 will allow users to switch to the Styles panel and select Custom CSS from the menu.

Custom CSS in site editor

From here, users will be able to save Custom CSS that applies to their entire theme.

What if you wanted to save custom CSS that only applied to a specific block?

WordPress 6.2 will also allow you to add custom CSS for specific blocks. From the Style panel, click on the Blocks menu.

Block styles

On the next screen, you will see a list of blocks. Simply click on the block where you want to apply your custom CSS.

Under the block styles, click on the Additional CSS tab.

Block styles custom CSS

If you want to conditionally add CSS or keep your custom styles outside of theme specific settings, then we recommend using the free WPCode plugin.

New and Improved Navigation Menus

Adding navigation menus in the full site editor has been a bit difficult for users. WordPress 6.2 will try to solve this by improving the way users can create and manage menus while using the site editor.

First, instead of editing the menu items inline, you can now add, remove, and edit menu items in a subpanel under the Navigation block.

Managing menu items in block panel

From here, you can add a new menu item by clicking on the Add Block (+) button. You can also just drag and drop menu items to rearrange them.

Want to create a new blank menu or reload an older one? Simply click on the three-dot menu and then choose a menu you created earlier or create a new one.

Manage menus

Colors to Indicate Template Parts Being Edited

WordPress 6.2 will also highlight the template part that you are editing, and that changes will be made on a side-wide, global scale.

The element will be bordered in a color and have a template part icon attached.

Template part editing in site editor

This will help users realize that instead of editing the specific page or post, they are now editing a template part and this change will affect other pages on their site as well.

See Styles for All Blocks in The Style Book

The site editor in WordPress 6.2 will ship with a ‘Style Book.’ Simply switch to the Styles panel and then click on the style book icon.

This will show you all the blocks, and how they are styled in your theme.

Style book shows all block styles at one place

You can locate a block much more quickly this way, and then click to edit it directly.

After that, you can change its appearance and style and customize it to your own requirements.

Edit block directly from style book

Copy and Paste Block Styles

Now that editing block styles and appearance has become so much easier, there is a need to easily copy and paste these styles.

WordPress 6.2 will allow you to simply copy block styles by clicking on block options and then selecting ‘Copy Styles’.

Copy styles

After that, you can click to edit a different block and select ‘Paste styles’ from the block options.

Your browser will ask for permission to allow your website to view the contents of the clipboard. You need to click ‘Allow’ to continue.

Paste styles

Classic Widgets Import as Template Parts in Block Themes

Users with classic widget themes lost their legacy widgets when they switched to a block theme. WordPress 6.2 will provide a nice fallback to that by converting legacy widgets into special Template Parts when switching themes.

You’ll need to enter the site editor and edit the template where you want to import the widgets. After that, create a new template part by clicking on the Add New Block button (+).

Import classic widgets in block themes

From the template part settings panel, click on the Advanced tab to expand it and you’ll find the option to import a widget area from your previous theme.

Separate Sub Panels for Block Settings and Styles

With WordPress 6.2, the editor will show two sub-panels for a block. One for the block settings and the other one for styles.

This will help users understand where they need to look if they want to change the appearance of a block.

Sub panel for Styles

A New Distraction-Free Mode is Introduced

Historically, WordPress has always provided options to hide the formatting buttons and toolbars on the post editor screen.

However, WordPress 5.4 made the editor full-screen by default. This allowed users to have a much cleaner writing interface, but there was no distraction-free mode.

WordPress 6.2 will remedy that and will come with a completely clean and calm distraction-free mode. Users will be able to choose it from the editor settings.

Launch distraction free mode

Once chosen, the distraction-free mode hides all editor control elements.

As you can see below, toolbars, side panels, and the top bar are nowhere to be seen.

Distraction free editor in WordPress 6.2

Improved Pattern Insertion with New Categories

WordPress 6.2 will simplify the Pattern Insertion panel. Instead of showing previews and a drop-down menu of categories, it will show the categories first.

Pattern insertion

There are two new categories of Patterns added for the Header and Footer sections.

Clicking on a category will show you the available patterns that you can use.

Browse patterns in a category

You can then just click to insert a pattern into your template and start editing it.

For more details, see our tutorial on how to use patterns in WordPress.

Miscellaneous Changes

Download Link For Media Files – The media screen will now show a Download File link in the list view.

Download file link in the Media Library

Openverse Integration to Add Free Images – Openverse offers royalty-free open-source images.

With WordPress 6.2, users will be able to find and add those images from Add New panel.

Openverse Integration

New Icon for the Settings Panel – The icon to display the settings panel previously used a gear icon.

It is now represented with a panels icon.

Settings icon

Under The Hood Changes

There are a ton of changes in WordPress 6.2 intended for developers. Here are some of the changes that you will find in the update:

  • Faster updates by moving directories instead of copying them. (Details)
  • A new switch_to_user_locale() function is introduced. (Details)
  • Create autosave revisions only when content is changed. (Details)
  • Add a style variation tag to themes that use style variations. (Details)

Overall WordPress 6.2 beta 1 includes 292 enhancements, 354 bug fixes for the editor, and more than 195 tickets for the WordPress 6.2 core.

We hope this article provided you with a glimpse of what’s coming in WordPress 6.2.

Comment below to let us know what features you find interesting and what you’d look to see in a future WordPress release!

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 What’s Coming in WordPress 6.2 (Features and Screenshots) first appeared on WPBeginner.