Tag: tutorials

How to Create a Custom Instagram Photo Feed in WordPress
Do you want to create a custom Instagram feed in WordPress?

An Instagram feed can keep your site fresh and engaging while also getting you more likes, shares, and Instagram followers.

In this article, we will show you how to create a custom Instagram photo feed for your WordPress website.

Why Include an Instagram Feed on Your WordPress Site?

Adding an Instagram feed on your WordPress site lets you show fresh content to your visitors without lots of extra work. It also encourages readers to follow you on Instagram.

Instead of manually adding images in the WordPress block editor, you can simply create a feed that updates automatically every time you post new photos to Instagram. You can even show other people’s photos on your site by creating a hashtag feed.

In the following image, you can see an example of a brand that uses a custom Instagram feed to show user-generated content.

In this way, you can use a custom Instagram feed to provide valuable social proof and make more money online.

That being said, let’s see how you can create a custom Instagram photo feed in WordPress.

How to Create a Custom Instagram Photo Feed in WordPress

The easiest way to add an Instagram photo feed to your site is by using the Smash Balloon Instagram Feed plugin. It is the best Instagram plugin for WordPress that allows you to display content from your Instagram account in an instant.

It’s also the easiest way to fix the Facebook and Instagram oEmbed issue in WordPress.

We will cover several steps in our tutorial, and you can use the quick links below to jump to the different sections:
How to Connect an Instagram Account to WordPress

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

Note: In the guide, we are using the premium version of Smash Balloon, as it allows you to create a completely custom Instagram feed. with hashtag feeds and shoppable images. If you are just getting started or have a small budget, then there’s also a free Smash Balloon Social Photo Feed plugin.

After you’ve installed the plugin, head over to Instagram Feed Â» Settings.

You can now enter your Smash Balloon license key into the ‘License Key’ field.

You can find this information in the confirmation email you got when you purchased Smash Balloon and also in your Smash Balloon account.

After adding your license key, go ahead and click on the ‘Activate’ button.

Once you’ve done that, you are ready to create a custom Instagram feed. To get started, select Instagram Feed Â» All Feeds and then click on the ‘Add New’ button.

Smash Balloon will now show all the different types of Instagram feeds that you can create.

Simply select the type of feed you want to add to WordPress, and click on ‘Next’.

If you just want to display your Instagram photos, then you can use a Personal Instagram account. However, you will need a Business Instagram account if you want to create a hashtag feed or show the posts that your account is tagged in.

Tip: Don’t have a Business Account? To convert your Personal Instagram account into a Business Account, simply follow Smash Balloon’s step-by-step instructions.

If you select ‘Publish Hashtag’, then you will need to type in the hashtags you want to use. To show multiple hashtags in the same feed, simply separate each hashtag with a comma.

Once you have done that, just click on ‘Next’.

Do you want to show posts that your account is tagged in? You will need to select ‘Tagged Posts’ instead and then click on ‘Next’.

No matter what kind of feed you are creating, you will need to connect WordPress to your Instagram account.

To get started, click on the ‘Add Source’ button.

After that, choose whether you want to show images from a personal or business account.

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

After choosing ‘Personal’ or ‘Business’, just click on ‘Login with Facebook’.

You can now select the Instagram account that you want to feature on your WordPress website and click on ‘Next’.

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

With that done, you need to click on the ‘Next’ button.

You will now see a popup with all the information Instagram Feed Pro will have access to and the actions it can perform.

To restrict the plugin’s access to your Instagram account, simply click any of the switches to turn it from ‘Yes’ to ‘No’. Just be aware that this may affect the photos that appear on your WordPress blog or website.

With that in mind, we recommend leaving all the switches enabled. When you are happy with how the feed is set up, go ahead and click on ‘Done’.

You will now see a popup with the Instagram account you just added to your website.

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

Instagram Feed Pro will now take you back to the Instagram Feeds Â» All Feeds screen.

To create a custom Instagram feed, just check the box next to the Instagram account that you want to use. Then, click on ‘Next’.

The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area.

How to Customize Your Instagram Photo Feed

By default, Smash Balloon will open your feed in its editor, ready for you to customize.

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

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

To change the layout, simply click on ‘Feed Layout’ in the left-hand menu. You can now choose from a Grid, Masonry, or Carousel layout.

There is also a Highlighted layout that highlights every third photo by default.

As you click on the different options, the live preview will automatically update to show the new layout. This makes it easy to try different designs and find the one you prefer.

By default, Smash Balloon shows the same number of photos on desktop computers and mobile devices. You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

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

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

By default, Smash Ballon will split your photos into 4 columns on desktop, 2 columns on tablet devices, and a single column on mobile.

Do you want to use a different number of columns? Then just scroll to the ‘Columns’ section in the left-hand menu.

You can now type a new number into the Desktop, Tablet, or Mobile fields.

To make sure your Instagram feed looks good on mobile devices, it’s smart to view the mobile version of your WordPress website.

After making your changes, click on the ‘Customize’ link. This will take you back to the main Smash Balloon editor, ready for you to explore the next settings screen, which is ‘Color Scheme’.

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

You can even create your own color scheme by selecting ‘Custom’ and then using the settings to change the link color, background color, text color in WordPress, and more.

By default, Smash Balloon adds a header to the Instagram feed, which is your profile picture and the name of your page. This can provide some useful extra context so that visitors understand where these images are coming from.

To change how this section looks, return to the main settings screen and then select ‘Header’.

On this screen, you can change the background color, show your Instagram bio, change the header size, and more.

By default, the header includes your Instagram profile picture. However, you may want to show a different image, such as your site’s custom logo.

To change the profile picture, click on ‘Add Image’ under ‘Show custom avatar’. You can then either choose an image from the WordPress media library or upload a new photo.

You can also add a different bio. For example, you might add a call to action that encourages people to visit your Instagram page.

To create a unique Instagram bio, simply type into the ‘Add custom bio’ box.

When you are happy with how the header looks, click on the ‘Customize’ link to go back to the main settings screen.

Now, you need to click on ‘Posts’.

To start, you can switch between boxed and regular layouts for the individual posts inside the Instagram feed.

To do this, select ‘Post Style’.

You can now click to select the layout you want to use.

If you select ‘Boxed’, then you can change the background color, add a box shadow, and increase the border radius to create curved corners.

When you are happy with your changes, just click on the ‘Posts’ link to return to the previous Smash Balloon screen.

This time, select ‘Images and Videos’.

Smash Balloon automatically analyzes your Instagram photos and shows them at the best resolution. We recommend using these default settings, as they are designed to boost your WordPress speed and performance. However, you can make the Instagram images bigger or smaller if you need to.

To change the image size, simply open the ‘Resolution’ dropdown and choose one of the default WordPress image sizes from the list.

Once again, click on the ‘Posts’ link to return to the previous screen.

This time, select ‘Caption’. On the next screen, you can show the Instagram caption next to each image by clicking on the ‘Enable’ slider.

If you add Instagram captions to your feed, then you can change the text size and color and set a maximum text length.

With that done, just click on the ‘Posts’ link to return to the previous screen.

The next setting is ‘Like and Comment Summary’.

Here, you can add or hide the total number of likes and comments on each image. If your Instagram posts get a good amount of engagement, then these numbers can encourage people to visit your Instagram page or start following you on social media.

As always, you need to click on ‘Posts’ to return to the earlier screen.

The final option is ‘Hover State’, which is the overlay that Smash Balloon adds to a post when you hover your mouse over it.

Here, you can choose the information that Smash Balloon shows when someone hovers over a post using the settings under ‘Information to display’.

You can also change the color of the hover overlay.

When you are happy with the changes you have made, click on the ‘Customize’ link.

This takes you back to the main Smash Balloon settings page, where you can click on ‘Load More Button’.

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

You can also try adding your own messaging to the button by typing into the ‘Text’ field.

While we recommend leaving this button enabled, you can remove it. For example, you might encourage people to visit your Instagram by limiting the number of photos they can see on your site.

To remove the button, simply toggle off the ‘Enable’ slider so that it turns grey.

If visitors like what they see, they may decide to subscribe using the ‘Follow on Instagram’ button that appears below the embedded feed.

Since it’s such an important button, you might want to add some custom styling to help it stand out. To do this, select ‘Customize’ to return to the main settings screen. Then, select ‘Follow Button’ in the left-hand menu.

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

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

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

Smash Balloon comes with a built-in lightbox that allows visitors to open your Instagram photos and videos without leaving your website.

To configure this feature, go back to the main Smash Balloon settings screen and then click on ‘Lightbox’.

Here, you can change how many comments Smash Balloon will show in the lightbox.

If you don’t want to use the lightbox feature, then you can disable it using the ‘Enable’ slider.

When you are happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes.

You are now ready to add the Instagram feed to your WordPress website.

Showing a Feed of Your Instagram Photos in WordPress

You can add the custom Instagram feed to your website using a block, a widget, or a shortcode.

If you have created more than one feed using Smash Balloon, then you will need to know the feed’s code to use a widget or block.

To get this code, you must go to Instagram Feed Â» All Feeds and then copy the text under ‘Shortcode.’

In the following image, we will need to use instagram-feed feed=4.

If you want to embed the Instagram feed in a page or post, then you can use the Instagram Feed block.

Just open the page or post where you want to embed your custom Instagram feed. Then, click on the ‘+’ icon to add a new block and start typing ‘Instagram Feed’.

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

The block will show one of your Instagram feeds by default. If you want to show a different Smash Balloon feed, then find ‘Shortcode Settings’ in the right-hand menu.

Here, simply add the shortcode and then click on ‘Apply Changes.’

If you are happy with how the custom Instagram feed looks, then you can go ahead and publish or update the page.

Another option is to add the Instagram Feed widget to your website. This is a great way to show an Instagram feed on every page of your site. For example, you might add the Instagram widget to the WordPress theme’s sidebar or footer.

To add the Instagram Feed widget to your site, head over to Appearance Â» Widgets. You can then click on the blue ‘+’ icon towards the top of the screen.

In the panel that appears, type in ‘Instagram Feed’ to find the right widget.

As you can see in the following image, there are two Instagram Feed widgets, so make sure you use the right one.

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

The widget will automatically show one of the feeds you created using Smash Balloon. If this isn’t the custom Instagram feed you just created, then type the feed’s code into the ‘Shortcode Settings’ box.

After that, click on ‘Apply Changes.’

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

Another option is embedding the Instagram feed on any page, post, or widget-ready area using a shortcode.

Simply go to Instagram Feed Â» All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to any Shortcode block. For help placing the shortcode, please see our guide on how to add a shortcode.

Are you using a block-enabled theme? Then you can use the full site editor to add the Instagram Feed block anywhere on your WordPress website.

In the dashboard, go to Appearance Â» Editor.

By default, the full-site editor will show the theme’s home template.

If you want to add the Instagram feed to a different area, then click on either ‘Template’ or ‘Template Parts’.

The editor will now show a list of all the template parts that make up your WordPress theme.

Simply click on the template where you want to show the Instagram feed.

WordPress will now show a preview of the design.

To edit this template, go ahead and click on the small pencil icon.

After choosing a template, just hover your mouse over the area where you want to add the Instagram photo feed.

Then, click on the blue ‘+’ button.

Once you have done that, you need to type in ‘Instagram Feed’.

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

As always, Smash Balloon will show a feed by default. You can change this feed by adding a shortcode following the same process described above.

Bonus: Let Customers Buy Your Products Through Instagram

If you have an online store, then you can also use your custom Instagram feed to easily sell your products.

