Wednesday, March 29, 2023

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

WordPress 6.2 has just been released, and it is the first major WordPress release of 2023.

This new version is packed with significant improvements and new features. Many of them focused on the block editor and site editing in WordPress.

In this article, we’ll show you what’s new in WordPress 6.2 and which features you should try after the update.

An overview WordPerss 6.2 release with features and screenshots

Note: WordPress 6.2 is a major release, and unless you are on a managed WordPress hosting service, you’ll have to initiate the update manually. Here’s how to safely update WordPress.

Important: Don’t forget to create a complete WordPress backup before updating.

That being said, here’s all that’s new in WordPress 6.2.

WordPress Site Editor Comes out of Beta

The site editor comes out of the beta.

It has been around for the past few WordPress releases, the removal of the beta label is merely an invitation for more users to try it.

Site editor comes out of beta

This also indicates the completion of phase 2 of the WordPress development roadmap which started out with the release of the new block editor back in WordPress 5.0 (late 2018).

WordPress 6.2 includes several new features added to the site editor, including some brand-new tools which we’ll talk about later in this article.

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

Improved Navigation Menu Block

Navigation menus help you define your website layout to your users. However, creating them in the full site editor had been a bit difficult for beginners.

WordPress 6.2 now comes with an improved ‘Navigation’ block.

You can now create and manage the Navigation block by editing items in the sidebar.

Managing menu items in block panel

To add a new menu item, simply click on the ‘add (+)’ button. You can also drag and drop menu items to rearrange them.

Want to use a different menu? You can now easily switch between menus you have created earlier by clicking on the Three-dot menu in the sidebar.

Manage menus

Overall, this is a significant improvement to the older Navigation block where you had to edit items inline which was not a good experience for beginners.

Improved Template Browsing Experience

WordPress 6.2 comes with a new template browsing experience.

This allows users to browse different templates to find out which one they need to edit if they want to make changes to a certain area of their website.

Template browser in WordPress 6.2

To edit a template or template part, simply click to load it inside the preview window. After that, just click on the preview window to start editing.

Want to exit the site editor?

Simply click on the WordPress or your site logo at the top left corner of the screen to enter the template browser. Then click again to exit and return to the WordPress dashboard.

Exit site editor

The template browser screen will now also show you that you have unsaved changes.

It also offers an improved saving experience showing what changes you are saving.

Unsaved changes in site editor

Template Parts Highlighted with Colors

A template in the site editor may include several template parts, like the header and footer.

These are global elements that can be used in multiple places on your WordPress website. If you edit a template part on one page, those changes will be reflected all over your site.

Previously when editing a template part, the only indication was the label at the top changed to show the template part name.

Template part editing before WordPress 6.2

Editing template parts affects all templates that include those elements. This makes it important to indicate that users are editing a global template part and not simply the page they are looking at.

WordPress 6.2 now makes this more noticeable by adding colors and an icon to indicate that you are editing a template part.

Template part edited in WordPress 6.2

Modify Your Theme With The Style Book

WordPress 6.2 comes with a style book feature in the site editor.

This is basically one convenient place to browse how your theme displays all the blocks. To access it you need to switch to the Styles panel and then click on the Style Book icon. It is the one that looks like an eye.

Style book shows all block styles at one place

This will show you all the blocks, and how they are styled in your theme. They are organized into different categories so that you can easily locate the block you want to edit.

Click to start editing a block and you will see all the tools that you can use in the sidebar panel. Changes you make here will apply globally to your theme.

Edit block directly from style book

Basically, you can change the appearance of your entire theme by editing individual blocks here and creating a completely new style of your own.

Want to edit block styles individually? Don’t worry there are even more design tools at your disposal to edit blocks.

Ability to Add Custom CSS to Your Theme or Blocks

By default, the site editor hides the legacy Theme Customizer interface. Many users added their custom CSS in the ‘Additional CSS’ panel available with the legacy customizer.

Until 6.2, it was a problem to add custom CSS using the default tools available.

WordPress 6.2, however, now allows you to add custom CSS that applies to your entire site. Simply click on the Styles panel and choose Custom CSS under the three-dot menu.

