Category Archives: WordPress Plugins

How to Easily Add CSS Animations in WordPress

23.03.2023blocks animation, css animation plugin for wordpress, css animations, css3 animations, seedprod, wordpress landing pages., WordPress PluginsEditorial Staff

Do you want to add CSS animations in WordPress?

Animations are a great way to grab the visitor’s attention and highlight a page’s most important content. They can also encourage customers to click on your call-to-action buttons and links.

In this article, we will show you how you can easily add CSS animations in WordPress.

How to easily add CSS animations in WordPress

Why Add CSS Animations in WordPress?

You can use CSS animations to draw the visitor’s attention to different parts of a page. For example, if you have an online store then animations can highlight a product’s most important features or biggest selling points.

Animations will also make your CTAs stand out, which can help you reach a specific goal such as getting more people to subscribe to your email newsletter.

You can add CSS animations to your theme or child theme‘s stylesheet. However, this takes a lot of time and effort, and it can break your website’s design and even function if you make a mistake.

With that being said, let’s see how you can easily add CSS animations to your WordPress site. If you prefer to jump straight to a particular method, then you can use the links below.

Method 1. How to Easily Animate Any WordPress Block (Quick and Easy)

The easiest way to add a simple CSS animation is by using Blocks Animation.

This free plugin allows you to add an entrance animation to any block without having to write a single line of CSS. It also has a typing animation and a ticker-style effect that you can add to text and numbers.

A count animation, created using the Animation Blocks plugin

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, open any page or post in the WordPress editor. Then, simply click on the block that you want to animate and select the ‘Block’ tab in the right-hand menu.

You’ll see this menu has a new ‘Animations’ section.

Simply click to expand the ‘Animations’ section, and you’ll see three different options: Animations, Count Animations, and Typing Animations.

‘Animations’ are short effects that play once when the page loads. To add this kind of entrance animation to your WordPress blog, just click on the dropdown next to ‘Animation.’

Adding a CSS animation to WordPress using a free plugin

This opens a menu where you can choose the animation you want to use.

The WordPress editor will show a preview of the animation, so you can try different options to see what looks the best.

By default, the entrance animation will play as soon as the page loads, but you can add a delay if you prefer. If you use multiple animations on the same page, then you can even use delays to stagger your animations so they’re not overwhelming.

Simply open the ‘Delay’ dropdown and choose a time from the list.

How to add loading CSS animations to WordPress

You can also make the animation faster or slower using the ‘Speed’ dropdown.

As you’re trying different settings, you can preview the animation at any point by clicking on ‘Replay Animation.’

The plugin also has ‘Count Animations’ and ‘Typing Animations.’

Typing Animations allow you to animate text, while Count Animations add a ticker-style effect to numbers. These animations work with any block that supports text or numbers, so you can use them to animate buttons, image captions, headings, and more.

To add either of these effects, start by highlighting the text or numbers that you want to animate. Then, click on the downward arrow in the small toolbar.

Adding a typing animation to a text block

You can now choose ‘Count Animations’ or ‘Typing Animations’ from the dropdown menu.

If these options are grayed out, then make sure you’ve highlighted the right content. For example, you won’t be able to select ‘Count Animation’ if you’ve only highlighted text.

Creating typing animations with a WordPress plugin

After adding the animation, you can change the speed and add an optional delay using the dropdown menus in the small popup.

For example, in the following image, we’re using a delay of one second.

When you’re ready to make the CSS animation live, either click on the ‘Publish’ or ‘Update’ button. Now, if you visit your WordPress website you’ll see the animation live.

Method 2. How to Add CSS Animations to Custom Pages (Recommended)

If you want to add simple animations to the built-in WordPress blocks, then Blocks Animation is a good choice. However, if you want to really grab the visitor’s attention, keep people on your website, and get more conversions then we recommend using SeedProd.

SeedProd is the best page builder plugin that allows you to create beautiful landing pages, sales pages, and more using a simple drag-and-drop editor.

It also comes with an ‘Animated Headline’ block that you can use to create rotating and highlighted animated headlines.

An animated headline created using SeedProd

Despite the name, you can use the Animated Headline block to animate any text including a call to action, subheading, or any other text that you want to emphasize.

SeedProd also comes with over 40 entrance animations that you can add to any block including images, text, buttons, videos, and more.

You can even animate entire sections and columns with just a few clicks. In this way, you can create engaging animated pages within minutes.

If you’re using animations to get more conversions and sales, then SeedProd integrates with WooCommerce and supports many of the top email marketing services you may already be using to promote your website.

How to Setup the SeedProd Page Builder

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

Upon activation, you need to enter your license key.

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

Create a Custom Page Design

To get started, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

Creating a new landing page with SeedProd

On the next screen, you’ll be asked to choose a template.

SeedProd comes with over 180 beautiful templates that are organized into different categories such as 404-page templates and custom WooCommerce ‘thank you’ pages.

For this guide, we’ll show you how to create a sales page with animated text and entrance animations, but the steps will be similar no matter what kind of page you create.

Simply click on any tab to see the different templates within that category.

When you find a template you want to use, just hover your mouse over it and then click on the checkmark icon.

We’re using the ‘Zen Sales Page’ template in all our images, but you can use any template.

Next, you need to give the page a title.

SeedProd will automatically create a URL based on the page title, but you can change this to anything you want. For example, adding relevant keywords to a URL can often improve your WordPress SEO and help the page appear in relevant search results.

To learn more, please see our guide on how to do keyword research for your WordPress blog.

When you’re happy with the title and URL, click on ‘Save and Start Editing the Page.’

This will load the SeedProd drag-and-drop page editor.

On the right, you’ll see a live preview of the page design, with some settings on the left.

SeedProd comes with lots of blocks that you can add to your design, including blocks that allow you to add social share buttons, videos, contact forms, and more.

For more information, please see our guide on how to create a custom page in WordPress.

How to Add Animated Text to WordPress

To add some animated text to the page, find the Animated Headline block and drag it onto your page design.

There are two ways to animate your headline. First, the ‘Highlighted’ style adds a shape animation to your text, such as a circle or an underlined zigzag.

You can use this animation to draw attention to a particular word or phrase inside the headline. This can make your headline easier to read and understand by highlighting the most important content. It’s also a great way to draw attention to a call to action.

Adding a CSS animation to a headline in WordPress

The Highlighted style also has a few strikethrough shapes.

You can use strikethroughs to create interesting and eye-catching effects, or it can simply add some fun to your design.

A strikethrough animation created with SeedProd

To create a Highlighted animation, just open the ‘Style’ dropdown and select ‘Highlighted.’

Next, open the ‘Shape’ dropdown and choose a shape. When you click on a shape, SeedProd will show a preview of that animation, so you can try different shapes to see which one you like the most.

A curly CSS animation created with SeedProd

SeedProd also has a ‘Rotating’ animation style, which adds a transition effect to the text.