Smash Balloon Instagram Feed Pro allows you to tag your Instagram images with product links so that users are able to click on them and buy them directly instead of navigating through your product pages. This can increase sales and boost profits in your store.

For more details, you can see our complete guide on how to add Instagram shoppable images in WordPress.

We hope this article helped you learn how to create a custom Instagram feed in WordPress. You might also want to see our comparison of the best WordPress giveaway plugins to grow your social following and learn how to create an email newsletter.

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

The post How to Create a Custom Instagram Photo Feed in WordPress first appeared on WPBeginner.
25.08.2023
What Is Googleâ€™s INP Score and How to Improve It in WordPress
Are you wondering what Google’s INP score is and how to improve it on your WordPress website?

Interaction to Next Paint (INP) is a Core Web Vitals metric from Google. Improving this score will make your website feel more responsive to your users.

In this article, we will show you how to improve your Google INP score in WordPress and explain what Google’s INP score is.

Here is a quick overview of the topics we will cover in this guide:
What Are Google Core Web Vitals?

Google Core Web Vitals are website performance metrics that Google considers important for overall user experience. These web vital scores are part of Google’s overall page experience score, which will impact your SEO rankings.

These metrics are useful because, even if your WordPress website loads fast, it may not be fully functional for users. Even if a page has loaded, a visitor might not be able to do what they want or access the information they need.

Core Web Vitals are designed to help with this. They let you measure how quickly your website loads, becomes visible, and is ready for your visitors to use.

To do that, Google uses three quality tests:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
You can learn more about these tests in our ultimate guide on how to optimize Core Web Vitals for WordPress.

However, Google is replacing FID with a new test called INP (Interaction to Next Paint).

This change currently has the status of ‘Pending’ and will be finalized in March 2024. This gives you time to prepare so that your SEO rankings are not impacted, and we will show you how later in this article.

What Is Google INP?

INP stands for ‘Interaction to Next Paint’. It is a new Google Core Web Vital metric that measures the user interactions that cause delays on your website.

The INP test measures how long it takes between a user interacting with your website, like clicking on something, and your content visually updating in response. This visual update is called the ‘next paint’.

For example, a user might submit a contact form on your site, click on a button, or select an image that opens in a lightbox. The INP test will measure the time taken between the user performing these interactions and actually seeing the updated content on your website.

The Google test then comes up with a single INP score based on the duration of most user interactions on your website. The score will either be ‘Good’, ‘Needs Improvement’, or ‘Poor’, depending on how long your website takes to update visually.

Why Is Google Changing the FID Metric to INP?

The current FID test measures how quickly your website responds to the first user input after the page loads, such as a mouse click or keyboard press. It does this by measuring the time between the first input from the user and when your website starts to act on that input.

In other words, it measures how responsive your website is when it first loads and the first impression that it gives to real users.

However, this metric isn’t as helpful as it could be. There are two limitations to the FID test:
1. It only measures the first user interaction, not all of them.
2. It only measures until the website starts to process the interaction, not when the user can actually see the visual feedback on the screen.
So Google is changing the test to give a more complete picture of the overall responsiveness of a web page. INP will measure the entire time the user spends there until they leave the page.

How to Measure Google INP Score in WordPress

The easiest way to test your Google Core Web Vitals score is by using the PageSpeed Insights tool. Simply enter the URL you want to test and click the ‘Analyze’ button.

The tool will analyze the web page for a few seconds and then show you the test results.

Note: You can also view Core Web Vitals using DebugBear’s Free Website Speed Test or Site Speed Chrome Extension, which are preferred by some developers.

Now, along with other Google Core Web Vitals, you will also see the page’s Interaction to Next Paint (INP) score.

There will be different scores for mobile and desktop users.

In the screenshot above, you can see the INP score for desktop users viewing this web page on WPBeginner is 47 ms. The green dot means that this is a good score.

Once you can see the score for your own site, you will probably be wondering how it compares with other websites and whether it needs to be improved.

Google has provided some guidelines for interpreting your INP score:
- Faster than 200 milliseconds – good responsiveness
- 200-500 milliseconds – needs improvement
- Slower than 500 milliseconds – poor responsiveness
Make sure you check your score for both mobile and desktop users and aim for good responsiveness.

You can then improve your INP score by following the guidelines in the sections below.

Case Study: Finding Slow Interactions on Awesome Motive’s Websites

But first, it may be helpful to look at a case study. We have started measuring the INP scores on our brand sites, including All in One SEO, MonsterInsights, and WPForms.

When our team checked our website’s INP scores, the initial results showed that our most popular pages needed improvement.

Using the Chrome User Experience (CrUX) dashboard, we could see that:
- 80% of our sessions were rated ‘good’
- 12% of our sessions were rated ‘needs improvement’
- 8% of our sessions were rated ‘poor’
Now, we don’t yet know which specific interactions on our pages are slow and need to be optimized. This information isn’t provided by Google while testing.

That means that next, we will need to run our own tests to find slow interactions on pages with lower INP scores. This is a detailed and advanced task that is best performed by a developer.

It is done by going to each page that needs improvement and then testing each interaction with actual clicks, taps, and key presses. These need to be timed and evaluated using tools.

The Chrome Developers Blog lists a number of tools that can be used for testing, such as the Chrome Web Vitals extension and the new timespan mode in the Lighthouse Panel in DevTools. You can also see Google’s article on how to debug using the Web Vitals extension.

It’s important to note that the sessions with lower ratings most likely took place on slower devices or connections. That means that while testing, it is recommended to throttle your browser’s speed, or you may not spot the slow interactions.

You can do that using Chrome’s Inspect Element feature by going to View Â» Developer Â» Inspect Elements. You can switch to the ‘Network’ tab and select a throttling option from the dropdown menu.

Once you have found the INP scores for your pages, you can use the tips in the next section of this tutorial to improve them.

How to Improve Google INP Score in WordPress

Most of the INP score optimization work will need to be done by developers. That includes the authors of the theme and plugins you use on your website, plus the developers of any custom JavaScript you are running.

That’s because the INP score is mostly related to the time required to perform JavaScript interactions on your website.

For example, when a user clicks a button, some JavaScript code is run to perform the function expected by clicking the button. This code is downloaded to the user’s computer and runs in their web browser.

To optimize your INP score, the delays that happen during JavaScript user interactions must be reduced. There are three components to this delay:
1. Input delay, which happens when your website is waiting for background tasks on that page that prevent the event handler from running.
2. Processing time, which is the time required to run event handlers in JavaScript.
3. Presentation delay, which is the time required to recalculate the page and paint the page content on the screen.
As a website owner, there are steps you can take to improve the first and third delays. We will show you how in the next section.

However, to make real improvements to your INP score, you will need to improve the second delay, which is the processing time of the code itself. That’s not something that you can do yourself.

The developers of your WordPress theme, plugins, and custom JavaScript may need to optimize their code to give feedback to your users immediately. The good news is they are probably already working on this to meet the March 2024 deadline.

We offer some specific tips for developers with examples later in this article.

How Website Owners Can Optimize Their Sites for INP

While the most significant impact on your website’s INP score will come from developers optimizing their code, there are a few things that website owners can do.

In particular, you can make sure that your users’ mouse clicks and keystrokes are recognized as soon as possible by optimizing background processes on your site. Also, you can make sure the response to their input is displayed on the screen as quickly as possible.

Here are some steps you can take to achieve that.

1. Make Sure You Are Running the Latest Version of WordPress

The first thing you should do is make sure you are running the latest version of WordPress.

That’s because WordPress versions 6.2 and 6.3 introduced significant performance improvements. These will improve your website’s performance on the server side and client side, which will improve your INP score.

For detailed instructions, you can see our guide on how to safely update WordPress.

2. Optimize Background Processes in WordPress

Background processes are scheduled tasks in WordPress that run in the background. They might include checking for WordPress updates, publishing scheduled posts, and backing up your website.

If your website gets too busy running these background tasks, then it may not realize right away that the user has clicked the mouse or pressed a key, resulting in a poor INP score.

You may be able to configure your background scripts and plugins to reduce the amount of work they are doing, placing less strain on your website. Otherwise, you might be able to run them only when they are needed instead of leaving them running in the background.

For detailed instructions, you can see the Optimize Background Processes section of our ultimate guide on how to boost WordPress speed and performance.

3. Check the PageSpeed Insights Performance Recommendations

After you run the PageSpeed Insights test on your website, you can scroll down to the Performance section of the test results.

Here, you will find some opportunities to improve your site’s performance along with the estimated time savings if you follow the advice.

For example, you may see recommendations to eliminate render-blocking resources. You can do this by following our guide on how to fix render-blocking JavaScript and CSS in WordPress.

You may also see a recommendation to reduce unused JavaScript. You will find a setting to do this in many of the best WordPress caching plugins, such as WP Rocket.

4. Minify JavaScript in WordPress

JavaScript needs to be downloaded to the user’s computer before it can be run. By making your JavaScript files as small as possible, you can make some small gains in performance.

Minifying your JavaScript makes the files smaller by removing white spaces, lines, and unnecessary characters from the source code.

This won’t have a dramatic effect on your performance, but if you are looking to shave a few extra milliseconds off your INP score, then you may find it worthwhile.

To learn how, you can see our guide on how to minify CSS and JavaScript files in WordPress.

How Developers Can Optimize Their Code for INP

If you are a developer, then the biggest INP score gains will come from optimizing your code. Here are a few things you can do.

1. Visually Acknowledge User Input Immediately

Here’s the one thing that will make the most difference when optimizing your code’s INP score: You need to give visual feedback to all user input immediately.

The user should see right away that their input has been recognized and that you are acting on it. This will make your code feel more responsive to the user and result in a great INP score.

Here are a few examples:
- If a user clicks on an element, then you should display something that shows that the element was clicked.
- If a user submits a form, then you need to immediately display something to acknowledge that, such as a message or spinner.
- If a user clicks on an image to open it in a lightbox, then don’t just wait for the image to load. Instead, you should show a demo image or spinner immediately. Then, when the image is loaded, you can display it in the lightbox.
More than anything else, this will improve your INP score, especially if you need to do heavy JavaScript processing in response to user input.

Just make sure you update the UI before starting the task. After that, you can do the CPU-heavy work in a setTimeout callback or on a separate thread using a web worker, and then finally present the results to the user.

Once you get that right, there are a few more things you can do to optimize your code.

2. Optimize Where the Browser Spends Most of Its Time

The next thing you should do is investigate where the browser is spending most of its time and then optimize those parts.

In Google Chrome, when you navigate to View Â» Developer Â» Developer Tools Â» Performance, it is possible to inspect the JavaScript functions and event handlers that are blocking the next paint.

With that knowledge, you can see what can be optimized in order to reduce the time until the next paint after user interaction.

3. Reduce Your Layouts

Sometimes, a lot of CPU activity consists of layout work.

When that happens, you should check to see if you can reduce the number of relayout functions in your code.

4. Show Above-the-Fold Content First

If rendering the page contents is slow, then your INP score may be affected.

You can consider showing only important ‘above-the-fold’ content first to deliver the next frame more quickly.

Examples of Good JavaScript Coding Practices for Developers

It may be helpful to show you some examples of how bad code can result in a poor INP score.

We put together an example project on CodePen that you can experiment with. You can examine our sample code, read our short explanations, and see the difference it makes by clicking the buttons.

Here’s an animation from that CodePen project. You can see that the unoptimized sample code results in a poor INP score of 965 milliseconds. The button press will feel laggy to users.

By contrast, the optimized code updates the button text immediately, resulting in the best possible INP score.

Read on to see four examples of how you can improve your code to optimize the INP score.

Example 1: Update the Screen Before Running a Heavy CPU Task