Custom CSS in site editor

You can also add custom CSS to individual blocks as well.

Switch to the Style panel and then click on Blocks.

Block styles

Now, you need to select the block that you want to modify.

After that, click on the ‘Additional Block CSS’ tab to enter your custom CSS code.

Block styles custom CSS

WordPress 6.2 makes it easier to add custom CSS if you need to. However, it comes with a ton of built-in design tools which are much easier to use than adding custom CSS.

Copy and Paste Block Styles

Another styling feature that reduces the need to add custom CSS is the ability to simply copy and paste block styles.

Let’s say that you just made some changes to a block and want to make the same changes on another block as well.

With WordPress 6.2 you can simply click on ‘Copy styles’ under the block options.

Copy styles

After that, click on the block options for the block where you want to paste the style and select ‘Paste styles.’

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

Paste styles

Improved Pattern Insertion

WordPress block patterns are a collection of pre-made design elements that you can use for creating custom content layouts faster.

By default, WordPress comes with several built-in patterns. Your WordPress theme may also include its own pattern. Plus, you can find more patterns in WordPress Patterns Directory.

WordPress 6.2 comes with an improved pattern insertion interface.

Easier pattern insertion

Openverse Free Media Library Integration

WordPress 6.2 now adds a ‘Media’ tab in the inserter as well.

Here, you can choose media from your own WordPress media library or browse royalty-free images from Openverse.

Openverse Integration in WordPress 6.2

Openverse is a sister project of WordPress.org. It allows openly licensed and public domain works to be discovered and used by everyone.

Once you select an image it will be inserted into the editor and downloaded to your WordPress media library as well.

WordPress will also save the image caption which may include a link back to the original source. You can delete this caption if the image is in the public domain.

New Sub Panels for Block Settings & Styles

WordPress 6.2 now uses sub-panels to separate block settings and styles.

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

Sub panels for block settings and styles

New Distraction-Free Mode

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

Here is how it looked in WordPress 4.1 with the older classic editor.

Distraction free mode in older classic editor

However, the block editor had the option to be used in full-screen mode. WordPress 5.4 started using the full-screen mode as the default.

This allowed users to have a much cleaner writing interface, but there was no distraction-free mode.

Full-screen mode

WordPress 6.2 now comes with a completely clean and calm distraction-free mode.

Users will be able to choose it from the editor settings, and it removes all toolbars and editing panels from the screen.

Distraction free mode in WordPress 6.2

Import Classic Widgets as Template Parts in Block Themes

WordPress 6.2 provides a nice fallback for importing classic legacy widgets in block themes when switching themes.

Users with classic widget themes lost their legacy widgets when they switched to a block theme. Now, you can import them as template parts.

Simply create a new template part by clicking on the ‘Add New Block’ button (+).

Import classic widgets into template part

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

Miscellaneous Enhancements

WordPress 6.2 contains a ton of enhancements. It merges 10 Gutenberg releases (‘Gutenberg’ is the codename for the original block editor project) into WordPress core so there are many refinements and new features to explore.

Here are some of the most useful enhancements.

1. Captions Button in Image Block Toolbar

Previously WordPress automatically added the caption area below the image and moved the cursor automatically to the caption.

This led many users to continue writing their text not realizing that they are writing it in the caption area.

WordPress 6.2 fixes this by adding a caption button to the toolbar. Users can now use it to add a caption if needed.

Add caption button

2. Improved Calendar Block

The calendar block now comes with more color options.

Improved color block

3. The List, Outline, and Info Panels are Merged

The list view, outline, and info panel are now merged into one convenient location.

List block now shows outline and information panel

4. Group Block Layout

The ‘Group’ block now lets you choose a layout.

Group block layout

5. The Download Link for Media Files

The media screen will now show a ‘Download File’ link in the list view.

Download link for media files

6. New Icon for Settings Panel

The icon to display the settings panel previously used a gear icon. It is now presented with a panels icon.

Settings icon

Under The Hood Changes