Often, animated text is the first thing visitors look at when a page loads, so it’s a great way to highlight the most important piece of text.

To create a transition animation, simply open the ‘Style’ dropdown and click on ‘Rotating.’

You can then open the ‘Animation’ dropdown and choose the type of transition you want to use, such as fade, zoom, or roll. Again, SeedProd will play the animation inside the page editor so you can try different effects to see which you prefer.

No matter whether you’re creating a ‘Highlighted’ or ‘Rotating’ animation, you can add text before and after the animated text.

Simply type into the ‘Before Headline’ and ‘After Headline’ fields. In the ‘Text’ field, add the word or phrase that you want to animate.

If you want to animate the whole headline, then simply leave the ‘Before Headline’ and ‘After Headline’ fields empty.

Animating an entire headline in WordPress

By default, SeedProd will play the animation on a loop, which some visitors may find annoying.

To only play the animation once, click to deactivate the ‘Infinite Loop’ switch.

Disabling the infinite loop animation settings

By default, the animation will play for 1200 milliseconds after an 8000 milliseconds delay.

To use different values, type into the ‘Duration’ and ‘Delay’ fields. For example, you can make the animation faster by using a shorter duration.

You may also want to style the text. For example, you can change the font size and alignment.

When you’re happy with how the animated headline looks, go ahead and click on the ‘Save’ button to store your changes.

Add Entrance Animations in WordPress

Entrance animations play when the page first loads, so they’re a great way to catch the visitor’s attention.

You can also use them to highlight the content visitors should look at first. For example, if you have an online marketplace then you might animate the product’s hero image, or the banner advertising your Black Friday sale.

Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.

Adding entrance animations using SeedProd

You can then go ahead and click to expand the ‘Animation Effects’ section.

After that, simply choose an animation from the ‘Entrance Animation’ dropdown.

You can now add entrance animations to any block, section, or column simply by following the same process described above.

Publish Your CSS Animations in WordPress

When you’re happy with how the page is set up, click the dropdown menu on the ‘Save’ button and select ‘Publish.’

You can now visit this page to see the CSS animations live.

We hope this article helped you learn how to add CSS animations in WordPress. You may also go through our ultimate guide to boost speed and performance, or see our list of the most common WordPress errors and how to fix them.

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

The post How to Easily Add CSS Animations in WordPress first appeared on WPBeginner.

How to Download Your Entire WordPress Media Library (3 Ways)

18.03.2023download wordpress images, download wordpress media library, duplicator, duplicator pro, Media Library, wordpress media library, WordPress PluginsEditorial Staff

Do you want to download all the images and media files from your WordPress website?

By downloading your media library, you can easily store a backup of your media files on your computer or, if you have created another WordPress site, then you can also transfer these images from one site to another.

In this article, we’ll show you how to easily download your entire WordPress media library, step by step.

How to download your entire WordPress media library

Why Would You Want to Download the Media Library?

The WordPress media library stores all the media files that you have uploaded to your site. If you want to create a backup of these media files, then you can easily do that by downloading a copy of the media library and storing it on your computer.

You can always use a fully automated WordPress backup solution to back up your entire WordPress site (including plugins, themes, posts, and the media library).

However, most backup plugins do not offer an easy way to just download and upload your media library.

You could also use your WordPress hosting account file manager or FTP to download the media library, but these methods are a bit complicated and confusing for beginners.

With that being said, we’ll show you some easy ways to easily download your entire media library in WordPress.

Method 1. Download Media Library Using The Export Media Library Plugin

For this method, we’ll be using a plugin to download the media files.

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

Upon activation, go to the Media » Export page from your admin area.

Once you’re on the ‘Export Media Library’ page, simply choose the ‘Single folder with all files’ option from the dropdown menu beside the ‘Folder Structure’ option.

Download the media library using the Export Media Library plugin

Now all your media will be downloaded into one folder. They will be downloaded as the original file types, such as JPG, PNG, or SVG.

If you want your media to be placed into separate folders based on the time of upload, then choose the ‘Nested Folder’ option from the dropdown menu.

After that, simply click the ‘Download Zip’ button, and your entire media library will be downloaded into a zip file on your computer.

Method 2. Download the Entire WordPress Backup Including Media Files

If you want to create a backup for your entire WordPress website including the media library, then this method is for you.

We’ll be using the Duplicator plugin which is the best WordPress backup plugin on the market and enables you to create a complete backup of your WordPress website.

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

Upon activation, you need to visit the Duplicator » Packages page from the admin sidebar and click on the ‘Create New’ button.

Create a new backup by clicking the Create New button

Next, you need to choose a name for your WordPress backup.

It can be anything that will help you identify the backup once it’s downloaded on your computer.

After that, click on the ‘Next’ button to continue.

In the next step, your website will be scanned for potential errors.

Once the scan is complete, simply click on the ‘build’ button to create your package.

Note: If an error is highlighted by Duplicator during the scan, you would need to solve that error before rescanning and building your package.

Once the package is built, you need to click on the ‘Download Both Files’ button.

Now, your installer and archive files will be downloaded simultaneously.

Your WordPress website backup including media files will now be downloaded and stored on your computer.

If you want to restore a WordPress backup, you may also want to see our guide on how to restore WordPress from a backup.

Method 3. Download Media Library Using WordPress Settings

In this method, we’ll show you how to download your entire media library from your WordPress backend and import it to another WordPress website.

Note: This method allows you to download the media library without using any plugins. However, we do not recommend this method because it exports your media as an XML file.

This method can come in handy if you want to import your WordPress media library to one of your other websites.

For that, head over to the Tools » Export page from the WordPress admin dashboard.

Now that you’re on the ‘Export’ page, simply check the box beside the ‘Media’ option.

If you don’t want to download your entire library, then you can also select a date range for a specific time frame. With this feature, only the images uploaded during your chosen time frame will be downloaded.

Finally, click on the ‘Download Export File’ button.

Now, your WordPress media library will be saved on your computer as an XML file.

Next, you need to install and activate the WordPress Importer plugin. For more instructions, please see our guide on how to install a WordPress plugin.

This plugin will allow you to import your XML file to another WordPress website.

First, you need to visit the Tools » Import page from the admin sidebar.

Then you can simply click on the ‘Run Importer’ link below the ‘WordPress’ option.

This will take you to the ‘Import WordPress’ page where you need to click on the ‘Choose File’ button.

Now, you can upload your media library XML file from the computer.

Once you’re done, don’t forget to click on the ‘Upload file and import’ button to upload the media library.

We hope this article helped you download your WordPress media library. You may also want to see our tutorial on how to speed up your WordPress website, and our comparison of the best Instagram 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 Download Your Entire WordPress Media Library (3 Ways) first appeared on WPBeginner.

How to Show Before and After Photo in WordPress (with Slide Effect)

15.03.2023before and after image, before and after photo in wordpress, photo difference, WordPress PluginsEditorial Staff

Do you want to show a before and after photo in WordPress?