CPU-heavy tasks take time, and this can lead to poor INP scores unless you write good code. In this case, it’s best to update the screen before running that task.

Here is a bad example where the user interface is updated after a heavy CPU task. This results in a high INP:
```
// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
In this improved example, the user interface is updated immediately when the button is clicked.

After that, the heavy CPU task is moved to a setTimeout callback:
```
// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
This allows the browser to update the screen before starting the slow task, resulting in a good INP score.

Example 2: Schedule Non-Urgent Processing

You should also make sure that you don’t run non-urgent or non-essential work in a script immediately when it may delay the response the user is expecting.

You should start by updating the page immediately to acknowledge the user’s input. After that, you can use requestIdleCallback to schedule the rest of the script when there is free time at the end of a frame or when the user is inactive.

Here is an example:
```
button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
This will make the web page feel more responsive to the user and get you a better INP score.

Example 3: Schedule a Function to Run Before the Next Paint

You can also userequestAnimationFrame to schedule a function to be run before the next repaint:
```
button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
This can be useful for animations or visual updates in response to user interactions.

Again, you should give the user feedback by acknowledging their input immediately.

Example 4: Avoid Layout Thrashing

Layout thrashing occurs when you repeatedly read and write to the DOM (Document Object Model), causing the browser to recalculate the layout multiple times.

Here is an example of layout thrashing:
```
// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
This can be avoided by batching your reads and writes.

This is a better example:
```
// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
We hope this tutorial helped you learn how to improve your Google INP score in WordPress. You may also want to see our ultimate guide to WordPress SEO or our expert picks for the best WordPress SEO plugins and tools.

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 Is Googleâ€™s INP Score and How to Improve It in WordPress first appeared on WPBeginner.
25.08.2023
Troubleshooting WordPress: 502 Bad Gateway Error
As a web developer working with WordPress, troubleshooting errors is part and parcel of your journey. One common error you might come across is the dreaded “502 Bad Gateway” error.

In this tutorial, we’ll dive into the meaning of a 502 Bad Gateway error, provide examples to help you identify it, and offer step-by-step instructions on how to troubleshoot and resolve this issue efficiently.

We’ll cover the following areas:
Understanding the Error

The 502 Bad Gateway error is an HTTP status code that indicates communication failure between two servers, often a web server (like Nginx or Apache) and an upstream server (like PHP-FPM or a database server).

In the context of WordPress, this error typically arises when your web server cannot receive a valid response from an upstream server. Basically, a 502 bad gateway message indicates that something went wrong while connecting with a device that should fetch all the elements your web page needs to load.

The dreaded 502 Bad Gateway error message.

Common Causes of 502 Errors

Server Overload

When a server is overloaded with too many requests, it can struggle to process them all, leading to delayed or failed responses. This overload could be due to sudden spikes in website traffic, misconfiguration, or inadequate server resources.

DNS Issues

Domain Name System (DNS) issues can lead to a “Bad Gateway 502” error. If the DNS server fails to resolve the domain name, the communication between servers breaks down, triggering the error.

Network Connectivity Problems

Disruptions in network connectivity, such as broken connections or high latency, can also contribute to the occurrence of the “Bad Gateway 502” error.

PHP-FPM or Backend Server Issues

PHP-FPM (PHP FastCGI Process Manager) is a highly efficient and configurable alternative to the traditional way of running PHP scripts on a web server. Instead of having the web server handle PHP scripts directly, PHP-FPM manages a pool of worker processes to handle PHP requests and works as an intermediary between the web server (e.g., Nginx, Apache) and the PHP interpreter.

Handling PHP requests and processing these separately from the web server improves resource management and contributes to better performance and stability in serving dynamic content, such as what’s commonly found in WordPress websites.

If your web server relies on PHP-FPM or any other backend service, issues with these servers can lead to 502 errors.

Database Server Problems

If your WordPress site is connected to a database server (like MySQL), database connection problems can result in a 502 error.

Proxy or CDN Configuration

Incorrect settings or misconfigurations within your content delivery network (CDN) or proxy server can also trigger this error.

Plugins or Themes

Faulty plugins or themes that overload or improperly interact with your server can lead to 502 errors.

Recognizing a Bad Gateway Error

When a 502 Bad Gateway error occurs, users visiting your website might see a message like:
- “502 Bad Gateway”
- “502 Bad Gateway – nginx”
- “502 Proxy Error”
- “Bad Gateway: The proxy server received an invalid response from an upstream server.”
Troubleshooting and Resolving Errors

It goes without saying that the best way to prevent most server-related issues is to host your sites with a reliable hosting company.

WPMU DEV not only offers award-winning managed WordPress hosting as voted by users, but all of our hosting plans are also built on a self-healing architecture that proactively attempts to restart hosting services during high server loads to prevent issues and minimize disruptions.

If you are a WPMU DEV member, we also recommend activating Uptime from The Hub. Uptime will alert you if your site goes down for any reason, including issues that can lead to a 502 error.

Uptime alerts you when issues like a 502 error cause your site to go down.

Here’s a list of all the downtime issues Uptime monitors and their error status codes.

Now, let’s delve into the steps you can take to diagnose and resolve the 502 Bad Gateway error on your WordPress site.

Step 1: Refresh the Page

Sometimes, the 502 error might be transient and can be resolved by simply refreshing the page. This could indicate a temporary server glitch.

Step 2: Check Other Sites

Visit other websites to determine if the issue is isolated to your site or affecting multiple websites. This can help you differentiate between a problem on your end or a more widespread issue.

Step 3: Clear Browser Cache and Cookies

Cached data in your browser might be causing the error. Consider clearing server-side caches (e.g. object cache, static cache etc.), then try accessing your website again.

Step 4: Flush DNS Cache

Flushing your computer’s DNS cache can help resolve DNS-related issues that might contribute to the error. See this guide if you need help.

Step 5: Monitor Server Status

Check the status of your web server, backend servers, and database servers. Look for server load issues or errors in server logs.

Step 6: Review PHP and Backend Configuration

Inspect your PHP-FPM or backend server configuration files. Make sure they are properly configured and functioning as expected.

Step 7: Examine CDN and Proxy Settings

If you’re using a CDN or proxy server, review their settings for any misconfigurations. Ensure that requests are being properly forwarded to your web server. Clearing the CDN cache may also be helpful.

Step 8: Disable Problematic Plugins/Themes

Temporarily deactivate all plugins and switch to a default WordPress theme. Gradually reactivate plugins one by one to identify if any are causing the 502 error.

Step 9: Increase Server Resources

If your server is running out of resources, consider upgrading your hosting plan or optimizing your server settings.

Step 10: Consult Hosting Support

If the error persists and you’re unable to identify the cause, reach out to your hosting provider’s support team. They can provide valuable insights and assistance in resolving the issue.

Preventing and Minimizing 502 Errors

Additional measures to help prevent or minimize potential 502 errors include the following:

1. Optimize Server Performance

Invest in robust server infrastructure and optimize server performance to significantly reduce the likelihood of encountering “Bad Gateway 502” errors.

2. Implement Redundancy

Having backup servers ready to take over in case of failure will help to maintain uninterrupted service and prevent errors.

3. Load Balancers

Implement load balancers to distribute incoming traffic across multiple servers. This reduces the risk of overloading a single server and triggering the error.

4. Content Delivery Networks (CDNs)

CDNs store cached copies of websites on servers located globally. This can enhance website performance and reduce the chances of a “Bad Gateway 502” error. If you’re not using a CDN, consider implementing one in your setup.

5. Regular Server Maintenance

Perform routine server maintenance, including software updates and security checks to prevent unforeseen errors.

6. Monitoring and Alert Systems

Implement monitoring tools and alert systems (e.g. Uptime) to notify administrators of server issues in real-time, allowing for swift intervention and error resolution.

7. Distributed Denial of Service (DDoS) Protection

DDoS protection services can safeguard servers from malicious traffic surges, preventing server overload and potential 502 errors.

8. Implement Graceful Error Handling

Graceful error handling refers to the practice of designing a website or application to handle errors and unexpected situations in a smooth and user-friendly manner.

Custom error pages and graceful error handling can enhance user experience by providing informative messages, clear, human-readable explanations of what went wrong and offering actionable steps to resolve the issue instead of presenting users with the standard error codes, confusing error messages, or technical jargon.

Know What To Do When You Get a 502

Facing a 502 Bad Gateway error in WordPress can be frustrating.

If you experience a 502 error, refer to the above information to help you quickly identify possible causes and solutions. Make sure you’re familiar with WordPress troubleshooting tools and our WordPress troubleshooting guide and follow the steps outlined above to identify and address the root cause of the error to ensure your website remains up and running smoothly for your visitors.

And of course, if you are a WPMU DEV member and need additional help troubleshooting errors, you can always access our 24/7 expert support team anytime for assistance with anything WordPress or hosting-related.

Want more? Learn how to troubleshoot a 504.
25.08.2023
How to Track User Engagement in WordPress with Google Analytics
Are you properly tracking user engagement on your WordPress site?

User engagement is one of the most important metrics to track because it helps you better understand your audience and what they want. With Google Analytics, you can easily see how people interact with your website.

In this article, we will show you how to track user engagement in WordPress with Google Analytics.

Why Track User Engagement With Google Analytics?

Generally, WordPress website owners consider traffic and pageviews to be the most important indicators of their website’s performance. They assume that higher traffic will result in more conversions and sales.

While that is generally true, you can get even better results by tracking and optimizing user engagement.

User engagement shows you what users do when they arrive on your website. It helps you identify patterns of highly engaged user behavior that lead to more conversions and sales.

For example, you may realize that users visiting a specific page are 10X more likely to make a purchase than any other visitor on your website. You can use this insight to redirect the user’s attention to that page.

Similarly, tracking engagement can help you see which affiliate links or banner ads your visitors are clicking. Using this data, you will be able to optimize your content to get more clicks and boost conversions.

That said, let’s see how you can set up user engagement tracking in WordPress using Google Analytics.

Tracking User Engagement in WordPress Using Google Analytics

The best way to set up user engagement tracking in WordPress is by using MonsterInsights. It’s the best analytics plugin for WordPress that helps you configure Google Analytics without writing code.

MonsterInsights automatically sets up outbound link tracking, form conversion tracking, scroll depth, affiliate link clicks, and other advanced tracking features in Google Analytics out of the box.

It automates the process of pasting different analytics codes and event tracking in WordPress, so you don’t have to deal with the hassle of code and configuration.

For this tutorial, we will use the MonsterInsights Pro version because it includes advanced tracking features and more dashboard reports. However, there is also a MonsterInsights Lite version that you can use for free and get started with user engagement tracking.

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

Upon activation, you will see the MonsterInsights welcome screen. Go ahead and click the ‘Launch the Wizard’ button. You can then follow the setup wizard to get everything ready in minutes.

For more details, please see our guide on how to install Google Analytics in WordPress.

Now that you have Google Analytics with MonsterInsights ready to go, let’s take a look at what user engagement metrics are best to track and how you can track them.

These aren’t all of the metrics you can track with MonsterInsights and Google Analytics, but they are the most important ones to start with. You can click the links below to jump ahead to any section:
1. Tracking Your Most Popular Content

The first thing you want to figure out is which posts and pages on your WordPress blog are popular amongst your users. These important pages and posts on your website get the most traffic.

Figuring out what your users like on your site can help you plan a content strategy that expands on what’s already working.

MonsterInsights makes it really simple. You just need to visit the Insights Â» Reports page in your WordPress admin area and go to the ‘Overview’ report.

After that, you can scroll down to see other reports with different data.