WordPress 6.2 also includes a ton of changes intended for developers. Following are some of these changes:

  • A new HTML API called WP_HTML_Tag_Processor is introduced. (Details)
  • A new client-side filter called blockEditor.useSetting.before is introduced. It allows developers to change block settings before the editor is rendered. (Details)
  • Patterns API extended to include template_types property. (Details)
  • Faster updates by moving directories instead of copying them. (Details)
  • A new switch_to_user_locale() function is introduced. (Details)
  • Create autosave revisions only when content is changed. (Details)
  • Add a style variation tag to themes that use style variations. (Details)

We hope this article helped you uncover what’s new in WordPress 6.2 and which new features to try out. We are particularly excited about all the changes to the site editor and performance improvements for block themes.

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

The post What’s New in WordPress 6.2 (Features and Screenshots) first appeared on WPBeginner.


March 30, 2023 at 02:00AM

How to Add Fuzzy Search in WordPress to Improve Results

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

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

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

How to add fuzzy search to your WordPress website

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

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

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

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

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

No search results found

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

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

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

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

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

How to Add Fuzzy Search to Your WordPress Website

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

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

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

SearcWP license

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

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

Check the Partial matches option in the Action & Settings section

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

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

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

SearchWP settings

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

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

Enable search for posts, comments, and pages

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

Adding a Search Form to Your Website

SearchWP automatically replaces the default WordPress search.

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

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

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

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

Search widget

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

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

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

Adding search block in site editor

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

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

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

Search results with fuzzy search

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

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

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


March 29, 2023 at 03:14PM

Tuesday, March 28, 2023

How to Password Protect Your WordPress Admin (wp-admin) Directory

Do you want to learn how to password-protect your WordPress admin directory?

Adding another layer of password protection to your WordPress admin directory can be a great way to improve your WordPress security.

In this article, you’ll learn how you can password-protect your wp-admin directory easily.

How to Password Protect Your WordPress Admin (wp-admin) Directory

Why Password Protect Your WordPress Admin Directory?

By password-protecting your WordPress admin directory, you improve the security of the most important entry point to your

WordPress website.

Your WordPress admin dashboard is the central hub of your site. It’s where you’ll publish posts and pages, customize your theme, install WordPress plugins, and more.

Often, when hackers try to get into your website, they’ll do it through the wp-admin screen. You can help to protect your website against potential attacks by using a secure password and limiting login attempts.

To be even more secure, you can also password-protect the wp-admin directory. Then when someone attempts to access your admin area, they’ll need to enter a username and password before they ever make it to the WordPress login screen.

With that said, let’s take a look at how you can password-protect your WordPress admin directory step by step.

The first method is recommended for most users, and you can use the quick links below to jump straight to the method you want to use.

Method 1: Password-Protect wp-admin Using Directory Privacy (Recommended)

The easiest way to password-protect your WordPress admin directory is by using your WordPress hosting provider’s Directory Privacy app.

First, you need to log in to your hosting account dashboard and click on the ‘Directory Privacy’ option in the Files section of your website’s advanced settings.

Click Directory Privacy
Note: Most web hosts using cPanel, like Bluehost, will have similar steps. However, your dashboard might be slightly different from our screenshots depending on your hosting provider.

This brings you to a screen that lists all of the different directories on your server. You need to find the folder that contains your website files.

For most website owners, this can be found by clicking on the ‘public_html’ folder.

Click public_html

This brings up all of the website files you’ve installed on your server.

Next, you’ll need to click on the folder with your website’s domain name.

Click domain name folder

In that folder, you’ll see a ‘wp-admin’ folder.

Instead of clicking the folder name, you’ll need to click the ‘Edit’ button next to that folder.

Click edit wp-admin folder

This brings you to a screen where you can turn on password protection.

Simply check the box that says ‘Password protect this directory’. If you like, you can also give your directory a name like ‘Admin Area’ to help you remember.

Check password protect directory box

Once you’ve done that, you’ll need to click the ‘Save’ button.

This will take you to a page where the confirmation message will appear.

Confirmation message click back button

Now you’ll need to click the ‘Go Back’ button and you’ll be taken to a screen where you can create a user that will be able to access this directory.