A before and after photo allows you to show a side by side comparison of two images with minor differences. This is perfect for showing the impact of your products and services, or simply encouraging people to interact with your content.

In this article, we’ll show you how to add a before/after photo to your WordPress website with a slide effect.

How to show before and after photo in WordPress (with slide effect)

Why Show Before and After Photos in WordPress (with Slide Effect)?

A before-and-after image is an interactive picture that typically shows some kind of change.

Visitors can use a slider to switch between the different ‘versions’ of the image in an engaging and interactive way.

If you run an online store using a plugin such as WooCommerce, then a before and after photo can show the effect of your products or services.

You simply need to show a ‘before’ photo that the customer can relate to, and a desirable ‘after’ photo. This will make shoppers want to buy the thing that takes them from the ‘before’ state to the ‘after’ state.

If you’re an affiliate marketer, then showing persuasive before and after photos on your website is a great way to promote your affiliate links, and get more sales.

Before and after photos can also encourage visitors to interact with your content. Dragging a slider to reveal the ‘after’ photo is an easy way to get more engagement, which can keep visitors on your site for longer. This can also help increase your pageviews and reduce bounce rate in WordPress.

With that being said, let’s see how you can create a before and after photo in WordPress using a slide effect. Simply use the quick links below to jump straight to the method you want to use.

Method 1. How to Show Before and After Photos Using a Free Plugin (Easy)

The easiest way to create before and after photos is by using the Ultimate Before After Image Slider & Gallery (BEA).

The BEA plugin allows you to create horizontal and vertical sliders, and customize the image with different labels and colors.

An example of a before and after slider in WordPress

The first thing you need to do is to install and activate the Ultimate Before After Image Slider & Gallery (BEA) plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Before and After Slider » Add New in your dashboard.

To start, type in a name for the image slider. This is just for your reference so you can use anything that will help you identify it.

How to create a side by side comparison image in WordPress

With that done, you can add the ‘before’ image by scrolling to the ‘Before Image’ section.

Here, click on ‘Add or Upload Image’ and then either choose a picture from the WordPress media library or upload a new file from your computer.

How to add a before comparison image to a WordPress website

To help search engines understand this image and show it to the right people, it’s a good idea to add some image alt text. To do this, simply type into the ‘Image Alt’ field.

For more information about alt text, please see our beginner’s guide to image SEO.

Adding image alt text to a before and after image

With that done, scroll to the ‘After Image’ section.

You can now add the ‘after’ image by following the same process described above. Don’t forget to add some alt text to this image, too, since it’s important for WordPress SEO.

Adding an 'after' comparison image to a website or blog

You can also show some text below the image, by adding a title and a description.

For example, you might encourage visitors to interact with the slider. This is especially important for visitors who might have never run across a before-and-after photo before.

An example of a comparison image with a title and description

This is also an easy way to add some context to the image.

To add some text, simply type into the ‘Slider Title’ or ‘Slider Description’ fields.

Adding a description to a before and after image

You can also add a ‘Read More’ URL, which can link to any post or page on your WordPress website, or even an external website. For example, you might send visitors to a page where they can buy the product featured in the slider image.

This link will appear below the before/after image, and also beneath any slider title or description you’re using.

Adding a Read More link to a comparison image with a slide effect

To add a link, type the destination into the ‘Read More Link’ field.

You can then decide whether to open the link in the same tab, or in a new tab using the ‘Read More Link Target’ dropdown.

If you’re linking to another website, then we recommend choosing ‘New tab’ so you’re not sending visitors away from your WordPress blog.

With that done, you can choose whether you want to create a vertical or horizontal slider by clicking on one of the thumbnails in the ‘Orientation Style’ section.

Creating a vertical or horizontal slide effect in WordPress

After that, scroll to the top of the screen and click on ‘Options.’

Here, you’ll see the ‘Default offset’ is set 0.5. This means the visitor sees half of the ‘before’ image when the page first loads.

How to customize a before and after slider in WordPress

If you want to show more of the before image, then type in a bigger number such as 0.6, 0.7, or higher.

If you want to show the entire before image, then type in 1. This will place the slider at the top or right of the before image, as you can see in the following image.

Customizing a side by side comparison image with a slide effect

By default, the plugin shows ‘Before’ and ‘After’ labels when the visitor hovers their mouse over the image.

You may want to replace these labels with something more descriptive.

Adding custom labels to a before/after slider

To do this, simply go ahead and type into the ‘Before Label’ and ‘After Label’ fields.

By default, visitors will move the slider using drag and drop. Some people may find this difficult, especially if they have mobility issues or they’re using smaller devices like smartphones or tablets.

With that being said, you may want to change how visitors move the slider.

If you select the ‘Yes’ button next to ‘Move slider on mouse hover,’ then visitors can move the slider simply by hovering their mouse over the image.

Creating a custom slide effect on a before and after image

If you select the ‘Yes’ button next to ‘Click to move,’ then visitors can click anywhere on the image to move the slider to that point.

These settings can make it easier to interact with the before/after image, but it’s typically not the way that sliders behave. With that in mind, we recommend using these settings carefully.

Next, click on the ‘Style’ tab.

Changing the style of a slide effect on a website or blog

Here, you can change the colors used for the different labels, backgrounds, headings, descriptions, and the read more button. This can help the before/after image blend in with your WordPress theme, or even stand out from the rest of your website’s design.

You can also change the font size and text alignment.

When you’re happy with how the slider is set up, click on the ‘Publish’ button.

Publishing a before and after photo to your WordPress website

This creates a shortcode that allows you to add the before/after image and slider to any page, post, or widget-ready area.

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

Adding a slide effect to your WordPress images using shortcode

After adding the shortcode to your site, simply click on the ‘Publish’ or ‘Update’ button to make the before/after image and slider effect live.

Method 2. How to Show A Before and After Photo Using SeedProd (Advanced)

If you simply want to add a before and after image to a page or post, then the BEA plugin may be a good choice. However, if you’re using the image to promote a product, service, or business then we recommend using SeedProd.

SeedProd is the best drag-and-drop WordPress page builder. It comes with more than 180 ready-made templates that you can use to create high-converting landing pages, sales designs, and more.

It also has a ready-made ‘Before After Toggle’ block that you can use to create beautiful before-and-after images your users can interact with.

Simply drag the block from the left-hand menu, and then drop it onto any page design that you may happen to be working on, including sales pages.

A before and after image created using SeedProd

If you’re using WooCommerce to sell your products, then SeedProd integrates with WooCommerce and even comes with special eCommerce blocks. This is perfect if you plan to use before and after images to promote your WooCommerce products.

Note: There is a free version of SeedProd that allows you to create custom pages no matter your budget. However, we’ll be using the premium version as it comes with the Before After Toggle block. It also integrates with many of the best email marketing services you may already be using on your website.

For information on how to use SeedProd, please see our guide on how to create a custom page in WordPress.