You will find your most popular content in the ‘Top Posts/Pages’ section.

On most websites, 90% of the traffic goes to 10% of the top pages and posts.

Once you find these top pages, you can optimize them for maximum conversions by adding content upgrades or targeted lead magnets on these posts.

2. Tracking How Users Engage With Forms on Your Website

Most websites rely on contact forms to collect user leads and feedback. Sadly, most WordPress contact form plugins don’t give you accurate tracking and conversion data.

MonsterInsights lets you leverage the events tracking feature in Google Analytics to see how many times your forms are viewed and submitted.

To enable form tracking, you need to visit the Insights Â» Addons page. On this page, you will need to install and activate the Forms addon.

Once you have activated the addon, MonsterInsights will automatically start tracking all forms on your website.

It works with popular contact forms plugins like WPForms, Formidable Forms, and others. MonsterInsights also tracks your website comment forms, user registration forms, and more.

You can check these settings by going to Insights Â» Settings in your WordPress dashboard and then clicking on the ‘Conversions’ tab.

Next, MonsterInsights shows the performance of your WordPress forms inside your dashboard.

Simply go to Insights Â» Reports from the admin panel and click on the ‘Forms’ tab. The report shows the number of impressions and conversions, as well as the conversion rate for your different WordPress forms.

For more details, please see our guide on how to track form conversions in WordPress.

3. Tracking eCommerce Store Performance in Google Analytics

Google Analytics offers many features specifically for eCommerce websites. However, these features are not turned on by default in Google Analytics, and most users don’t even know that they exist.

eCommerce tracking lets you see shopping behavior, checkout behavior, product performance, sales performance, and so much more. The best part is that you can combine this data with your overall website traffic to gather better insights.

With MonsterInsights, you can easily set up Enhanced eCommerce on your website without editing code. It seamlessly works with popular plugins like WooCommerce, Easy Digital Downloads, GiveWP, MemberPress, and more.

You can see our guide on how to set up eCommerce tracking in WordPress for more information.

Once you have configured tracking, you can head to Insights Â» Reports from your WordPress admin menu and click on the ‘eCommerce’ report and select ‘Overview’.

Using the report, you can quickly see how your online store is performing.

It shows stats like conversion rate, number of transactions, revenue, and average order value. It also helps identify products that users engage with the most and where they are coming from.

MonsterInsights also lets you track coupons in your online store.

You can go to eCommerce Â» Coupons in MonsterInsights reports to view the report.

You can also view the eCommerce report in your Google Analytics property.

Simply visit your Google Analytics account and go to Reports Â» Monetization Â» Ecommerce purchases.

You may also want to see our guide on how to set up WooCommerce conversion tracking.

4. Tracking Who’s Clicking on Your AdSense Ads

Many websites rely on ads to make money online while creating useful content. With Google Analytics, you can actually see how users interact with ads on your site.

For instance, you will be able to track how many clicks each ad is receiving, discover which ads your audience is ignoring, identify the most effective ad placements, and more.

First, you need to sign up for a Google AdSense account and integrate it with your website. You can follow our guide on how to add Google AdSense to your WordPress site.

Next, you can link your Google Analytics account with Google AdSense. To do this, log in to your AdSense account and head to Account Â» Account and Authorization Â» Google Analytics Integration from the menu on your left.

From here, you can click the ‘+ New link’ button and select your Google Analytics property.

Once your accounts are connected, you can visit Google Analytics to view the reports.

To view your AdSense reports, go to your Google Analytics 4 account and visit Monetization Â» Publisher Ads.

If you have a Universal Analytics property, then you can view the data by going to the Behavior Â» Publisher page.

Note: Universal Analytics is no longer collecting your website data. However, you can still access its reports and view old data.

5. Tracking How Far People Scroll Your Website

When tracking user engagement in WordPress, it’s also important to see how far visitors scroll your website.

It gives you insights into how people use your site and helps improve your page length. Plus, you can use the data to place your AdSense ads, call-to-action buttons, and affiliate links where they will get the most visibility and conversions.

MonsterInsights automatically enables scroll-depth tracking. You can view the report by going to Insights Â» Reports from the WordPress admin panel and clicking the Publishers Â» Overview tabs.

Next, scroll down and view the ‘Scroll’ report.

It will show the average scroll depth percentage. MonsterInsights will trigger events in Google Analytics 4 as users scroll 25%, 50%, 75%, and 100% of a page and compute the percentage from those results.

6. Tracking Your Affiliate Links in Google Analytics

Most marketers use affiliate plugins to manage and cloak affiliate links. This makes your affiliate links look more user-friendly.

Here is an example of a cloaked affiliate link:

https://example.com/recommends/product-name/

MonsterInsights allows you to track affiliate links in Google Analytics. This data helps you figure out which affiliate products are doing well, which pages are generating more affiliate revenue, and more.

To enable affiliate link tracking, you need to visit the Insights Â» Settings page. Next, you can switch to the ‘Publisher’ tab and head to the Affiliate Links section.

First, you need to enter the prefix for your link under the Path field, like ‘/refer/’ or ‘/recommend/.’ After that, you must provide a Label that you would like to use for those links in your Google Analytics reports.

When you are done, click on the ‘Save Changes’ button to store your settings.

Next, you can view your top affiliate link clicks in MonsterInsights reports. Simply head to the Publishers tab and scroll down to the ‘Top Affiliate Links’ section.

Here, you will see which affiliate links are getting the most clicks so that you can promote them more on your site and boost sales.

Additionally, MonsterInsights will also show your Top Outbound Links. These are external links that people click and exit your site. You can use insights from this report to get more backlinks, form partnerships, sign up for affiliate programs, and exchange guest posts.

For more detailed instructions, see our guide on how to track outbound links in WordPress.

7. Tracking Video Engagement in Google Analytics

Do have you videos embedded on your WordPress website? If so, then you can track how people engage with them.

With the MonsterInsights Media addon, you can automatically track YouTube, Vimeo, and other HTML 5 video embeds on your website. The best part is that you don’t have to edit code to set up tracking. The plugin takes care of everything.

You can view the data inside your WordPress dashboard. Simply head to Insights Â» Reports and then click the ‘Media’ tab.

Next, you will see stats about your top videos.

For instance, you can see how many people played the video, the average watch time, the completion rate, and more.

To learn more, please follow our guide on how to track video analytics in WordPress.

8. Tracking Marketing Campaigns in Google Analytics

If you are running different campaigns on your website, then you can track their performance in Google Analytics. This data helps you see which campaigns get the most engagement so that you can replicate them.

To start, you can add UTM parameters to your campaign links. These are special tags that pass additional information to Google Analytics and help differentiate campaign URLs from regular links.

If you are using MonsterInsights, then you can use the URL Builder tool to create links with UTM parameters. Simply head to Insights Â» Tools from your WordPress dashboard and select the ‘URL Builder’ tab.

Next, you can fill in the details of your URL.

For instance, you can add your website link, a campaign source like a newsletter, a campaign medium such as email, a campaign name, and other details.

After entering these details, MonsterInsights will create a custom URL with UTM parameters. It will look something like this:

https://example.com?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale

You can simply copy the link and use it in your campaigns.

Once you have added custom links with UTM parameters, MonsterInsights will start to track them in Google Analytics.

You can then view a report inside your WordPress dashboard and see which campaign is generating the most engagement.

Simply head to your MonsterInsights reports and then go to Traffic Â» Campaigns.

Next, you can scroll down to see campaign details.

The report will show the number of sessions, engaged sessions, purchases, conversion rate, and revenue for each campaign.

9. Tracking Bounce Rate in Google Analytics

The bounce rate is the percentage of users who land on your website and decide to leave without going to a second page.

In the latest version of Google Analytics, you won’t find bounce rate as a default metric that’s visible on your reports. This is one of the key differences you will notice between Google Analytics 4 (GA4) and Universal Analytics.

You will need to manually add the bounce rate to pages and screens reports in GA4. This can be tricky for beginners, especially for anyone who isn’t familiar with the Google Analytics interface.

However, an easier way to view the bounce rate is by using MonsterInsights. Simply go to Insights Â» Reports from your WordPress admin menu and click on the Publishers Â» Overview tabs. The plugin shows the bounce rate for your important pages.

A higher bounce rate indicates that you were unable to convince the user to visit other pages. Users can leave your website by clicking on the back button in their browser, clicking on an outgoing link, or closing the window.

Every site has a bounce rate. However, higher bounce rates can indicate problems with your website that are affecting user experience and causing low engagement.

To lower the bounce rate, you can speed up your website, improve internal links, ensure that your content meets the search intent, improve the readability of your articles, show popular posts, and more.

For more tips, you can see our guide on how to increase pageviews and reduce the bounce rate in WordPress.

10. Tracking Time Spent on Your Website

Another indicator that shows user engagement is session duration or the amount of time users spend on your site.

If users are abandoning your site without spending enough time to look at it, then something is wrong, and you need to fix it.

In the MonsterInsights Overview report, you can see the average session duration for your website in the past 30 days.

If you are using Google Analytics 4, then you will see a new metric called average engagement time. It tells you the average time your webpage was being focused on by a user.

You can view the report by logging in to your GA4 account and then heading to Reports Â» Engagement Â» Overview.

Using the data, you can better understand your user journey. If the engagement time is low, then you can look into issues like fixing slow site speed, debugging any errors, and making your site’s interface user-friendly.

11. Tracking Pageviews Per Visit With Google Analytics

Pageviews per visit is another excellent indicator of how engaged your users are. A higher number of pageviews per session means that people are visiting multiple landing pages and articles on your site. This helps increase the time users spend on your site and decreases the bounce rate.

In Google Analytics 4, you can view the sessions per user metric based on different traffic sources and see how many pages users view in a single session.

Just head to Reports Â» Acquisition Â» User acquisition from your GA4 property.

This helps you see which traffic channels are converting the best for your website. You can then focus your content marketing efforts on areas that are actually driving results.

Universal Analytics will also show you the total page views for a given period on the Audience Â» Overview page. However, to track engagement, you want to see pageviews per session.

You can also break down page views per session by source and channel.

Simply go to the Acquisition Â» All Traffic Â» Channels page.

As a bonus, you can also use the UserFeedback plugin to find out what your visitors really think about your website.

This is something that analytics can’t track.

UserFeedback, built by the MonsterInsights team, lets you easily create popup widgets to collect real-time feedback about your website.

You can ask questions like what information is missing from your site, why users didn’t buy a product, what type of content they are interested in, and more. This will help you better understand intent and improve engagement. There’s also a free version of UserFeedback that you can try out.

For more details, you can see our guide on how to get quick feedback on your articles in WordPress.

We hope this article helped you track user engagement in WordPress with Google Analytics. You may also want to see how to create an email newsletter the right way and our expert pick of the best SEO plugins and tools to optimize your website for search engines.

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 Track User Engagement in WordPress with Google Analytics first appeared on WPBeginner.
24.08.2023
How to Create Advanced Search Form in WordPress for Custom Post Types

Do you want to create an advanced search form in WordPress for custom post types?

If you use custom post types, then you may want to create a form that allows visitors to search only that content. This can help people find what they are looking for and keep them on your site for longer.

In this article, we will show you how to create an advanced search form for custom post types in WordPress, step-by-step.

Why Create an Advanced Search Form for Custom Post Types?

Custom post types allow you to go beyond posts and pages and make different content types for your website. For example, we use custom post types here at WPBeginner to organize our Deals and Glossary sections.

However, WordPress doesn’t include custom post types in its search results by default. As a result, visitors may miss out on important content, and you will miss out on pageviews.