You will be asked to enter a username and password, and then confirm the password. Make sure to note your username and password in a safe place, such as a password manager app.

Create a User

Make sure you click the ‘Save’ button when you’ve done that.

Now, when someone tries to access your wp-admin directory, they will be prompted to enter the username and password you created above.
Password protect WordPress admin example

Method 2: Password-Protect wp-admin Using Code

You can also password-protect your WordPress admin directory manually. To do this you’ll need to create two files called .htpasswd and .htaccess.

Note: Adding any code to your website can be dangerous. Even a small mistake can cause major errors on your site. We only recommend this method for advanced users.

Creating the .htaccess File

First, open up your preferred text editor and name the new file .htaccess.

After that, you need to copy the following code snippet and add it to the file.

AuthName "Admins Only"
AuthUserFile /home/user/public_html/example.com/wp-admin/.htpasswd
AuthGroupFile /dev/null
AuthType basic
require user yourusername

Make sure you change the ‘AuthUserFile’ path to the location where you’ll upload the .htpasswd file and change ‘yourusername’ to the username you want to use to log in.

Don’t forget to save the file when you’re finished.

Creating the .htpasswd File

Once you’ve done that, you need to create a .htpasswd file.

To do this, open up a text editor and create a file called .htpasswd. This file will list your username along with your password in an encrypted format.

The easiest way to generate the encrypted password is with a htpasswd generator.

Simply enter your username and password, select the encryption format, and click the ‘Create .htpasswd file’ button.

Create htpasswd file

The htpasswd generator will display a line of text that you need to paste into your .htpasswd file. Make sure you save the file once you’ve done that.

Uploading .htaccess and .htpasswd to the wp-admin Directory

The last step is to upload both of the files you created to your website’s wp-admin folder.

You will need to connect to your WordPress hosting account using an FTP client or the online file manager tool provided by your hosting provider. For more details, see our beginner’s guide on how to use FTP to upload files to WordPress.

For this tutorial, we’ll use FileZilla because it’s free and works on both Mac and Windows.

Once you have connected to your website, you will see the files on your computer in the left window, and the files on your website in the right. On the left, you need to navigate to the location where you saved the .htaccess and .htpasswd files.

Then on the right, you

need to go to the wp-admin directory for the website you wish to protect. Most users will need to double-click the ‘ public_html’ folder, then the folder with their domain name, then the ‘wp-admin’ folder.

Now you can select the two files on the left and click ‘Upload’ from the right-click menu or simply drag the files onto the left window.

Uploading the Files to Your Website's wp-admin Directory

Now your ‘wp-admin’ directory will be password protected.

Troubleshooting wp-admin Password Protection

Depending on how your server and website are set up, there’s a chance you might run into errors. These errors can be fixed by carefully adding code to your .htaccess file.

Note: This is the .htaccess file located in your main website folder, not the one you uploaded to the ‘wp-admin’ folder. If you’re having trouble finding it, then see our guide on why you can’t find .htaccess and how to locate it.

Fixing the Ajax Not Working Error

One of the most common errors is that Ajax functionality may stop working on the front end of your site. If you have WordPress plugins that require Ajax, such as live Ajax search or Ajax contact forms, then you will notice that these plugins won’t work anymore.

To fix this, simply add the following code to the .htaccess file that’s located in your ‘wp-admin’ folder.

<Files admin-ajax.php>
    Order allow,deny
    Allow from all
    Satisfy any 
</Files>

Fixing the 404 Error and Too Many Redirects Error

Two other errors you might run into are the 404 error and the too many redirects error.

The simplest way to fix them is to open up your main .htaccess file located in your website directory and add the following line of code before the WordPress rules.

ErrorDocument 401 default

We hope this article helped you learn how to password-protect your WordPress admin (wp-admin) directory. You may also want to see our expert picks of the best email marketing services for small businesses and our guide on how to get a free email domain.

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

The post How to Password Protect Your WordPress Admin (wp-admin) Directory first appeared on WPBeginner.


March 28, 2023 at 09:00PM