After creating a page, it’s easy to add a before and after image to your design. In the SeedProd page editor, simply find the ‘Before After Toggle’ block.

The SeedProd before and after toggle block

You can then drag and drop this block anywhere on your design, to add it to the page layout.

With that done, simply click to select the ‘Before After Toggle’ block. The left-hand menu will now update to show all the settings you can use to create your before-and-after image.

SeedProd's before and after toggle settings

To start, you’ll need to add the picture you want to use as the before image. Under ‘Before Image’ either click on ‘Use Your Own Image’ or ‘Use a Stock Image’ and choose the picture you want to use.

By default, SeedProd shows a ‘Before’ label above this image. However, you can change this to something more descriptive by typing it into the ‘Before Label’ field.

Creating a before and after image using a page builder plugin

With that done, scroll to the ‘After Image’ section.

You can now add an image and customize the default ‘After’ label by following the same process described above.

Adding an after image to a custom page layout

SeedProd can add a vertical or horizontal slide effect.

To switch between these two styles, scroll to the ‘Slider Orientation’ section and then click on either ‘Vertical’ or ‘Horizontal.’

By default, visitors will move between the before and after images by dragging the slider. However, some users may find it easier to move the slider by hovering their mouse over the image.

This is particularly true for larger images where the visitor would need to drag the slider a greater distance.

To try this setting, enable ‘Move on Hover’ in the left-hand menu.

Next, you may want to add a colored overlay to both the before and after images. This can help the image blend in with the rest of the color scheme, or stand out from the background.

You can even make the colored overlay semi-transparent, to create a more subtle effect.

To try different colors, click on the ‘Overlay Color’ section and then make your changes in the popup that appears.

Adding an overlay color to an interactive image using SeedProd

With that done, you can customize the slider handle by clicking to expand the ‘Comparison Handle’ section.

By default, SeedProd shows half of the ‘before’ image and half of the ‘after’ image. To change this, simply drag the ‘Handle Initial Offset’ slider.

Changing the initial offset on a before/after picture

To display less of the before image, drag the slider to the left so that it shows a lower number. To show more of the before image, drag the slider to the right, which increases the number.

Next, you can change the slider’s color using the ‘Handle Color’ settings.

How to customize a slider using SeedProd

You can also make the handle thicker or thinner using the ‘Handle Thickness’ slider.

In this way, you can make the handle stand out, or create a more subtle effect.

Changing the thickness of a slider using SeedProd

When you’re happy with the handle, you may want to change the circle. You can make the circle bigger or smaller using the ‘Circle Width’ settings, and change the ‘Circle Radius’ to create sharp or curved corners.

As you make changes, the live preview will update automatically so you can try different settings to see what looks the best.

Changing the width and radius of the slider circle

When you’re happy with the circle, you may want to change the size of the triangles inside that circle. For example, if you’ve made the circle bigger then you might want to increase the size of the triangles too.

To make this change, drag the ‘Triangle Size’ slider until you’re happy with how it looks.

How to customize a slider using a page builder plugin

With that done, you can continue adding new blocks and customizing the content on your SeedProd page.

When you’re happy with how the page looks, just click on the arrow next to the ‘Save’ button and then select ‘Publish.’

Publishing a before and after image using SeedProd

Now if you visit your website you’ll see your page design with the before-and after-image live.

We hope this article helped you learn how to add a before and after photo to your WordPress website with a slide effect. You can also go through our guide on the best social proof plugins for WordPress and how to choose the best web design software.

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 Show Before and After Photo in WordPress (with Slide Effect) first appeared on WPBeginner.

How to Add Passwordless Login in WordPress with Magic Links

13.03.2023magic links, magic login, password free wordpress login, passwordless login, WordPress PluginsEditorial Staff

Are you looking to add a passwordless login system to your website, such as magic links?

This will allow your users to log in to your WordPress website without needing to remember a password. They will simply click on a link that is sent to their email inbox to gain access to the site and their account.

In this article, we’ll show you how to add a passwordless login in WordPress with magic links.

How to Add Passwordless Login in WordPress with Magic Links

What Is Passwordless Login?

You use passwords to keep our WordPress websites secure. By requiring each user to enter a username and password when logging in, you keep unauthorized users from visiting sensitive areas of your websites.

This is especially important if you have a website where users need to log in regularly, such as a multi-author site, membership site, or online store.

But passwords are hard to create and remember, and they can cause security issues. For example, users may make weak passwords that can be easily guessed or use the same password on multiple sites.

They may also be costing you money. 75% of users quit when they forget and need to reset their password, and 30% of customers abandon their shopping cart when prompted to create a password. Password problems also place a burden on your support team.

Luckily, there are a number of ways you can improve password security on your site. You can force your users to use strong passwords and change their passwords regularly. We also recommend you use a password manager to securely manage your passwords.

However, you may wish to avoid passwords altogether. A passwordless login system allows your users to log in to your website without entering a password.

What Are Magic Links?

Magic links are the most common method of passwordless login.

When logging in to your WordPress website, a user is asked for their username or email address. Next, a special link is sent to that email address, and the user just has to click on the link to be taken to your website and automatically logged in.

This form of passwordless login is secure because the link can only be used once and will expire after a certain number of minutes. Also, the link can only be found in the user’s email account, which confirms that the user is who they say they are.

This is different from a temporary login link that you would give to a plugin developer or security expert who needs to run tests on your website. In that case, the login solution is only temporary, and an email address does not need to be entered each time.

With that being said, let’s take a look at how to add a passwordless login in WordPress with Magic links.

How to Add Passwordless Login in WordPress with Magic Links

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

Note: In this tutorial, we’ll use the free plugin. There is also a Magic Login Pro plan that adds support and additional features such as brute force protection, login redirection, and the ability to customize the emails sent.

Upon activation, the plugin will automatically add a ‘Send me the login link’ button to your standard login screen. This will let your users sign in using their username (or email) and password if they remember it, or request a magic link if they don’t.

The Plugin Automatically Adds a Magic Link Button to the Login Screen

If there is a valid account on your website for the username or email address entered, then the user will receive an email with a link to log in.

The link will work for 5 minutes and then expire. If you need, you can change the link’s lifespan in the plugin’s settings, as we show below.

Note: If you or your users did not receive the email and it isn’t in your spam folder, then there may be a problem with your website’s email. You should take a look at our guide on how to fix WordPress not sending email issue.

If there is no account on your website with the username or email address that was entered, then an error message will be displayed instead.

An Error Message Is Displayed if There Is No Account for the Username or Email Address

Configuring the Magic Link Plugin

You can configure the Magic Link plugin by visiting Settings » Magic Login in your admin sidebar.

This page contains all of the options for the plugin, including premium options that can be used by Pro users.

The first option is called ‘Force Magic Login.’ When enabled, your users will not be given the option of signing in with a password.

They simply enter their username or email address and then click the ‘Send me the link’ button. A magic link will be emailed to their inbox.