Thankfully, you can include custom post types in your search results using a WordPress search plugin. You can even go one step further and create an advanced form that searches custom post types only.

For instance, at WPBeginner, we have created custom post type search forms on our Deals and Glossary pages.

Often, this kind of advanced search form will help visitors find what they are looking for faster, which will improve the visitor experience and reduce the bounce rate.

First, you can see our guide on how to make custom post types in WordPress. Then, you can jump into our tutorial on how to create an advanced WordPress search form for custom post types.

Create a New WordPress Search Algorithm With a WordPress Plugin

The easiest way to create an advanced search form for custom post types is by using the SearchWP plugin. Itâ€™s the best search plugin and allows you to search content that WordPress ignores by default.

For example, you can make blog comments searchable and add PDF indexing and searching to your website.

How to Set up SearchWP

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

Upon activation, you must go to SearchWP Â» Settings and click on the ‘General’ tab.

You now need to enter your license in the â€˜License Keyâ€™ box. You can find this information in your account on the SearchWP site.

Once you are done, make sure to click the â€˜Verify Keyâ€™ button.

Creating a Custom Search Algorithm

Your next task is creating a custom search algorithm. It allows you to specify the content that SearchWP includes in its search results, like pages, posts, media, and any custom post types.

To get started, you need to go to SearchWP Â» Algorithm in your WordPress admin dashboard.

Here, you will see a section for every content type that SearchWP includes in its search results.

To add your custom post type, just click the ‘Sources & Settings’ button.

In the popup that appears, check the box next to each custom post type that you want to include in the search results.

After that, click on ‘Done’.

SearchWP will add a new section for each custom post type. Each section shows all the attributes that SearchWP will include in its searches, such as the title, slug, and excerpt.

If you want to add or remove attributes, then simply click on ‘Add/Remove Attributes’.

In the popup, check the box next to each attribute you want to include in the search results.

To remove an attribute, you can uncheck its box instead.

In this popup, you can also make custom fields searchable in WordPress.

When you are happy with the changes you have made, go ahead and click on ‘Done’.

You will notice that each attribute also has an Application Attribute Relevance slider. This controls how SearchWP ranks the content when building its search results page in WordPress.

If an attribute has high relevancy, then it will have a bigger impact on the search results. By contrast, content that matches an attribute that has less relevancy will appear lower in the search results.

For example, if you move the â€˜Titleâ€™ slider to the right and the â€˜Contentâ€™ slider to the left, then a post’s title will carry more weight than the content.

Every WordPress website is unique, so you may want to try different relevancy settings to see what gives you the most accurate and helpful search results.

For example, if you have created a ‘customer reviews’ custom post type for your online store, then this is important content, so you may want to give it a high relevance.

When you are happy with how the search feature is set up, just scroll to the top of the screen and click the â€˜Saveâ€™ button.

SearchWP will now rebuild the index automatically. Depending on the speed of your Internet connection and your WordPress hosting provider, this may take a few minutes.

As soon as you see â€˜Index Status 100%’, you will know that SearchWP has added your custom post types to its search index.

Your WordPress blog, website, or online marketplace will now include custom post types in its search results.

Create an Advanced Search Form for Custom Post Types

With that done, you are ready to make an advanced form that searches your custom post types only.

To get started, head over to SearchWP Â» Search Forms and click the ‘Add New’ button.

This creates a new form, ready for you to customize.

To give this form a unique name, click on the small pencil icon next to ‘Search Form 1’.

You can now type in a name for the custom search form.

This is just for your reference, so you can use anything that helps you identify the form in your WordPress dashboard. This is particularly important if you plan to create multiple search forms in WordPress.

After that, you can choose the layout you want to use using the ‘Layout Theme’ thumbnails.

Simply click on the different themes to see a preview of how this style will look on your WordPress website.

To create a search form for custom post types, you will typically want to use either ‘Basic’ or ‘Quick Search’.

These styles don’t allow visitors to search by category, which helps to keep them focused on custom post types.

After making your decision, scroll to the ‘Custom Styling’ section.

The settings you see may vary depending on your theme layout. For example, if you selected ‘Quick Search’, then the ‘Quick Search’ setting will be enabled by default.

You can disable and enable the different options using their toggles.

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

By default, the form will search media, pages, and posts and ignore custom post types. To include custom post types, you need to find the ‘Type of search’ field and give it a click.

You can now type in the name of each custom post type.

When the right post type appears, give it a click to add it to the search.

Do you want to search custom post types only and ignore all other content?

Then just click the small ‘X’ next to ‘Media’, ‘Pages’, and ‘Posts’.

With that done, the form will search your custom post types only.

When you are happy with how the form is set up, scroll to the ‘Form Style’ section. Here, you can choose between different form styles, add a border, change the font size, and more.

Under ‘Button Style’, you can customize the ‘Search’ button that appears in the form.

When you are happy with how the form is set up, scroll to the top of the screen and click on ‘Save’ to store your settings.

How to Add the Custom Post Types to WordPress

Now, you are ready to add the search form to WordPress using either a shortcode or block.

The easiest method is to use a block, so head over to the page or post where you want to add the custom post type form.

You can then click on the ‘+’ icon and type in ‘Search Form’.

When the right block appears, give it a click.

Next, open the ‘Select a Form’ dropdown menu and choose the search form you made during this tutorial.

When you are ready to make the search form live, simply click on either ‘Update’ or ‘Publish’. Now, you can visit your website to see the search form in action.

Another option is to add the search form using a shortcode.

To get the shortcode, you need to head over to SearchWP Â» Search Forms. Here, find the search form that you want to show and copy the value in the ‘Shortcode’ column.

You can now add the shortcode to any page, post, or widget-ready area. For step-by-step instructions on how to do this, please see our guide on how to add a shortcode in WordPress.

We hope this article helped you learn how to create an advanced search form in WordPress for custom post types. You may also want to see our custom post types tutorials and our expert picks for the best WordPress plugins to grow your website.

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 Advanced Search Form in WordPress for Custom Post Types first appeared on WPBeginner.

17.08.2023
How to Add Custom Post Status for Blog Posts in WordPress
Do you want to add a custom post status for your blog posts in WordPress?

Post statuses organize your articles based on where they are in the editorial workflow, such as â€˜Draftsâ€™, â€˜Pending Reviewâ€™, or â€˜Publishedâ€™. With the right statuses, you can easily manage your own posts or even blogs submitted by other authors.

In this article, we will show you how to add custom post statuses to blog posts in WordPress.

What Are Post Statuses in WordPress?

Post status allows users to add a workflow status to a blog post. For example, when you are writing a post, you will typically set the status to â€˜Draftâ€™. When you publish the post, the status changes to â€˜Publishedâ€™.

You can see the post status of all your blogs by going to Posts Â» All Posts in your WordPress admin dashboard.

By default, WordPress comes with the following post statuses:
- Draft. The post is saved but not yet published.
- Auto draft. As you write a new post, WordPress automatically saves a draft as a temporary revision. This allows you to easily undo changes in WordPress.
- Pending review. A post thatâ€™s complete and submitted for review but not yet published. Typically, â€˜pending reviewâ€™ posts need to be reviewed by an editor.
- Future. The post is scheduled to be published later.
- Private. A blog post thatâ€™s not visible to the public. By default, only admins and editors can see private posts created by other users.
- Trash. The post is in the trash.
- Inherit. Occasionally used when a post inherits the status of its parent page. This is most commonly used for post attachments such as images and videos.
Why Add Custom Post Status for Blog Posts in WordPress?

Sometimes, you may need to add your own custom statuses to WordPress. For example, if you accept guest posts on your WordPress blog, then you might create a â€˜User Submittedâ€™ status or a â€˜Not suitableâ€™ status for guest blogs that donâ€™t quite fit your website.

This can help you manage all the posts on your WordPress website, even when you are working with dozens of bloggers.

Even if you are a solo blogger, you can use custom statuses to organize your own posts and ideas. For example, you might create a â€˜Brainstormâ€™ status where you record all your ideas directly in the WordPress dashboard.

With that in mind, letâ€™s see how you can add custom post status for blog posts in WordPress.

How to Add Custom Post Status for Blog Posts in WordPress

The easiest way to create custom post statuses in WordPress is by using PublishPress Planner. This free plugin allows you to create as many custom statuses as you want. You can also assign a color and icon to each status and then see this information in the PublishPress editorial calendar.

First, you will 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 need to go to Planner Â» Settings. Here, select the â€˜Statusesâ€™ tab to get started.

How to Configure the PublishPress Planner Plugin

First, there are a few settings you need to configure.

By default, PublishPress allows you to use the same statuses on pages and posts. However, you may want to use these custom post statuses on only pages or only posts.

To make this change, simply uncheck the box next to â€˜Pagesâ€™ or â€˜Posts’.

If it isnâ€™t already enabled, then you will need to open the â€˜Show the status dropdown menu on the post editing screenâ€™ dropdown. Then, select â€˜Enabledâ€™. This allows users to change the post status inside the WordPress block editor.

With that done, just click on â€˜Save Changes.â€™

With that out of the way, you are ready to create some custom post statuses.

Customize the Default Post Status for Blog Posts

PublishPress Planner comes with a few built-in statuses that you can add to your WordPress blog posts.

These statuses already have colors and icons assigned.

PublishPress Planner shows this information in its content calendar, as you can see in the following image.

To edit any of these default statuses, simply hover your mouse over it.

Then, click on the â€˜Editâ€™ link when it appears.

This opens an editor where you can change the status name, slug, icon, and color.

When you are happy with your changes, just click on the â€˜Update Statusâ€™ button.

Do you want to delete a custom post status instead?

Simply hover over it and click â€˜Deleteâ€™ when it appears.

Create Custom Post Statuses in WordPress

PublishPress also allows you to create your own custom statuses.

To get started, click on the â€˜Add Newâ€™ tab.

This opens a form where you can type in a name for the status.

This will appear in the page or post editor and also in the â€˜Quick Editâ€™ menu, so itâ€™s a good idea to use something descriptive. This is particularly important if you run a multi-author WordPress blog, as it will help other users understand how to use each status.

In this way, you can avoid confusion and improve the editorial workflow.

Next, you can type in a description, which will appear on the Planner Â» Content Calendar screen. If you are creating lots of new statuses, then the description can be a helpful reminder for yourself and other users.

If you share your WordPress dashboard with other writers and guest bloggers, then this can also be a good way to share more information about the new workflow.

After that, you can add a color and icon that will represent the status in your content calendar. This can help you plan your content and schedule posts in WordPress.

Simply click on â€˜Select Colorâ€™ or â€˜Select Iconâ€™ and then make your choice in the popup.

When you are happy with how the custom post status is set up, click on ‘Add New Status’.

To create more custom statuses, simply repeat these steps.

How to Add a Custom Status to any Page or Post

After creating one more custom statuses, you can add them to any page or post. If you are inside the content editor, simply open the â€˜Post Statusâ€™ dropdown in the right-hand menu.

You can then choose the custom post status that you want to use for the WordPress blog post.

Another option is to use the Quick Edit setting. This is a great choice for editors or admins who need to quickly change the status of multiple pages or posts.

To do this, go to either Pages Â» All Pages, or Posts Â» All Posts. Then, simply hover your mouse over the item you want to change, and click on â€˜Quick Editâ€™ when it appears.

You can now open the â€˜Statusâ€™ dropdown and choose the status you want to use.

With that done, click on â€˜Updateâ€™ to save your settings.

Planning Your Content with Custom Post Statuses

As we already mentioned, PublishPress shows post status icons and color labels in its content calendar. This can help you bulk schedule posts in WordPress and even plan effective content-dripping campaigns on your WordPress site.

To see the calendar, you need to go to Planner Â» Content Calendar in the WordPress dashboard.

Here, you will see all your pages and posts. To learn more about a particular blog post, simply give it a click.

This opens a popup where you can see the post type, categories and tags, author, and other important information.

To see all the pages and posts that have a specific status, open the dropdown that shows â€˜All statusesâ€™ by default.

You can then choose any post status from the list.

This is a great way to find posts that havenâ€™t been scheduled yet or blog posts that you still need to edit or assign.

We hope this tutorial helped you learn how to add custom post status for blog posts in WordPress. You may also want to see our guide on how to make money online blogging with WordPress or check out our list of the best WordPress SEO plugins and tools.

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 Custom Post Status for Blog Posts in WordPress first appeared on WPBeginner.
16.08.2023
Make WordPress PDFing Simple, Easy, Fast & Flexible With Forminatorâ€™s New PDF Generator Addon
Meet Forminator’s powerful PDF Generator Addon…the simplest, easiest and most automated way to create, edit, and send out form-submitted PDFs without leaving your WordPress dashboard!

Forminator plugin users spoke to us about the challenges they face creating and sending out form-generated PDFs on the fly that seamlessly integrate with their business processes.

For example:
- â€œI would like to send a PDF of our forms with email notifications using Forminator. But I donâ€™t want to use the E2PDF method because itâ€™s too limited for us.â€
- â€œWe need to create a form for our user, and generate a PDF after they write on it, and give them the possibility to pay.â€
- â€œDoes anyone know how I can generate a PDF from a form submission like Gravity PDF?â€
Forminator users, we heard you!

Forminator Pro now gives you the ability to integrate, create, generate, and automate PDFs using our nifty new PDF generator addon!

Install with just one click and say goodbye to limited free 3rd-party plugins, costly upgrades, and unnecessary integrations!

In this post, we’ll cover the following areas:
- PDF Generator Addon – Key Features
- How to Use Forminator’s PDF Generator Addon
PDF Generator Addon – Key Features

Built to make it easy for any user to create and customize a PDF file from form submission regardless of their technical level, here are some of the key features of Forminator’s PDF Generator Addon:

Easier PDF Generation

â€œI am working on a free course for artists who want to start their own websites. They fill out a form and then get a PDF download of their answers. This will serve as a ‘Scope of Work’ for their project.â€

Forminator’s PDF Builder uses the same intuitively easy-to-use drag and drop visual interface as the Form builder, providing a seamless user experience with no additional learning curve required.

In fact,Â the PDF creation option is part of the Form Builder, so it only takes a couple of clicks to create a PDF file.

Customizable PDFs

Forminator gives users high flexibility by not only making it easy to customize the PDF form structure and layout using its form builder, but also customize PDF content using the Rich Text field, add additional form fields, and insert field tags (see “How to Use” section below).

Autogenerated PDFs

PDFs can be autogenerated from your existing form structure and form fields, so you don’t need to create your PDF from scratch.

However,Â Forminator is flexible enough so that if you want to design your PDF fom scratch, you can.

Attach Emails to PDFs

â€œIt would be great if PDFs could be created of the form submissions and could be attached and sent over emails.â€

You can send customized email notifications to admins and visitors with PDF attachments automatically. (see “How to Use” section below.)

Downloadable PDFs

Download the PDFs of the form submissions on the Submissions page.

Unlimited PDFs

No limits on usage of fields, number of pages, or number of PDFs.

PDFs and More PDFs

Create multiple PDFs on the same form.

PDF Templates

Generate PDF files for payment receipts, invoices, and quotations in seconds with easy-to-use pre-designed templates. (Coming soon!)

We also have loads more features coming soon (e.g. payment and quotation fields, more settings to customize PDF form appearance with colors and fonts, allowing form submitters to download PDFs after submission, etc.), so watch this space!

How to Use Forminator’s PDF Generator Addon

As mentioned earlier, one of the key features of Forminator’s PDF Generation Addon is that it works just like the plugin’s Form builder, so once you’ve installed it, configuring your PDF forms is so easy.

Note: This is a Pro feature, so make sure you have Forminator Pro installed, or consider becoming a WPMU DEV member if you are currently using our free Forminator plugin.

Creating PDFs

To create PDFs, first make sure to install the addon. You can do this from your WPMU DEV Dashboard plugin, or by going to Forminator Pro > Add-ons .

Install the PDF Generator from Forminator Pro’s Add-Ons section.

Note: to use the PDF Generator Addon, make sure that you have created at least one form on your site. Remember too, that you can generate multiple PDF files for the same form.

Once the add-on has been installed and activated, edit the form you want to attach a PDF to, and in the Edit Form > PDF section, click on Create New PDF.

Create a new PDF in Forminator’s Edit Form > PDF section.

Give your new PDF a filename and click the + Create button.

Give your PDF a name for internal identification purposes.

Next, choose a template for your PDF. Note: As we develop this feature further, we’ll be adding all kinds of new templates to this section for generating PDF receipts, quotations, etc.

After selecting your template, click the Continue button.

Forminator Pro users can choose from a range of professionally designed PDF templates.

The Preload PDF Content modal gives you the choice of preloading form fields into your new PDF file, or creating your PDF from scratch.

Choose an option and click the Continue button to proceed.

Forminator gives you the choice of preloading form fields or starting with a blank file.

Once your PDF file is created, you can edit it or continue the setup process.

Once your PDF file is created, you can edit it or continue building your form.

If you selected the Preload Form Fields in PDF File option, the fields in your form will load in your PDF file.

Editing PDFs

While the Page Header and Page Footer elements are static and cannot be moved, you can edit the settings and style for all fields by clicking on the gear icon to the right of the fields.

You can also rearrange non-static fields using drag and drop to fully customize the layout of your PDF.

Insert, edit, and preview your form fields.

As well as preloading form fields, you can insert additional fields to add custom text and labels, add page breaks to create multipage PDFs, insert payment and quotation fields, and more.

There are many PDF form field options to choose from.

Note: To add custom text in your forms, use the Rich Text field. Use either a label for the field, or hide the label and add your own text with formatting options like bold, italics, bullet points, and hyperlinks.

You can also insert form fields into the text area to create a customized PDF template that will autopopulate your form details when generated.

Use the Rich Text field to format and style your form field content.

Additionally, you can adjust the appearance of your PDFs using appearance options, which allow you to control how your PDFs will look and their layout.

The Page settings section lets you set the page size from a dropdown menu, with the recommended default being A4. The default page margin is 30 pixels, and you can change this under the Custom tab.

You can also enable the RTL (Right-to-Left) option to output your PDF in languages like Arabic, Hebrew, Farsi, Urdu, etc., and if you’re familiar with CSS, you can use the Custom CSS option to further customize your PDF. Many selectors are included to help you, and if you need further assistance, make sure to contact our 24/7 Live Support team.

After creating or editing your PDF, you can save it as a Draft to continue working on it at a later time. You can also preview, edit, or delete it, and publish or unpublish it.

A Forminator Form with a Forminator generated PDF.

Emailing PDFs

With Forminator’s PDF Generator Addon, attaching PDFs to emails is really simple and easy.

After creating your PDF form, go to Forminator > Edit Form > Email Notifications and select the PDF file(s) to attach to the email notification you have set up.

Select one or more PDFs to attach to the email.

Note: You can also set up conditional email rules to automatically send specific PDFs to specific users.

Use the power of conditional emails to send PDFs to specific users.

Downloading PDFs

You can download PDFs on form submissions from the Submissions page for forms with PDF templates. There are no restrictions on the number of PDFs you can download.

If you have more than one PDF template available for a single form, you can download the form submission PDF for each template separately or the PDFs of all the templates as a zip file.

Download PDFs for all submission forms.

For full details on using the PDF generator addon and all of its features refer to our Forminator documentation.

With Forminator Pro, You Can’t Go PDF’ing Wrong!

Forminator Pro’s new PDF generator allows you to generate an unlimited number of PDFs with your forms and form submissions, customize, edit, and style PDF templates, and a whole lot more.

If you are a WPMU DEV member, there is nothing else you need to purchase to start generating professional PDFs. Simply install the addon in Forminator, tweak the appearance and settings in your forms, and you’re all good to go.

If you’re not a member yet, consider choosing one of our risk-free membership options (Pro or Agency). You’ll not only get all of our Pro plugins, you’ll also get access to everything else you need to use PDFs effectively, including site management, client report, and client billing tools, white label and reseller options, 24/7 expert support on all areas related to WordPress, CSS, hosting, etc, and so much more!

Start using Forminator’s PDF Generator Addon today…it’s PDF’ing great!
16.08.2023
Make WordPress PDFing Simple, Easy, Fast & Flexible With Forminatorâ€™s New PDF Generator Addon
Meet Forminator’s powerful PDF Generator Addon…the simplest, easiest and most automated way to create, edit, and send out form-submitted PDFs without leaving your WordPress dashboard!

Forminator plugin users spoke to us about the challenges they face creating and sending out form-generated PDFs on the fly that seamlessly integrate with their business processes.

For example:
- â€œI would like to send a PDF of our forms with email notifications using Forminator. But I donâ€™t want to use the E2PDF method because itâ€™s too limited for us.â€
- â€œWe need to create a form for our user, and generate a PDF after they write on it, and give them the possibility to pay.â€
- â€œDoes anyone know how I can generate a PDF from a form submission like Gravity PDF?â€
Forminator users, we heard you!

Forminator Pro now gives you the ability to integrate, create, generate, and automate PDFs using our nifty new PDF generator addon!

Install with just one click and say goodbye to limited free 3rd-party plugins, costly upgrades, and unnecessary integrations!

In this post, we’ll cover the following areas:
- PDF Generator Addon – Key Features
- How to Use Forminator’s PDF Generator Addon
PDF Generator Addon – Key Features

Built to make it easy for any user to create and customize a PDF file from form submission regardless of their technical level, here are some of the key features of Forminator’s PDF Generator Addon:

Easier PDF Generation

â€œI am working on a free course for artists who want to start their own websites. They fill out a form and then get a PDF download of their answers. This will serve as a ‘Scope of Work’ for their project.â€

Forminator’s PDF Builder uses the same intuitively easy-to-use drag and drop visual interface as the Form builder, providing a seamless user experience with no additional learning curve required.

In fact,Â the PDF creation option is part of the Form Builder, so it only takes a couple of clicks to create a PDF file.

Customizable PDFs

Forminator gives users high flexibility by not only making it easy to customize the PDF form structure and layout using its form builder, but also customize PDF content using the Rich Text field, add additional form fields, and insert field tags (see “How to Use” section below).

Autogenerated PDFs

PDFs can be autogenerated from your existing form structure and form fields, so you don’t need to create your PDF from scratch.

However,Â Forminator is flexible enough so that if you want to design your PDF fom scratch, you can.

Attach PDFs to Emails

â€œIt would be great if PDFs could be created of the form submissions and could be attached and sent over emails.â€

You can send customized email notifications to admins and visitors with PDF attachments automatically. (see “How to Use” section below.)

Downloadable PDFs

Download the PDFs of the form submissions on the Submissions page.

Unlimited PDFs

No limits on usage of fields, number of pages, or number of PDFs.

PDFs and More PDFs

Create multiple PDFs on the same form.

PDF Templates

Generate PDF files for payment receipts, invoices, and quotations in seconds with easy-to-use pre-designed templates. (Coming soon!)

We also have loads more features coming soon (e.g. payment and quotation fields, more settings to customize PDF form appearance with colors and fonts, allowing form submitters to download PDFs after submission, etc.), so watch this space!