The 'Force Magic Login' Setting Removes the Password From the Login Screen

Alternatively, you can use the shortcode [magic_login_form] to add a magic link login form to any page or widget. See our guide on how to add a shortcode in WordPress for details.

The second option is enabled by default and adds a magic login button to the standard login form. When this switch is toggled off, the magic link button is removed from that login form.

The next two options are related to security. By default, the Token Lifespan setting makes magic links expire after 5 minutes. We recommend keeping this setting short, but you could increase it to 10 or 20 minutes if your users have issues.

The Token Validity setting is set to 1 by default. This means that each magic link will work for a single login. We recommend you keep this setting.

Next comes a feature called ‘Auto Login Links.’ When enabled, a magic link will be added to all emails sent out by WordPress, such as WooCommerce order confirmations, automated coupons, and comment notifications. The user will be logged in automatically when responding to the email.

After that comes a number of premium features for Pro users. These include:

Brute Force Protection
Login Request Throttling
IP Check
Domain Restriction
Email Subject
Email Content
Login Redirection

There is also a button for all users that will reset the tokens.

Once you have finished configuring the plugin, make sure you click the ‘Update Settings’ button at the bottom of the page to store the settings.

We hope this tutorial helped you learn how to add passwordless login in WordPress with magic links. You may also want to learn how to get a free email domain, or check out our list of common WordPress errors and how to fix them.

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

The post How to Add Passwordless Login in WordPress with Magic Links first appeared on WPBeginner.

How to Redact Text in WordPress (The Easy Way)

11.03.2023formatting, redact text, show redacted text in wordpress, text formatting, WordPress PluginsEditorial Staff

Do you want to redact text on your WordPress website?

Redaction can be a way to share information with your visitors without hurting anyone’s privacy. You can even use it as an unusual paywall or a game where you challenge visitors to fill in the missing words.

In this article, we will show you how you can redact text in WordPress.

Why Redact Text in WordPress?

Redaction is where you edit text by blacking out sensitive parts of it. It is a way to share information and documents with the general public while keeping confidential and sensitive information private.

Redaction can help you share real world examples without breaking your privacy policy. For example, if you’re showing visitors how to write a great CV then you might want to include a few examples of real CVs you’ve received. You can use redaction to block out each applicant’s name, address, and other personal information.

When you redact text, that content still exists in your WordPress dashboard. This means you can easily remove the redaction at any point.

Redaction can also be an eye-catching way to preview the kind of content visitors can expect when they sign up to your WordPress membership site. Visitors can then buy a membership to remove the redaction and enjoy the full, uncensored version.

That being said, let’s see how you can easily redact text on your WordPress website.

How to Redact Text in WordPress

The easiest way to redact text in WordPress is by using Eyes Only. This plugin will replace any redacted text with a black block.

An example of redacted text on a WordPress website

If the visitor highlights the block, then they’ll simply see the word REDACTED in white letters.

You can see an example of how this might look in the following image.

Another option is to automatically replace any word or phrase with an alternative chosen by you. For example, if you can’t use a client’s name on your small business website then you might replace the information with a more vague word such as ‘client.’

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, you can redact any text by editing the HTML in the WordPress code editor. To get started, simply open the page or post.

Then, click on the dotted icon in the top right corner and click on ‘Code editor.’

Next, find the piece of text that you want to redact. At the start of the text, type in the following tag:

[redact]

At the end of the redacted text, type in:

[/redact]

In the following image, we’re redacting ‘the Recipient.’

To redact more text just follow the same process described above.

If you want to switch back to the default plain text block editor at any point, then simply click on ‘Exit code editor.’

After adding tags to all the text that you want to redact, you can go ahead and publish or update the page.

Just be aware that the text won’t appear redacted while you’re logged into your WordPress account. To check that the text is redacted, you’ll either need to log out of your account or visit the page in an incognito tab in your web browser.

Another option is to automatically replace specific words with alternative words. This is useful if there’s a word that you never want to show on your site, such as the name of a confidential supplier or customer.

By configuring the plugin to automatically redact a word, you can make sure that information never shows up on your website. This automated workflow can also save you a lot of time and hard work.

Since it replaces each redacted word with an alternative word, this method can also make your pages easier to read and nicer to look at, particularly when compared to a page that has lots of blacked-out content.

To redact a word or phrase automatically, head over to Settings » Eyes Only. Then, go ahead and click on the ‘Add new’ button.

In the new ‘Text’ field, simply type in the text that you want to redact automatically. Just be aware that the text replacement is case sensitive.

In the ‘Replacement’ field, type in the text that you want to show instead of the redacted text.

In the following image, we’re replacing ‘Jane Smith’ with ‘Our Client.’

The Eyes Only redaction WordPress plugin

You can then go ahead and click on the ‘Add’ button.

If you want to automatically replace more words or phrases, then simply repeat the process described above.

As we already mentioned, the text replacement is case sensitive. If you want to redact a word no matter whether it’s capitalizated, you’ll need to create two separate text replacement rules.

One of these rules should replace the capitalized version, and another should replace the uncapitalized version, as you can see in the following image.

When you’re happy with the redaction rules you’ve created, click on the Save Changes button at the bottom of the screen.

The plugin will now scan your site and automatically replace any matches that it finds.

At some point you may no longer want to hide a particular word or phrase. In this case, you can simply delete the redaction rule. This will automatically remove the masking and show the original words across your WordPress blog.

To delete a redaction rule, simply go to Settings » Eyes Only.

Then, just hover the mouse over the rule that you want to delete and click on the ‘Delete’ link when it appears.

You will need to confirm that you want to delete the rule.

If you still want to go ahead, then click on ‘Yes.’

Finally, it’s time to click the ‘Save Changes’ button at the bottom. Now if you visit any page or post that has the original word, you’ll see that the plugin is no longer redacting the text.

We hope this article helped you learn how to redact text in WordPress. You may also want to check out our ultimate WordPress security guide and the best live chat software.

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 Redact Text in WordPress (The Easy Way) first appeared on WPBeginner.

How to Create A Question and Answers Site in WordPress

11.03.2023Bluehost, question answer wordpress plugin, WordPress Plugins, wordpress question answer siteEditorial Staff

Do you want to build an online question and answer community like Stack Overflow or Quora?

You can create a whole site dedicated to Q&A, or add a question and answer section to an existing WordPress site. No matter what approach you take, helpful questions and answers can improve the visitor experience and keep people on your website for longer.

In this article, we will show you how to easily create a question and answers site in WordPress.

How to create a question and answers site in WordPress

Getting Started with a Question and Answer Website

To start your own question and answers website, you will need the following:

A domain name. This is the name of your website such as stackoverflow.com.
A web hosting account. This is where your website’s files are stored. All websites need web hosting.
A Content Management System. This is software that helps you create, publish, and manage all your questions and answers. For this guide, we’ll be using WordPress as it powers nearly 43% of all websites and gives you complete control over your content. To learn more about why we recommend WordPress to all our readers, please see our complete WordPress review with pros and cons.
Extra software, plugins, or tools. These add special question-and-answer features to your WordPress website.