How to Use Forminator’s PDF Generator Addon

As mentioned earlier, one of the key features of Forminator’s PDF Generation Addon is that it works just like the plugin’s Form builder, so once you’ve installed it, configuring your PDF forms is so easy.

Note: This is a Pro feature, so make sure you have Forminator Pro installed, or consider becoming a WPMU DEV member if you are currently using our free Forminator plugin.

Creating PDFs

To create PDFs, first make sure to install the addon. You can do this from your WPMU DEV Dashboard plugin, or by going to Forminator Pro > Add-ons .

Install the PDF Generator from Forminator Pro’s Add-Ons section.

Note: to use the PDF Generator Addon, make sure that you have created at least one form on your site. Remember too, that you can generate multiple PDF files for the same form.

Once the add-on has been installed and activated, edit the form you want to attach a PDF to, and in the Edit Form > PDF section, click on Create New PDF.

Create a new PDF in Forminator’s Edit Form > PDF section.

Give your new PDF a filename and click the + Create button.

Give your PDF a name for internal identification purposes.

Next, choose a template for your PDF. Note: As we develop this feature further, we’ll be adding all kinds of new templates to this section for generating PDF receipts, quotations, etc.

After selecting your template, click the Continue button.

Forminator Pro users can choose from a range of professionally designed PDF templates.

The Preload PDF Content modal gives you the choice of preloading form fields into your new PDF file, or creating your PDF from scratch.

Choose an option and click the Continue button to proceed.

Forminator gives you the choice of preloading form fields or starting with a blank file.

Once your PDF file is created, you can edit it or continue the setup process.

Once your PDF file is created, you can edit it or continue building your form.

If you selected the Preload Form Fields in PDF File option, the fields in your form will load in your PDF file.

Editing PDFs

While the Page Header and Page Footer elements are static and cannot be moved, you can edit the settings and style for all fields by clicking on the gear icon to the right of the fields.

You can also rearrange non-static fields using drag and drop to fully customize the layout of your PDF.

Insert, edit, and preview your form fields.

As well as preloading form fields, you can insert additional fields to add custom text and labels, add page breaks to create multipage PDFs, insert payment and quotation fields, and more.

There are many PDF form field options to choose from.

Note: To add custom text in your forms, use the Rich Text field. Use either a label for the field, or hide the label and add your own text with formatting options like bold, italics, bullet points, and hyperlinks.

You can also insert form fields into the text area to create a customized PDF template that will autopopulate your form details when generated.

Use the Rich Text field to format and style your form field content.

Additionally, you can adjust the appearance of your PDFs using appearance options, which allow you to control how your PDFs will look and their layout.

The Page settings section lets you set the page size from a dropdown menu, with the recommended default being A4. The default page margin is 30 pixels, and you can change this under the Custom tab.

You can also enable the RTL (Right-to-Left) option to output your PDF in languages like Arabic, Hebrew, Farsi, Urdu, etc., and if you’re familiar with CSS, you can use the Custom CSS option to further customize your PDF. Many selectors are included to help you, and if you need further assistance, make sure to contact our 24/7 Live Support team.

After creating or editing your PDF, you can save it as a Draft to continue working on it at a later time. You can also preview, edit, or delete it, and publish or unpublish it.

A Forminator Form with a Forminator generated PDF.

Emailing PDFs

With Forminator’s PDF Generator Addon, attaching PDFs to emails is really simple and easy.

After creating your PDF form, go to Forminator > Edit Form > Email Notifications and select the PDF file(s) to attach to the email notification you have set up.

Select one or more PDFs to attach to the email.

Note: You can also set up conditional email rules to automatically send specific PDFs to specific users.

Use the power of conditional emails to send PDFs to specific users.

Downloading PDFs

You can download PDFs on form submissions from the Submissions page for forms with PDF templates. There are no restrictions on the number of PDFs you can download.

If you have more than one PDF template available for a single form, you can download the form submission PDF for each template separately or the PDFs of all the templates as a zip file.

Download PDFs for all submission forms.

For full details on using the PDF generator addon and all of its features refer to our Forminator documentation.

With Forminator Pro, You Can’t Go PDF’ing Wrong!

Forminator Pro’s new PDF generator allows you to generate an unlimited number of PDFs with your forms and form submissions, customize, edit, and style PDF templates, and a whole lot more.

If you are a WPMU DEV member, there is nothing else you need to purchase to start generating professional PDFs. Simply install the addon in Forminator, tweak the appearance and settings in your forms, and you’re all good to go.

If you’re not a member yet, consider choosing one of our risk-free membership options (Pro or Agency). You’ll not only get all of our Pro plugins, you’ll also get access to everything else you need to use PDFs effectively, including site management, client report, and client billing tools, white label and reseller options, 24/7 expert support on all areas related to WordPress, CSS, hosting, etc, and so much more!

Start using Forminator’s PDF Generator Addon today…it’s PDF’ing great!
16.08.2023
How to Use Multiple Search Forms In WordPress

Do you want to make multiple search forms in WordPress?

By default, a search form will look through all your pages, posts, and media on your website. However, you can often improve the visitor experience by creating multiple forms that search specific categories, content types, and more.

In this article, we will show you how you can add and use multiple search forms on your WordPress site.

Why Use Multiple Search Forms in WordPress?

A search form can help visitors find what they are looking for, fast. However, if you have lots of content, then it might make sense to create multiple forms that search specific types of content.

For example, if you run an online store, then you might create a smart WooCommerce product search that searches specifically for products.

You can also create an advanced search form for custom post types. For example, at WPBeginner, we have created custom post type search forms for our Deals and Glossary pages.

By using different search forms in different locations across your site, you can help visitors get accurate and helpful search results, no matter how much content you have published. This will improve the visitor experience and reduce the bounce rate.

That being said, let’s show you how to create multiple search forms in WordPress.

Create a New WordPress Search Algorithm With a WordPress Plugin

The easiest way to add multiple search forms to your WordPress website is by using the SearchWP plugin. It’s one of the best search plugins for WordPress, used by over 30,000 sites.

With SearchWP, you can search content that WordPress ignores by default, including custom post types, PDF files, WooCommerce products, and categories. You can also create multiple different search forms and then add those forms to any page, post, or widget-ready area.

Setting Up SearchWP

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

Upon activation, go to SearchWP Â» Settings and then click on the ‘General’ tab.

Here, you need to enter your license in the ‘License Key’ box. You can find this information in your account on the SearchWP site.

With that done, just click the ‘Verify Key’ button.

Create a Custom Search Algorithm For WordPress

After entering the license key, it’s a good idea to fine-tune how SearchWP indexes, searches, and displays your content. You can think of this as creating a custom Google search algorithm that’s just for your WordPress blog or website.

These are the general settings that all search forms will use by default. You can override these settings for the individual search forms.

To get started, head over to SearchWP Â» Algorithm.

Here, you will see a section for the different content types that SearchWP searches by default, such as pages and posts.

You will notice that each item has an ‘Applicable Attribute Relevance’ scale. This is the weight (importance) that SearchWP will give to each attribute.

Content that matches an attribute with high relevancy will appear higher in the search results. By contrast, content that matches an attribute that has less relevancy will appear lower on the search results page.

To change the relevancy, simply drag the different sliders. For example, if you move the ‘Title’ slider to the left and the ‘Content’ slider to the right, then the content will carry more weight than the title.

You can even tell SearchWP to search content that WordPress ignores by default.

To do this, click on the ‘Sources & Settings’ button.

You can now check the box next to the different content types. For example, you may want to make blog comments searchable or add PDF indexing and searching in WordPress.

When you are happy with your changes, simply click on the ‘Done’ button.

This adds a new section for each content type. Once again, you can change the attribute relevance using the different sliders.

When you are happy with how the search algorithm is set up, just scroll to the top of the screen and click the ‘Save’ button.

SearchWP will now rebuild the index automatically. Depending on the speed of your Internet connection and your WordPress hosting provider, this may take a few minutes.

As soon as you see ‘Index Status 100%’, you will know that SearchWP has indexed all your content and settings.

Create Multiple Different Search Forms in WordPress

Now, you can create as many different search forms as you want.

To get started, head over to SearchWP Â» Search Forms and click the ‘Add New’ button.

This creates a new search form, ready for you to customize. For example, if you run a review website, then you might create a form that searches for product review posts and ignores other content like your blog posts and media.

To start, you will need to give the form a unique name by clicking on the small pencil icon next to ‘Search Form 1’.

You now type in a name for the custom search form.

Since you are going to make multiple search forms in WordPress, it’s important to use a name that helps you identify this form in the WordPress dashboard.

After that, you can choose a layout using the ‘Layout Theme’ thumbnails.

Some of these layouts are designed for specific search forms. For example, if you are creating a form that searches by category in WordPress, then we recommend selecting ‘Category Search’, as it already has many of the settings you need.

Simply click on the different themes to see a preview of how this form will look on your website. After making your decision, scroll to the ‘Custom Styling’ section.

The settings you see may vary depending on your theme layout. For example, if you selected ‘Quick Search’, then the ‘Quick Search’ setting will be enabled by default.

You can disable and enable the different options using their toggles. The live preview will update automatically as you make changes, so you can try different settings to see what works the best.

Depending on your layout and the kind of form you want to create, you may need to enable and disable some of the ‘Custom Styling’ settings.

Do you want to create a form that searches by category? Then you will need to enable the ‘Category Search’ toggle.

After that, find the ‘Select Category’ field and type in each category that you want to include in the search results. For example, if you run an online store, then you may want to create forms that search specific WooCommerce product categories.

If you want to allow visitors to filter their search results using factors like the author, post type, and tag, then you will need to click to enable the ‘Advanced Search’ toggle.

After that, scroll to the ‘Advanced Search Filter/s’ field. By default, SearchWP allows visitors to filter their results using Authors, Post Types, and Tags.

To remove any of these filters, just click on its ‘X’ button. If you want to add more filters, then simply type their names into the field.

Then, when the right option appears in the dropdown, give it a click.

By default, the form will search media, pages, and posts. If you have created custom post types, then you may want to include these in the search results.

To do this, find the ‘Type of search’ field and give it a click.

You can now type in the name of each custom post type.

When the right custom post type appears, click to add it to the search.

Do you want to exclude media, pages, or posts from the search results?

Then just click the small ‘X’ next to ‘Media’, ‘Pages’, or ‘Posts’.

When you are happy with the type of content that SearchWP will search, you may want to add some placeholder text to the search bar.

Here, we recommend letting visitors know how the search form works and the results they should expect to get. For example, if you have an online marketplace, then you may want to use text such as ‘Search for products’ or ‘Start shopping’.

By default, SearchWP will show a generic ‘Enter keyword and search’ message. You can replace this with your own messaging by typing into ‘Field Label’.

By default, the search form shows a magnifying glass and a blue ‘Search’ button.

To remove the ‘Search’ button, simply click to deactivate the ‘Search Button’ toggle.

When you are happy with these settings, scroll to the ‘Form Style’ section.

Here, you can choose between different form styles, add a border, and change the font size.

Under ‘Button Style,’ you can customize the ‘Search’ button that appears in the form.

Finally, when you are happy with how the form is set up, you can scroll to the top of the screen and click on ‘Save’ to store your settings.

To create more custom search forms with unique settings, simply repeat the exact same process described above.

Add Multiple Search Forms to Your WordPress Site

You can add multiple search forms to any page, post, or widget-ready area using either a shortcode or the Search Form block.

Since it’s the easiest, let’s start by looking at the block method.

How to Add Search Forms to a Page or Post

You may want to add a search form to a specific page or post or even show it inside the post content.

For example, you might add a search form to your FAQ page, documentation, help desk, knowledge base, or similar. This can improve the customer experience by helping users find answers and useful resources.

To get started, simply head over to the page or post where you want to add the form.

You can then click on the ‘+’ icon and type in ‘Search Form’.

When the right block appears, give it a click.

You can now open the ‘Select a Form’ dropdown and choose the form you want to show on this page or post.

When you are ready to make the search form live, just click on either ‘Update’ or ‘Publish’. Now, simply visit this page or post to see the search form in action.

How to Add Search Forms to a Widget-Ready Area

Another option is to add a search form to a widget-ready area, such as the sidebar or similar section. This is an easy way to show the same search bar across multiple pages on your WordPress website.

Go to Appearance Â» Widgets to see all the different areas where you can add widgets.

The options you see may vary depending on your WordPress theme. For example, if you are using the Astra theme, then the sidebar widget area is called ‘Main Sidebar’.

Simply click the ‘+’ block icon in the area where you want to add a widget.

Then, type in ‘Search Form’.

When the right block appears, click to add it to your website.

You can now open the dropdown menu and choose the search form that you want to use.

When you are finished, just click the ‘Update’ button to make the search form live.

Now, you can visit your site to see the improved search form.

For more on this topic, please see our guide on how to add and use widgets in WordPress.

How to Add Search Forms Using the Full Site Editor

If you are using a block WordPress theme, then you can add search forms using the full site editor. It includes areas that you can’t edit using the standard WordPress content editor. For example, you can add a search form to your 404 template in WordPress.

To get started, head over to Appearance Â» Editor in the WordPress dashboard.

By default, the full site editor shows your theme’s home template, but you can add a search form to any template.

In the left-hand menu, simply click on ‘Templates’ or Template Parts’ depending on where you want to add the search form.

You will now see a list of all the templates that make up your WordPress theme.

Simply find the template or template part that you want to edit, and give it a click.

WordPress will now show a preview of this template.

To go ahead and edit the template, click on the small pencil icon.

Now, click on the ‘+’ icon.

In the panel that appears, type in ‘Search Form’.

When the right block shows up, drag and drop it into your layout.

You can now open the dropdown menu and choose the search form that you want to use.

With that done, just click on the ‘Save’ button to make your changes live.

How to Add a Search Form to WordPress Using a Shortcode

Another option is to add a search form using its shortcode. This may be an easier option if you want to add the same search form to multiple pages, posts, or widget-ready areas, as you can simply paste the same shortcode into multiple locations.

To get a search form’s shortcode, head over to SearchWP Â» Search Forms. Here, find the search form that you want to show and copy the value in the ‘Shortcode’ column.

You can now add the shortcode to any page, post, or widget-ready area. For step-by-step instructions, please see our guide on how to add a shortcode in WordPress.

We hope this article helped you learn how to use multiple search forms in WordPress. You may also want to see our guide on how to increase your blog traffic and our expert picks for the best WordPress form 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 Use Multiple Search Forms In WordPress first appeared on WPBeginner.

11.08.2023
How to Add Web Push Notifications to Your WordPress Site
Are you wondering how to add push notifications to your WordPress site?

Push notifications let you send messages to users even when they are not on your website. This helps you bring back users to your website, increase traffic, and make more money.

In this article, we will show you how to easily add web push notifications to your WordPress site.

We will cover everything you need to know about sending push notifications in our tutorial, and you can use the quick links below to jump to different sections:
What Are Push Notifications?

Push notifications are short, clickable notification messages that appear as a popup on users’ desktop or mobile devices.

They display on top of the desktop or in the notification area on a mobile device. The best thing is that they can be shown even when the user’s browser is not open.

Here’s an example of a push notification.

Push notifications let you reach users across devices with your latest updates and offers, making them an effective way to convert website visitors into loyal followers and customers.

Why Add Web Push Notifications to Your WordPress Site?

Did you know that 70% of people who leave your website will never come back? This is why you need to convert those WordPress website visitors into subscribers and customers.

You can do this by using multiple channels at once. These can include email marketing, social media, mobile or SMS marketing, and web push notifications.

Email lists are still the most powerful marketing tools available, with 51% of consumers preferring to be contacted by businesses via email. However, we are finding that push notifications are also very effective.

On the WPBeginner site, push notifications are consistently one of the top 5 traffic sources.

Here are just some of the reasons that make push notifications a great marketing tool:
- Users need to give their explicit permission to receive push notifications. This means they are already interested in what you have to offer and are more likely to engage with notifications.
- Push notifications are shorter and demand less attention than email or social media updates.
- There is no algorithm like on social media to limit your reach. Nearly 100% of messages are delivered.
- Users can control how their devices display notifications. They can snooze them or turn them off entirely.
- Not as many companies are using push notifications.
Popular sites, including Facebook, Pinterest, LinkedIn, and many others, understand the importance and are already using web push notifications as a marketing strategy.

Push notifications have a 10X higher open rate than email and a 14X higher click rate. They are more engaging than SMS, email marketing, and social media platforms.

Having said that, let’s take a look at how to easily add web push notifications to a WordPress website.

Setting Up Web Push Notifications in WordPress With PushEngage

PushEngage is the best push notification service on the market that allows you to easily add push notifications to your WordPress site.

This helps you connect with visitors even after they leave your site with targeted push messages.

Step 1: Creating Your PushEngage Account

First, you need to go to the PushEngage website and click the ‘Get Started For Free Now’ button.

The free plan covers you for up to 200 subscribers and 30 notification campaigns each month. You will have to upgrade as you get more subscribers and need to send more campaigns.

After selecting a pricing plan, you will need to create a PushEngage account. You can use your existing Google account to register or create a new account.

Once you do that, you will be taken to the ‘Setup Your Account’ page, where you have to add your website domain, industry, and company size.

Your subdomain will automatically be generated according to this information. After that, you will also need to provide your credit card details here.

Upon signing up, you will be taken to your PushEngage dashboard.

Keep in mind that if you signed up using your Google account, then this is where you will need to provide your website details.

Once you have done that, just visit the Site Settings Â» Site Details page from the left column in the PushEngage dashboard.

From here, you can edit your site name and URL if you want. After that, you myst upload an image that will be used as a site icon for your web push notifications.

To do this, click the ‘Choose Image’ button.

This will open up a prompt on your screen where you can upload an image from your computer.

You can also add an image using its URL. Once you have selected an image, just click the ‘Use’ button.

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

Remember that your image needs to be in PNG or JPG file format, and the recommended size is 192×192.

You have now completed the key information for your PushEngage account.

Step 2: Connecting Your WordPress Site With PushEngage

The next step is to connect your WordPress website to PushEngage.

To do this, you need to install and activate the PushEngage WordPress plugin. For more details, you can see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the ‘Welcome to PushEngage Setup Wizard!’ prompt will open up on your screen, where you have to click the ‘Connect Your Existing Account’ button.

This will open the ‘Add Your Site to PushEngage’ prompt in a new window. Here, you have to make sure that the site registered with PushEngage is the same one that you are using now.

After that, just click the ‘Let’s Get Started’ button.

Once your PushEngage account is connected with WordPress, a setup wizard will be launched on your screen that you can configure according to your liking.

After you are done, just click the ‘PushEngage Dashboard’ button to be redirected to your WordPress dashboard.

Now it’s time for you to start creating a web push notification for your WordPress blog or website.

Step 3: Setting Up Your Push Notification Messages

To create a push notification, head over to the PushEngage Â» Campaigns page and click the ‘Add New’ button.

This will direct you to the ‘Create New Push Broadcast’ screen in your WordPress dashboard.

From here, you can start by typing a name for your push notification in the ‘Notification Title’ field. Then, type the message that you want to display in the push notification in the ‘Message’ field.

Next, you need to add your website URL to the ‘Notification URL’ field.

Upon adding the title and message, you will be able to see the preview of your push notification in the right corner of the screen.

Next, scroll down to the ‘Show Large Image’ section and toggle the switch to active if you want to add an image to your push notification.

This image will be displayed at the top of your notification and will not disturb the alignment of the notification title and message.

Next, you need to scroll down to the ‘Notification Duration’ section and toggle the switch to active.

Once you do that, you can now check the ‘Keep notification open until interaction’ option. This means that the notification will be constantly displayed unless the user interacts with it.

You can also customize your push notification duration from the dropdown menus. This setting controls how long the push notification will be displayed for.

Keep in mind that these features only work for Chrome 47 and above versions and not other browsers.

After configuring the settings, just click the ‘Save & Select Audience’ button at the top.

This will direct you to the next step, where you must select the audience that you want to send push notifications to.

Here, we will be choosing the ‘Send to All Subscribers’ option so that our push notification will be displayed to all our subscribers.

Next, click the ‘Send/Schedule’ button at the top to move forward.

In the next step, you need to schedule your web push notification timing.

For example, if you want to start sending your push notifications immediately, then you can select the ‘Begin sending immediately’ option. However, you can also schedule your notification to be sent at a particular time or be turned into a recurring push notification.

Although, keep in mind that you will need a paid plan from PushEngage to access these two features.

Finally, click the ‘Send Notification Now’ button to save your campaign and start sending your web push notifications.

Once you have set up push notifications, it’s best practice to check that they are working as you expected.

To test your push notifications, open your website on your computer or phone. Here, you should immediately see the web push notification that you just created.

Here’s ours on a desktop computer:

However, keep in mind that this web push notification will only be displayed to users who are part of your PushEngage subscriber list.

Create a Subscribers List With PushEngage

If you don’t already have a subscribers list with PushEngage, then you must visit the PushEngage Â» Design page from the WordPress admin sidebar.

Once you are there, simply toggle the switch to active for a popup template that you like. Then, click the ‘Edit Popup’ button.

This will open the PushEngage website dashboard on a new page.

From here, you can configure the layout, message, and subscription rules for your popup.

Once you are done, don’t forget to click the ‘Save & Choose Display Options’ button at the top.

This will now show you the display options, where you can choose the cookie duration, enable the subscription trigger, and more.

Finally, click the ‘Save and Enable Popup’ button to store your settings and activate the popup.

Now, you need to visit your website using another Google account. Here, you will see a popup at the top of your website asking users to allow it to show notifications.

Now once the users will click the ‘Allow’ button, they will automatically become a part of your PushEngage subscribers’ list.

Send Push Notifications to Subscribers Every Time You Publish a New Post on WordPress

With PushEngage, you can also send push notifications to subscribers every time you publish a blog post in WordPress.

To do this, visit the PushEngage Â» Settings page from the WordPress dashboard and switch to the ‘Auto Push Settings’ tab. From here, toggle the ‘Auto Push’ switch to active.

After that, you need to choose if you want to display the post’s featured image in the push notification and enable multi-action buttons.

With multi-action buttons, you can allow users to interact with your push notifications in multiple ways, like visiting your blog post, subscribing to your YouTube channel, and signing up for your email newsletter.

You can also use the blog post’s featured image or the site icon as the notification icon image.

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

Now create a new post in the WordPress block editor and scroll down to the ‘PushEngage Push Notifications Settings’ section.

From here, you can add a title and message for your web push notification and even select an audience for it.

Once you are done, simply click the ‘Publish’ button to save your changes and make your post live.

Now your subscribers will receive a notification for the new blog post on your website.

We hope this article helped you learn how to add web push notifications to your WordPress site. You may also want to see our beginner’s guide on how to build an email list and our expert picks for the best email marketing services for small business.

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 Web Push Notifications to Your WordPress Site first appeared on WPBeginner.
10.08.2023