How Much Does It Cost to Build a Question and Answer Website?

The answer to this question depends on the features you need, how many visitors you get, how much content you create, and lots of other factors.

To help you budget, we’ve created a complete guide on how much it really costs to build a website. However, typically the cost of building a website can range from anywhere between $100 per year to as high as $30,000 per year.

We recommend you start small and then add more features to your question-and-answer site as it grows and gets more popular. This helps you avoid spending too much on your site, before it starts making a profit.

That said, let’s see how you can build a successful Q&A website for under $100.

Step 1: Setting up Your Question and Answers Site

To create a WordPress website you’ll need a domain name and web hosting. To help you out, we’ve hand-picked some of the best WordPress hosting that you can buy for a question and answer website.

Although the WordPress software is free, hosting and domain names are where the costs can really start to add up.

A domain name typically costs $14.99/year and hosting costs start from $7.99/month. This is A LOT for new websites or anyone who is working with a limited budget.

Luckily, Bluehost has agreed to offer our users a free domain name and over 60% off on web hosting. Basically, you can get started for $2.75 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

Bluehost is one of the largest hosting companies in the world and an officially recommended WordPress hosting provider.

They’re also offering our readers a free SSL certificate so you have the option to accept payments online. This is perfect if you want to make money from your question and answer website in the future.

To buy a domain name and hosting, simply go to the Bluehost website in a new browser window and click on the green ‘Get Started Now’ button.

This will bring you to a pricing page where you can choose a hosting plan for your question-and-answer website.

We recommend choosing a Basic or Plus plan, as they’re the most popular web hosting plans among our readers.

After selecting a plan, click on ‘Continue.’

On the next screen, you’ll need to choose a domain name.

Choosing a domain name for your Q&A site

Ideally, the domain name will be easy to pronounce and spell, and easy to remember.

Need help choosing a domain name for your question and answer website? See these tips and tools on how to choose the best domain name.

After choosing a name, click on the ‘Next’ button to continue.

Now you’ll need to provide your account information such as your name and business email address. After that, you’ll also see optional extras that you can purchase.

We generally don’t recommend purchasing these extras straight away, as you can always add them later on if you need them.

Adding extra packages to your Bluehost hosting

After that, simply type in your payment information to complete the purchase.

Once you’ve done that, you’ll get an email with instructions on how to log in to your web hosting control panel. This is your hosting account dashboard where you can manage your Q&A website, including setting up email notifications and asking for WordPress support, if you need it.

It’s also where you’ll install the WordPress software.

Step 2. Install WordPress on Your Question and Answer Website

When you signup with Bluehost using our link, you’ll get access to a one-click WordPress installer.

Simply log into your Bluehost account and click on ‘One Click Install.’

Here, you’ll see all the different software you can add to your account.

Simply find ‘WordPress’ and give it a click.

Here, just click on the ‘Install’ button.

You can now follow the onscreen instructions to install the WordPress software.

Once that process is finished, you can log in to the WordPress dashboard by simply going to yoursite.com/wp-admin/ directly from your browser.

If you’re using a different WordPress website host like SiteGround, Hostinger, HostGator, or WP Engine, then you can see our complete guide on how to install WordPress for all the top hosting providers.

Step 3. Select a WordPress Theme

After installing WordPress, you’ll typically want to change the default theme. WordPress themes are professionally designed templates that change how your site looks and acts.

There are lots of different premium and free WordPress business themes to choose from. You can generally categorize these as multipurpose WordPress themes, or niche industry themes.

Another option is to use a landing page builder plugin such as SeedProd.

SeedProd is the best drag-and-drop WordPress page builder and comes with built-in templates that you can use to build a professionally-designed question-and-answer website.

It even has a ready-made FAQ section that you can add to any page using drag and drop.

A SeedProd page builder, with an FAQ section

Once you’ve chosen a theme, please see our step-by-step guide on how to install a WordPress theme.

Step 4. Setting up Your Question and Answers Site

The easiest way to add question and answer features to your WordPress website is by using the AnsPress plugin. This plugin allows you to create a Stack Overflow-style question and answer site.

How to create a question and answer site using WordPress

Even better, AnsPress automatically creates all the pages you need to launch a successful Q and A site.

This includes a page where visitors can type in their questions, in exactly the same way people use websites like Quora.

An example of a question and answer site, created using WordPress

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

Upon activation, AnsPress automatically adds question-and-answer pages to your WordPress website. To see these pages, head over to AnsPress » Settings in the WordPress dashboard.

Once there, you can select ‘General’ in the menu on the left-hand side.

The AnsPress question and answer WordPress plugin

This page lists all the different pages that AnsPress has created.

To take a closer look at any page, simply click on its ‘View page’ link.

Changing the question and answer settings in WordPress

The default AnsPress pages should be a good fit for most WordPress blogs and websites. However, you can always add your own content to these pages.

For example, you might add some text that encourages visitors to post their questions, and tells them when to expect an answer.

Customizing the default question and answer page in WordPress

To add your own content to any AnsPress page, simply click on the ‘Edit page’ link next to it.

This opens the standard WordPress post editor where you can add text, images, and more.

An example of question and answer WordPress shortcode

As you can see, AnsPress adds all its content using shortcode, so don’t change this code in any way.

When you’re happy with the changes you’ve made, just click on ‘Update.’

Customizing the question submission page in WordPress

You can edit any default AnsPress page by following the same process described above.

When you’ve finished, don’t forget to click on ‘Save Pages’ to store your settings.

Changing the AnsPress WordPress plugin settings

By default, AnsPress adds the following message to all its pages: ‘Question and answer is powered by anspress.net.’ This can make your site look less professional.

It also links to the AnsPress site, which can hurt your pageviews and bounce rate by encouraging people to leave your site.

An example of a question and answer site, with a 'Powered by' disclaimer

Because of that, it’s a good idea to remove this text by checking the box next to ‘Hide author credits’ and then clicking on ‘Save Changes.’

Now if you look at any AnsPress page, you’ll see the text has vanished.

Removing the 'Powered by' disclaimer from a question and answer site

With that done, scroll to the ‘Permalinks’ section in the AnsPress settings.

Here, you’ll see the permalink structure and settings that the plugin uses by default. These settings should work well for most websites, but you may be able to improve your WordPress SEO by making some small changes.

Changing the Q and A permalink settings on your site

For example, you may want to add some relevant keywords to the default ‘Question slug.’ This can help you create more SEO-friendly URLs in WordPress.

In the image below, each question will now use the slug /questions/wordpress-questions/question-name/ which will help us rank for the term ‘WordPress.’

Changing the permalink settings on a Q&A WordPress website

If you do make any changes in this section, then don’t forget to click on ‘Save Changes.’

Next, it’s time to fine-tune the layout by scrolling to the ‘Layout’ section. Here, you’ll see that AnsPress shows the user’s Gravatar in a few different places including next to questions, answers, and comments.

You can change the size of these avatars by typing into the different boxes.

For more information on user avatars, please see our beginner’s guide on Gravatars and why you should start using them right away.

By default, AnsPress will show 20 questions per page and 5 answers per page. You can show more or less content by typing new numbers into the ‘Questions per page’ or ‘Answers per page’ box.

Showing more or less questions and answers on your Quora-style WordPress website

If you show fewer questions and answers per page, then users will need to scroll less. This is particularly helpful for visitors who are using smaller devices like smartphones and tablets. It can also speed up your WordPress performance since you’re loading less content.

Just be aware that most visitors expect to get the right answer on the first page, so you’ll want to show a reasonable number of answers per page.

When you’re happy with how your Q&A site is set up, click on the ‘Submit’ button.

Email notifications are an important part of running a successful question-and-answer website. They let admins know when customers or potential leads post a new question, and they also let users know when their question gets an answer.

In this way, emails can keep users engaged and help your Q&A site run more smoothly.

AnsPress comes with built-in email notifications that work out-of-the-box. However, it’s still smart to see whether there are any changes you want to make by clicking on the ‘Email’ link.

Customizing the email settings in your Stack Overflow-style WordPress website

Here, you can see all the different emails that AnsPress will send automatically.

To enable or disable an email, simply click on the box next to it.

Changing the email notifications on a Q&A website

Pro Tip: You need to make sure all your Q&A emails go to the user’s email inbox and not to the spam folder. The best way to do this is by using an SMTP service provider to improve email deliverability. For more details, see our guide on how to fix WordPress not sending email issue.

As always, don’t forget to click on ‘Submit’ to save your changes.

Some question-and-answer sites are completely open to the public. This means that non-logged-in users can see the content, and may even be able to post questions and answers without creating an account.

Other Q&A sites are completely private or require user registration.

There are drawbacks and positives to the different approaches. A public question-and-answer site will typically get more traffic and engagement, but it may also get more spam and attract low-quality answers.

If you’re using questions and answers to make money online blogging with WordPress, then you may want to make some parts of your site members-only. This allows you to charge a subscription fee using a plugin like MemberPress.

Another option is allowing people to register with your website for free, so you can collect their email addresses. In this way, your question-and-answer site can help you do lead generation like a pro.

However you plan to use your question-and-answer site, it’s a good idea to review the posting permissions by selecting ‘User Access Control.’

Here, you can see all the different content that logged-in and non-logged-in users can access, and the actions they take. You can change these settings using the different dropdown menus.

You can also change whether questions and answers get posted automatically, or if they’re held for admin approval. By default, non-logged-in users can post questions and answers, but you’ll need to approve them manually in the admin area.

This is similar to how you moderate comments in WordPress.

These settings are self-explanatory but they have a big impact on how your question-and-answer site runs. With that being said, it’s worth going through the different settings carefully and then making any changes.

Changing the posting permissions on your Stack Exchange-style WordPress website

If you do edit these settings, then don’t forget to click on the ‘Submit’ button.

AnsPress encourages users to engage with your site through gamification, by awarding reputation points for different actions. This reputation system works by default, but you can change how many points AnsPress awards for each action by selecting ‘Reputations.’

Here, you’ll see all the different actions and their reputation points.

Adding a reputation points-based system to a Q and A website

To award more or less points for an action, simply type a new number into its box. When you’re happy with how the reputation system is set up, click on Save Events Points.

There are some more settings you may want to look through, but this should be enough to help you set up a successful question-and-answer website.

When you’re happy with how the plugin and pages are set up, it’s a good idea to add them to your website’s navigation menu so visitors can find them.

A WordPress menu with question and answer links

For step-by-step instructions, please see our beginner’s guide on how to add a navigation menu in WordPress.

If you need reminding about all the different pages that AnsPress added to your site, then simply go to AnsPress » Settings and then click on the ‘Pages’ link.

Managing Your Question Answer Site

At this point, your site is ready to start accepting questions and answers from users. However, depending on how your Q&A site is set up, you may need to manually approve some, or all, of these posts.

By default, AnsPress will email the WordPress admin about any questions or answers that need manual approval. You’ll also see notifications in the admin dashboard.

Managing your WordPress question and answer site

To manually approve an answer or question, simply click on either ‘All Questions’ or ‘All Answers’ in the left-hand menu.

You can then hover your mouse over the post that you want to review and click on ‘View.’

Approving questions and answers on a Q&A WordPress blog or website

This will show a preview of how the question or answer will look on your website.

If you’re happy to make it live, then click on the small cog icon and then select ‘Published.’

Approving a question or answer on your WordPress website

If you don’t want to publish the post, then select ‘Delete’ or ‘Delete Permanently’ instead.

We hope this article helped you create a question-and-answer site in WordPress. You may also want to see our guide on how to create a contact form in WordPress or see our expert pick of the best live chat software 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 Create A Question and Answers Site in WordPress first appeared on WPBeginner.

How to Add an HTML Sitemap Page in WordPress (2 Ways)

10.03.2023aioseo, how to create a sitemap page in wordpress, html sitemap generator for wordpress, html sitemap plugin for wordpress, seo, sitemap, wordpress html sitemap page, WordPress PluginsEditorial Staff

Do you want to add an HTML sitemap page in WordPress?

Unlike XML sitemaps that are submitted to search engines for better crawling, HTML sitemaps present an organized list of your pages and posts for your website visitors.

In this article, we’ll show you how to add an HTML sitemap page in WordPress.

What’s the Difference Between XML and HTML Sitemaps?

An XML sitemap is a file that lists your website content in an XML format for search engines like Google and others.

You can submit your XML sitemap in webmaster tools to improve and control how the search engines crawl your website.

On the other hand, an HTML sitemap is for your actual website visitors. It is a simple page that lists all your posts and pages in an organized way.

Now that you know the difference, let’s take a look at how to add an HTML sitemap page to WordPress using two different WordPress plugins. You can use the quick links below to jump straight to the method you want to use.

Method 1. Add HTML Sitemap Page in WordPress With All in One SEO

We recommend using the All in One SEO plugin to add an HTML sitemap page in WordPress. It’s the best WordPress SEO plugin in the market used by over 3 million websites and lets you create an HTML sitemap with a couple of clicks.

Note: There is a free version of All in One SEO Lite available which includes the HTML sitemap feature below, but we will be using the premium version in our screenshots because it includes powerful features like smart sitemaps, redirection manager, SEO schema, and more.

The first thing you need to do is install the All in One SEO plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the AIOSEO setup wizard will open, which will guide you through setting up the plugin and getting your SEO settings right.

Simply click the ‘Let’s Get Started’ button and follow the steps.

After that, you’ll be taken to the WordPress admin dashboard, where you’ll have a new menu option called ‘All in One SEO’.

Then, you need to go to All in One SEO » Sitemaps, click on the ‘HTML Sitemap’ menu option, and make sure the ‘Enable Sitemap’ toggle is turned on.

Next, you can choose how you want to display your HTML sitemap.

For this tutorial, we’ll select the ‘Dedicated Page’ option, but you can also add it as a shortcode, block, widget, and more.

Then, enter the page URL where you want the HTML sitemap to display. The plugin will automatically create a new page for you.

Once you’ve done that, scroll down to the ‘HTML Sitemap Settings’ section.

Here you can customize how your HTML sitemap will display. You have control over what posts and pages will display, taxonomies such as categories and tags, sort order, and more.

You can also turn on ‘Compact Archives’ to display your HTML sitemap in a compact date archive format.

This is similar to how we display our compact archives on our 404 pages here at WPBeginner.

After you’re done customizing your HTML sitemap settings, make sure to click the ‘Save Changes’ button.

Now your visitors can view your HTML sitemap and more easily navigate around your website.

If you chose the ‘Dedicated Page’ option above, then you can visit the page by clicking the ‘Open HTML Sitemap’ button.

Method 2. Add HTML Sitemap Page in WordPress With Simple Sitemap

Simple Sitemap is a free plugin that lets you easily add an HTML sitemap to your WordPress website.

The first thing you need to do is install and activate the Simple Sitemap plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Once the plugin is activated, you can open an existing page, or create a new HTML sitemap page by navigating to Pages » Add New.

Adding an HTML Sitemap With Simple Sitemap Using Blocks

This plugin has newly added Gutenberg blocks that you can use to simply add an HTML sitemap page.

All you need to do is click the ‘Plus’ icon, then select the ‘Simple Sitemap’ option.

Another block included with this plugin is the ‘Simple Sitemap Group’ that creates a branching visual sitemap. But, we’re going to use the ‘Simple Sitemap’ block for this tutorial.

Once you add the block, it will automatically create your HTML sitemap.

On the right-hand menu, you have customization options where you can choose to display ‘Posts’ or ‘Pages’, or both together.

In the box under ‘Select post types to display’, simply enter ‘Post’ or ‘Page’ to choose what you want to display.

Next, you can change how the list displays by changing the ‘Orderby’ or ‘Order’ drop-downs.

You can also display the excerpt for the pages or posts listed, and enable or disable links. However, we’re going to keep the default plugin settings to keep our HTML sitemap simple and easy to browse.

Once you’ve finished customizing your HTML sitemap page, click ‘Publish’ or ‘Save’ if you’re updating an older page.

When your visitors go to your HTML sitemap, they’ll see a navigation page that looks similar to the one below.

Adding an HTML Sitemap With Simple Sitemap Using Shortcodes

Another way to add an HTML sitemap to WordPress is by using a shortcode. This gives you more control over the placement of your HTML sitemap and works for those who are using the classic editor.

Simply create a new page by navigating to Pages » Add New, then give your new page a name.

After that, click the ‘Plus’ icon to add a new block to your page.

Then, type ‘shortcode’ into the search box and select the ‘Shortcode’ block.

After that, simply copy and paste one of the following shortcodes into the text editor. The first shortcode will list your posts by category, and the second shortcode will list your pages.

[simple-sitemap-group]

[simple-sitemap]

Once you’ve done that, click ‘Publish’ or ‘Update’ to save your changes.

If you need more help, then see our guide on how to add a shortcode to WordPress.

This is how the plugin will display your sitemap to your website visitors.

Creating an HTML Sitemap With Simple Sitemap for Top Pages Only

Many site owners use WordPress as a CMS with their main content published as pages instead of posts. For more details, see the difference between posts and pages in WordPress.

In this case, you would want your HTML sitemap to show pages in the proper hierarchical order.

Here is how you can add an HTML Sitemap with only pages.

Simply add this shortcode to the page where you want to display your HTML sitemap. Follow the same steps above to add the shortcode to a new WordPress page.

[simple-sitemap]

This is how it will display your HTML sitemap with all your WordPress pages listed in a hierarchical list.

It also includes your parent and child pages listed in a nested fashion. For more details, see our guide on how to create a child page in WordPress.

We hope this article helped you learn how to add an HTML sitemap page in WordPress. You may also want to see our expert picks of the best virtual business phone number apps and our expert guide on how to choose the best blogging platform.

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 HTML Sitemap Page in WordPress (2 Ways) first appeared on WPBeginner.

How to Enable Imagick on Your WordPress Site

07.03.2023imagemagick engine, imagemagick php, imagick, speed up wordpress, speed wordpress, WordPress Plugins, wordpress speed and performance, wordpress speed optimizationEditorial Staff

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

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

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

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 Add an SEO Editor Role in WordPress

06.03.2023aioseo, SEO Editor role, SEO Manager role, Tutorials, WordPress Plugins, wordpress seo plugins, WordPress User RolesEditorial Staff

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.

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.

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.

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.

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.

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

05.03.2023images in menu wordpress, menu icons wordpress, navigation menu icons, WordPress Plugins, wpcodeEditorial Staff

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

Why Add CSS Animations in WordPress?

Method 1. How to Easily Animate Any WordPress Block (Quick and Easy)

Method 2. How to Add CSS Animations to Custom Pages (Recommended)

Why Would You Want to Download the Media Library?

Method 1. Download Media Library Using The Export Media Library Plugin

Method 2. Download the Entire WordPress Backup Including Media Files

Method 3. Download Media Library Using WordPress Settings

Why Show Before and After Photos in WordPress (with Slide Effect)?

Method 1. How to Show Before and After Photos Using a Free Plugin (Easy)

Method 2. How to Show A Before and After Photo Using SeedProd (Advanced)

What Is Passwordless Login?

What Are Magic Links?

How to Add Passwordless Login in WordPress with Magic Links

Why Redact Text in WordPress?

How to Redact Text in WordPress

Getting Started with a Question and Answer Website

How Much Does It Cost to Build a Question and Answer Website?

Step 1: Setting up Your Question and Answers Site

Step 2. Install WordPress on Your Question and Answer Website

Step 3. Select a WordPress Theme

Step 4. Setting up Your Question and Answers Site

Managing Your Question Answer Site

What’s the Difference Between XML and HTML Sitemaps?

Method 1. Add HTML Sitemap Page in WordPress With All in One SEO

Method 2. Add HTML Sitemap Page in WordPress With Simple Sitemap

How Does WordPress Use the Imagick Software?

Why You Should Customize Imagick on Your WordPress Website

How to Enable Imagick on Your WordPress Site

FAQs: How to Enable Imagick on Your WordPress Site

Why Add an SEO Editor Role in WordPress?

How to Add SEO Editor / Manager User Roles in WordPress

How to Customize SEO User Roles in WordPress

Why Add Image Icons With Navigation Menus in WordPress?

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

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