Blogs- WPoets

Insights, ideas and inspiration. A go to wisdom hub right here.

Read the latest updates, hacks, ideas and more to supercharge your campaigns and website. We consider our blog will be your marketing secret weapon.

Latest Posts

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 3)

Tutorials

9 min read

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 3)

Introduction

In Part 2 of this 3 part Blog series, we covered the following sections of the support candy plugin

Ticket List
- Agent Ticket List
- Customer Ticket List
Email notification

Now, in Part 3 which is the final part of this blog, we will explore the settings sections of the SupportCandy plugin.

Settings

Step 1: General settings

Under this tab, you can configure the general settings.

Support → Settings → General Settings → Page Settings tab

Screenshot 1: Settings → General Tab

Ticket Status After Customer Reply: You can define the ticket status that will be set when a customer (the ticket creator) submits a reply. If you don't want the status to change, select the "Do not change" option.
Ticket Status After Agent Reply: You can specify the ticket status that will be applied when an agent submits a reply. To keep the status unchanged, select "Do not change."
Close Ticket Status: This status is applied when either an agent or a customer closes the ticket.
Ticket Alice: You can customize the name used for your tickets. For example, you might rename it to "Case," so tickets will be referred to as "Case #" in individual tickets, email notifications, and other communications.
Allow Close Ticket: You can determine who has permission to close a ticket. Agents from the selected roles must have the necessary access to enable the "Close" button within an individual ticket.

Page settings Tab

Here you can set the various pages such as user login and registration screens.

Screenshot 2: Support → Settings → General Settings → Page Settings tab

Support Page: The support page is where the [supportcandy] shortcode is used on the front end to display the support functionality.
User Login: This setting determines how users can log in to access the support forum on the front end. You can choose from Default, WP Default, or Custom URL options.

File Attachments

Go to Support → Settings → General Settings → File Attachments tab
Here you can set the max file size of the attachment along with its Allowed File Extensions.

Screenshot 3: File Attachments tab

Thank you page

Here you can define what action should be taken after the customer or agent submits the ticket.

Screenshot 4: Thank You Page

You can show a thank-you text, redirect to the custom page, or open a ticket page.

Step 2: Dashboard

Dashboard in SupportCandy lets support agents quickly see important ticket information. This helps them plan their work and choose what to do first.
You can see how many new tickets, unresolved tickets, unassigned tickets, closed tickets, tickets assigned to the current agent (mine), tickets that are out of SLA, tickets that are due today, and tickets that are due tomorrow.
If an agent clicks any of these numbers they will be redirected to the respective categories list of tickets with the right filter in place.

General

Here we define the general settings for the dashboard, such as the default date range and dashboard auto-refresh.

Screenshot 5: Dashboard General Tab

Cards

Under this tab, set the order of the tickets based on the ticket status.

Screenshot 6: Dashboard Cards

Click the Edit button next to that card, as shown in the below screenshot. You can change the Title, show/hide the card in the dashboard, and allow agent roles who can see the card info in the dashboard.

Screenshot 7: Edit the Cards

Widgets

The dashboard widgets give you a complete view of your support operations, with real-time information on new tickets and closed tickets, as well as full analytics on response times and communication gaps.
You can customize the dashboard to your needs by rearranging widgets based on priority.
Also, you can manage visibility for different agent roles by enabling or disabling widgets for specific roles.

Screenshot 8: Dashboard Widgets

Here is the List of widgets that are available by default

Ticket Statistics
Trends of Today
Agent Workload
Recent Activity
Recent Tickets
Unresolved Tickets by Type
Unresolved Tickets by Priority
List of Unresolved Tickets by Status
Response Delay
Ticket Closing Delay
Communication Gap
Ticket comments
Agent scores
Out of SLA Tickets
Active Timer
Usergroups

Adding a new widget

In the Widgets tab, locate the Add New Widget button and click on it.
Select the Custom field for which you want to add widgets. Click Submit to save changes.

Screenshot 9: Adding a new widget

Editing the Widgets

Click on the edit icon beside the widget name.
You can change the title, show/hide the widget in the dashboard, and allow agent roles who see the widget in the dashboard.

Screenshot 10: Editing Widgets

Step 3: Ticket Categories

Ticket categories let users and agents sort tickets into groups based on what they are about, which makes it easier to communicate and solve problems.

Screenshot 11: Ticket categories

Adding a New Category

Users with the necessary permissions can create new ticket categories.

Navigate to Support → Settings → Ticket Categories
Click on Add New.
Give a name to the category.
Select the order of loading the categories by Load after dropdown.
Click Submit

Screenshot 12: Add New Ticket Category

Edit Category

Click on the Edit option beside the name of the ticket.
You can change the name and loaf after settings.
Click Submit.

Screenshot 13: Edit Ticket Categories

Step 4: Ticket Statuses

Under this tab you can set your own custom statuses to customize the process and life cycle of the tickets.
Customization includes the color patterns that go with each status, which show clearly what state the ticket is in.
Administrators can edit or delete statuses as needed.

Screenshot 14: Ticket Status

Adding Status:

Head over to Support → Settings → Ticket Statuses.
Click on Add New.
Enter a suitable name for the new status that you want to add.
Choose a color and background color for visual identification.
Click Submit.

Screenshot 15: Adding status

Edit Status:

Click the Edit link beside the status name that you want to edit.
Edit the color, background color, and load after setting.
Click Submit.

Screenshot 16: Editing a Ticket status

Step 5: Ticket Priorities

Using this setting, you can prioritize tickets based on urgency. You can create new priorities or edit existing ones (High, Medium, Low priorities).

Screenshot 17: Ticket Priorities

Adding a New Priority

Go to Support → Settings → Ticket Priorities and click on Add New.
Enter a name and choose a color and background color for the priority based on its urgency.
Click Submit.

Screenshot 18: Adding a new Ticket Priority

Edit Priority

Click on the edit link for which you want to edit.
Click on the Edit option.
Edit the Name, Color, or Background color, Load after settings as per your needs.
Click Submit

Screenshot 19: Editing Ticket Priorities

Step 6: Miscellaneous

Under the Miscellaneous settings, you can set the following settings:
- Term & Conditions
- GDPR
- reCaptcha
- Advanced

Terms and conditions

Enabling this feature will add a checkbox in the Create Ticket form and Registration Form prompting the user to agree to the terms and conditions.
The terms and conditions message can be customized as seen in the below screenshot no.. You can also add to link to your terms and conditions page.

Screenshot 20: Miscellaneous → Terms & Conditions

GDPR

If enabled, it will add a checkbox in the Create Ticket form and Registration Form with a custom message letting the user know what information will be stored in the database.
You can also send the Personal data retention

It specifies the duration for which the system should retain personal information within the ticket. Once the retention period has passed, the database will either delete or anonymize personal details such as Name, Email Address, IP Address, and any custom fields marked as personal information, from the date of creation.
If you wish to retain personal information indefinitely, set the retention period to 0 days.

Screenshot 21: Miscellaneous → GDPR

reCaptcha

You can add Google reCaptcha to the ticket form, login and registration screen, profile screen, etc.
For that, you need to generate the Site key and Secret key from this link.

Screenshot 22: Miscellaneous → reCaptcha

Advanced Settings

Here you can configure 25 types of advanced settings. We will discuss the main settings for now.
Reply confirmation: After clicking the reply button on a specific ticket, the system will prompt the user for confirmation.
Ticket ID: In this setting, you can choose whether new ticket IDs are assigned sequentially or randomly.
Starting Ticket ID: Within the Sequential Ticket IDs setting, you can specify the initial ticket ID to be used for new tickets.

Screenshot 23: Miscellaneous → Advanced settings

Step 7: Ticket Widgets

The Ticket widgets are displayed on the single ticket in the backend. You can manage the access levels for each widget, determining who can view or edit them.
Also, you can rename, enable, or disable, and change the order of the widgets from this settings tab.

Screenshot 24: Support → Settings → Ticket Widgets

Screenshot 25: Edit Ticket Widgets

Step 8: Rich Text Editor

This setting allows you to manage the rich text editor configurations for Agents, Registered Users, and Guest Users.

Screenshot 26: Rich Text Editor Agent Tab

Screenshot 27: Rich Text Editor Registered User Tab

Screenshot 28: Rich Text Editor Guest user Tab

Enable: You can enable or disable the rich text editor for users.
Allow Attachments: You have the option to allow or disallow attachments in various areas such as ticket descriptions, reply descriptions, and note descriptions.
Toolbar Actions: The rich text editor allows you to select which actions to enable, including:
- Bold
- Block quote
- Italic
- Align
- Right to left
- Underline
- Bulleted list
- Link
- Text background color
- Image
- Numbered list
- Strikethrough
Show File Attachment Notice: You can choose to display information about file attachments, including allowed file types and sizes, to users. This can be configured in the user types setting.
HTML Pasting: When activated, any text that is copied to the clipboard will be pasted with HTML.

Screenshot 29: Rich Text Editor Advanced Tab

Step 9: Working Hours

This section allows you to choose the working hours for your company or organization. These specified hours will act as a standard template for the working hours of agents.

Screenshot 30: Support → Settings → Working Hours

Holidays

In this setting, you can add holidays for your company or organization,
You can add a single holiday by clicking on a single date or multiple holidays by date range (selecting and dragging),
After electing choose the action Add new holidays.
If you want this to occur annually select yes in Repeat every year drop-down.
Similarly, you can delete holidays.

Screenshot 31: Holidays Calendar

Screenshot 32: Add/Delete Holidays

Exceptions

In some situations, you may want to modify the working hours for a specific day. You can do this by selecting that specific date and modifying the working hours.
This exception will apply only to the working hours set at the company or organization level.

Screenshot 33: Working hours → Exceptions list

Screenshot 34: Working hours → Exceptions → Add New

Settings

In the Settings Tab, you can Allow agents to modify working hours or you can Allow agents to modify their leaves.

Screenshot 35: Working hours → Settings Tab

Step 10: Appearance

You can configure the appearance of General (overall look and feel), Ticket List, Individual Ticket, Modal Popup, Agent Collision, and Dashboard screens.

Screenshot 36: Appearance

Step 11: Ticket Tags

The Ticket Tag Setting feature allows administrators to add tags to the tickets.
To add a ticket tag enter its name and description, and select its color and background color.

Screenshot 37: Add new Ticket tag

Under the same screen, you can customize Tag Appearance for ticket tags.

Screenshot 38: Ticket Tags General (Customizing Tag Appearance)

Conclusion

In this blog, we walked you through how to add a helpdesk and ticket system on WordPress using the SupportCandy plugin.

SupportCandy adds to your WordPress site the features of a complete help desk and customer support ticket system. It is one of WordPress's most popular helpdesk and customer support ticketing plugins.

That’s it for this article. Do more with your website.
If you need any help related to WordPress, contact our WordPress experts.

How to exclude internal traffic in Google Analytics 4 (GA4)

General,Tutorials

12 min read

How to exclude internal traffic in Google Analytics 4 (GA4)

Introduction

When analyzing website performance in Google Analytics 4, it's crucial to ensure that the data you're reviewing reflects actual user behavior. Traffic from your internal teams can skew your data, leading to inaccurate results.

In Google Analytics 4 (GA4), excluding internal and developer traffic is essential for maintaining clean and reliable reports. Whether you’re testing new features, performing updates, or troubleshooting, keeping this traffic separate helps ensure that your website metrics paint a true picture of how real users interact with your site.

In this guide, we'll walk you through the steps to effectively exclude this traffic in GA4, so you can trust the accuracy of your analytics.

We do this using two methods

Method 1: Using IP Address Filter in Google Analytics
Method 2: Using WordPress plugin Monsterinsights (Only for WordPress User Roles)

Methods to exclude internal traffic

Method 1: Using IP Address Filter in Google Analytics

What Is Internal Traffic?

Internal traffic refers to visits to your website made by people within your organization, such as employees or stakeholders, which you may not want to include in your analysis. By excluding internal traffic, you can ensure that your data reflects genuine user behavior and external visitor activity.

Limitations with IP Address Filters

In Google Analytics 4 (GA4), IP address filtering is commonly used to exclude internal traffic from reports, helping to keep data cleaner and more accurate. However, this approach has its limitations.

Here are the limitations of IP address filters in GA4:

Dynamic and Rotating IP Addresses
- Many Internet Service Providers (ISPs) assign IP addresses dynamically, meaning they change periodically. Employees working from home or in coworking spaces may not have a static IP, making it difficult to maintain accurate filters.
- This makes it difficult to maintain an up-to-date list of internal IPs for exclusion.
Multiple Office Locations and Remote Work:
- If a company has multiple offices or remote employees, filtering based on IP addresses can become cumbersome. Each location and remote worker might have different IPs, making it challenging to cover all variations accurately.
Use of VPNs:
- Employees accessing the website through a VPN will make it harder to filter their traffic accurately.
- They may appear to access websites from various IPs each time they connect through a different VPN server.
Mobile and On-the-Go Access:
- If employees access the website from mobile devices on different networks, their IP addresses vary, further complicating exclusion.

If IP addresses are not updated regularly, internal traffic may slip through, distorting the analytics data.

Excluding internal traffic using IP filter

Login to Google Analytics 4
Click the Admin menu (gear icon) at the bottom left corner.

Screenshot 1: Click on the Admin menu icon

Click on the Data Streams subtab under the Property Settings → Data Collection and Modification section, as shown in screenshot 2 below.

Screenshot 2: Data streams Tab

Click on the Data stream. There are three options of streams: iOS, Android, & Web. Choose Web. You can't filter out internal traffic from app users.

Screenshot 3: Select the stream to exclude internal traffic

A Web stream details slide-over will open. Scroll down to the Google tag section and click on Configure tag settings.

Screenshot 4: Google tag → Configure tag settings

A Google Tag slide-over will open. Scroll down and click on Show more at the bottom of the slide-over.

Screenshot 5: Click on Show more

After that, click on Define Internal traffic under the Settings section as shown in the screenshot below to define IP addresses of which traffic should not be considered.

Screenshot 6: Define Internal traffic

A Define internal traffic slide-over will open. Click on the Create button to add internal traffic rules as shown below.

Screenshot 7: Create traffic rule

Under the Rule name text box, you can give a name to your filter. Let’s name it Internal Traffic to simplify things.

Screenshot 8: Rule name

Under the traffic_type value, you can define the name. The default value is internal.
Note: This is the only event field in Google Analytics 4 where a value can be assigned. Instead of using "internal," you may choose an alternative value, such as "india_hq," to identify the source of internal traffic.

Screenshot 9: traffic_type value

Match Types

This is where you enter the IP addresses that you want to exclude from Google Analytics 4.
You can enter either IPv4 or IPv6 addresses. Also, CIDR notation can be used to define groups of IP addresses.
The following is a list of match types.

IP addresses equals: This setting will match only one IP address.
- For example, a value of 192.168.1.1 will only exclude that IP address
IP address begins with: This match type will match all IP addresses that begin with the given input.
- For example, if IP addresses begin with 192.168.—matches 192.168.1.1, 192.168.0.5, etc.
IP address ends with: This match type will match all the IP addresses that end with the given input.
- For example, if it ends with 1 — Matches 192.168.1.1, 10.0.0.1, etc.
IP address contains: This match type will match all the IP addresses that have the given string in them.
- For example, if IP has 168 — Matches 192.168.1.1, 10.168.0.1, etc.
IP address is in range (CIDR notation): This option will match a group of IP addresses.
- For example, 192.168.0.0/24 — Matches any IP from 192.168.0.0 to 192.168.0.255.
- IP address matches regular expression: This option will match a set of IP addresses using a specified pattern.
  - For example, ^192\.168\.0\.\d{1,3}$ — Matches any IP from 192.168.0.0 to 192.168.0.255.

You can add multiple conditions to filter out IP addresses.

Screenshot 10: Internal Traffic rules configuration

Note: In GA4, you can't use regular expressions in the IP address field other than regular expression Match Type as shown below.

Screenshot 11: Regular expression match type

Example of Filtering an IP address

Let’s add an IP address to filter it out. You should enter the IP addresses that you wish to filter out.
For example, let’s use the 172.16.1.1 IP address, which is a private IP address.
Another example is that you can enter your own device’s IP address. To get your Public IP addresses, click on the link What's my IP address? as shown in screenshot 12 or search on Google for What is my IP.
You will be redirected to the Google search page, where you can copy your IP address as shown in screenshot 12 below.

Screenshot 12: What’s my IP address? Google search

Once you have copied your IP address (IPV4 or IPV6), paste it in the value textbox as shown in screenshot 13 below.

Screenshot 13: IPv4-based IP address

Screenshot 14: Add multiple conditions

You can enter multiple IP addresses into the filter. All of them will be filtered through OR logic.
Once you have entered all the IP addresses, click the Create button.

Screenshot 15: Create Internal traffic rule

Your internal traffic rules will be saved as shown in screenshot 16 below.
That’s it. You have added the IP address that should be skipped from your GA4 data collection.

Screenshot 16: New Internal traffic rule

Caution: Applying a data filter has a lasting impact on your data. For instance, using an exclude data filter means the excluded data is never processed and won’t be available in Analytics or BigQuery. To temporarily hide data in specific reports without permanently excluding it, consider using report filters instead.

Testing the excluded internal traffic

In Google Analytics 4 (GA4), testing the filters to ensure they work correctly after setting them up is important.
This process helps ensure that the data from internal users like employees, content writers, or administrators is not being tracked, making reports more accurate.
Head over to Admin → Property Settings → Data collection and modification.

Screenshot 17: Property Settings → Data collection and modification

Click on the right arrow as shown in the above screenshot. Scroll down to the Filter state section.

Screenshot 18: Filter state is set to Testing

By default, the filter state is set to Testing. If it‘s not set the Filter state to Testing
Note: This step is important for testing the IP address that you have entered in the previous step.
Since the filter state is set to Testing any matching data will be labeled with the "Test data filter name" dimension, which is discussed in the next step.

Using Comparisons in Realtime Report

Head over to the Reports main tab under the Home Tab and then click on the Realtime overview sub-menu.
Click on Add comparison on the Realtime overview panel as shown in screenshot 19 below.

Screenshot 19: Realtime overview

Apply a comparison slide over the panel will open up. Click on the Create New button as shown in screenshot 20 below.

Screenshot 20: Add comparison

Screenshot 21: Create a comparison

A create comparison screen will be shown.
Enter the following conditions
- Dimension: Test data filter name
- Match type: exactly matches
- Value : Internal traffic

Screenshot 22: Add Test data filter name condition

Click the Apply button.
You would see and compare All Users and Test data filter name exactly matches Internal Traffic as seen in the screenshot below.

Screenshot 23: Comparison of All Users and Test data filter name exactly matches Internal Traffic

Go to Realtime overview page in Google Analytics
Scroll to Views by Page title and screen name on the Realtime Overview page.
Now visit any page of your website from the IP address that you entered above.
You will see the active user (The user with the IP address that you entered) on the right-hand side of the comparison bar chart highlighted in orange.
That is you have successfully tested the filter and it’s working.
Troubleshooting:
- If for any reason you are not able to see data in the comparison report of the Test data filter name exactly matches Internal Traffic check the IP address that you have entered. If the IP has changed re-enter the new IP address.
- Also, the Filter state should be set to Testing as set in the screenshot number of step 2

Activating the Internal traffic data filter

Close all the slideover panels and navigate back to the admin section of your GA4.
Under the Property Settings expandable section, select Data Collection and Modification.
Under which click on Data filters
Click on the → arrow to Edit the Data filter

Screenshot 24: Property Setting → Data collection and modification → Data Filters

An Edit data filter slideover panel will open.
Scroll down to Filter state and then Activate or Inactive (Deactivate) your filter.

Screenshot 25: Edit Data Filter Slideover

Click on the Save button.
You’ll get the message, “Filter changes are by nature destructive and irreversible. They are also not retroactive. You should only enable this if you have already successfully tested your filter.”
Click on the Activate filter.

Screenshot 26: Activate Filter

Another method to activate or deactivate the filter is by clicking on the three dots on the right of the filter name, as shown screenshot 27 below.
That's it your filter is applied and all the data collection from the filtered IP address is skipped.

Screenshot 27: Activate and Deactivate the filter

Method 2) Using the WordPress plugin Monsterinsights (only for logged-in users)

The MonsterInsights plugin for WordPress makes it easy to exclude internal traffic by targeting WordPress roles.
Administrators of websites can use this method to stop data from being collected on the actions of logged-in users like site owners, editors, and contributors.

Limitations with the MonsterInsights method

For this method to work you need to register all the users and assign them a role which will be then used to exclude them from GA4

Excluding Logged in user from Google Analytics 4

Let’s get started with setting up MonsterInsights. If the plugin is already installed and Google Analytics is already connected, skip to the Add WordPress user roles to excludea section of this article.

Install the Plugin & Connect Google Analytics + Monsterinsights

Click on the Add New plugin button as shown in screenshot 28 below.

Screenshot 28: Add New Plugin

Search MonsterInsights in the search plugin text box.
Click on Install Now.

Screenshot 29: Install the Plugin

Click on Active to activate the Monsterinsights plugin.

Screenshot 30: Activate the Plugin

Launch the wizard

Screenshot 31: Launch the wizard

Select the category that best describes your website

Screenshot 32: Select the website category

You will be shown a Connect Monsterinights to your website screen. Click on Connect Monsterinsights.

Screenshot 33: Connect Google Analytics + WordPress

After that, the Connect to Google Analytics screen will be shown. Click on Continue and connect to Google.

Screenshot 34: Connect to Google Analytics

Choose the Google account associated with Google Analytics.

Screenshot 35: Choose the Analytics account

Next, Sign in with Google.

Screenshot 36: Sign in with Google

Give Monsterinsights access to the Analytics account.

Screenshot 37: MonsterInsights access to Google Account

Once the account is connected you will see all your Google Analytics properties. Choose the one of which you would like to see reports and filter users from GA4 data collection.

Screenshot 38: Choose an Analytics Property

Next a Recommended settings screen will be shown, choose them as per your needs

Screenshot 39: Choose Recommended settings as per your needs

Click on Save and continue

Screenshot 40: Website features would you like to enable

Next, the page which features you would like to enable will be shown.

Screenshot 41: Wizard completed

Click on Complete Setup without Upgrading

Screenshot 42: Settings General Tab

You will be redirected to Settings → General tab page.
Until now we have Installed the Monster Insights plugin and connected it with Google Analytics. Now let's exclude the WordPress User roles from Google Analytics 4.

Add WordPress user roles to exclude

Under Settings → Advanced Tab go to the Permissions section
Under the Exclude These User Roles From Tracking setting enter the User roles that should be excluded from tracking.

Screenshot 43: Exclude User roles from tracking

That’s it! You’ve now stopped tracking visits from the specified WordPress user roles in Google Analytics.

Conclusion

It is important to keep data clean and accurate in Google Analytics 4 (GA4) by excluding internal traffic. In this blog, we've looked at two ways to exclude internal traffic in Google Analytics 4 (GA4).

In Method 1, we talked about how to use GA4's data filters to block internal traffic. IP address filters are a simple way to keep internal traffic out, but they have their limits, especially in today's flexible and remote work settings.

In method 2 we discussed excluding WordPress user roles from GA4 data collection.

By using these methods, you can improve the accuracy of your GA4 reports, enabling better decisions and clearer insights.

How to create a Funnel Exploration in Google Analytics 4 (GA4)

Tutorials

13 min read

How to create a Funnel Exploration in Google Analytics 4 (GA4)

Introduction

In this article, we'll learn how to create a Funnel Exploration in Google Analytics 4 (GA4).

GA4’s Funnel Exploration helps you visualize user progress through key stages of your website or app. Unlike previous versions of Google Analytics, it offers a more intuitive and flexible way to track user behaviors, pinpoint where drop-offs occur, and provide you with valuable insights into the user journey.

It is very useful to analyze the e-commerce funnel steps: product views, add-to-cart, checkout, payments, shipping, and purchase.

You can add or edit funnel steps, add filters, and use GA4 advanced features such as time constraints, segment comparison, and next actions to really know what is going on with your user journey.

Let’s dive into the step-by-step process of creating a Funnel Exploration in GA4.

A step-by-step guide to creating a Funnel Exploration Report in GA4

Step 1) Creating a New Funnel Exploration

To get started, click on the Explore Tab in Google Analytics 4
You have two options to create a funnel exploration
- Option 1 Click on Blank Exploration to create a Funnel from scratch.
- Option 2: Funnel exploration template. It comes with four pre-configured funnel steps.

Screenshot 1: Select New Exploration

Then click on the Exploration Name to give it a name to reflect its purpose.
Select the date range and then simply click on apply.

Screenshot 2: Select the Date range

Then choose the Funnel exploration from the Technique dropdown if you have selected a blank exploration template. Otherwise, the exploration technique is already set to the Funnel exploration; if the template is selected,
Now, simply add or edit steps to the funnel exploration as per your needs. In Step 5 of this blog, we will look in detail at how to create funnel steps.

Screenshot 3: Choose the Technique as Funnel Exploration

Step 2) Visualization

In Google Analytics 4 (GA4), when creating a Funnel Exploration report, you can choose between two types of funnel visualizations: Standard Funnel or Trended Funnel. Each serves a different purpose in terms of data analysis.

Standard funnel: This is a static, point-in-time visualization of how users move through a funnel. It helps you analyze the conversion process at specific steps to understand user behavior and identify drop-offs at each stage.
Trended Funnel: A time-based funnel shows how users move through each stage over time, which makes it easier to spot trends and patterns in how users behave across sessions or days.

Screenshot 4: Click on the dropdown to Select Visualization

Below are the examples of the Standard and Trended funnel in screenshots 5 and 6 respectively.

Screenshot 5: Standard Funnel example

Screenshot 6: Trended funnel

For this blog post, we will go with the Standard funnel.

Step 3) Open/Closed Funnel

In Google Analytics 4 (GA4), open and closed funnels refer to the way users are allowed to enter and progress through a funnel exploration report. These options give you control over whether users can start at any step in the funnel or must follow the exact sequence of steps.

Open Funnel

An Open funnel allows users to enter at any stage of the funnel, even if they haven’t completed the previous steps.
For example, users might start at the Add to Cart step without necessarily viewing the product details page.

Closed Funnel

A closed funnel requires users to complete each step in sequential order to progress through the funnel.
For example, users must view the product page, add an item to the cart, proceed to checkout, and then make a purchase, all in order.

Screenshot 7: Open Funnels

Step 4) Segment Comparisons

In GA4's Funnel Exploration, segment comparisons show how different groups of users behave as they move through the funnel.

You can compare up to four segments at a time.
When a single segment is added to the Segment drop list, it shows data for that particular segment. To view data for a single segment, hover over a funnel.
When multiple segments are added, their data will be shown side by side.

Screenshot 8: Single Segment

Screenshot 9: Maximum Four segments added for comparison

Step 5) Setting up the Steps of the funnel

This is where you actually add or edit the funnel's steps.
We selected the funnel exploration template under the Settings panel Steps section; hence, four funnel steps are automatically added.

Screenshot 10: Edit or delete a step

The steps are
- First Open/Visit: This is the first time the visitor has interacted with the site during their session.
- Session Start: Keeps track of when a person starts a session on your site.
- Screen/Page View: Keeps track of when a user visits a certain product or topic page.
- Purchase: The last step, which is done when the purchase is done.
To add or edit steps, simply click on the pencil icon next to the Steps section. A funnel editing slideover will open up, as shown in the screenshot below.

Screenshot 11: Steps in Funnel exploration template

Editing funnel Steps

Following the previous step, you can edit the existing funnel steps.
You can change the label or name, as well as add, edit, or remove step conditions.
To edit a condition, click on the Event or Dimension name. It will open a list of Events and dimensions to choose from.

Screenshot 12: Add new Condition to the Funnel Step

You can then add, edit, or remove conditions from the steps.
To add a new condition to a step, type in the name of the event or dimension you want to add. As you type in, you will see a list of events or dimensions.

Screenshot 13: Search for Events or Dimensions

Next, you can add OR and AND conditions, which allow you to refine how events and dimensions are filtered in steps.
To create complex filters, you can combine multiple AND & OR conditions for more precise control.
Example of Combining AND/OR: You want to analyze users who are from the United States or India (OR condition) AND use a Mobile device (AND condition)
For Events, you can add parameters, and for Dimensions, you can add filters.
- Parameter: A parameter in GA4 is additional information that is sent along with an event to provide more context or detail about the action a user took. Every event in GA4 can have one or more parameters.
- Filter: Filters help narrow down the data only to show what's relevant to your analysis for selected dimensions.

Screenshot 14: Adding AND / OR and Parameters, Filter

Click on the three dots in the top-right corner of any funnel step. You can Copy, Remove, and Add steps above & below the current step.

Screenshot 15: Copy, remove, and add steps above or below

If the funnel steps bar graph is not visible, you can zoom in and out by clicking on the “+” and “-” icon or zoom in using the mouse.

Screenshot 16: Zoom into the step

Adding Funnel Steps

To add steps, simply click on the pencil icon, just like we did for editing steps.

Screenshot 17: Click on the pencil icon to Edit Funnel Steps

Let’s add the Add Payment method step before the Purchase step of the Funnel as seen in the screenshot below

Screenshot 18: Add Payment method step before the Purchase step

Click on Add step in the funnel steps slide over footer

Screenshot 19: Click on the Add step in the Sequence footer

Enter the label or name for the step as Add payment method. Always use descriptive names for clarity (e.g., "Viewed Product Page," "Added to Cart," "Started Checkout," "Completed Purchase").
In the items list, search for payment and add it as a condition. That’s it. You have added a new step in the funnel.

Screenshot 20: Search for payment Event item

If needed, you can refine the events' data (by parameters) and dimensions (by filters) in the steps.
For example,
- Select event as add_to_cart parameter and the Price greater than 100 AND
- Add Dimension as Country contains the United States under the Geography subgroup.

Time Constraint

You must have noticed the little clock icon beside each funnel step. It’s the Time Constraint option.
In Google Analytics 4 (GA4), time constraints refer to the ability to set specific time limits or windows within which users must complete certain actions in a funnel exploration report.
This feature allows you to analyze user behavior within a defined time period between different steps in a funnel, ensuring that the steps happen within a certain timeframe.

Screenshot 21: Add Time Constraint

You can set the time period by min, days, hours, etc. within which the next step must occur for it to be included in your funnel.

Screenshot 22: Set and Enable Time Constraint

For example, we set the time constraint between View Product step and Add to Cart step for 5 minutes
This means users who progress to the Add to Cart step from the View Product step within 5 minutes will only be included in the funnel progression.
As you can see in the below screenshot, before and after applying the Time constraint we get the following results.

Screenshot 23: Before enabling Time Constraint

Is Directly and Indirectly followed by

Directly Followed By: When one funnel step is directly followed by another, it means that the user must complete the next step immediately after the previous step, without any other intervening events or actions in between. This is useful when you want to enforce a strict sequence of actions in your analysis.

Indirectly Followed By: When one funnel step is indirectly followed by another, it means the user can complete other actions or trigger other events between the two steps. The user can still move through the funnel as long as they eventually complete the next step, regardless of what they do in between.

Screenshot 24: Choose between Directly and Indirectly, followed by

Step 6) Breakdown

In Google Analytics 4 (GA4), the breakdown section (under the Settings panel) in a funnel report refers to a way of splitting or segmenting the data in each funnel step by a specific dimension.
Below is the screenshot of the Device Category dimension used to break down the visualization.
To add a breakdown, drag a dimension from the Variables panel or click the drop target to select it from the list.

Screenshot 25: Click on the Breakdown drop target

Screenshot 26: Select Device Category in Breakdown drop target

After applying Device Category dimension, we can see the results of the report below.

Screenshot 27: Results of Device Category Breakdown droplist

Step 7) Show Elapsed Time

Show Elapsed Time in funnel exploration shows you how long it usually takes people to move from one funnel step to the next.
It helps you analyze the time users spend between each stage of the funnel, offering insights into delays or areas where users might be taking longer to take action.

Screenshot 28: Elapsed Time

As we can see, the elapsed time between the Add payment Method and Purchase step for the desktop is 3 minutes and 58 seconds.

Step 8) Next Action

In Google Analytics 4 (GA4), the Next Action in funnel steps refers to the event or activity that users perform immediately after completing a particular step in the funnel.
It helps identify what users do next, whether they move forward to the next step in the funnel, abandon it, or take a different action altogether.
Under the Settings panel, click Next Action.

A pop-up will appear with a list of dimensions that can be added in the Next Action as shown below screenshot.
Note that only specific dimensions can be added as Next Action
The following screenshot shows the Event Name and Page path + query string Dimensions can be added.
Add the Event Name in Next action drop target.

Screenshot 29: Event name as Next Action

Screenshot 30: Results of Event Name as Next Action

The screenshot above shows the top five possible next actions.

E-commerce Checkout Funnel: Example of a funnel Exploration report in Google Analytics 4

In this sample report, we will analyze the customer journey through the e-commerce checkout funnel, focusing on key steps such as First Open/Visit, View Product, Add to Cart, Shipping, Add Payment, and Purchase.
We will break down the funnel by Device categories such as mobile, desktop, tablet, and smart TV to explore differences in behavior.
Additionally, we’ll evaluate key metrics like active users, elapsed time, funnel completion rates, abandonments, and abandonment rates at each step to help you identify where users drop off and optimize the funnel for better conversions.
Following are the steps for creating the Funnel report.

Step 9) Create a Funnel Exploration

In Google Analytics 4, go to the Explore tab.
Click on the Blank exploration.
Create a new exploration.

Screenshot 31: Select blank exploration

Add exploration name as E-commerce Purchase Journey
Set the date range. Let’s choose the range from June 1, 2024, to Sep 18, 2024.
Set the visualization to the Standard funnel.

Screenshot 32: Set Exploration name and Visualization as Standard funnel

Step 10) Add and Edit steps

Add the following steps to the funnel along with its event condition
- First Open/Visit:
  - This is the first time the visitor has interacted with the site during their session.
  - Event: first_open or first_visit
- View Product:
  - Keeps track of when a user visits a certain product page.
  - Event: view_item
- Add to Cart:
  - Keeps track of when users add something to their shopping cart.
  - Event: add_to_cart
- Add Shipping info:
  - Keeps track of when customers add their shipping information during checkout.
  - Event: add_shipping_info
- Add Payment method:
  - The step where users add their payment information.
  - Event: add_payment_info
- Purchase:
  - The last step is when the purchase is done.
  - Event: purchase or in_app_purchase

Screenshot 33: E-Commerce Purchase Journey Funnel Steps

For this Funnel Exploration, we will Breakdown this report by Device Category.

Screenshot 34: Device Category as Breakdown

Set Next Action as the Event name.

Screenshot 35: Set Event name as next action

Activate Show Elapsed Time
That’s it. Your funnel is ready.

Step 11) Analysis of E-commerce Purchase Journey Funnel

The E-commerce Purchase Journey Funnel Exploration tracks key steps in the customer’s path, from viewing products to completing a purchase. It includes adding to the cart, entering shipping and payment details, and finalizing orders.
Below are the insights from it.

First open/Visit

Elapsed time: NA
Active Users: 2,32,203(100%)
Completion Rate: 27.86%
Abandonments: 1,67,518
Abandonment Rate: 72.14%
Analysis: Most users abandon after the initial visit, with a high drop-off rate of 72%, indicating that many users leave before viewing products.

View Product

Elapsed time: 20h 46m
Active Users: 64,685
Completion Rate: 18.07%
Abandonments: 52,999
Abandonment Rate: 81.93%
Analysis: The majority of users who view a product abandon at this stage, with an 81.93% abandonment rate, suggesting issues in product engagement or relevance.

Add to Cart

Elapsed time: 1d 19h
Active Users: 11,686(5.03%)
Completion Rate: 54.27%
Abandonments: 5,344
Abandonment Rate: 45.73%
Analysis: Only 5% of users add items to the cart, but over half (54.27%) of users complete this step. There's still a significant drop-off before checkout, with 45.73% abandoning.

Add shipping info

Elapsed time: 20h 08m
Active Users: 6,342 (2.73%)
Completion Rate: 70.25%
Abandonments: 1,887
Abandonment Rate: 29.75%
Analysis: 70% of users proceed after adding shipping info, with nearly 30% abandoning. This could indicate friction in shipping options or form complexity.

Add payment Method

Elapsed time: 4h 36m
Active Users: 4,455 (1.92%)
Completion Rate: 62.81%
Abandonments: 1,657
Abandonment Rate: 37.19%
Analysis: After adding payment info, 62.81% of users continue. The 37.19% abandonment may be due to payment-related issues, such as method availability or perceived security.

Purchase

Elapsed time: 15h 11m
Active Users: 2,798 (1.2%)
Completion Rate: NA
Abandonments: NA
Abandonment Rate: NA
Analysis: A small percentage of users (1.2%) complete the purchase, reflecting the final conversion rate.

Conclusion

In this blog, we explored how to create a Funnel Exploration from scratch in Google Analytics 4 (GA4). We covered the process of creating funnel steps, differentiating between open and closed funnels, and breakdown data by dimensions for more detailed analysis.

We even looked into an E-commerce Purchase Journey funnel that was built from scratch. We tracked the top events, such as product views, adding items to the cart, and purchasing, to know at which touchpoint users were dropping off.

In short, if you're a marketer who wants to optimize conversion funnels or an eCommerce store owner looking to increase your sales, this exploration will provide insights that will help you to make better data-driven decisions.

How to build Free form custom report in Google Analytics 4 (GA4)

Tutorials

16 min read

How to build Free form custom report in Google Analytics 4 (GA4)

Introduction

In this article, we will learn how to create Free form exploration in Google Analytics 4 (GA4).

In Google Analytics 4, the Free Form exploration offers a more dynamic and user-friendly way to explore your data compared to previous versions.

It enables you to customize how you view and analyze your data, allowing you to organize information into rows and columns, apply filters, and create visualizations like tables, bar charts, scatter plots, and much more.

The Free form exploration is ideal for in-depth analysis, helping you detect trends, compare metrics, and fine-tune your marketing strategies based on audience behavior.

It's a powerful replacement for the older custom reports, providing greater flexibility in presenting and understanding your data.

Let’s get started creating it.

A step-by-step guide to creating a free-form custom report in GA4

Exploration tab

Step 1) Create a Free form report

In GA4, click Explore on the left side of the GA4 to begin.
Simply click on the Free Form template.

Screenshot 1: Free-form Explorations

A Free form exploration screen will open as shown in screenshot 2 below.

Screenshot 2: Free form exploration Variables and Settings

There are three columns on the exploration tab, Variable & Settings panel and Free form analysis area.

Understanding Variables and Settings in Custom Exploration Reports in GA4

In Google Analytics 4 (GA4) Free Form Exploration, you can customize your analysis by choosing from different Variables and Settings to display and filter the data you need.

Setting Up the Variables Panel in GA4 Free Form Report

Variables in (GA4) are the primary building blocks that help define the report's structure. You’ll find these on the left-hand side of the GA4 interface.

Under the Variables panel we can see the following sections:

Exploration name
Date Range
Segments
Dimensions
Metrics

Step 2) Set Exploration name

Click on the Exploration Name to give a descriptive name to the report that you want to create.

Screenshot 3: Variables > Exploration name

Step 3) Select Custom Date range

Here you can set a Custom Date range where you can select a range (i.e. 7 days, 10 days, etc.). Enter the period for the data you want to analyze.

Screenshot 4: Date Range

You get a small pop-up where you can select the date range and click on Apply.

Screenshot 5: Select the Date Range

Step 4) Add Segments (optional)

Segments are subsets of your data. They let you divide your user base into meaningful groups and compare their behavior.
Up to four segments from the Segments section of the Variables tab can be applied to the exploration
You can compare the behavior of different groups of users or visitors to your site by creating segments.

Using an existing segment

GA4 by default provides five segments.
- US: Country ID exactly matches US
- Direct traffic: First user source contains direct
- Paid traffic : First user medium contains cpc
- Mobile traffic: Device category exactly matches mobile
- Tablet traffic: Device category exactly matches tablet
From the Variables tab, you can drag the existing segments to the Segment Comparisons under the Settings panel. Additionally, you can add them by double-clicking the segment name in the Variables tab.

Screenshot 6: Add segments

Create a new segment

You can also create your own custom segments based on the dimensions and metrics in your report.
Click on “+” in the segments.

Screenshot 7: Create a new segment

Screenshot 8: Create a custom segment

Types of segments that can be created:
- User Segment: This segment focuses on a specific group of users based on their attributes or actions (e.g., users who completed a purchase).
- Session Segment: This segment focuses on sessions that meet specific criteria (e.g., sessions with a specific number of page views).
- Event Segment: This segment focuses on specific events (e.g., users who clicked on a specific button or watched a video).
After choosing the segment type, give your segment a name and a short description.
Define the conditions based on which users, sessions, or events should be included in the segment.
Select the dimension, metric, or event that you want to use to define your segment. You can combine multiple conditions using AND/OR logic.

Screenshot 9: Segment description and conditions

To do that, click on the dropdown you will get a list of Events, Dimensions, and Metrics that can be used to create segments as shown in the screenshot below.

Screenshot 10: List of Events, Dimensions, and Metrics

Edit or Delete a Segment

At times it’s required to edit or delete a segment.
Click on Edit if you want to edit the segment as shown in screenshot 8 below.

Screenshot 11: Edit Segment

Once you click on Edit a new overlay will appear as shown above, where you can modify the segments.
To remove any segment, click on the Remove button.

Step 5) Add Dimensions to Variables panel

Dimensions in GA4 represent the qualitative attributes or characteristics of your data. It allows you to break down your data and analyze it from different perspectives.

Following are the Dimension avaliable in GA4
- Attribution
- Custom
- Demographics
- Ecommerce
- Event
- Gaming
- General
- Geography
- Link
- Other
- Page / screen
- Platform / device
- Publisher
- Time
- Traffic source
- User
- User lifetime
- Video

Add new Dimensions

Click on “+” next to Dimensions.

Screenshot 12: Click the + next to Dimensions

Screenshot 13: Select Dimensions (347 dimensions available)

Double-click or Drag & drop or select the dimensions that you want.

Screenshot 14: Double-click or Drag & drop or select the dimensions

Removing the Dimensions

Screenshot 15: Removing the Dimensions

Click on the close icon as seen in the above screenshot to remove a dimension from the Variables panel.

Step 6) Add Metrics to the Variables panel

Metrics, on the other hand, are the quantitative measurements that provide insights into your website's performance. These can include user acquisition metrics, engagement metrics, and conversion metrics.
Following are the Metrics (metric name) available in GA4
- Advertising
- Custom
- Ecommerce
- Event
- Other
- Page / screen
- Predictive
- Publisher
- Revenue
- Session
- User
- User lifetime

Add metrics

Click on “+” to Add metrics, as we did for dimensions.

Screenshot 16: Add Metrics to the Variables panel

Screenshot 17: Select metrics (173 metrics available)

Just drag and drop the metrics under the “Values” section under the Settings Panel, as shown in the below screenshot.

Screenshot 18: Double-click or drag and drop metrics

Remove the metrics

Click on the close “x” icon as shown in the screenshot below to remove metrics.
This will only be removed from the Metrics section under the Variables panel.

Screenshot 19: Delete metrics

It's crucial to select the appropriate dimensions and metrics for your custom report. Having too few dimensions and metrics may not give you the insights you need, and having too many can make your report cluttered and challenging to read.

Start with a few key dimensions and metrics that are closely aligned with your business goals, and then gradually expand your report as needed.

Before creating free form reports, ask yourself the following questions:

What are your primary business objectives and KPIs?
What user behaviors or actions are you most interested in analyzing?
Which dimensions and metrics should you choose that provide valuable insights add will help you in the decision-making process?
How can you combine various dimensions and metrics to gain deeper insights about your website's performance?
By answering these questions and carefully selecting the right dimensions and metrics, you'll be able to create custom Fre form reports in GA4 that deliver actionable insights and drive meaningful business outcomes.

Configuring Up the Settings Panel for GA4 Free Form Report

Step 7) Select Free form technique

In Google Analytics 4 (GA4), a technique is the method or approach used to organize and visualize data under the Explore menu.
Six techniques are available to choose from.
- Free form
- Cohort exploration
- Funnel exploration
- Segment overlap
- Path Exploration
- User lifetime

Step 8) Select Visualization Table (default)

Visualization is a specific chart style applied to an exploration technique that you choose. Based on the visualization type, the data is shown in the analysis panel.
Here’s the list of charts you get to select:
- Table (The default visualization in the analysis panel is Table)
- Donut
- Line chart
- Scatterplot
- Bar chart
- Geo Map

Screenshot 20: Visualization type

Step 9) Add Dimensions to Rows and Columns

Rows

The Rows setting is where you add dimensions to categorize your data vertically. Each row in your report will represent a value from the dimension you select (e.g., country, device category, page title).
Key Concepts for Rows:
- Single Dimension Rows: If you select just one dimension (e.g., “City”), each row will represent data for a different city, as shown in the below screenshot.
- Multiple Dimensions in Rows: If you use more than one dimension (e.g., "City" + "Device Category"), the rows will create a hierarchy where the first dimension (City) is the primary group, and the second dimension (Device Category) subdivides it. This allows you to drill down into the data.
- Sorting: Data in rows can be sorted by metric values (ascending/descending) for easier comparison.
For example, add the Device brand dimension to Rows as shown in the below screenshot.

Screenshot 21: Add Dimensions to Rows

You can also set the row start and the number of rows to display at the same time, as shown in the below screenshot.

Screenshot 22: Select the start row number and number of rows to show

Nested Rows

Nested rows in Google Analytics 4 (GA4) are a way to structure your data in reports so that it shows hierarchical relationships between dimensions.
This feature is particularly useful when you want to break down data step-by-step for deeper insights.

Screenshot 23: Select Yes in Nested Rows

For example to understand how Nested Rows works
- Add Device Brand and Device Model Dimensions in Rows
- Add Browser Dimension in Columns
- Select Nested Row to yes
- Sort the data by Sessions ascending. Filter out (not set) data
- Now you will get the results as shown in the screenshot below.

Screenshot 24: Results grouped by Nested rows

As you can see from the above screenshot
- Device model SM-S918U, SM-S918U1 are grouped under Device Brand Samsung,
- Device model Pixel 8 pro, Pixel 7 pro are grouped under Device Brand Google

Columns

The Columns setting allows you to add dimensions horizontally, giving you a comparative view across different categories. Columns complement rows and allow side-by-side analysis.
Key concepts for Columns
- Single Dimension Columns: You can apply a dimension like Device Category to the columns. This will let you compare metrics for each device (e.g., mobile, desktop, tablet) side by side.
- Multiple Dimensions in Columns: If you add multiple dimensions, the columns will create a layered structure, offering deeper comparisons. However, using too many dimensions in columns can make the report visually overwhelming.
Below is an example of Browser Dimension added in Column

Screenshot 28: Add Browser dimension in Columns

Column Groups allow you to structure and analyze your data by breaking it down into different dimensions across multiple columns.
Essentially, column groups let you analyze multiple dimensions of data, and they are particularly useful for comparing different segments, metrics, or dimensions in a clear, structured manner.
In simple words, it’s the number of columns (groups) to display in the table. You can select 20 as the maximum show column group.
For example to understand how Column group works
- Add Device Brand Dimensions in Rows
- Add Browser Dimension in Columns
- Set Start Column Group to 1 (if you set it to 3 the data will be shown from the 3rd column)
- Set the Show column Group to 10
- Sort the data by Sessions ascending. Filter out (not set) data
- You will see 10 Columns of Browser Dimension. By default its 5 which means only five columns will be shown in the table

Screenshot 29: Show column groups

Step 10) Add Metrics to Values

The Values section is where you add Metrics from the Variables tab. These are the quantitative elements of your report, showing the actual numbers that relate to the dimensions you've set in rows and columns.
Select the metrics that you want to see in the report. A maximum of 10 metrics can be added to the Values section to be displayed in the analysis table.

Screenshot 30: Add Metric to Values and Cell type

By default, cell type is Bar Chart. It adds a small horizontal bar (blue border) at the bottom of each cell to represent the value in a visual way. The length of the bar corresponds to the value of the data in the cell.
Heat Map cell type colors the cells based on the magnitude of the values. Cells with higher values are displayed in darker shades, while cells with lower values have lighter shades.
Plain Text cell type removes any visual indicators (like bars or colors) and displays the data as simple numbers or text.

Screenshot 31: Select the Cell type

Step 11) Apply Filters

Filters allow you to include or exclude data based on certain conditions.
Key Concepts for Filters:
- Single Condition Filter: You can filter the report to only show data for a specific dimension value (e.g., only users from Country US).
- Multiple Conditions Filter: You can stack multiple conditions to refine your data further (e.g., users from the US who visited the website using a mobile device).
- Excluding Data: Filters also let you exclude specific values (e.g., exclude all traffic from a certain referral source).
- Dynamic Filters: These filters can dynamically adjust based on the data available, giving you flexibility in narrowing down or expanding the scope of the report.

You can filter by Both Dimensions and Metrics

Screenshot 32: Click on Filters

Set a condition and enter an expression that you want to filter.
- Exactly matches
- Contains
- Begins with
- End with
- Matches regex
- Does not exactly match
- Does not contain
- Does not begin with
- Does not end with
- Does not match regex
For example, if you want to exclude page_view event.
Then you need to select Dimension as Event Name, condition as exactly matches with expression page_view as shown in the below screenshot.

Screenshot 33: Select Event Name exactly matches

Step 12) Analysis Area

In Google Analytics 4 (GA4), the Analysis Area (sometimes called the Canvas) is on the right side of the settings tab where your data visualization and analysis are shown.
All the elements—such as rows, columns, dimensions, and metrics—are combined and displayed according to the chosen report type or technique.
The selected technique is added as a tab in the analysis area.

Screenshot 34: Add a new tab within the current exploration

You can add multiple exploration techniques to the analysis area as new tabs. Select the type of exploration that you want to be shown in the New Tab. A pop-up will appear as shown below.

Screenshot 35: Select Free form Exploration in new tab

Screenshot 36: Duplicate or Delete the Tab

You can switch between tabs easily.

Screenshot 37: Switch between Tabs

Examples of Free-form reports in Google Analytics 4

Analyzing Device Brands and Browsers in GA4 Freeform Reports

In this sample report, let’s analyze data of different device brands (e.g., Apple, Samsung) and browsers (e.g., Chrome, Safari) in terms of sessions, average session duration, and bounce rate, along with add-to carts, checkouts, and total revenue.

Following are the steps for creating the report.

Step 13) Create a new exploration.

Go to the Explore Tab in Google Analytics.
Click on the Blank page.
Create a new exploration.

Screenshot 38: Create a new exploration

Add exploration name as Device brand and Browser analysis.
Set the date range to This year

Step 14) Add Dimensions to Rows and Columns

Add dimensions as mentioned in the screenshot below.
- Browser
- Device brand

Screenshot 39: Add Exploration name and dimension

Now double-click, drag & drop, or select the Device brand dimension to add them to the Rows.
To keep it easy, follow the color of the dimension and metrics in the Variables panel set beside every box (dotted left border), and match the color in Rows and Columns (Green) or Values (Blue) under the Settings panel.
Select the number of rows to 500 in Show rows dropdown

Screenshot 40: Double click or drag & drop or select Dimension in rows

Now select the Browser dimension and drop in under Columns section as shown below.

Screenshot 41: Add Browser dimension in Columns

Step 15) Add Metrics to Values

Now add the following metrics by clicking the “+” icon.
- Sessions
- Average session duration
- Bounce Rate
- Add to carts
- Total Revenue
- Checkouts

Screenshot 42: Add metrics in the Variables Panel

Then move those to the Values section.
Keep the Settings > Values columns in sequence as given below
- Sessions
- Average session duration
- Bounce Rate
- Add to carts
- Checkouts
- Total Revenue

Screenshot 43: Add Metrics in Settings > Values

After adding the values shown in the above screenshot, you will get the data shown in the screenshot below.
Sort the data A-Z by the Device brand by clicking beside it.
After sorting, the first 2 rows would be blank and (not set) for Device brand. This indicates that GA4 was not able to capture data of it.
In GA4 (not set) refers to missing, undefined, or unrecognized data for a specific dimension or metric.
Blank data in Google Analytics 4 (GA4) can occur when certain data points are missing, improperly configured, or not tracked. Blank cells in reports indicate that GA4 couldn’t collect the relevant information for a given dimension or metric.

Screenshot 44: Sort the data by Device brand

To skip the blank and (not set) data of Device brand, scroll down to filters under the Settings Tab.
Select dimenion Device Brand.

Screenshot 45: Filters

Screenshot 46: Select Device Brand dimension

Select match type does not contain.

Screenshot 47: Select match type does not contain

Enter the expression (not set) and click on Apply.

Screenshot 48: Set Filter Expression to (not set)

After clicking Apply you can see that the (not set) is filtered.

Screenshot 49: (not set) data is filtered

Same as you did for (not set) perform the same steps to filter empty data.
Set the Dimension as Device brand, match type as contains, in expression, add blank space, and hit Apply.
Another filter that can be applied is to show sessions greater than zero. For that, select match type as Sessions and select condition “>” and expression “0.”
You will see the filters applied in the screenshot below.

Screenshot 50: Add Filters

After applying all filters, you will get the data as shown below.

Screenshot 51: Data after Applying Filters

Step 16) Analysis of Device and Browser Performance Report

The above free-form report shows different browsers and device brands sessions and buying journeys.
Below are the insights of it.

Sessions

As we can see from the data, Google and Apple devices have the highest number of sessions, with an average session duration of 3 minutes 57 seconds and 3 minutes 51 seconds.
Also, the bounce rate is 35.12% of Google and 31.5% of Apple respectively.

Total Revenue

As we can see again, Apple (33,995) and Google (32,863) device brands have the highest numbers of add-to-carts and checkouts, hence the total revenue.
Revenue generated from Apple devices is $633,363 and that from Google devices is $483,244.

Conclusion

In this blog, we learned about creating a Free form report from scratch. We also understood the concept of dimension and metrics, which are basic building blocks for creating free form reports.

The ability to create Free form custom reports in GA4 is a game-changing feature that empowers you to unlock the true potential of your website data.

As you continue your journey with GA4, here are some key next steps to consider:

Regularly review and update your custom reports to ensure they continue to align with your evolving business goals and priorities.
Experiment with different combinations of dimensions, metrics, filters, and segments to uncover new insights and opportunities for optimization.
Collaborate with cross-functional teams to align your custom reporting efforts with broader organizational objectives.
Stay up-to-date with the latest GA4 features and updates, as the platform continues to evolve and enhance its reporting capabilities.
Continuously evaluate the effectiveness of your custom reports and make adjustments to improve their impact and usefulness.

By embracing the power of custom reports in GA4, you'll be on your way to unlocking a new level of data-driven decision-making for your business.

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 2)

Tutorials

9 min read

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 2)

Introduction

In Part 1 of this 3 part Blog series, we covered the basics of setting up the Support Candy plugin, focusing on the following sections of the plugin

Installation and Setting up the Plugin
Tickets
Customers
Support Agents
Custom fields

Now, in Part 2 of this Blog, we will explore the following sections of the SupportCandy.

Ticket List
- Agent Ticket List
- Customer Ticket List
Email notification

Ticket List

Ticket List section is used to define the columns that appear in the Admin and Agent dashboard under Tickets → Ticket List screen and Customer Tickets list on the front end.
You can add new columns from the existing list of items or rearrange the columns order in which they are displayed.

Step 1: Agent Ticket List

List Items tab

Go to the SupportCandy plugin menu.
Click on the Ticket List → Agent ticket list → List items
Customize the column order displayed in the ticket list.

Screenshot 1: Item Lists

Adding List Items (Coulmns) to Tickelt list table

Click on Add new to Add new List items.
Select fields from the available list (e.g. date created, email address, etc) as shown in the below screenshot.
Hit Submit to save changes.

Screenshot 2: Adding New Column to Agent Ticket List table

Editing List Items

In the Agent Ticket List section, edit the column that you want to reorder.
Click Submit to apply your changes.

Screenshot 3: Edit List Items (reordering columns)

Filter Items

This screen allows us to add filter options for filtering tickets on the Agent Tickets list screen. You filter tickets based on their status, customer, subject, category, priority, and so on.

Screenshot 4: List of available filters in the Agent Ticket List

Add New Agent Tickets Filter Items

Go to the Ticket List → Agent ticket list → Filter items.
Add the filter options you want to filter tickets by, as shown in the screenshot below.
Click Submit to apply the filter settings.

Screenshot 5: Add New filter options to Agents Tickets

Edit Agent tickets Filter Items

Go to the Ticket List → Agent ticket list → Filter items. Click the Edit link beside the field.
You can only change the Load after setting
Click Submit to apply your changes.

Screenshot 6: Edit filter item for Agents Tickets

Default Filters

Default filters are filters on the ticket list. Here we choose the fields created in the above steps. These filters are available to agents.
Select the items for default filters drop down on the Ticket List page (e.g., All, Unresolved, Unassigned, Mine, Closed, Deleted, show only open tickets).
Drag and drop to reorder the fields as needed.

Screenshot 7: Agent Ticket List Default filters

Add new Agent ticket list Default Filters

Go to Ticket List → Agent ticket list → Default filters
Enter the Label, choose the Parent filter if needed
If required apply conditional logic.
Set the Enable drop-down to Yes
Click Submit.

Screenshot 8: Add new Default filter

Edit Agent tickets Default Filter

Go to Ticket List > Agent ticket list > Default filters
Click on the edit icon beside the filter name
You can only edit the Label and its Enable status.

Screenshot 9: Edit Default filters

Step 2: Customer Ticket List

Similar to Agent ticket list we can define columns for the Customer ticket list and add new filters to it.

Screenshot 10: Columns displayed in the Customer ticket list

List Items

Go to the SupportCandy plugin menu.
Click on the Ticket List → Customer ticket list → List items
Customize the column order displayed in the ticket list.

Adding List Items (Coulmns to Tickelt List Table)

Click on Add new
Select fields from the available dropdown (eg. Name, email address, priority, etc.) as shown in the below screenshot.
Hit Submit to save changes.

Screenshot 11: Custom ticket list → Add new list item

Editing List Items

In the Customer Ticket List section, edit the column that you want to reorder.
Click Submit to apply your changes.

Screenshot 12: Customer ticket list → Edit list item

Filter Items

This screen allows us to add filter options for filtering tickets on the Agent Tickets list screen. You filter tickets based on it’s status, customer, subject, category, priority, and so on.

Screenshot 13: Filter fields for Customer tickets (frontend)

Add New Customer Tickets Filter Items

Go to the Ticket List → Customer ticket list → Filter items.
Add the filter options you want to filter tickets by, as shown in the screenshot below.
Click Submit to apply the filter settings.

Screenshot 14: Add New filter options to Customer Tickets

Edit Agent tickets Filter Items

Go to the Ticket List → Customer ticket list → Filter items. Click the Edit link beside the field.
You can only change the Load after setting
Click Submit to apply your changes.

Screenshot 15: Edit filter options to Customer Tickets

Default Filters

Go to Support → Ticket List → Agent ticket list → Default filters
You can set the default filters that appear in the customer tickets screen, similar to the Agent Agent tickets screen.

Screenshot 16: Default filters in the Customer Tickets list

Adding Default Filters to Customer Tickets

Go to Support → Ticket List → Agent Customer list → Default filters
Enter the label; choose the Parent filter if needed.
If required, apply conditional logic.
Set the Enable drop-down to Yes.
Click Submit.

Screenshot 17: Adding Default Filters to Customer Tickets

Edit Customer tickets Default Filter

Go to Ticket List → Customer ticket list → Default filters
Click on the edit icon beside the filter name.
You can only edit the Label and its Enable status.

Screenshot 18: Edit Customer tickets Default Filter

Step 3: More Settings

Using the More settings tab, you can customize how the ticket list behaves for both agent and customer views.
Here are the available settings for both:

Default Sort By: Choose the default field by which tickets will be sorted.
Default Sort Order: Set the default sort order (ascending or descending).
Number of Tickets: Specify how many tickets will be displayed per page.
Unresolved Statuses: Define the statuses that are considered unresolved.
Default Filter: Set the default filter for the ticket list. Agents can adjust this further in their profile settings within the ticket portal.
Ticket Reply Redirect: Choose what happens after a reply is added to a ticket. "No redirect" keeps the customer on the current ticket screen, while "Ticket list" redirects them back to the ticket list screen.

Agent view

Screenshot 19: More Settings Agent View

Customer view

Screenshot 20: More Settings Customer View

Advanced Tab

You can define a closed ticket status group, where tickets with statuses in this group are treated as closed.
Additionally, you can configure the default auto-refresh behavior for the ticket list. If enabled, the ticket list will automatically refresh every 10 seconds by default until you turn off this feature from the ticket list settings.

Screenshot 21: Advanced Tab

Email Notifications

Using this menu, you can set up email notifications.

Step 4: General Settings

Go to the Email Notifications section under the Support menu.

Screenshot 22: Email Notification → General settings

Here, you can configure the following email settings:
- From name – Sender's name.
- From email – From which email address will the email be sent
- Reply To – When a user replies to a notification, emails will be sent to the specified email address. If no address is provided, the "From" email address will be used as the reply-to address.
- Number of emails per cron job – Set the maximum number of emails that should be sent in a batch.
- Blocked Emails – Specify email addresses that should not receive email notifications.
- Attachments in notifications – configure to send emails with attachments (links or actual files )

Step 5: Ticket Notifications

In this section, you can edit or create email notification templates.

Screenshot 23: Ticket Notifications

Adding New Ticket Notification

Screenshot 24: Add New Ticket Notification

Click on Add New.

Add Title and Select a Trigger
Following are trigger events that can be used to send email notifications
- Cricket new ticket: When a new ticket is created
- Ticket reply: When a ticket receives a new reply, relevant parties are notified to the new response.
- Change ticket status: When the ticket status changes, for example, from Open to Awaiting customer reply, the activation occurs.
- Change ticket category: When the category of the ticket is modified
- Change ticket priority: When the priority of a ticket is changed
- Change assignee: When the assigned agent of the ticket is changed, it will trigger a notification to the new assignee.
- Delete ticket: When a ticket is deleted,
- Submit private note: When a private note is added to a ticket

You must change the notification status to Enabled. Otherwise, this email notification won’t be sent.
You can use macros or placeholders within the Subject and Body.

Editing Ticket Notifications

Click on Edit button beside the template name for which you want to edit.
You can manually add recipients in To address (required), CC, and BCC using the following settings
- General Recipients
- Agent Roles
- Custom Email Addresses (one per line)

Screenshot 25: Editing Ticket Notifications

You can Insert Macro in the email body
Click on the Insert Macro button to view a list of available macros.
The list will include placeholders for various types of data, such as customer name, status, date created, etc.
Select the macro you wish to insert. For example, {{customer_name}} can be used to insert the customer's name dynamically.

Screenshot 26: Insert macro current user name

After clicking on the Insert button, the user name macro has been added under the body, as shown in the below screenshot.

Screenshot 27: User name Macro

Conditions

You can add And/Or conditions, and when they are met, then only an email notification is sent

Let’s say that you want to send a notification for ticket change status to the Awating agent reply.
Click on Add New under the Email Notifications → Ticket Notifications section. Set the trigger to Change Ticket status
Under the Conditions section, set the Status equal Awaiting Agent reply.
Add the subject, body, and email addresses to which this notification should be sent.
Click Submit. Just now you configured that this notification should be sent when the status is Awating agent reply.

Sccreenshot 28: Setting Conditions in Ticket Notifications

Step 6: User Registration OTP

This screen is to configure the email template for the Default registration of the supportcandy plugin. You can customize the email template that is used to send the OTP.
The user registration OTP is a single-use password that is sent to verify the user's email address when using the “Default” registration form.
Within the body section of the setting, you can utilize macros (placeholders) in the email subject and body as shown below.

Screenshot 29: User Registration OTP

Step 7: Guest Login OTP

To allow guest users to access their ticket list, you can activate an OTP (One Time Password) login.
Keep in mind that OTP login is functional only when guest tickets are enabled. You can turn on this feature by navigating to Support → Settings → General Settings → Page Settings.
Under the Guest Login OTP setting, you have the option to change the email template used for sending the OTP.
On the same setting page, you can insert macros (placeholders) into the email subject and body.

Screenshot 30: Guest Login email notification template for OTP

Conclusion

In this blog (Part 2 of the 3 Part Blog series), we walked you through the Ticket List, Customer Ticket List, Agent Ticket List and Email Notifications Sections.

That’s it for this article.

In the upcoming Part 3 of this series, we'll explore even more advanced features to take your customer support to the next level.

If you need any help related to WordPress, contact our WordPress experts.

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 1)

Tutorials

12 min read

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 1)

How to Create a Staging Site in WordPress using WP Staging plugin

Tutorials

4 min read

How to Create a Staging Site in WordPress using WP Staging plugin

Introduction

When managing a WordPress site, whether it's for blogging, e-commerce, or any professional use, ensuring a smooth, uninterrupted user experience is a must. Here, a staging site turns into a vital resource for WordPress users. By acting as a testing ground, a staging site enables developers and website managers to make and test changes without having an impact on the live website. This is especially crucial when updating WordPress core, themes, or plugins, as these changes may cause incompatibilities or break your website.

In essence, a staging site acts as a critical step in a professional web development workflow, enabling WordPress users to manage and implement website changes systematically and securely.

Why is a staging site important?

Is a staging site really necessary? The importance of a staging site in the context of web development, particularly for WordPress sites, cannot be overstated. A staging site serves several critical roles in ensuring the smooth operation, security, and continuous improvement of a website. Here are the key reasons why a staging site is important:

Safe Testing Environment:

A staging site provides a safe and isolated platform where all types of changes, updates, and new features can be tested without affecting the live website. This means that any errors, bugs, or issues can be identified and fixed in the staging environment without risking the performance or functionality of the live site.

Prevents Downtime:

By using a staging site to test changes, you significantly reduce the risk of your live site going down due to a faulty update or incompatible plugin. Downtime can be costly, especially for e-commerce sites or businesses that rely heavily on their online presence.

Quality Assurance:

Staging sites allow for thorough testing and quality assurance before changes are made live. This includes checking for visual consistency, functionality, compatibility with different browsers and devices, and the overall user experience.

Update Verification:

WordPress regularly releases updates for its core software. Also, themes and plugins are regularly updated. A staging site enables you to test these updates to ensure they work seamlessly with your site’s customizations and existing setup.

Secure Development:

Developing directly on a live site can be risky, as it can expose your site to security vulnerabilities. A staging site ensures that development is done in a secure environment, reducing the risk of security breaches.

Collaboration and Feedback:

For teams, a staging site offers a collaborative environment where developers, designers, content creators, and other stakeholders can work together. It’s easier to gather feedback and make iterative improvements without disrupting the live site.

Performance Testing:

Staging sites allow you to test the performance impact of your changes. This is particularly important for large-scale sites, where even minor changes can have a significant impact on loading times and overall site performance.

Backup and Rollback:

In case something goes wrong during the update process, having a staging site means you have a recent backup of your site. This makes it easier to roll back changes if necessary.

Setting Up a Staging Site

Everything is easy in WordPress using plugins, isn’t it? Let’s discover how we can use the WP Staging plugin to set up a new staging site.

Step 1: Search and install the WP Staging plugin

Search and install the WP Staging plugin on your WP Dashboard. After installation, activate the plugin.

Screenshot 1: Install WP Staging Plugin

Allow and continue to enable security alerts.

Screenshot 2: Enable security alerts.

Step 2: Create a Staging Site

Click on Skip and Start WP Staging link. You will be redirected to Staging sites submenu.

Screenshot 3: Skip and Start WP Staging

Screenshot 4: Click on Create Staging Site

Next, click on “Create Staging Site”. Enter the name of the staging site that you want to create. (This is an optional step).
Here, the database tables and files are selected by default. However, you can unselect some tables or files if you don't want to clone them.

Screenshot 5: Selecting Database Tables

Screenshot 6: Selecting Files

Click on “Start Cloning.” A display would show the current status of the staging site's progress.

Screenshot 7: Staging site creation

When the data is processed, the staging site is ready and the URL is displayed.

Screenshot 9: Staging Site Created Successfully

If you click on Show Logs, you can see the entire process of logging that was done to create the staging site.

Screenshot 10: Logos

When you click on the URL of the staging site, you’ll be required to login to the staging site. Use the same credentials as your site.

Screenshot 11: Login Page of Staging Site

Enter the details, and your staging site is ready to use! You can access your staging site at any time from WP Staging.

Screenshot 12: Access your staging site from WP Staging

Conclusion

In conclusion, setting up a staging site is a crucial step in website development and maintenance.

The WP staging plugin simplifies the process, making it accessible even to those with limited technical knowledge. Remember that a staging site is your best ally in ensuring that your live website runs smoothly, efficiently, and without interruptions.

How to Add a Chatbot to Your WordPress Website Using Tidio Plugin

Tutorials

6 min read

How to Add a Chatbot to Your WordPress Website Using Tidio Plugin

Have you ever wondered how certain websites manage to hold your interest? Frequently, a simple yet incredibly useful tool like a chatbot makes all the difference. Chatbots do more than just respond to queries; they also improve the intelligence of your website by offering real-time assistance and retaining users.

This is essential for converting infrequent browsers into devoted patrons. Adding a chatbot to your WordPress website is simple and efficient when you use the Tidio plugin.

We are going to demonstrate to you today how to use Tidio to add a chatbot to your WordPress website. Anyone who wants to improve customer interactions without getting bogged down in technical intricacies should definitely check out this tutorial.

You may quickly get a fully functional chatbot up and running on your website by following our easy-to-follow steps. Are you prepared to begin? Let's get started and improve the invitingness of your website for visitors!

Why Add a Chatbot to Your Website?

Adding a chatbot to your website can transform how you interact with visitors, providing a seamless blend of automation and personal touch that's essential in today's fast-paced digital landscape. Whether you're running an e-commerce site, a blog, or a corporate website, a chatbot serves as your front-line communication tool, instantly engaging with users and helping to guide them through your site.

Here are a few key reasons to consider adding a chatbot to your website:

Instant Customer Support: Chatbots are available around the clock to answer questions and resolve issues. They can handle multiple inquiries at once, ensuring that your visitors receive immediate assistance, any time of the day or night.

Increased Engagement: By initiating conversations and responding promptly, chatbots keep users engaged. This interactive experience can significantly reduce bounce rates and keep visitors on your site longer.

Lead Generation and Qualification: Chatbots can gather information by asking relevant questions, helping you capture and qualify leads automatically. This makes your sales funnel more efficient and ensures that your team focuses on the most promising leads.

Cost Efficiency: Automating customer support with chatbots can reduce the workload on your human staff and cut down on operational costs. By handling routine inquiries, chatbots free up your team to tackle more complex issues.

Personalized User Experience: Chatbots can deliver personalized experiences by recommending products, services, or content based on the user's behavior and past interactions. This tailored approach often leads to higher satisfaction rates and increased sales.

Scalability: As your business grows, a chatbot scales with it. You won't need to hire more staff to manage increased traffic, as the chatbot can efficiently manage thousands of conversations simultaneously.

Integrating a chatbot into your website isn't just about keeping up with trends; it's about making a strategic move to improve user interaction, streamline your service, and enhance overall user satisfaction. With these benefits, a chatbot becomes an invaluable asset to any digital business strategy.

Step 1: Installing Tidio Chat Plugin

Go to your WordPress Dashboard and click on Plugins.
Go to Add New Plugin.
Search for the Tidio plugin and click on Install.
Click on Activate.

Screenshot 1: Click on Add New Plugin

Screenshot 2: Install and Activate the Plugin

Step 2: Creating Free Tidio Account

On activating the plugin, you can see the Tidio Chat widget on your dashboard.
Clicking on the widget, you’ll be prompted to create an account for Tidio. They provide free trial of 7 days.
Click on Get Started.

Screenshot 3: Create a Free Account

Step 3: Setting Up Tidio Plugin

After creating the account, you’ll be redirected to Tidio’s panel to enter the required details.
Start by entering the name and your job role.
Select how you want to interact with the customers.

Screenshot 4: Enter Your Initial details

Click on Next to continue to enter the details about your company.
You are required to fill in the details about the company’s industry, size, the number of inquiries your company gets, and the platform you used to build your website.
Select the appropriate option and click on Next.

Screenshot 5: Enter Company’s Details

Now enter general details about how you want to use Tidio, how you came to know about it, and other such details.
Click on Start to begin.

Screenshot 6: Enter Generic Details About Tidio

Step 4: Final Setup

Tidio chat can be configured with four different ways as per your needs
- Enable Lyro - AI Support Agent
- Configure Helpdesk
- Build Flows
- Offer live support
- Talk to customers in real time. Reply to live chat, WhatsApp
Activate the AI support for chats to minimize human intervention.

Screenshot 7: Enable AI Support Agent

Click on Build Flows to automate conversations.

Screenshot 8: Enable Build Flows

Click on Set up Campaigns to send custom email campaigns to your customers.

Screenshot 9: Set Up Campaigns

Click on Configure Helpdesk to handle support tickets.

Screenshot 10: Configure Helpdesk

Click on Offer Live Support to talk to the customers in real-time.

Screenshot 11: Offer Live Support

Select the configuration you want and click on Let’s Go to start with Tidio. You will be redirected to the WordPress dashboard.
That’s it your chat is set up easily on your website. Visit the frontend of your website

Screenshot 12: Tidio on your Website

Step 5: Advanced Configurations

Your website Dashboard Tidio widget will show the following screen.

Screenshot 13: Tidio Panel

Click on the Open Tidio Panel for advanced configurations.
You’ll be redirected to the Tidio Dashboard.

Screenshot 14: Tidio Dashboard

This dashboard gives you all the insights about your chats.
Total leads acquired, live visitors on page, customer services, number of flows etc.

Inbox

Go to Inbox to get insights about chats. You can get details about your live conversations, support tickets, and views on social media.

Screenshot 15: Tidio Inbox

Lyro AI Chatbot

Configure Lyro AI Chatbot by providing URL of your website. Go to Knowledge hub to setup.

Screenshot 16: Go to Lyro section

Screenshot 17: Configure Lyro Chatbot

You can add questions and answers manually to train the chatbot.

Screenshot 18: Add Q&A

Flows

Add flows for easy automated conversations.
Flows are pre-designed, automated messages that engage your audience at the right time.
It provides three templates
- Handle missed conversations: It helps you collect emails and build an e-mail list so that you can reach out later and
- Keep in touch on weekends: This helps improve customer support experience on Saturdays and Sundays when you're offline.
- Leaving the page: Decrease your bounce rate. Message every visitor who leaves your website.

Screenshot 19: Add Flows

Screenshot 20: Choose your Support Flow

Customers

Click on the “Customer” icon on the left menu to see all your live visitors.
As you can see in the below screenshot, all the live visitors.

Screenshot 21: Customers (Now live)

Set up operating hours

Go to the Settings tab on the left
Click on the Operating Hours tab
Toggle the switch to enable operating hours. Configure it as per your requirements.

Screenshot 22: Set up operating hours

Everything you need is now set up, and your Tidio Chat is ready to use!

Conclusion

And there you have it! Adding a chatbot to your WordPress site using the Tidio plugin is not just a smart move—it’s a game changer for enhancing user interaction and streamlining customer service. With the detailed steps provided in this guide, you're well on your way to providing a more engaging and responsive experience for every visitor.

Whether you're looking to boost sales, improve customer support, or simply make your site more dynamic, a chatbot is a versatile tool that brings numerous benefits. So why wait? Dive into the world of automated customer interactions and see the difference it makes.

How to Secure Your Enterprise WordPress Website Using Wordfence (Part 2)

Tutorials

9 min read

How to Secure Your Enterprise WordPress Website Using Wordfence (Part 2)

Introduction

This blog is Part 2 of our series, exploring how the Wordfence plugin can help secure your enterprise website. In the previous post, Part 1, we installed and configured the plugin, understood the Wordfence Dashboard, and configured the Wordfence Firewall.

In Part 2, we discuss the following sections of the Wordfence plugin,

Wordfence Scan
Wordfence Tools
Wordfence Login Security

Wordfence Scan

Step 1: Scan

Wordfence checks your WordPress site for hidden threats like malware, backdoors, and suspicious URLs, all in one scan.

Once you have configured the firewall, go to Scan.

Screenshot 1: Scan

The dashboard of Scan shows various aspects such as Scan Type, Malware signatures, Reputation checks, Scan options, and Scheduling.
It also displays a detailed report of your scan.

Screenshot 2: Wordfence Scan Dashboard

Step 2: Manage Scan

Click on Manage Scan on the Wordfence Scan dashboard.

Screenshot 3: Manage Scan

Click on Scan Scheduling to Enable or Disable Wordfence Scheduled Scans. By default, it is enabled.
You can choose either automatic scans scheduled by Wordfence or scan manually (premium feature).

Screenshot 4: Scan Scheduling

After you have selected how to schedule your scans, you can choose the Basic Scan Type options.
Depending on the type of your requirement, you can select the type of scan:
- Limited Scan: Designed for entry-level hosting, this plan provides a basic level of threat detection without using many server resources.
- Standard Scan: Selected by default, this option is recommended by Wordfence for all websites.
- High sensitivity: This is a more in-depth scan ideal for those who believe their site may have been breached, but be aware it might identify some safe actions as potential threats.
- Custom Scans: Automatically chosen after you adjust General Options for this site.

Screenshot 5: Basic scan Type Options

After you have chosen the Basic Scan Type option, go to General Options.
Here you can choose what to scan on your website.
This includes Spamvertising Checks, Spam Checks, Blocklist Checks, Server State, File Changes, Malware Scans, Content Safety, Public Files, Password Strength, Vulnerability Scans, and User & Option audits.
Some options are selected by default, but you can customize it further by choosing the options that best fit your requirements.

Screenshot 6: General Options

After you have selected General Options, go to Performance Options.
Here you can optimize the server performance by choosing to Use Low Resource Scanning, Limit the number of issues sent in the scan results email, Time limit that a scan can run in seconds (by default it is three hours), How much memory should Wordfence request when scanning (256 by default), and Maximum execution time for each scan stage.

Screenshot 7: Performance Options

Go to Advanced Scan Options to:
- Exclude files from scan that match these wildcard patterns: If you have large, safe files like backups that Wordfence keeps getting hung up on, this feature lets Wordfence to ignore certain file extensions.
- Additional scan signatures: This section lets you define custom scan signatures that the scanner will use to identify malware during checks. However, this is an advanced option that only works well if you understand how malware signatures are built and how they function.
- Use only IPv4 to start scans: Check this if you want to avoid connecting your site to IPV6.
- Maximum number of attempts to resume each scan stage: Internal connection problems can make Wordfence scans fail. It retries 2 times by default (up to 5). You can disable retries by setting it to 0.

Screenshot 8: Advanced Scan Options

Step 3: Manage Options (Reputation Check)

Wordfence's Reputation Check feature monitors your website's reputation on known databases of compromised and dangerous sites. It checks if your website is listed on three blacklists, and alerts you if your domain or IP is blacklisted. (Premium Option)
Under the status circle of Reputation Check, you’ll see Manage Options.
This will take you to the General Options covered above under Manage Scan Step 8.

Screenshot 9: Manage Options

Step 4: Scan Options and Scheduling

Wordfence's Scan Options and Scheduling dashboard allows users to set up automatic or manual scans.
Clicking on this link will take you to Scan Scheduling, Scan options and Scheduling already covered above in Manage Scan.

Screenshot 10: Scan Options and scheduling

Step 5: Start New Scan

After you are done customizing, you can Start New Scan.
By default, scans are enabled to run automatically. The free version of Wordfence runs a quick scan every day and a full scan every 72 hours, while the Premium version runs a quick scan daily and a full scan every 24 hours.
However, if you wish to scan again, you can select this option.

Screenshot 11: Start New Scan

Step 6: Scan Stages

Wordfence scans your site in stages, with icons showing progress and any problems found. A blue check means all is clear, while a yellow warning means something needs attention.
The stages include Spamvertising Checks, Spam Checks, Blocklist Checks, Server State, File Changes, Malware Scans, Content Safety, Public Files, Password Strength, Vulnerability Scans, and User & Option audits.
The settings for these can also be found in General Options under Manage Scan.

Screenshot 12: Scan Status

Step 7: Handling Scan Results

The result of a Wordfence scan will vary depending on what it finds on your website.
The report shows Results Found and Ignored Results (false positive results).
It also shows the numbers for Posts, Comments, & Files, Themes & Plugins, Users Checked, and Results Found.
You can take action by clicking on Delete all Deletable Files and Repair all Repairable Files.

Screenshot 13: Scan Result

Wordfence Tools

Step 8: Tools > Live Traffic

Go to Wordfence> Tools.

Screenshot 14: Tools

The screen will display Live Traffic.
Wordfence "Live Traffic" gives you a real-time view of your website activity, including things missed by analytics tools. It tracks everything happening at the server level, so you see visits from bots, crawlers, and even hack attempts, not just human visitors with Javascript enabled.

Screenshot 15: Live Traffic

Select Live Traffic Options to choose which traffic to log or ignore some types of visitors, and other options.
This functionality provides granular control over traffic logging. You can define which visitor interactions are recorded based on access level, user credentials, IP address, or browser type.
You can choose options like Don't log signed-in users with publishing access, List of comma separated usernames to ignore, Browser user-agent to ignore, and others (refer to screenshot below).
For high-traffic websites where real-time monitoring might not be practical, the Traffic logging mode can be adjusted to Security Only to prioritize security-related events.
You can also check to Display Live Traffic menu option.
Click on Save Changes at the end.
Click on Restore Defaults to restore the default options.

Screenshot 16: Live Traffic Options

You can filter Live Traffic data based on various filters like All Hits, Humans, Crawlers, Registered Users, Page Not Found, Blocked by Firewall, and others.

Screenshot 17: Filter Traffic

Check Show Advanced Filters to customize your Live Traffic data.
In this, you can have advanced filters like Username, Google Bot, IP, URL, and many others. You can also add your filter by clicking on Add Filter.
You can set the time period for which you want to view the traffic.
Select the Group By to view the traffic according to the option selected.

Screenshot 18: Advanced Filters, Select Date, and Select Group

Screenshot 19: Add Filter

Step 9: Tools > Whois Lookup

Whois Lookup helps to identify the owner behind an IP address or domain name. This is particularly useful for investigating suspicious website visitors or malicious activity.
To utilize this feature, simply enter the desired domain name and initiate the lookup process. This will provide details such as registration date, expiration date, registrant information, and potentially associated contact email addresses.

Screenshot 20: Whois Lookup Tool

Step 10: Tools> Import/ Export Options

Go to Import/ Export Options to establish cloning across multiple sites.
You can either Export this site's Wordfence options for import on another site or Import Wordfence options from another site using a token.
The export and import process generates a token, a unique alphanumeric string. This token should be treated with the same level of confidentiality as your login credentials.
Unlike other systems, Wordfence tokens are permanent, ensuring the continued availability of your exported settings.

Screenshot 21: Import/ Export Tool

Step 11: Tools> Diagnostics

Go to Tools> Diagnostics to access information when you are facing issues with Wordfence and need troubleshooting.
This guide assists in troubleshooting conflicts, configuration issues, or compatibility problems with plugins, themes, or your hosting environment.
You will have access to information about Wordfence installation, current WAF configuration, PHP version, Database version, status of installed themes, and many others.
You can choose to Export or Send Report by Email.
Click on Expand All Diagnostics to view all information at once.

Screenshot 22: Diagnostics Tool

Wordfence Login Security

Step 12: Login Security

Go to Wordfence> Login Security for 2-factor Authentication.

Screenshot 23: Wordfence> Login Security

This option enables Two-Factor Authentication for your Wordfence.
To add your account in the authenticator app, Scan the QR code displayed, or enter the code.
The authenticator app will generate a code, which is to be entered to verify and activate Two-Factor Authentication.
If you face any issues logging into your authenticator app, Wordfence provides you with 5 recovery codes. Each of these codes can be used only once.
Click on Activate.

Screenshot 24: Two-Factor Authentication

Go to Login Security> Settings.
This Login Security page offers functionalities to enhance login security, including two-factor authentication (2FA) and reCAPTCHA.
The report begins with a User Summary, providing a breakdown of users who have activated two-factor authentication (2FA) and those who haven't.

Screenshot 25: User Summary

By default, only admins (or super-admins in multisite) can use 2FA. You can extend it to other roles:
- Required: Enforces 2FA for specific roles (with a grace period).
- Optional: Allows, but doesn't require, 2FA for certain roles.
- Disabled: Prevents 2FA usage for a role (except Admin).
Users manage their own 2FA devices through a dedicated "Login Security" menu (visible when enabled for their role).
2FA enforcement includes a grace period for required roles, preventing immediate lockouts.

Screenshot 26: 2FA Settings

Check WooCommerce Integrations if you have the WooCommerce plugin activated.

Screenshot 27: WooCommerce and Custom Integrations

Check Enable reCAPTCHA on the login and user registration pages box for enhanced security and enabling reCAPTCHA.
Activate by entering the site key.
For optimal balance, fine-tune the captcha's threshold (default 0.5) based on your site's score history.

Screenshot 28: reCAPTCHA

The General settings have the inclusion of Allowlisted IP addresses that bypass 2FA and reCAPTCHA, NTP Protocol (Network Time Protocol), last login timestamp, and deletion of security settings and of 2FA upon deactivation of the plugin.

Screenshot 29: General Settings

Wordfence All Options

The All Options section of Wordfence includes Wordfence Global Options, Firewall Options, Blocking Options, Scan Options, and Tool Options.

Screenshot 30: All Options

Conclusion

By now, you have gained insight on why security is important to your enterprise website, and how Wordfence is a good fit for it. With its comprehensive features and user-friendly interface, Wordfence empowers you to take control of your website security and keeps your enterprise website well-protected.

We hope this guide has equipped you with the knowledge and resources to secure your website. Remember, website security is an ongoing process. Stay vigilant, keep your software updated, and leverage tools like Wordfence to maintain a strong defense against ever-evolving threats.

How to Secure Your Enterprise WordPress Website Using Wordfence (Part 1)

Tutorials

10 min read

How to Secure Your Enterprise WordPress Website Using Wordfence (Part 1)

WordPress

7 min read

How to Create a Multilingual Enterprise WordPress Website Using Weglot

WordPress

10 min read

How to choose the best Enterprise WordPress agency for your business

How to Create a Survey in WordPress Using Quiz and Survey Master Plugin

Tutorials

8 min read

How to Create a Survey in WordPress Using Quiz and Survey Master Plugin

Capturing the attention of your target demographic while simultaneously collecting useful data is a must in the modern digital era. Any content producer or business owner's toolbox should include surveys since they provide a direct route to understanding your audience's preferences, wants, and opinions.

You can engage your audience on a deeper level and empower them to make well-informed decisions by adding surveys to your WordPress site. Using the powerful capabilities of the Quiz and Survey Master plugin, this tutorial will show you how to implement surveys in WordPress.

Note: The Quiz and Survey Master plugin as the name suggests, can be configured for conducting quizzes and surveys. This article discusses the configuration of surveys only.

Step 1: Install and Activate the Plugin

Log in to your WordPress dashboard.
Navigate to Plugins > Add New.
In the search bar, type “Quiz and Survey Master”.
Once you find the plugin, click on Install Now.
After installation, click Activate to enable the plugin on your WordPress site.

Screenshot 1: Install the Quiz and Survey Master Plugin

Step 2: Create a New Survey

Go to QSM > Quizzes/Surveys in your WordPress dashboard.
Click on the Create New Quiz/Survey button.
Enter a name for your survey in the Quiz Name/Survey Name field.
Optionally, you can add a description of your survey.
Click Create Quiz/Survey to proceed.

Screenshot 2: Click on ‘Create New Quiz/ Survey’

Select the theme for which you want to create your quiz/ survey. There are also paid themes available to choose from.

Screenshot 3: Select Theme

After selecting your theme, you must enter Quiz Settings' details.
Select the form type Survey to create a survey. This is an important step for creating and configuring surveys
Further options, such as enabling a contact form, setting a Time Limit, requiring user login, enabling a comment box, and others, are set to “No” by default. You can choose “Yes” or options that fit your requirements.

Screenshot 4: Enter the Quiz Settings Details

You can choose other add-ons such as Quiz Navigator, Quiz Protector, Advanced Question Types, and many more. These add-ons come with an additional price, which can be viewed by clicking on View Details.
Click on Create Quiz to proceed further.

Screenshot 5: Choose add-ons (optional)

Step 3: Add Questions to Your Survey

After creating your survey, you'll be redirected to the Questions tab.
Click on ‘Type Your Question Here’.
Code tags in question descriptions can display HTML, CSS, and JS code snippets. Using code snippets prevents the system from executing the code and interfering with the website's code.
The WordPress Visual editor lets you add photos, audio, video, documents, spreadsheets, and more from your Media Library and customize the Question using formatting options. Click the Text tab on the editor to add your question in HTML.
Choose the question type from the dropdown menu on the right side (e.g., Multiple Choice, True/False, Open Answer).
Enter the question in the Question text area.
Feed the answers to your questions. Answers depend entirely on the Question Type.
Set additional parameters for the question, such as required answers or hints.

Screenshot 6: Questions Tab: Enter your Questions

You can also feed information for correct answer info, the type of comment box you want, and add a Hint if you want. At the end of the quiz, the user can receive a thorough explanation of the correct answer through the correct answer info block. The results page shows the right answer.

Screenshot 7: Select various fields

Set the featured image if you require it.
You can Add a new category for your questions too.
Click Save Question to add it to your survey.

Screenshot 8: Click on Add New Question

Click on Add Questions and repeat these steps to add more questions to your survey.
Clicking the “Create New Page” option at the bottom of the question tab generates a new page for questions and responses. A quiz/survey with numerous question pages will show Next & Previous buttons to switch between pages.

Step 4: Gathering User Information

After setting up the questions and answers, create a contact form to collect user contact information or other details before or after taking the quiz/survey.
Go to the Contact tab.
Enable the field and enter the Label Name.
Choose the Form Options according to when you want to display the form.
Click on Save Form.

Screenshot 9: Gather User Information Through Contact Form

Step 5: Editing Text Sections

Once we have some quiz questions, we can alter some of the text users will see and interact with.
Go to Text tab.
The text tab is divided into 3 subtabs:
- General: You can choose from several different messages in this drop-down menu.

Screenshot 10: Text > General Tab

QSM Variables: This includes factors that have already been set for the Results Page and Email Pages.

Screenshot 11: Text > QSM Variables Tab

Labels: Some Label options let you change things like the “Validation Messages” and the “Default Text” shown on the Quiz Navigation Buttons.

Screenshot 12: Text > Labels Tab

Screenshot 13: Text > Validation messages Tab

Screenshot 14: Text > Other Tab

Screenshot 15: Text > Legacy Fields Tab

Step 6: Basic Settings in the Options Tab

It's time to change the choices now that we've added our questions and written some text.
Go to the Options Tab.

Screenshot 16: Options > General Settings Tab

This tab involves various settings that fall under the categories as follows: General, Quiz Submission, Display, Contact Form, and Legacy.
These are basic settings that allow you to select quiz type, set how to display results, set the position of the contact form, set what information to gather from users, etc.

Screenshot 17: Options > Quiz Submission Settings

Screenshot 18: Options>Display Settings

Screenshot 19: Options> Contact Form

Screenshot 20: Options> Legacy Settings

Step 7: Setting up Emails

After users submit the surveys, you may need to send them emails with their answers.
Go to the Emails Tab.
We can run a function with Template Variables.
Click on Insert Template Variables at the bottom-right.
Clicking the button opens a window with all the Template Variables you can use to send emails. These variables start a task when used.

Screenshot 21: Click on Insert Template Variables

Screenshot 22: Email Template Variables

Click on the Variable you need. It gets copied automatically, and you can paste it into the email text section. Customise and add variables to improve the email experience. %QUESTIONS_ANSWERS_EMAIL% is set by default.
To add extra content, use template variables in the Email Body to include Amount Correct, User Name, Points Scored, Average Category Points, Correct Score, Category Points, Category Average Points, Quiz Name, and more.
Click on Add Additional Condition to add more conditions to your email.

Screenshot 23: Additional Condition for Email

Step 8: Result Page Settings

This page is shown after the user submits the survey.
This is quite similar to the Emails page we’ve seen earlier.
Go to the Results tab.
We can run a function with Template Variables.
Opening the Results Tab, the Insert Template Variables button appears in the bottom-right corner.
Once you click the button, a new window appears with all the Template Variables you may use to configure quiz results. These variables start a task when used.

Screenshot 24: Insert Template Variables for Results Page

Screenshot 25: Template Variables in Results Page

Navigate to the Conditions section on the QSM Results Page.
Click on the "Category Name" drop-down menu.
Select the desired category from the options listed.
Choose between "Total points earned" or "Correct score percentage" from the available options.
Select a condition to apply to the output display.
This allows you to showcase various outputs tailored to users whose results meet the specified category criteria.

Screenshot 26: Adding Additional Condition in the Results Page

Step 9: Styling Your Survey

The Style tab is designed to help users customize the appearance of their quizzes and surveys.
Select the Theme you want for your survey from the Themes section.
You can add Custom CSS to customize your survey.
The Legacy section will soon be removed from the plugin as specified in the screenshot below.

Screenshot 27: Styling Your Survey>Selecting Theme

Screenshot 28: Legacy Section to be Removed

Step 10: Adding Survey to your Website

There are three ways to add a survey to your website:

By Pasting Shortcode on Page/Post
- Copy the shortcode from QSM > Quizzes/Surveys > Shortcode. Paste it into your page or post. The shortcode displays the survey or provides a link to it.

Screenshot 29: Click to Add Shortcode

Screenshot 30: Embed the Shortcode

By Using Gutenberg Block
- Insert the quiz or survey on a page or post with the Gutenberg editor by searching for the “QSM Block”. Select your Quiz/Survey ID from the dropdown in block settings and update.

Screenshot 31: Add Survey Through Gutenberg Block

Now, you can select the survey to be added from block settings.
Click on Update to add the survey to your website.

Screenshot 32: Selecting Survey from Block settings

Click on View Post to view the survey embedded in your post.

Screenshot 33: Survey Embedded in Website

Conclusion

Crafting surveys in WordPress using the Quiz and Survey Master plugin is a streamlined process that empowers you to engage deeply with your audience and gather vital insights. This guide explored the steps necessary to design, customize, and deploy your surveys effectively. By leveraging this powerful tool, you can enhance your connection with your audience, make data-driven decisions, and ultimately drive your WordPress site's success forward.

How to easily add a Mega Menu to your WordPress website

Tutorials

6 min read

How to easily add a Mega Menu to your WordPress website

Introduction

Mega menus are powerful, innovative menus that make website navigation visually appealing and dynamic. Multi-column layouts, rich media, and the ability to organize large amounts of content distinguish Mega Menus from dropdown menus.

Mega Menus offers a more immersive and efficient navigation experience than mere links. Mega Menus are powerful, innovative navigation menus that make website navigation visually appealing and dynamic.

Enhanced navigation efficiency, visual hierarchy and organization, enhanced user experience, and aptly showcasing featured content are some of the key features of implementing a mega menu.

Let’s learn how to use the mega menu on your website. The Max Mega menu plugin is the most extensively used; we will learn about its usage in this blog post.

Installation and Usage of Max Mega Menu Plugin

First, install and activate the Max Mega Menu plugin. You can do it either by searching for the plugin in the “Add New Plugin” screen or by downloading it from the WordPress repository and uploading the zip file.

Screenshot 1: Install and activate the Max Mega Menu plugin.

A. Menu Locations

Once activated, navigate to Mega Menu > Menu Locations to view all of the locations where a mega menu can be added.

Screenshot 2: Max Mega Menu Menu Locations

1. General Settings (For menu Locations)

This is the first sub-tab under the “Menu Locations” tab. A list of all the menu locations supported by your theme is shown here.

Here, you can enable the locations for which you want to use the Mega Menu. To do this, click on the location to expand the accordion, then select the "Enabled" option as shown in the screenshot 3 below to enable the Max Mega Menu for this menu location.

Screenshot 3: Enabling Primary Menu

Along with it, there are various options that you may choose to modify under the “General Settings” sub-tab.

For example, modifying the "Event" will cause the mega menu to appear.

The mega menu can only be triggered by the visitor hovering their mouse over it for a few seconds, as it is configured by default to be "Hover intent." For the majority of WordPress websites, this is sufficient; however, you can also select "Hover" or "Click" by opening the "Effect" dropdown menu.

When you select the "Click" event trigger, the user will have to click to navigate the mega menu. This can be helpful if you're concerned that guests could accidentally activate the menu, which can be annoying.

Meanwhile, when a visitor slides their cursor over "Hover," your big menu will open. You could wish to use "Hover" on landing pages or the homepage of your website, as this can entice users to explore different sections of it.

Screenshot 4: Select Mega Menu Event

You can experiment with various animations in the Max Mega Menu, such as slide-up and fade. The speed of the animation is also adjustable. You may make a captivating mega menu that draws in visitors by playing with various animations.

Similarly, enable mega menus for different locations if required.

Screenshot 5: Selecting “Effect”, sub-menu animation type

2. Advanced Settings (For menu locations)

If, in the Event section, you have selected the ‘Click’ option, go to the ‘Advanced’ tab for more settings such as the behavior of the click event, sub-menu behavior in mobile click, and others.

Screenshot 6: Advanced Settings for Click event

Once done, click on “Save Changes.”

Screenshot 7: Menu Locations Saved

3. Add another Menu Location

You can add other menu locations that are not listed by your theme by clicking on ‘Add another Menu location.

Just enter the “Location Name” that describes where the menu will be displayed on your site. Optionally, assign a menu to the newly created menu location. The menu assigned now during the creation of a new menu location can be later changed using the Appearance > Menus > Manage Location page.

Screenshot 8: Add another Menu Location

B. Menu themes

Go to the “Menu Themes” sub-menu to customize your mega menu. When you select a theme to edit, it displays ‘Default (Primary Menu)’, thus showing the menu locations where the menu theme will appear.

1. General Settings (For menu theme)

In this section, you can customize various things, such as arrow styles, shadows, line heights, hover transitions, and others.

Screenshot 9: General Settings for Menu Themes

2. Menu Bar

Customize your menu bar with variations like menu height, padding, background color, and others. You can also customize top-level menu items like item font, item color, item background, item padding, etc.

Screenshot 10: Menu Bar

Screenshot 11: Editing theme: Default > Menu Bar > Top Level Menu Items

3. Mega Menus

To customize the submenus, go to Mega Menu. Here, you can customize various fields of the submenu, such as panel background, panel width, padding, border, border radius, and column padding.

Screenshot 12: Settings for Main Menu

Next, you can customize the title font, title padding, title margin, title border, and content font in the widget section.

Screenshot 13: Menu Themes > Editing theme: Default > Widgets

Once the top-level menu customization is done, you can customize second-level and third-level menu items.

Screenshot 14: Second Level Menu Settings

Screenshot 15: Third Level Menu Settings

When all your settings are done, click on Save Changes.

4. Flyout Menus

If your menu has multiple hierarchies and a flyout menu is needed, you can customize it in the ”Flyout menu” tab.

You can customize the submenu background, width, change the background colour and font on hover, and other such settings.

Screenshot 16: Flyout Menu

5. Mobile Menu

Customize how your menu should look on a mobile phone in the “Mobile Menu” tab. The settings for the mobile toggle bar, (toggle bar background, height, border-radius) mobile submenu settings, selecting how many columns you want in the mega menu for mobile, and others can be customized in this section.

Screenshot 17: Menu Themes > Editing theme: Default > Mobile Menu

6. Custom Styling

This section consists of a CSS editor that allows you to customize your menu. Define any custom CSS that you wish to add to mega menus.

Screenshot 18: Menu Themes > Editing theme: Default > Custom Styling

Click on Save Changes, and voila! Your mega menu is ready.

C. General Settings (Max Mega Menu level )

This setting allows you to determine how the plugin outputs the CSS needed for the mega menu's styling. Here are the options available:

1. Save to filesystem

This option will save the generated CSS to a file on your server's filesystem. Specifically, it will be saved in the wp-content/uploads/maxmegamenu/style.css file, and WordPress will enqueue this CSS file, meaning it will be included in the pages of your site where required. This is typically the recommended option for performance reasons because it allows the CSS to be cached by browsers and reduces the page load time.

2. Output in

Selecting this option will inject the generated CSS directly into the section of your site's HTML on every page load. This can be useful if you're having file permission issues with your server that prevent writing to the filesystem, but it can also increase page load times since the CSS cannot be cached as efficiently.

3. Don't output CSS

This means that the plugin will not output any CSS at all. You would typically only choose this option if you plan to manually include the necessary CSS in your theme or if you are using a caching plugin that handles CSS delivery differently.

The "Save Changes" button below these options is used to save your selection. After making changes to these settings, it's generally a good idea to clear your site's cache (if you're using a caching plugin) to ensure that the new settings take effect immediately.

Screenshot 19: General Settings for Mega Menu

Conclusion

By following the steps outlined, you’ve seen how simple it is to use the “Max Mega Menu plugin.” It will enhance user engagement and improve the navigational experience of your site.

The plugin’s ability to handle multiple menu items efficiently, incorporate multimedia content, and adapt to various screen sizes makes it an indispensable tool for any WordPress site owner looking to elevate their online presence.

How to Use GTmetrix WordPress plugin to Improve your Site Speed

Tutorials

6 min read

How to Use GTmetrix WordPress plugin to Improve your Site Speed

Introduction

Is your WordPress website running slowly, thus affecting the user experience? Are you losing visitors and potential customers because of slow loading times?
It's time to take action and optimize your website's performance with the help of the GTmetrix tool. This tutorial will guide you through setting up and utilizing the GTmetrix WordPress plugin.

What Is GTmetrix Speed Test Tool?

GTmetrix is a tool to easily test the performance of webpages. Just enter the URL that you want to analyze performance, and within a few seconds, it will generate a detailed report providing recommendations for optimization.

One can easily identify performance bottlenecks and take appropriate actions to enhance your website's loading speed.

You can measure your website's loading times from different locations around the world. Currently, there are 7 free test locations and 15 premium test locations, for a total of 22 different global test locations. This allows you to understand how your web pages perform for users from different geographic locations around the world.

We can also test page loads on different mobile devices. As of this writing, GTmetrix supports testing on a real Android device or over 30 different simulated device options in its premium plan.

Installing and setting up the GTmetrix Plugin in WordPress

Step 1: Install and activate the “GTmetrix for WordPress” Plugin

The first step is to install and activate the “GTmetrix for WordPress” plugin on your WordPress website.

Begin by clicking on the “Plugins” menu and then clicking the “Add New Plugin” button, as shown in the screenshot below.

Screenshot 1: Click on the “Plugins” menu and select the “Add New Plugin” option.

Next, search for the “GTmetrix” plugin and install it, or download it from here, upload it, and install it on your website.

If you have already installed the plugin on your website, you can skip this step and go to step 2

Search-for-Gtmetrix-and-click-on-Install-Now-button

Screenshot 2: Search for “GTMetrix” in the available search box and click on the "Install Now” button.

Once activated, you will see the new menu option “GTmetrix” in your WordPress dashboard. Click on it, which will take you to the “GTmetrix for WordPress Settings” page.

Screenshot 3: Click on the “Register for a GTmetrix account now” link.

To use the GTMetrix plugin, you need to create a GTMetrix account and generate its API key.

For that, simply click the “Register for a GTmetrix account now” link to go to the GTmetrix website, where you can sign up for an account, as shown in the below screenshot 4.

Step 2: Create a GTmetrix Account and log in to it

Once you are on the GTmetrix website, click on the “Get Started for Free” button to create an account. Skip this step if you already have an account and go to step 3.

Screenshot 4: Click on the “Get Started for Free” button.

Fill in your information and agree to the terms, then just click on the “Create an Account” button as shown in below screenshot 5.

Screenshot 5: Fill in your information and click on the “Create an Account” button.

Next, you need to validate your email address to complete the account creation process. You will receive an email to verify your GTmetrix account.

Once you have created your account, Enter your email address and password, and click “Log in," as shown in the below screenshot 6.

Screenshot 6: Log in with your email ID and password and click on “Log in.”

Screenshot 7: Get the “GTmetrix Rest API Key”

Note: If you are directly logging in to Gtmetrix.com instead of clicking the link from its plugin settings, you have to scroll to the bottom of the homepage and then click on "GTmetrix Rest API,” as shown in screenshot 8.

This would take you to the https://gtmetrix.com/api/docs/2.0/ webpage. As shown in the above screenshot 7.

Screenshot 8: Click on “GTmetrix REST API” to get the API Key

Step 3: Generate a Gtmetrix API Key

Next, simply click on the ‘Generate API key’ button. Copy the API key, which is on the left-hand side of your screen.

Screenshot 9: Click on “Generate API Key” and then “Copy the API Key.”

Now, switch back to the ‘GTmetrix’ settings page in your WordPress dashboard. Go ahead and enter your GTmetrix account email address and the API key you copied earlier (as shown in screenshot no. 7).

Screenshot 10: Enter your E-mail address and paste the GTmetrix API key

Don’t forget to click on the ‘Save Changes’ button to save your settings.

Step 5: Set Default options

Head over to the GTmetrix > Settings page, scroll down to the “Options” meta box, set the “Default location” drop-down to the Test Server location (region) that is closest to your hosting, and then again save the changes.

For this tutorial, we have selected Mumbai, India, as the default Test Server Region.

That’s it! You have successfully integrated GTmetrix with your WordPress site.

Screenshot 11: Select the Test Server location that is closest to your hosting

Step 6: Test the Web Pages

On the left-hand admin panel, click on the Tests sub-menu. Enter the page URL that you want to test the page load speed for.

Click on Tests to perform test on any page

Screenshot 12: Click on “Tests” to perform tests on any page of your website.

Screenshot 13: Paste your “Website” URL and Click on “Test URL Now!”

GTmetrix will take a few seconds to scan your whole page. Once the scan is finished, you will see your site's detailed reports, along with the top issues that you can fix to improve the user experience.

Screenshot 14: "GTmetrix" scan in progress.

This report generated gives you a detailed breakdown of your PageSpeed score, YSlow score, and a list of recommendations on what you can change to improve your page load time. Anything below a Performance score of “A” means there is room for improvement.

All the reports that have been completed are available under the “Reports” section (meta box) as shown in the below screenshot.

Screenshot 15: List of all reports. Click on Label/URL to expand/collapse

Individual reports can be expanded to view the summary of page speed scores, Yslow scores, load times, and other details, as shown in the above screenshot. Below the individual summary of the report, there are links to pages for scheduling future page load tests, viewing detailed reports, and even a link to download a PDF report.

For a detailed report, click on its link; it will take you to the GTmetrix web page, where you can view it in-depth. A sample report can be seen in below screenshot 15.

The detailed report is divided into different tabs. First, you will see your PageSpeed score, with different ranking items listed with their score.

Green items are good and don’t need your attention. Red items are slowing down your website and require further investigation.

Screenshot 16: PageSpeed score with different ranking items listed with their individual scores.

The best part is that when you click on the suggestions, it tells you exactly what needs to be fixed.

Step 7: Schedule Tests (Optional)

You can also schedule the page load tests to run hourly, daily, weekly, or monthly. By default, scheduled tests always use the Vancouver, Canada, test server region.

The test will automatically run at the frequency you choose. The admin will be notified when the test completes and one of the following conditions is met:

Page Speed score is less than A, B, C, D, E, or F
YSlow score is less than A, B, C, D, E, or F
Page load time is greater than 1, 2, 3, 4, or 5 seconds
Page size is greater than 100 KB, 200 KB, 300 KB, 400 KB, 500 KB, or 1MB

Screenshot 17: Choose a frequency to run the test automatically

Conclusion

In this tutorial, we saw how to install and use the GTmetrix plugin step by step. We also learned how to run and schedule page load tests to keep a check on your website's performance score.

The reports generated help you easily identify performance bottlenecks, such as large image sizes, excessive HTTP requests, slow server response times, and much more. With this crucial information, you can make the necessary changes to your website to optimize it, thus improving its loading speed.

That’s it for this tutorial. If you want your website to load blazing fast, connect with our Page Speed experts.

How to optimize Interaction To Next Paint (INP) Core Web Vital in WordPress

Tutorials

8 min read

How to optimize Interaction To Next Paint (INP) Core Web Vital in WordPress

WordPress

10 min read

Best Drag-and-Drop WordPress Page Builders in 2023

Introduction

Drag-and-drop page builders are becoming more and more important in the world of web design, which is always changing. With its easy-to-use interface, both experienced developers and complete newbies can make websites that look professional without having to write code by hand. In an era where online presence is paramount for businesses, personal brands, and virtually anyone looking to reach an audience, the ability to create an effective website is crucial. This blog explores the best drag-and-drop page builders for your WordPress website.

Best Drag and Drop Page Builders of 2023

1. Elementor

With its robust capabilities. flexible design options, and an easy-to-use interface, Elementor comes as a boon for both experienced and newbie web developers. Let's get to know more about Elementor.

Key Features

Live Editing Interface: Elementor’s real-time design capabilities mean you can see changes as you make them, streamlining the design process and enhancing accuracy.
Wide Range of Widgets and Templates: Elementor offers an extensive library of pre-made design elements and templates, allowing for quick yet customized builds.
Responsive Design Controls: Create mobile-friendly designs effortlessly with specific controls for different devices.
Integration with Popular Tools: Elementor integrates seamlessly with popular marketing and social media tools, enhancing its usability.
Multilingual and RTL Support: Design websites in various languages with right-to-left text support, making it globally appealing.

Pricing

Check out the pricing plans for DiviBuilder here.

Security and Reliability

When it comes to security, Elementor understands how important the safety and integrity of a website are to users. Using strict coding standards and best practices for web security, Elementor ensures that the user's website is safe and secure. And if you're the type who likes to add a little extra protection, Elementor plays nicely with a lot of the security plugins out there. So you can build up your site's defenses just how you like. Got a question or hit a snag? Elementor's support team has got your back. They've got loads of guides online, and there's a community of users who are always ready to lend a hand.

Customization

Customization is where Elementor really feels like a playground for anyone wanting to create a unique website. Starting with the interface, it is a drag and drop thus allowing you to play with layouts, select colors, adjust fonts, and more. For those with more technical skills, Elementor opens up the possibility to explore custom CSS and JavaScript.In addition to these hands-on design features, Elementor also offers a rich library of pre-made templates. You can choose a template that closely matches your vision, and then tweak it to perfection.

Flexibility

Imagine you're building a blog today, an online store tomorrow, and maybe even a portfolio site the week after that. This could mean learning three different methods with some tools, but not with Elementor. Elementor can be used for many different kinds of projects, irrespective of the requirements. Elementor's built-in features act like tools in a toolkit, and the third-party extensions act as specialty tools that can be added. There exists a vast ecosystem of modules and add-ons ready to extend Elementor's capabilities.

SEO Impact

You don't just put together a website with Elementor; you craft it in a way that search engines can understand. This is essential because if search engines can readily read your website, they will be able to show it to more people. Elementor helps you build a search engine-friendly site.

2. Divi Builder

Divi Builder developed by Elegant Themes, is quickly becoming a favorite among WordPress users. Divi Builder has gained popularity due to its ease of use, vast customization, and varied design features it has. Let's dig in more:

Key Features

Visual Builder Technology: Divi Builder offers a real-time design interface, allowing designers to see changes instantly without page refreshing.
Modules and Layouts Library: A vast collection of customizable modules and layouts, catering to all design needs.
Global Elements & Styles: Create global elements that can be used across the site, saving time and ensuring consistency.
Split Testing: Test different design options to see what works best with built-in split testing tools.

Pricing

Check out the pricing plans for DiviBuilder here.

Performance

Divi Builder is fast, which means you're not sitting around waiting for things to load. You can move things around, tweak them to your liking, and see the changes right away. Divi Builder's performance can vary depending on factors such as hosting, the complexity of your design, and the number of plugins you use.

Security and Reliability

With frequent updates, Divi Builder maintains a secure platform. Moreover, Elegant Themes offers round-the-clock support, ensuring assistance when needed. Divi Builder provides an extensive library of tutorials and documents to help users navigate any challenges.

Customization

Instead of abstract menus and settings, designers can click on any part of their website and modify it directly. Whether it's adjusting the typography of a headline, changing the color palette of a section, or adding interactive elements, Divi Builder lets users tinker and refine to their heart's content. While Divi Builder does come packed with a myriad of beautiful templates, each of them can be dissected, modified, and reassembled to create something entirely new.

Flexibility

The digital world thrives on collaboration and interconnected tools, and Divi Builder embraces this wholeheartedly. By allowing and often facilitating integrations with a plethora of external tools, Divi Builder ensures that its users always have the right tool for the job, even if it's not native to the platform.

SEO Impact

The very foundation of Divi Builder is built upon SEO-friendly principles. The generated markup is clean and streamlined, adhering to modern web standards. This clean code ensures that search engine bots can easily crawl and index the content. When these bots can efficiently understand the structure and content of a site, it naturally leads to better rankings on search engine results pages.

3. Beaver Builder

Beaver Builder has made a name for itself in the WordPress community as one of the best drag-and-drop page makers. It makes it easy for both new and experienced developers to create sites that look like professionals made them. Here's a more detailed look:

Key Features

Live Front-End Editing: See changes as you make them with the real-time design interface.
Module Variety: Various content modules like photos, text, and even maps can be dragged and dropped with ease.
Page Templates: Access to pre-made layouts that help to quickly start the design process.
White Labeling: Ideal for agencies, it allows you to replace the Beaver Builder name with your branding.

The Beaver Builder provides a detailed pricing plan on their website.

Performance

Professionals who value efficiency above all else will find Beaver Builder to be an excellent option because of its fast loading times, excellent responsiveness, and user-friendly interface for designing websites.

Security and Reliability

Beaver Builder prioritizes data and browsing session security. Regular security audits find and resolve issues quickly. Open communication with the WordPress community has enhanced Beaver Builder's security posture. Feedback is quickly integrated, and concerns are addressed promptly. It is also known for its responsive support team that’s there to help with any issues. Beaver Builder's commitment to regular updates ensures compatibility with evolving web technologies and changing WordPress frameworks.

Customization

From typography to column configurations, precise adjustments are feasible, ensuring a customized design outcome. Those who desire further customization and functionality modifications can use their own custom CSS and JavaScript in Beaver Builder. It enables the saving and reusing of design elements across multiple pages or websites, thereby promoting consistency and efficiency.

Flexibility

Beaver Builder is always compatible with the latest WordPress releases and integrates well with various plugins. This ensures that users can blend multiple tools without compatibility concerns. The drag-and-drop mechanics appeal to beginners, while experienced coders are able to embed custom code. Global settings provide design uniformity and help users create site-wide design rules. SEO Impact Beaver Builder effortlessly collaborates with top-tier SEO plugins like Yoast SEO, enabling users to finely tune their SEO efforts without hitches. A crucial yet sometimes overlooked SEO factor is site speed. Beaver Builder's lightweight design ensures faster loading times, crucial for both user satisfaction and SEO optimization. A very important feature is that it offers clean code—essential for making sure search engines can efficiently crawl and index content, which, in turn, boosts website rankings.

4. Visual Composer

Visual Composer is a website builder with backend and front-end editing capabilities. Of course, like other page builders, this one also helps non-technical people to easily build websites. While there are many excellent page builders out there, Visual Composer stands out due to its comprehensive features, dual editing modes, and extensibility. It's both beginner-friendly and robust enough for seasoned developers, making it a versatile choice for a wide range of WordPress users.

Key Features

Dual Editing Modes: Offers frontend and backend editing capabilities.
Wide Range of Elements: Basic to advanced elements, including post grids, slideshows, and interactive features.
Templates: Comes with a variety of pre-designed templates to fast-track the design process.
Extension Ecosystem: Supports a range of third-party extensions to extend its functionality.
Integration Capabilities: Seamlessly integrates with many other WordPress plugins.
Cloud Marketplace: This is a premium feature by Visual Composer which is an in-app marketplace for you to buy elements, extensions, and templates. This feature lets you build your website from the cloud.
Unsplash Stock Images: Adding images to your website is made easy by this premium feature. From the Visual Composer Hub, you can get high-quality stock photos from Unsplash and add them to your site.

Pricing

You can check out the pricing plans for Visual Composer here.

Performance

Websites created with Visual Composer generally maintain good loading times, but this also depends on other factors like hosting, image optimization, and overall website content. Visual Composer has clean code and is as optimized as possible. Still, like any tool, its performance can be impacted by how it's used. Overstuffing a page with too many elements or animations can naturally slow it down. Additionally, the plugin works with popular caching and optimization plugins. This collaboration allows for better loading times and performance with the appropriate setup.

Security and Reliability

The Visual Composer is updated regularly to add new features, fix bugs if any, and also to add security patches. Thus, the tool wants to stay one step ahead of any possible threats. Visual Composer is known for its stability and reliability, even with WordPress updates. The Visual Composer staff provides excellent service. An active support system fixes difficulties and functions as a feedback loop to improve the tool based on user demands.

Customization

A large library of elements and widgets of Visual Composer allows you to choose from simple text blocks to advanced sliders and social media feeds. This wide range lets you add functionality to your requirements without third-party plugins. When it comes to brand consistency or saving time, the templating features of Visual Composer are incredible. Design a layout, save it as a template, and use it on other pages or websites. This streamlines workflow and guarantees consistency without duplication.

Flexibility

Visual Composer is flexible enough to accommodate a variety of project types ranging from blogs, e-commerce websites, or even portfolio websites. This page builder not only offers a service, but a solution to your requirements. It easily integrates with the third-party plugins you require for your website without any hassle. You can customize designs with custom CSS, HTML, or JavaScript. Developers who are willing to push the tool's limits in designing can benefit greatly from this freedom.

SEO Impact

Visual Composer uses SEO-friendly HTML markup, which is the basis for any search-optimized site. A good HTML structure helps search engines read your content, and this tool does that. Headings, meta descriptions, and picture alt texts are integrated characteristics that promote rankings. Since Visual Composer is flexible enough, it is easy to integrate SEO plugins, thus further helping in boosting your site’s visibility. The builder doesn’t add unnecessary bulk to your web pages, making sure they load quickly, thereby bettering your SEO score.

Conclusion

We examined 2023's most powerful and versatile drag-and-drop page builders for WordPress: Elementor, Divi Builder, Beaver Builder, and Visual Composer. Each has unique strengths and features that make it suited for various projects. The right page builder depends on performance, customization, adaptability, security, and SEO. A bad page builder can slow down your website, complicate design, and cause security problems. However, a good one may make your website quick, safe, and easy to use, improving user experience and SEO ranking. We hope our blog post will help you choose the right page builder according to your needs. If you are looking to build your website, look no further and connect with our WordPress experts.

Plugins

8 min read

Best WordPress Migration Plugins of 2023

WordPress

9 min read

WordPress 6.3: Exploring the Exciting Features and Enhancements

Introduction

WordPress 6.3 “Lionel” roared its way into the WordPress ecosystem on August 8, 2023. This major release includes many new upgrades that make creating and managing content all the more exciting. Among the features that come with WordPress 6.3, the Site Editor is perhaps the most notable addition, allowing users to handle everything from content to templates in one place. Block themes also enable users to preview new designs and customize them with greater ease. With the Command Palette, users can access expanded functionality with just a few keyboard strokes. At the same time, improved style revisions and annotations, as well as faster performance and improved accessibility, all make it even easier to manage and create content online.

Exploring WordPress 6.3

Here is a quick video exploring the new features of WordPress 6.3.

1. Block Pattern System Changes

Screenshot 1: Pattern Tab

The Block Pattern System update in WordPress 6.3 has unlocked a new level of customization for pro-level editing. With new improvements and additions, it's now easier to create custom block patterns and apply them instantly to your content.

Screenshot 2: Comparison of Block Editor in WordPress 6.3 and 6.2

Synced patterns, previously known as Reusable Blocks, are groups of blocks that can be saved and applied instantly without having to add the blocks repeatedly. Moreover, changes made to a synced pattern will apply globally on the website. Synced patterns can be used for elements like headers, footers, or sidebars that appear across the website.
Non-Synced Patterns, previously known as Regular Block Patterns, allow you to customize. Any changes made to a non-synced pattern will only affect that particular pattern and not other places where it's used. Non-Synced Patterns can be used for page or post-specific content.
The wp_block custom post type has been extended to support custom fields.
The wp_block_sync_status field has been added to store the sync status of a pattern. This field indicates whether a synced pattern has been updated or not and whether those changes are reflected throughout your website.
The block pattern design now has a source property to tell the difference between core patterns and user patterns.
The REST API has been extended with a new endpoint for global styles revisions and it can be accessed at /wp/v2/global-styles/revisions.

2. New Gutenberg Blocks

WordPress 6.3 has added two new blocks, Detail and Footnotes.

Detail Block

The addition of the Detail Block allows you to hide content until the reader is ready to see it. You can now add extra information without cluttering your main text. With just a click, readers can reveal hidden information like event details, fine print notices, or even spoilers. It's like a secret hideout for your content!

Screenshot 3: Add the Details block while creating the post

Details block hiding the content

Screenshot 4: Details block hiding the content

Details Block showing the content when expanded

Screenshot 5: Details Block showing the content when expanded

With the addition of this feature, you now have two separate elements: a summary and hidden content. By default, the content is hidden, but readers can easily expand it by clicking on the drop-down arrow.

Footnotes Block

Managing long texts is now easy with the Footnotes Block. With this new block, it's as easy as a couple of clicks. Just place your cursor where you want to add the link, click on the Footnote button, and done! A footnote appears at the bottom of the page. The Footnotes Block automatically adds, removes, and reorders footnotes as you edit your text. With this addition, you can effortlessly add context, source your work, or provide references right within your content.

Addition of Footnotes Block

Screenshot 6: Addition of Footnotes Block

Screenshot 7: Display of Footnotes Block

3. Block Improvements

WordPress 6.3 has made some improvements to the existing Gutenberg blocks. Let's take a look at them. With the Cover Block enhancements, you can have more control over the layout of your cover. Various layout options, design options (text colour), and border options have made this block more useful and handy. The Duotone filter has surprised WordPress users with its improved functionality. You can set a global duotone filter from the Style panel of the Site Editor. It is no longer required to navigate theme.json for the Duotone filter application. And don't even think about using colour values for duotone. WordPress 6.3 raises the bar by employing colour prefixes instead.

Screenshot 8: Duotone Filter

There are many other additional block improvements, a few of which are listed below:

The Button block now supports border color, style, and width.
The Post Excerpt block now allows you to control the length of the excerpt
For the Post Featured Image block, you can now adjust the aspect ratio.
The Global Styles interface now includes controls for color and typography for the Caption element.
A new variation has been added to the Post Date block - the Post Modified Date variation. This is particularly useful if you frequently update your posts and want to showcase when they were last modified.

4. Addition of the Command Palette

WordPress 6.3 introduces a new feature called the Command Palette, which has everyone buzzing with excitement.

Screenshot 9: Command Palette

The Command Palette streamlines several tasks for developers and site managers. With this feature, you can quickly access tasks like resetting or deleting a template or a template part. You can also register your custom commands and even view design options for specific posts or pages. The Command Palette can also be used for core commands such as navigating the site editor, toggling UI elements, and creating new pages and posts. Using the Command Palette is easy, too. All you have to do is press the keyboard shortcut Command+Shift+P on macOS or Ctrl+Shift+P on Windows to open it. You can then start typing in the command you need, and the Command Palette will automatically suggest possible commands. Different commands are available depending on your needs. The command list includes dynamic results based on the user's query in the command palette input field, and a few commands are only available under certain conditions. When changing a template, contextual commands take precedence and show automatically. Developers can register custom static commands using wp.data.dispatch(wp.commands.store).registerCommand or wp.data.useCommand React hook. It also offers an API. Here is an introductory article about the command pallet API. In short, the Command Palette has undoubtedly eased the work of developers and site managers. Its easy design and ease of usage will make it a staple feature in future versions.

5. Enhancements in Site Editor

The Site Editor now has a more intuitive interface, making it easier to navigate. A few other changes include:

Enhanced Navigation

A fresh, clean interface that organizes everything improves navigation. Navigation, Styles, Pages, Templates, and Patterns are all in one place, making them easy to find. It's ideal for finding a page or template part and making quick modifications. You may now reach any WordPress page in the navigation menu with a few clicks without reading through interminable lists. The Command Palette holds all your favorite WordPress tools, ready to use! You can find the item you want instantly using the new search button. The search button includes Template Parts, providing you with additional content and design versatility.

Improved Pattern Management

The Site Editor navigation has now been updated to include patterns as one of the main navigation items. You can see all your reusable blocks in the “My Patterns tab” by clicking on the Patterns icon.

Pattern Management

Screenshot 10: Pattern Management

Creating a new pattern or template part is just as easy as selecting the add (+) button. At the bottom of the navigation column, you will find links to manage all your patterns and template parts. With this feature, you can easily locate, edit, and create new patterns or templates to enhance your website navigation and overall design.

Style Revisions

The Site Editor now provides revision history so you can browse and restore changes. This panel lists timeline revisions. It additionally tooltips each revision's author, date, and time. You may preview, restore, and navigate revisions in Global Styles at any time.

Additional Improvements and Features

A new theme_preview parameter in WordPress 6.3 lets the Site Editor preview every block theme before activation. This update also improves the editor's loading state to prevent user interaction before loading. The WordPress 6.3 site editor has a distraction-free mode. This functionality has been in the post editor since WordPress 6.2. Distraction-free mode removes sidebars and toolbars, allowing you to focus only on editing.

6. Changes and Performance Enhancements for Developers

WordPress 6.3 brings a wave of performance boosts and developer updates that will leave you in awe. The client-side performance has seen a remarkable 40% improvement for block themes and 31% for classic themes. On the server side, optimizations have made server response times 19% faster for block themes. And let's not forget the database performance improvements. Lazy-loading metadata and caching query results have made WordPress 6.3 more efficient than ever. But that's not all; there are exciting developer updates too! Script-loading strategies, lazy-loading images, low-level logic optimizations, and much more Among the numerous additions, we enlisted the following:

Image performance enhancements to improve page load speeds
Improved emoji loader to reduce the time spent loading the emoji script. (#58472)
Defer and async support added to the WP Scripts API. (#12009)
Fetch priority support was added for images. (#58235)
Skipping lazy loading for images outside the loop in classic themes. (#58211)
Attempt rollback for failed plugin and theme updates. (#51857)
Merge get_posts() and get_pages(). (#12821)
Dropping Support for PHP 5
Command Palette API
Caching Improvements

7. External Library Updates

External library updates are an important feature of WordPress that take care of certain of your website's functionalities. These updates ensure that your site utilizes the most recent software available, with models regularly updated, and these upgrades may include new features, patches, or bug fixes. The WordPress 6.3 update includes modifications to various external libraries, which ensure that your website runs more efficiently and securely. Some of the updates are mentioned below:

PHPMailer is being updated to v6.8.0 (#57873)
Requests library is being updated to v2.0.6 (#58079)
jQuery is being updated to v3.7.0 (#58083)
Sodium Compat is being updated v1.20.0 (#58224)
jQuery Migrate is being updated to v3.4.1 (#58451)
npm packages are being updated to the latest version (#58623)

8. Improvements in Accessibility

Accessibility Enhancements in WordPress 6.3 make it easier for users with assistive technologies to navigate, thanks to features like tab and arrow-key navigation and revised heading hierarchy. The new controls in the admin image editor ensure a better experience for users with disabilities. Here are a few major improvements in accessibility:

Improve accessibility of custom field UI
Improved labeling, description, and focus style of block transform to pattern previews
Fixed constrained tabbing failures with Safari and Firefox
Fixed URL Input combobox to use the ARIA 1.0 pattern
Fixed accessibility of the classic block modal dialog
Improved Navigable Toolbar
Multiple Tooltips from Focus Toolbar Shortcut on Widget Editor
Support for aria content attributes in formatting
Snackbar now has improved color contrast on hover for better readability
Keyboard navigation has been enhanced for specific input types in the Writing Flow
More details about the Accessibility Improvements in WordPress 6.3 can be found here.

Accessibility enhancement was a major focus in WordPress 6.3. With these accessibility improvements, WordPress continues to be a powerful and inclusive platform for everyone.

WordPress

12 min read

The Ultimate Guide for WordPress Website Maintenance

Introduction

Developing a WordPress website is not the end of the task. Maintaining the developed site is crucial as it enhances the website's performance, ensures website security, maintains SEO rankings, and much more. A maintained website is a healthy website! In this blog post, you will get to know how to maintain your website and, at the same time, why you should do it.

Crucial WordPress maintenance tasks to perform regularly

The following points describe each task in detail that is to be performed to maintain a website:

1. Regular Backups

Whether your WordPress website is a small blog or a large eCommerce site, having a backup is essential. A backup is a saved copy of your website's data, including all the files and database. With regular backups, you can restore your site quickly if anything goes wrong.

Importance of backing up your website

Backups are like insurance for your website. Here's why they are crucial:

Protection Against Data Loss: From server crashes to hacking attempts to simple human errors, various events can lead to data loss. Regular backups ensure that you can restore all your data, minimizing the impact of these events.
Ease of Recovery: Backups allow you to recover quickly from any problem, whether it's a simple issue like a deleted post or a major one like a site crash. With a recent backup, you can get your website back to normal in no time.
Protection Against Updates: Sometimes, updates to WordPress, themes, or plugins can lead to conflicts or errors. Having a backup means you can revert your website to its previous state if needed.

Tools and Plugins for Backups

There are several tools and plugins available that make backing up your WordPress website straightforward and convenient. Refer to our article about the best backup and restore plugins to know which backup plugin to choose for your website.

Recommended Backup Frequency

The frequency of backups should align with how often you update your website. If you post daily, you should backup daily. If you update weekly, a weekly backup should suffice. However, for critical websites like eCommerce sites, where transactions occur continuously, real-time backups are recommended. Moreover, it's crucial to store your backups in multiple locations. For example, you could keep one copy on your local system and another in cloud storage. This redundancy adds an extra layer of protection.

2. WordPress Updates

Developers frequently issue updates to the WordPress core, themes, and plugins. Updates like this are essential to keeping your website running smoothly and securely since they solve bugs, boost performance, and address security concerns. The importance of keeping your WordPress ecosystem updated cannot be overstated:

Security: Each new update patches vulnerabilities that could potentially be exploited by hackers. With roughly 90% of WordPress vulnerabilities attributed to plugins and themes, keeping them updated is crucial.
Bug Fixes: Updates often fix bugs or glitches in previous versions, improving your site's performance and stability.
New Features: Updates usually come with new features or enhancements that can boost your site's functionality and user experience.
Compatibility: Updates ensure that the WordPress core, your themes, and plugins all work harmoniously together. This compatibility is key to preventing errors and site crashes.

Safely Updating WordPress, Themes and Plugins

While updates are essential, they should be performed correctly to avoid potential conflicts or issues:

Backup Your Website: Before updating anything, ensure you have a recent backup of your site. This gives you a safety net to revert to if something goes wrong.
Update in Stages: Begin with updating your plugins, followed by your themes, and finally the WordPress core. This order helps avoid compatibility issues.
Read the Changelog: Before updating, check the changelog for any significant changes that might affect your site.

Importance of Staging Environment while Updating

A staging environment is a clone of your live website where you can test updates without affecting your live site. This can be crucial for preventing update-induced issues on your website:

Test Compatibility: You can test updates in the staging environment to ensure they don't conflict with other elements of your site.
Debugging: If there are issues post-update, you can identify and resolve them in the staging environment without affecting your live site.
Experiment Without Fear: In a staging environment, you can freely explore and understand updates without the fear of breaking your site.

Frequency of Updates

The frequency of WordPress updates largely depends on when the updates are released by the WordPress team or the creators of the plugins and themes. WordPress Core Updates: Major WordPress core updates are typically released every few months. It's recommended to apply these updates soon after they are released, as they often include important features, enhancements, and security patches. Theme and Plugin Updates: These can happen more frequently, depending on the developers. It's also recommended to apply these updates soon after their release, as they can include security fixes and new features.

3. Security Checks

A security check is like a health check-up for your website. It helps identify potential vulnerabilities, malware, and signs of unauthorized access or tampering. By regularly performing security checks, you can take prompt action to mitigate threats and protect your website. Regular security scans offer several advantages:

Identifying Vulnerabilities: Regular scans can detect security vulnerabilities before they are exploited, allowing you to fix them proactively.
Detecting Malware: Scans can identify hidden malware that could be siphoning off your data or disrupting your site.
Maintaining User Trust: By ensuring your site is secure, you can maintain the trust of your users and protect their data.

Plugins for Security Check

Security checks can be easily done by certain plugins. Yes, it is that easy! Refer to our article on the best WordPress Security Plugins to understand how to choose the best security plugins for your website.

Understanding and Managing Security Reports

The results of security scans are often documented in reports generated by security software. Data on vulnerabilities, viruses, and suspicious activity may be included in these reports. Understanding these reports is crucial for taking appropriate action. It's advisable to familiarize yourself with the terminology and formats used in these reports and consult an expert if needed.

What to do when a security issue is Detected

If your security scans detect an issue, take the following steps:

Verify the Issue: False positives can occur. Verify the issue independently or consult an expert.
Isolate the Affected Component: If possible, isolate the affected part of your site to prevent the issue from spreading.
Resolve the Issue: Use the security tool’s remediation suggestions, or work with a security expert to resolve the issue.
Update and Strengthen Security: Update your WordPress core, themes, and plugins, and strengthen your security measures to prevent future issues.

Frequency of Security Checks

The frequency of security checks can depend on various factors, such as the nature of your website, the volume of traffic, and the sensitivity of the data you handle. However, a good rule of thumb is to conduct a security check at least once a week. For high-risk environments, real-time monitoring may be more appropriate.

4. Database Optimization

A WordPress database stores everything that makes up your website. This includes posts, pages, comments, settings, and plugin data. Over time, this data becomes bloated with unnecessary information, slowing down your site.

Optimizing Database

Optimizing your database involves removing unnecessary data, and here are the key steps to achieve this:

Deleting Revisions: WordPress saves every draft and revision of your posts. While this feature is useful, it can generate a lot of data that bloats your database. Regularly deleting old revisions can keep your database lean.
Cleaning Transient Data: Transient data is temporary data stored by WordPress to speed up your website. However, not all transient data gets deleted when it's no longer needed, leading to unnecessary data in your database. Regularly cleaning up this data can help optimize your database.

Plugins for Database Optimization

There are numerous plugins that can assist you in database optimization. Some of them include: WP-DBManager, WPOptimize, Advanced Database Cleaner, and much more. These plugins automate database cleaning tasks, saving time while ensuring regular optimization. Additionally, they manage storage space effectively, contribute to site stability, and simplify site migration. Always remember to back up your database before running an optimization to avoid irreversible changes.

Frequency of Database Optimization

The frequency of database optimization can depend on how often you update your site. If you frequently add or update content, you may want to optimize your database once a month. If your site is not updated regularly, a quarterly optimization might suffice. However, these are general guidelines, and the optimal frequency can vary based on your specific website's needs.

5. Broken Link Check

Broken links are links that, when clicked, lead nowhere or display a 404 error page. This could be due to the linked page being moved, deleted, or the URL being updated.

Identifying and Fixing Broken Links

Identifying broken links can be a manual or automated process. Manually, you would click on each link on your site to see if it led to a valid page. To fix a broken link, you either need to update the URL if it's incorrect, replace it with a new, relevant link, or remove it entirely. However, manually checking every link can be time-consuming for larger websites. That's where automated tools come in.

Plugins and Tools for Checking Broken Links

Broken Link checking can be simplified by the use of various available plugins, such as Broken Link Checker and Screaming Frog (tool). These tools not only save you time, but they can also detect broken links that might not be immediately visible or accessible.

Frequency of Checking Broken Link

The frequency of checking for broken links largely depends on how often you update your site and the size of your website. If you regularly add new content or modify existing content, bi-weekly checks may be advisable. For smaller, more static sites, monthly checks might be sufficient.

6. Performance Monitoring

The performance of a website is measured by how quickly pages load, how quickly the site navigates, and whether or not all of the site's elements work as they should. Problems including poor load times, page problems, and unresponsive functionality can be identified with regular monitoring.

Tools & Plugins For Performance Monitoring

There are several tools and plugins that can help you monitor the performance of your website. These include GTMetrix, Google PageSpeed Insights, and others. These tools provide comprehensive reports on various aspects of your site's performance, allowing you to target areas for improvement.

Analyzing Performance Reports and Taking Action

At first, performance reviews can seem hard to understand, but with experience, they become easier to understand. They generally give a performance score and explain what is affecting that number. For instance, if your server takes a long time to respond, it could mean that you need better hosting. Large pictures might slow down page loads, so you might want to compress the images on your site. Once you know what problems are slowing down your site, you can take steps to fix them or ask for help if you need to.

Frequency of Performance Monitoring

The frequency of performance monitoring depends on the nature of your website. High-traffic websites or websites that are frequently updated with new content should ideally monitor performance monthly. Smaller or more static websites can get by with monthly checks. However, any significant change or update to your site should be followed by a performance check to ensure everything is running smoothly.

7. SEO Audit

An SEO audit is a thorough examination of your website from an SEO perspective. It identifies strengths, weaknesses, and potential enhancements to improve search engine rankings. An SEO audit is crucial because it:

Point out technical glitches affecting your visibility on search engines.
Help you understand if your site isn’t getting the attention it deserves and why.
Offer you insights to tweak your SEO game, helping your website rank better and attract more visitors.

Key Components of SEO Audit

An SEO audit has a few key parts:

Site Structure: This looks at whether search engines can easily understand and navigate your site.
On-page SEO: Here you check things like title tags, meta descriptions, keyword use, the quality of your content, and how you're linking between pages on your site.
Backlinks: You’ll also want to see who’s linking back to your site and ensure these links are of high quality.

Plugins for SEO Audit

There are various plugins that will help you perform an SEO Audit. Refer to our article on the Best SEO Plugins to understand and choose the plugins that suit your needs.

Frequency of SEO Audit

How often should you do an audit of your SEO? That depends. If your website is always growing and changing, you should do an audit once every three months. If you don't post much content on your website, or don’t have a stable SEO strategy in place, you might only need a check-up once a year. And if you've made big changes to your site, you should do an SEO check right away to make sure everything is still in order.

8. Regular Content Review and Update

Keeping your website's content up to date is a continuous job. It's a process that you do over and over again. It means making sure that what you have to offer is still useful to your audience and is up to date. Keeping your website's content fresh and relevant is essential because:

It improves SEO: Search engines love fresh content. Regularly updating your website can help improve your rankings.
It increases user engagement: Users are more likely to return to your website if they find new and interesting content.
It strengthens your brand’s credibility: Keeping your content current and relevant showcases your brand as a trusted and authoritative source of information in your field.

How to Keep your Content Fresh?

Here are some ways you can keep your content fresh:

Regularly review your content: Set aside time each month to review and refresh your content.
Update statistics and data: Make sure that all your facts and figures are current.
Refresh your images and multimedia: Visual content can become dated too. Regularly update your images, videos, and graphics.

Tracking Content Performance

To make informed decisions about updating content, you need to track its performance. Tools like Google Analytics can provide insights into which pages are performing well and which ones need improvement. Look for pages with high bounce rates or low time-on-page metrics; these are likely candidates for an update.

Frequency of Content Update

The frequency of content updates depends on your industry, the nature of your content, and how often you publish new material. As a rule of thumb, you should review your content at least once a quarter, but high-traffic pages may need monthly reviews.

Conclusion

We hope you have understood the importance of maintaining your website. Consider it a to do list for the success of your website. Each of these tasks mentioned in the blog are contributing factors for a safe, secure, and successfully running website.

WordPress

9 min read

Your WordPress website needs a retainer. Here is why!

WordPress

8 min read

Happy Birthday, WordPress! Celebrating the 20th anniversary and WPoets Town Hall 2.0

Website Audit: Key Elements to Consider When Creating It

General

9 min read

Website Audit: Key Elements to Consider When Creating It

Plugins

6 min read

Best Security Plugins for WordPress to Safeguard Your Site in 2025

The internet is full of cyber threats and malicious attacks. We may often lose crucial information to attackers if proper security measures are not taken. This is why using security plugins is important. Plugins are an essential part of making your WordPress site secure. However, choosing the right plugin for your website can be challenging. Given the variety of choices, you can customize the safety measures on your site to fit your requirements. Once you're familiar with the best and most often used plugins available, you can choose which ones to implement.

Best WordPress Security Plugins in 2023 to Protect Your Site

1. Sucuri Plugin

When talking about the best free WordPress security plugins, Sucuri surely tops the list. Sucuri Security is a well-known WordPress security plugin that offers website monitoring, malware detection, and blacklist monitoring. It provides a firewall that blocks harmful traffic from reaching your website. Sucuri also offers an incident response service, which ensures that any security issues are handled quickly and effectively. Though most of the features are available in the free version, features like the website firewall, SSL support, and more are provided in the pro version. Key Features:

Protection from Brute Force Attacks with Web Application Firewall (WAF)
The plugin identifies and prevents DDoS attacks
Monitors blocklist authorities’ security warnings
e-Commerce malware scanning
Keeps track of all site activity, including file changes, most recent logins, and unsuccessful login attempts.
Protection from SQL injection, XSS, and other similar attacks.

2. iThemes Security Plugin

iThemes Security Plugin focuses on enhancing your site’s security. It provides numerous options in the free version, such as protection against brute force, tracking of file integrity, backups of database files, and two-factor authentication. The pro version of the plugin offers user activity logging, a WordPress User Security Check, Real-time WordPress Security Dashboard, and many more features. Key Features:

Blocks any malicious IP address that attempts to scan your website for vulnerabilities.
Notifies you through email if any potentially dangerous files have been updated on your site.
Protection by blocking specific IP addresses and user agents from accessing the site.
Strong password enforcement

3. All-in-one Security and Firewall

The All-in-one Security and Firewall plugin offers extensive security features in the free version itself. The features in the free version include hiding the login page from bots by configuring a custom URL for the ‘Admin’ page, user account monitoring, IP filtering, brute force attack prevention by implementing a ‘Login Lockdown’ feature, two-factor authentication, and many more. The plugin supports best practices, meaning that it prompts users to change their usernames if they have the default "admin" or identical login and display names. You can add Google reCAPTCHA or simple math CAPTCHA using this plugin. The pro version of the plugin offers automatic malware scanning, alerts you for the site’s status of blacklisting, reports blocks traffic from specific countries, blocks traffic to specific pages, and many more features. Key features:

Firewall protection
Sending an alert if file change is detected
Password strength tool to force the user to create stronger passwords for their sites.
Manually blacklist suspicious IP addresses
Comment spam prevention by automatically blocking the spammer’s IP address.

4. Wordfence

Wordfence Security is an all-inclusive plugin for website protection that includes many useful features. WordPress users widely use it due to its user-friendly interface and consistent upgrades. A robust firewall, malware detection, and real-time threat intelligence are all part of its extensive security features. The free version includes two-factor authentication, brute force attack protection, basic firewall protection, a malware scanner, and others. While the free version of Wordfence covers most of the security issues, the premium version enables the user to get real-time updates on malware scanning and firewall, blocking traffic from specific countries (geoblocking), and support. Key features:

The free version allows users to secure unlimited sites.
Monitors and notifies you of any security breaches in your password, allowing you to quickly generate a new and secure password.
The free and premium versions include ‘Wordfence Central’ allowing users to administrate various sites' security from a single dashboard.

5. WPScan

WPScan is a WordPress security plugin that utilizes the WPScan vulnerability database, which is a continually updated list of WordPress core, plugin, and theme vulnerabilities. WPScan, the company, is renowned for its open-source WordPress security scanner, and the WPScan plugin brings that same level of scanning to your WordPress site's dashboard. The plugin is able to scan around 21,000 vulnerabilities in your site, including plugins, themes, and the core software. The plugin not only identifies vulnerabilities but also provides suggestions and guidelines on how to fix them and improve your site's overall security. Key features:

Scheduled scanning and get the reports of scanning by email.
Get risk scores to see how vulnerable your site really is.
See how hackers attack your site with the security scanner.

6. Bulletproof Security

If you need a more robust, hands-on security plugin, BulletProof Security is a good option. Along with database security and login security, the plugin also offers firewall protection, but in a pro version. This plugin comes with anti-spam, auto-restore, monitoring, the Mscan malware scanner, automatic and manual lockout options, and many more. While the free features cover most of the security parameters, upgrading to the pro version will enhance the security of your site. It offers advanced features such as quarantine, monitoring of the database and sending an alert if there is any change, an IP firewall that protects the WordPress Plugins folder, allowing only valid image file extensions through Upload Anti-Exploit Guard (UAEG) mode, and much more. Key features:

Automatic logout idle sessions
Provides BPS Pro ARQ Intrusion Detection and Prevention System
Security logging of hackers, spammers, or any kind of attackers
The pro version comes with 16 mini plugins that provide advanced security

7. Malcare Security

Developed by BlogVault, Malcare Security comes with a cloud-based malware scanner that scans your entire website for thefts and fixes them. The plugin helps you to clean your website with the help of a one-click removal tool, even before the search engine detects any problems with your site. When you install MalCare's firewall, you'll notice a speed boost right away. The reason is that MalCare keeps attacks from getting to your site, which makes it less busy. Failed attacks can drain the site once they reach it. Based on WordPress hardening measures, MalCare provides various levels of protection, including disabling file editing, blocking PHP execution in untrusted folders, and changing security keys. Key Features:

Identifies and blocks bots
An intelligent tracking system for plugins and a firewall to keep intruders out.
CAPTCHA for login page
Activity log for all changes happening on your website

Conclusion

While all the above-mentioned plugins are best in their own way, the use of these plugins depends on the needs of your website. From the robust features of Wordfence Security and Sucuri Security to the user-friendly interface of iThemes Security and All In One WP Security & Firewall, each of these WordPress security plugins offers unique functionalities that can drastically enhance the security profile of your website. These plugins can improve site security, but no technology is perfect. Maintaining a secure WordPress site requires updating the WordPress core, themes, and plugins, using strong passwords, and taking other web security precautions.

Schemas that Digital Marketers Must Use on their Website in 2023

WordPress

8 min read

Schemas that Digital Marketers Must Use on their Website in 2023

In the ever-evolving world of digital marketing, staying ahead of the competition requires adopting new strategies and tools. One such tool that has gained significant importance in recent years is schema markup. Schemas provide a way to enhance a website's visibility, improve search engine optimization (SEO), and offer a better user experience. In this blog, we will explore the schemas that digital marketers should consider implementing on their websites in 2023 to stay relevant and maximize their online presence.

Role of Schema in SEO

Here’s how schemas help in SEO: 1. Enhanced Visibility in Search Results: Schema markup allows websites to give search engines detailed content information. This data is displayed in search results as rich snippets, knowledge panels, and other enhanced SERP features. To get more attention and clicks, websites can utilize these visually beautiful and informative snippets to differentiate themselves from the competition. 2. Improved Click Through Rates (CTR): Schema markup's rich snippets commonly include ratings, reviews, pricing, event details, and many more in search results. These characteristics make the search listing more appealing and relevant, increasing the likelihood of a click. A higher CTR indicates to search engines that the website is offering valuable and relevant content, which can positively impact its ranking. 3. Voice Search Optimization: Schema markup optimizes material for voice searches as voice assistants and voice searches grow. Schema tags like FAQ and Q&A enable search engines to extract and offer direct responses to voice search queries, boosting their likelihood of showing up in voice search results. 4. Structured Data Understanding: Algorithms interpret online material for search engines. Schema markup helps search engines understand your content better. It also helps search engines categorize and display your material, improving your ranking for relevant search queries. 5. Competitive Advantage: Implementing schema markup sets you apart from competitors who may not be utilizing it effectively. Rich snippets and better search results make your website more appealing and trustworthy than your competitors. Visibility and credibility can boost rankings, organic traffic, and conversions.

Schemas That Digital Marketers Should Use

The following are the schemas that digital marketers must use:

1. Organization Schema:

Organization Schema markup helps brands show that they are credible and authoritative. It tells about the organization, such as its name, logo, contact information, and social media accounts. By using Organization Schema, digital marketers can increase the exposure of their brand, get it into knowledge graphs, and make users trust the brand more. Best practices for implementing Organization Schema include using verified profiles and providing comprehensive and consistent information across various online platforms. Below is a screenshot of the organization schema in action for the search term WPoets. It shows

Screenshot 1: Organization Schema in action

Organization Schema should be added to the following web pages

Homepage
About Us
Our Work or a similar page,
What We Do or a similar page,
And other pages.

2. BreadCrumb Schema

The BreadcrumbList Schema allows you to specify the hierarchical structure of your website's pages using a list of breadcrumbs. Each item represents a step in the navigation path and typically includes the page title and URL. The order of the items in the list reflects the hierarchy of the pages. By implementing the BreadcrumbList Schema on your website, you provide search engines with structured data that can be used to enhance search results. When search engines recognize the schema markup, they may display the breadcrumb navigation in the search results, making it easier for users to understand the website's structure and navigate directly to specific pages. Below is a sample of breadcrumbs displayed in SERPs.

Screenshot 2: BreadcrumbList Schema in action

BreadcrumbList Schema should be implemented on all the website pages.

3. Article Schema

Article schema markup is important for websites that are based on their content. It helps search engines figure out how articles are put together and what they're about, including the article body, author, date of publication, word count, keywords, and many more. By using the Article Schema, digital marketers can make their content more visible in search results and increase the chance that it will show up in Google's Top Stories or other rich results. Correctly structuring an Article Schema means using the right headline tags, giving information about the author, and following schema rules. The Article Schema should be used on web pages that give detailed information or content in the form of articles:

Blog Posts
News Articles
Documentation Pages
Editorial Pages
Magazine or Journal Articles

4. FAQ Schema

FAQ Schema markup makes it easy for websites to answer frequently asked questions directly in search results. It makes your site more visible and makes it more likely that it will show up in featured snippets, especially in voice search results. Digital marketers should use FAQ Schema by finding important questions and answers, organizing the content with the right HTML tags, and making sure it works well with voice search queries.

Screenshot 3: FAQ Schema in action

In fact, we have written a comprehensive article on adding FAQ Schema to WordPress with and without plugins. The FAQ schema should be used on websites that list Frequently Asked Questions (FAQs) and the answers to those questions. A few examples could be,

FAQ Pages
Product Pages
Service Pages
Support or Help Pages

5. Local Business Schema

Local Business Schema markup is very important for companies that want to reach people in their area locally. It tells you where the business is, when it's open, how to contact them, their address, and what other customers have said about them (basically, Google reviews). Digital marketers can improve their visibility in local search results, improve their Google My Business listing, and attract possible customers in their area by using the Local Business Schema. Name, address, and phone number (NAP) consistency, getting real customer reviews, and optimizing for mobile devices are all important parts of the Local Business Schema. Below is a screenshot of the Local Business schema in action showing Opening Hours.

Screenshot 4: Local Business Schema in action

The Local Business Schema should be implemented on the web pages that represent individual local businesses:

About Us page
Contact Us page
Home page
Any location or place-specific page

6. Web Page Schema

Web Page Schema is a type of schema markup that provides structured data about a specific web page on your website. It allows search engines to understand the content and context of your web pages more effectively. By implementing the Web Page Schema markup, you can enhance the visibility, accuracy, and presentation of your web page in search engine results pages (SERPs). The Web Page Schema should be implemented on all the individual web pages of your website:

Content Pages
Landing Pages
Product and Service Pages
Category Pages
Home page

And among others.

7. Video Schema

Video schema markup is a type of schema that provides structured data about a video on your website. It allows search engines to understand the video content, its metadata, and other relevant details. By implementing Video Schema markup, you can enhance the visibility and appearance of your video in search engine results pages (SERPs) and potentially increase the chances of it being featured in video-specific search results. The Video Schema should be implemented on web pages that contain videos or provide information about specific videos:

Gallery Pages (if the gallery contains videos)
Article Pages with embedded videos
Landing Pages with videos

Basically, all the web pages that consist of videos. Below is a screenshot for a particular keyword displaying video in SERPs. Video Schema

8. Event Schema

Event schema markup is helpful for businesses that host events or promotions. It has a lot of information about the event, like the date, time, location, organizer, and people who will be performing, among others. Digital marketers can make events more visible in search results and thus get more people to attend by using Event Schema. To optimize the Event Schema, it's important to include correct and up-to-date information and use structured data testing tools to make sure everything is correct. The Event Schema should be implemented on web pages that provide information about specific events:

Event Listing Pages
Individual Event Pages
Calendar Pages (if your website has one)
Landing Pages (created for promoting specific events)

The following image shows an example of an event schema being used on the meetup.com website.

9. Review Schema

Every business, no matter what they do, should implement the Review Schema on their website. This is because reviews are such a big part of how most people decide what to buy. Before buying something, almost 90% of people read reviews. So there's no reason not to show good reviews if you have them. Review snippets will show the number of reviews your product, local business, or software product has gotten, along with the yellow stars. Following is a screenshot of a product search query. Notice that the yellow stars are below the SERPs.

Screenshot 5: Review Schema in action

Web pages with user-generated reviews or testimonials should use the Review Schema:

Product Pages
Business Listings
Testimonial Pages

10. Product Schema

Product schema markup tells search engines about a product's name, price, availability, and reviews, among other things. By using Product Schema, digital marketers can make their goods more visible in search results and attract people who might buy them. It can also be used for adding schema for services.

Screenshot 6: Product Schema in action

The Product Schema should be implemented on web pages that provide information about specific products:

Product Details Page
e-Commerce Category Page
Featured Product Section
Review Pages
Comparison pages

Conclusion

In conclusion, leveraging schema markup on your website is a powerful strategy for digital marketers in 2023. Schemas provide a structured way to communicate essential information about your web pages, videos, and other content to search engines, helping them understand and present your content more effectively to users. By incorporating schema markup, you can potentially enhance your SEO efforts and improve your website's visibility and ranking in search engine results. If you want to know more about how to add these schemas to your WordPress website, get in touch with our web experts.

Plugins

6 min read

Best Backup and Restore WordPress Plugins for 2025

WordPress

14 min read

Celebrating 20 Years of WordPress: A Journey through Milestones

Introduction

On May 27th, 2023 WordPress will turn 20 years old! WordPress has grown exponentially over the last two decades. From its humble beginnings as a simple blogging platform to its transformation into a versatile content management system (CMS) that powers millions of websites worldwide. Many CMSs were launched, and gone but WordPress thrived like no other. Let's look back at some of the significant milestones of WordPress from the past 20 years.

WordPress launched (May 27, 2003)

Matt Mullenweg, at the age of 18 (from Houston, Texas), used to weblog on his website, photmatt.net, where he wrote about technology, economics, politics, and his passion for jazz music and photography. Mike Little (from Stockport, England), on his weblog, wrote about books he read, and blogging technology. They both used the blogging tool b2/cafelog, which French programmer Michel Valdrighi created. On January 24, 2003, Matt posted a blog titled “The Blogging Software Dilemma,” where he expressed his concern that the then-famous blogging tool b2/cafelog had not been updated for months. The lead developer, Michel of b2/cafelog had disappeared for some unknown reasons. Matt’s blog was growing. At that time, his blog had passed twenty thousand unique visitors in 2003. He was looking for b2/cafelog alternatives. He tried the Textpattern and Movable Type weblog tools but due to licensing restrictions, he was not willing to use them. b2/cafelog was GPL, so Matt on his weblog proposed the idea of forking it since nobody was actively working on improving it.

“Fortunately, b2/cafelog is GPL, which means that I could use the existing codebase to create a fork, integrating all the cool stuff that Michel would be working on right now if only he was around. The work would never be lost, as if I fell of the face of the planet a year from now, whatever code I made would be free to the world, and if someone else wanted to pick it up they could. I’ve decided that this the course of action I’d like to go in, now all I need is a name.”

To which Mike Little replied back (the first comment).

“Matt, If you’re serious about forking b2 I would be interested in contributing. I’m sure there are one or two others in the community who would be too. Perhaps a post to the B2 forum, suggesting a fork would be a good starting point.”

This conversation was the starting point for WordPress. That's the power of a single comment, and the rest is history. Here is a screenshot of the blog with the comment.

Matt proposed the idea of forking b2/cafelog on his weblog to which Mike responded.

Since then both Matt and Mike, from their homes started working on improving b2/cafelog script which then became WordPress (with the name coined by Matt’s friend Christine Tremoulet) Finally, on May 27, 2003, Matt announced the release of the first version of WordPress, 0.7.

WordPress 1.2 "Mingus" (May 22, 2004)

WordPress 1.2 Mingus Write screen Image credit

WordPress version 1.2 is named “Mingus” in honor of jazz upright bassist, pianist, and composer Charles Mingus Jr.

New Plugin Architecture

WordPress version 1.2 was the first major release since its launch, which included the addition of plugin support. This release was significant because WordPress became a fully mature product as compared to the weblog tools available back then. Ryan Boren invented the plugin system. In his 2013 interview, he recalled the idea behind the plugin system,

“The 80/20 is like, is this useful to the 80 percent of our user's. If not, try it in a plugin. And it allowed us to do things like, you know, all these taxonomy plugins that did their own thing that kind of paved the way and then we later adopted. That was nice.”

The new plugin architecture made it easy to modify or extend WordPress’ features. It uses hooks (actions and filters) that developers could use to extend WordPress functionality without having to edit core PHP files. The WordPress community loved this feature.

The luck of timing

Back in those days, the Moveable Type (MT) blogging tool was a top competitor to WordPress. Six Apart, the company behind the Movable Type weblog on May 13th, 2004, made changes to the licensing and, most importantly, the pricing structure for the version 3.0 launch. The users had to pay for personal or commercial licenses based on the maximum number of authors and active weblogs. The free version had only one author and three active weblogs. Nine days later, on May 22, 2004, the WordPress 1.2 version was released. Dissatisfied MT users migrate to WordPress, which is flexible and has no restrictions. WordPress downloads increased from 8,670 in April 2004 to 19,400 in May 2004 on the SourceForge website, which was more than doubled.

WordPress 1.5 "Strayhorn" (February 17, 2005)

WordPress 1.5 Write Post screenshot

WordPress version 1.5 is named “Strayhorn” in honor of jazz composer, pianist, and lyricist Billy Strayhorn. This was another milestone event where WordPress version 1.5 was released with a Pages feature, better comment moderation tools, and a new theme system (on which the entire theme ecosystem that we see today was built)

WordPress Pages

The Pages feature was first introduced so that, apart from traditional weblogs, users could create websites with custom pages such as About Us, and Contact Us, among others.

Streamlined comment management Tools

To fight spam better, the comment management process was streamlined. For example, when someone comments on a blog, they are automatically held in moderation (called automatic whitelisting) unless the site owner has approved something from them before. Also, it was easy to deal with hundreds or thousands of comments, pingbacks, and trackbacks at once. Additionally, an option to blacklist spammers was added so that one does not need to monitor comments added to the list. And lastly, an option to allow comments only from visitors who verified their email and registered on the site.

Flexible Theme System

WordPress Presentation Panel Image Source.

The introduction of the theme system allowed users to modify their blogs' look and feel. Common site elements were divided into sections like headers, footers, and sidebars, each with its own file. The theme system was so flexible that individual pages, posts, or even categories could have their own template design. Also, multiple theme support was implemented so that users could switch the entire look and feel of the site with a single click.

New Default Theme Kubrick

This was the first time in WordPress history that a default (adapted version of the Kubrick theme) was bundled with a release. This theme was WordPress’ default theme (also in a sub-folder named “default” in the themes folder) until 2010. From 2010 onward, yearly themes such as Twenty-Ten, Twenty-Eleven, and so on were launched.

The Kubrick Theme was WordPress’ default theme until 2010.

WordPress 2.0 "Duke" (December 26, 2005)

WordPress version 2.0 is named “Duke” in honor of jazz pianist and composer Duke Ellington.

WordPress 2.0 Write Post screenshot Image Credit

New backend dashboard

WordPress 2.0 was released with a complete overhaul of the admin dashboard screens. Along with the User Interface (UI) facelift, the User Experience (UX) was also reimagined. For example, bloggers could add categories or tags without having to leave the post editor screen or delete comments or categories which will fade out without reloading the screen. Ability to drag and drop dialogs to rearrange and customize the admins' screens easily. In short, the publishing experience was faster and more streamlined thanks to AJAX functionality.

New User Role System

Previous versions of WordPress had an old numerical user-level system ranging from 0 to 10. User Level 0 had the lowest privileges and User Level 10 had the highest level of access (basically administrator). The numbered access level was confusing and was not a direct indicator of how these levels (ranging from 0 to 10) were mapped to capabilities. In the new system, roles such as administrator, editor, and contributor were created, which made it easier to understand what capabilities the users had.

New TinyMCE WYSIWYG Editor

In this version of WordPress, TinyMCE's WYSIWYG editor was integrated. This “What you see is what you get” (WYSIWYG) editor brought a smooth creating and editing experience natively to WordPress. TinyMCE remained the default editor from WordPress version 2.0 (December 26, 2005) to version 5.0 (December 6, 2018) for almost 13 years, which was then replaced by the Gutenberg Block Editor.

WordPress 3.0 "Thelonious" (June 17, 2010)

Introducing WordPress 3.0 Video (CC-BY-SA-4.0)

WordPress version 3.0 is named “Thelonious” in honor of American jazz pianist and composer Thelonious Sphere Monk. It was the thirteenth major release and the culmination of 218 contributors' work over a half-year period.

WordPress MU merged in the Core

3.0 release was bundled with lots of features that made WordPress a true CMS. One of the main features included the merging of the WordPress MU project (renamed to Multisite) into the core software. WordPress MU project was about creating the new multi-site functionality which makes it possible to run a single or multiple blogs (two or more) on the same WordPress installation.

Custom Post Types and Taxonomies

Custom post type (CPT) was a groundbreaking feature in this release. It was one of the features that transformed WordPress from a simple blogging tool to a full-fledged CMS. Before 3.0 the default content types were Post, Page, Attachment, Revisions, Nav Menus (and two more). The introduction of CPTs allowed the creation of new types of content for users, CPTs such as events, testimonials, books, portfolios, case studies, e-books, and staff, among others could be created. This helped users organize their content beyond the default Post and Page post types. Prior to 3.0, WordPress had categories and tags as default taxonomies. Users could create custom taxonomies from 3.0 (similar to CPTs) thus helping to organize content in better ways.

Default Theme every year

Twenty Ten theme was included in the WordPress 3.0 distribution

Along with WordPress 3.0, the Twenty Ten theme was launched, which replaced the Default (Kubrick) and Classic theme. Until then, Kubrick was the default theme from version 1.5 (February 17, 2005) to version 3.0 (June 17, 2010) for more than 5 years. The introduction of the Twenty Ten theme started the tradition of a new default theme every year. Since then, every year a new theme has been launched, such as Twenty Eleven, Twenty-Twelve, Twenty Twenty-Three, and so on.

WordPress 3.7 “Basie" (October 24, 2013)

WordPress 3.7 Dashboard screen

WordPress version 3.7 is named “Basie” in honor of American jazz pianist and composer Count Basie. 211 volunteer contributors' worked on this release.

Automatic maintenance and security updates.

With WordPress 3.7, maintenance and security updates were automatically applied. The update process happens in the background and is more reliable and secure than ever before. Minor point releases of WordPress (3.7.1, 3.7.2, for example) were automatically updated. Updates for major releases such as 3.7 and 3.8 were not applied automatically. Many users in the WordPress community didn't like this feature, as they felt it took away control from them since, without their permission, WordPress was updated in the background.

A new plugin-first development process

WordPress 3.7 was launched with the new plugin-first development process. Using this process, the new features were developed as plugins, and once the development was complete, they would be merged into the core. This process helped the core development team release updates in a much shorter timeframe and decouple feature development from a release.

One billion total plugin downloads (August 12, 2015)

WordPress Plugin Directory surpassed one billion total downloads between the 11th to 12th of August 2015. Below is a screenshot of the plugin directory. Wordpress total plugins

One billion total plugins downloads

WordPress 4.4 “Clifford” (December 8, 2015)

Introducing WordPress 4.4 video (CC-BY-SA-4.0)

WordPress version 4.4 is named “Clifford” in honor of jazz trumpeter and composer Clifford Brown. 471 contributors helped develop version 4.4.

REST API infrastructure.

In WordPress 4.4, the REST API infrastructure was integrated into the core. It was the first phase of the multi-stage rollout of the REST API integration. This was marking the dawn of a new era in developing with WordPress and it was one step closer to becoming a fully-fledged application framework. The REST API gave developers an easy way to connect WordPress with third-party applications. Most importantly it laid out the foundation for the Gutenberg Block editor, the future of publishing.

In-built responsive images

Another awesome feature that was launched in WordPress 4.4 was native responsive image support. This removes the need for any custom code or plugin. WordPress smartly displayed responsive images on any device (based on the srcset and sizes attributes on the image tag.)

WordPress 5.0 "Bebo" (December 6, 2018)

WordPress 5.0 screenshot

WordPress version 5.0 is named “Bebo” in honor of Cuban jazz musician Bebo Valdés. This release had 423 contributors with props.

Say Hello to Gutenberg Editor

“What is Gutenberg?” video (CC-BY-SA-4.0)

WordPress 5.0 revolutionized the content editing experience with the introduction of a new block editor Gutenberg. The new block-based editor was a game-changer and the first step toward a next-level content editing experience. The Classic TinyMCE WYSIWYG editor (launched on December 26, 2005) was replaced by the Gutenberg editor (December 6, 2018) after almost 13 years. The classic editor was available as a plugin in the WordPress repository for users who wanted a legacy editing experience.

Native Gutenberg Blocks in WordPress 5.0

Gutenberg editor has basic website building blocks such as paragraphs, headings, code, and quote, among others, as well as more advanced blocks such as gallery, audio, video, cover image, and many more to build custom layouts. Using these blocks, users can build their websites without writing a single line of code.

Introducing Twenty Nineteen theme

Twenty Nineteen theme Desktop and Mobile view.

Twenty Nineteen theme which has full Gutenberg support was launched with WordPress 5.0. It showcased the power of building websites using blocks. It’s a first-of-its-kind new generation theme where the layouts designed in the Gutenberg editor will be displayed exactly in the front end of the website.

WordPress 5.9 "Josephine" (January 25, 2022)

WordPress version 5.9 is named “Josephine” in honor of dancer, singer, and actress Josephine Baker. 624 generous volunteer contributors contributed to WordPress 5.9.

Introducing WordPress 5.9

Full Site Editing

Full Site Editing experience right in WordPress admin

WordPress 5.9 introduced Full Site Editing (FSE). In simple terms, in FSE, one can build and customize the entire website in the Site Editor. All the parts of the website, such as the header, footer, sidebar, pages, and posts in short, every section of the website can be built and customized using the Site Editor.

Twenty Twenty-Two Theme

Twenty Twenty-Two, the first default block theme in the history of WordPress, was shipped with version 5.9. It's a perfect example of how block-based themes should be built, and how Full Site Editing works. It's also an excellent reference for theme and plugin developers to learn from by looking at the source code.

Templates customization

WordPress 5.9 introduced various native block-based templates such as Home, Search, Single Post, and many others.

Templates of Twenty Twenty-Two Theme in Full Site Editing

In classic themes, these templates are PHP files such as home.php, single.php, and search.php, among others stored in the theme directory. In block-based themes such as Twenty Twenty-Two, there are HTML files stored in the “templates” directory. The best part about Full Site Editing is that these templates can be customized directly in the Site Editor without writing a single line of code. Below is a screenshot of editing the “Page” template right in the WordPress admin. All the layout changes in the site editor are stored in the database (instead of directly editing HTML files in the template folder of the Twenty Twenty-Two theme.)

Editing the “Page (Large Header)” template of the Twenty Twenty-two theme

Template Parts Customization

WordPress 5.9 also introduced the customization of template parts which are smaller reusable structural parts commonly used for site headers and footers. Again, one can customize the header and footer Template Parts in the Site Editor.

Template Parts in FSE

WordPress 6.2 "Dolphy" (March 29, 2023)

WordPress version 6.2 is named “Dolphy” in honor of e woodwind jazz wiz, and multi-instrumentalist, Eric Allan Dolphy Jr. Over 600 contributors have contributed to this release. Out of which 178 were new contributors.

The new Gutenberg editing experience

Reimagined Site Editor

WordPress 6.2 is the most recent, major, and stable release in 2023. The Site Editor is just getting better and better with every major release. The Site Editor has been completely reimagined and is now out of beta. Awesome new features were introduced, such as distraction-free mode, an easier-to-use navigation block, the ability to copy and paste styles between blocks, and many more.

Openverse integration

Over 700 million free, openly licensed, and public domain works are available in Openverse's library (currently only stock photos and audio). Users can search the Openverse catalog right in the media tab of the block inserter. Once the image is selected, it gets uploaded and inserted in the content with the correct attribution.

WordPress Powers 43.1% of The Web (May 27, 2023)

On May 27th, May 2023, WordPress Powers 43.1% of the top 10 million websites. The below screenshot shows yearly trends in the CMS usage statistics since January 2012.

Yearly trends in the CMS usage statistics since January 2012

Wrapping up

Over the past two decades, WordPress has achieved remarkable milestones. Since its initial release on May 27th, 2003, it has come a long way. It now powers more than 40% of the web. It’s been an awesome journey so far, and one that won’t stop any time soon. Here is a video that shows how WordPress has grown. [video src="https://w3techs.com/pictures/cms-bcr-202209.mp4" /]

The evolution of CMS usage statistics, 2014-2022, Video Source

That’s it for this article. Signing off for now. Happy birthday, WordPress, from the bottom of our hearts.

Plugins

5 min read

Best WordPress SEO Plugins for 2025

In the current digital world, search engine optimization (SEO) is essential for the success of any website. Better rankings, more organic traffic, and more satisfied users are all possible benefits of an SEO-friendly WordPress website. Numerous SEO plugins offer various features and benefits. This article will discuss the top WordPress SEO plugins for optimizing your website for search engines. Best WordPress SEO Plugins of 2023 The following are the best WordPress SEO plugins:

1. Yoast SEO

Yoast SEO is one of the best WordPress SEO plugins. The free version provides multiple features, such as analyzing the content of your post or page, XML Sitemaps, social media integration, and many more. The Yoast SEO Premium provides more sophisticated features like advanced language analysis that helps to write naturally, the use of synonyms and keyphrases that help to make text richer, adding schema markup, optimizing a page for up to five keywords, previewing your page appearance on Twitter and Facebook, and suggesting internal links to guide users to other areas of your site. Furthermore, Yoast SEO boasts its own website, offering premium support options, a vibrant community in its forum section, an educational blog for SEO insights, and courses catering to beginners, intermediates, and advanced users. Nevertheless, budget-conscious users can still take advantage of the free version, which outperforms most other WordPress SEO plugins by a significant margin. Key features:

Preview your exact appearance in Google search results, allowing you to tweak the meta description and title for improved appeal and keyword usage.
Yoast SEO allows you to add schema markup to your website, enhancing the visibility and appearance of your pages in search engine results.
It enables you to use focus keywords, thus helping you to optimize content with targeted keywords.
It comes with a Redirect manager, so you don’t have to install another plugin to handle your 301 redirects.

2. Rank Math

$Rank Math$ Rank Math SEO is a multipurpose plugin for your WordPress website. It provides complete on-page SEO management at your fingertips. Rank Math is a lightweight and easy-to-manage SEO plugin for WordPress that consolidates the functionality of several other plugins. The free version comes with an XML Sitemap, SEO Titles and Meta Descriptions, schema markup, focus keyword analysis to visualize the optimized content with different keywords, and much more. The premium version provides the user with keyword rank tracking, local SEO integration, Google News, and Video Sitemap, to name a few. Key features:

Each post, page, or product undergoes an SEO analysis based on 40 criteria.
It allows automatically adding alt or title tags to images that lack them.
Rich Snippets support is built-in, with a choice of six different snippets, such as Article, Product, Recipes, Events, Video, and Local Business.
The plugin also features a Redirection module, allowing you to direct 404 errors to more relevant content on your website.
Breadcrumbs are incorporated within the plugin, eliminating the need for an additional plugin.
Open Graph and Twitter Card support are also included.

3. All-in-One SEO (AIOSEO)

The most effective SEO plugin for WordPress is All in One SEO for WordPress (AIOSEO). It helps you improve your search results without learning complicated SEO terms. XML sitemaps, SEO title and meta tags, schema markup, and social media integration are some of the features available in the free version. The premium features come with more extensions, such as advanced WooCommerce support, local SEO integration, and an advanced robots.txt editor that offers an intuitive interface for editing and managing the robots.txt file of your website, thus controlling search engine crawlers' access to specific areas of your site. Key features:

Open Graph metadata is easily manageable with the built-in social media integration.
SEO Audit Checklist.
Faster Indexing with RSS sitemaps.
404 Error detection and redirection.
It provides a Link Assistant, which completely revolutionizes the practice of internal linking.
It offers the best features from different plugins, which eliminates the need for multiple plugins.

4. SEOPress

$Rank Math$ SEOPress is an ad-free, premium WordPress SEO plugin. Even the free version is 100% white-labeled and leaves no trace. It's easy, quick, and powerful, and it lets you control the title and meta descriptions for all of your pages, posts, and post types. It has a simple setup for new users and more complicated controls for those with more experience. As far as capabilities and customization go, it's on pace with the best WordPress SEO plugins available today. Optimizing tags (Open Graph and Twitter Cards) for sharing on social media; generating sitemaps in XML and HTML; and monitoring site traffic using Google Analytics are a few of the features of SEOPress. The free edition also includes a content analyzer for site administrators to use while writing articles. More than seventy-five hooks are available to developers for configuring the plugin. The paid version of the plugin comes with additional features such as breadcrumbs optimization, Google structured data types, and many more. Key features:

WooCommerce optimization for enhanced SEO support to eCommerce websites.
Local SEO integration.
The premium feature Backlink Integration helps to monitor and analyze your website's backlinks to understand your link profile and improve your SEO strategy.
Modify and optimize your website's URLs for better readability and SEO with URL rewriting.

5. Squirrly SEO

Squirrly SEO is one of the finest WordPress plugins for large, unique-content websites with high traffic. To help you improve your WordPress site in all aspects, from its backlink profile to its domain authority, it employs artificial intelligence and has an easy-to-use interface. The full keyword tracking and data tools make Squirrly SEO stand out. This WordPress plugin is also useful for regional search engine optimization thanks to features like local business schema and Google Earth integration. Squirrly's SEO recommendations differ from those of the other plugins. To begin, enter the topic you want to write about. You then proceed to compose your piece while the green lights respond to the inputted term. Key features:

Optimization of keywords happens in real time as you write.
If you're replacing another WordPress SEO plugin with Squirrly, your current settings will remain intact.
You can share content reports created using Squirrly with colleagues.
Analyze your competitor’s SEO strategies to gain insights and stay ahead of them.

Conclusion

In conclusion, when it comes to WordPress SEO plugins for 2023, there are several notable options to consider. Yoast SEO offers comprehensive features and user-friendliness, while Rank Math provides advanced functionality like keyword tracking and internal linking suggestions. All-in-One-SEO is a reliable choice with essential features, while SEOPress and SEO Squirrly offer a range of advanced features like competitor analysis (SEOPress) and social media monitoring (SEO Squirrly). Consider your specific SEO needs and budget when choosing the right plugin for your website. Stay updated with the latest developments as these plugins evolve to meet the changing SEO landscape. Ultimately, integrating an SEO plugin will optimize your content, improve visibility, and drive organic traffic in the years to come. We hope this article has helped you learn about the best SEO plugins that suit your needs.

How to Add Google Analytics 4 in WordPress from Scratch (With and Without Plugins)

Tutorials

10 min read

How to Add Google Analytics 4 in WordPress from Scratch (With and Without Plugins)

Introduction

Google is advising website owners to upgrade to Google Analytics 4, as Universal Analytics (UA) will be discontinued on July 1, 2023. (July 1, 2024, for Analytics 360 properties). It's critical that you switch to Google Analytics 4 as soon as possible since UA will stop collecting data after sunset. In this article, we’ll show you how to easily switch to Google Analytics 4 and add the tracking code to your WordPress website.

Switch to GA4 from GA3 using the setup assistant

The first step to setting up Google Analytics 4 is to create a new property in your Google Analytics account. 1. Log in to your Google Analytics account. 2.1 Once you have logged in to your account, you will see a warning message to migrate to GA4 property (from UA). As seen in the below screenshot, click on the “Manage GA4 migration” link.

Screenshot 1: Migrate to GA4 warning message

2.2 If you don't see any warning messages, then head over to the admin section on the bottom left.

Screenshot 2: Choose the UA property to migrate

3. Choose the UA property you want to migrate, and click on the “GA4 Setup Assistant.” 4. To create a new GA4 property, click on "Get Started."

Screenshot 3: Click on “Get started” to create a GA4 property

5. The setup assistant popup will appear; click on “Create and continue.” This step will create a new GA4 property.

Screenshot 4: Click on “Create and continue” in the GA4 setup assistant popup

A few things to note when you are creating a new property using the GA4 setup assistant

The setup assistant will keep your original Universal Analytics (UA) property unchanged.
Basic settings from your UA will be copied over to the GA4 property. If you have configured advanced settings in UA, then it needs to be set up manually in GA4.
By default, the setup assistant creates a website tag to start measuring activity
GA4 offers enhanced event measurements, which capture all the interactions on your website as events. This new feature is enabled by default.

The following table shows, for an event trigger, which parameters are collected in GA4.

Measurement option (event name)	Parameters collected
Page views (page_view)	page_location (page URL), page_referrer (previous page URL)
Scrolls (scroll)	No parameters are collected
Outbound clicks (click)	link_classes, link_domain, link_id, link_url, outbound (boolean)
Site search (view_search_results)	search_term
Video engagement (video_start, video_progress, video_complete)	video_current_time, video_duration, video_percent, video_provider, Video_title, video_url, visible (boolean)
File downloads (file_download)	file_extension, file_name, link_classes, link_domain, link_id, link_text, link_url
Form interactions (form_start, form_submit)	form_start form_id: HTML id attribute of the <form> element form_name: name attribute of the <form> element form_destination: form submit URL Form_submit form_id: id attribute of the <form> element form_id: HTML id attribute of the <form> element form_name: name attribute of the <form> element form_destination: form submit URL form_submit_text: text of the submit button, if present

6. Select "Install a Google Tag” and click “Next”.

Screenshot 5: Choose how to set up a Google Tag

After that, it will give two options to configure Google Analytics 4 property

A. Install Manually: Using this approach the Google tag code is to be manually added to your website. B. Install with a website builder or CMS: Using this option the Google tag can be added to various website builders or CMS like WordPress, Wix Squarespace, Drupal, etc.

Screenshot 6: Two options to install GA4 code

7. Click on the “Install Manually” tab to copy the code that is generated. This will be later used in setting up GA4 manually.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'TAG_ID');
</script>

Code snippet 1: Sample Google Analytics 4 code

Let’s dive deeper into both options to configure GA4.

Methods for adding GA4 to your WordPress website.

Once you have created your new GA4 property, the next step is to install the tracking code on your WordPress site. We’ll show how to do it using two different methods.

Method 1: Manually add the GA4 code (without plugins)
Method 2: Using Site Kit and MonsterInsights Plugins

Method 1: Install the GA4 tag manually on your WordPress website (without plugins)

A few things to consider when you are manually adding code

We recommend adding GA4 code to the child theme instead of the Parent theme. If you don't have a child theme installed follow this tutorial for creating a child theme.
Before making any changes to your site we recommend, you should always back it up. Read this blog on how to back up a WordPress website. At the minimum, you should make a copy of your child theme’s header.php file or functions.php since we are modifying it. if something goes wrong during the editing process then you can restore it.
We recommend adding the tag manually only if you have the technical expertise to do so.

Option 1: Adding a tag to the header.php file (recommended for developers)

To install the GA4 tag manually, first log into your WordPress dashboard. 1. Go to Appearance -> Theme File Editor (If you’re using a block-based WordPress theme then go to Tools -> Theme File Editor ) Because we were directly editing the theme files, you will see a warning popup message as shown in below screenshot 3. Hence, we recommend this option only for developers. Theme editor showing a warning for making direct edits to file

Screenshot 7: Theme editor showing a warning for making direct edits to file

2. Select the child theme to edit from the dropdown on the right. After that, select the header.php file.

Screenshot 8: Paste the GA4 code before the HTML </head> tag

3. Paste the GA4 code (that was copied from the previous step) just before the HTML </head> tag, as shown in the above screenshot.

4. Click on “Update File.”

That’s it. The Google Analytics 4 tracking code is installed, and you can view your site's data in your analytics account.

Option 2: Add a Google tag through the functions.php file (recommended for developers)

1. Open the child themes functions.php file in the code editor. Here is a blog for more information on the functions.php file. 2. Add the GA4 code snippet (that was copied from the previous step) at the end of the file.

Screenshot 9: GA4 code added through functions.php file

4. Save the file and reload your webpage

add_action( 'wp_head', 'add_ga4_code' ) ;
function add_ga4_code() {
  ?>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'TAG_ID');
</script>
}

Code snippet 2: Sample GA4 code added through functions.php file

Method 2: Using a free version of the plugins (Site Kit or Monsterinsights )

Note: In the steps that follow, we will assume that you are installing the Site Kit or Monster Insights plugin from scratch.

Option 1: Adding GA4 tag using the Site Kit plugin by Google

1. Head over to Plugins -> Add New Plugin, in your WordPress backend. Search for the keyword “google analytics”. 2. Next, install and activate the Site Kit plugin, as shown in the below screenshot.

Screenshot 10: Install and activate the Site Kit plugin.

3. Once the Site Kit plugin is activated, click on "Start setup." Click on Start Setup

Screenshot 11: Click on "Start Setup."

4. Select the check box ”Connect Google Analytics as part of your setup.” This step is important in configuring GA4. 5. Click on “Sign in with Google.”

Screenshot 12: Connect Google Analytics as part of your setup

6. Choose an account that you use to login into Google Analytics.

Screenshot 13: Choose the Google account that you use to log in to Analytics.

7. Give access to the Site Kit as shown in the below screenshot and click “Continue.”

Screenshot 14: Select all the checkboxes to proceed further.

8. Click on “Verify.” This will add a verification token to your site's HTML code.

Screenshot 15: Verify site ownership

9. Click "Allow." It will allow your website to access Google Analytics data. The metrics will be shown in the Site Kit dashboard.

Screenshot 16: Allow your website to access Google Analytics data

10. Click on “Setup” to connect Site Kit and Search Console.

Screenshot 17: Connect Site Kit and Search Console

11. Click on “Next” to allow Site Kit to set up Google Analytics. You will be redirected to the Site Kit dashboard.

Screenshot 18: Allow Site Kit to add your website to Google Analytics

12. In the Site Kit dashboard, select the Google Analytics account and the newly created GA4 property. Also, select the associated UA (GA3) property as shown in the below screenshot.

Screenshot 19: Connect Google Analytics service

13 Click on “Configure Analytics,” and the Site Kit setup is complete.

Screenshot 20: Site Kit setup completed

Here is a screenshot of the code snippet added by Site Kit.

Screenshot 21: Google Analytics snippet added by Site Kit

Few things to note when you have installed the GA4 tag using the Site Kit Plugin

If Site Kit is used to configuring UA and GA4, stats will be tracked for both properties.
At the time of writing, GA4 statistics are not shown in the Site Kit dashboard and can only be viewed. Integration of GA4 data to Site Kit’s dashboard is not yet implemented in the current version of the plugin hence you have to view GA4 data in your Analytics account.

Option 2: Adding GA4 tag using the MonsterInsights plugin

1. Go to Plugins -> Add New Plugin, in your WordPress backend. Search for the keyword “monsterInsights”. After that, install and activate the plugin as shown in the below screenshot.

Screenshot 22: Install and activate the MonsterInsights plugin.

2. Click on “Launch the Wizard.”

Screenshot 23: Launch the wizard

3. Choose your website category and click “Save and Continue..”

Screenshot 24: Choose a category that best describes your website

5. Click “Connect MonsterInsights.” After which you will be redirected to the MonsterInsights website to connect your Google Analytics account.

Screenshot 25: Connect MonsterInsights

6. Choose a Google account to continue.

Screenshot 26: Select a Google Analytics account.

7. Click on “Allow” to give MonsterInsights access to your Google Analytics and Search Console data.

Screenshot 27: Allow Monsterinsights to access your Google account data.

8. Choose the GA4 property from the list of available properties and click on “Complete connection.”

Screenshot 28: Choose the GA4 property to connect

9. Click on “Save and continue” on the recommended settings page.

Screenshot 29: Events tracking enabled by default

10. Choose which features you want the MonsterInsights plugin to enable. We recommend enabling the “Advanced Reports” and “Advanced Tracking” features. 11. Click on “Continue.”

Screenshot 30: Choose which feature you want to enable.

At this point, the tracking and analytics setup is complete. 12. Next, click on “Complete setup without Upgrading.”

Screenshot 31: Google Analytics is connected, and the tracking code is installed.

You will be redirected to the settings page, which will show a success message. 13. Click on “View Reports.”

Screenshot 32: Google Analytics 4 property is connected

You will be redirected to the “Reports” menu, where you will be able to see Google Analytics 4 data in the WordPress dashboard.

Screenshot 33: View reports to see your GA4 data flowing.

Note: It can take a few hours for the data to start appearing in GA4 and in your MonsterInsights Dashboard.

Conclusion

Google is sunsetting Universal Analytics (UA) as of July 1, 2023, which means it will stop collecting and processing new data. In order to have a considerable amount of GA4 data tracked before UA is retired, we advise setting up Google Analytics 4 (GA4) as soon as you can. After this date, Site Kit will no longer display previous UA data. In this blog post, we discussed in detail two methods of adding GA4 code. First, by adding code manually, and second, by using the plugins Site Kit and MonsterInsights. That's it for this blog, Signing off for now. If you want experts to manage your WordPress website, then hire our awesome experts.

How to Add FAQ Schema in WordPress with and without plugins (2023)

Tutorials

13 min read

How to Add FAQ Schema in WordPress with and without plugins (2023)

Introduction

Are you looking to add a FAQ schema to your WordPress website? If yes, then you have come to the right place. In this blog, we will discuss in-depth & step-by-step methods of adding an FAQ schema to a WordPress website.

What is FAQ Schema, and why should you add it to your website?

In simple terms, a FAQ schema is structured data (JSON markup) that allows the contents of frequently asked questions (FAQs) on your website to be displayed in rich result snippets, as shown in the below screenshot.

Screenshot 1: Example of FAQ schema in action

As you can see from the above screenshot when a user searches for the query “What is ChatGPT?”, along with the blog content that has ranked organically, there are two FAQs shown below it. You can accomplish this by adding a FAQPage schema markup to your website. The benefit of implementing FAQ structured data markup is that you get more screen estate in SERPs, it improves click-through rates, and it will drive more traffic to your website. In short, by adding an FAQ schema to your website, you can help search engines better understand your content so that they can display it in rich results.

Methods for adding FAQ schema in WordPress

In this post, we’ll show how to add a FAQ schema using two different methods. Method 1: Using Plugins Method 2: Manually adding the schema code Note: All the methods that we discuss in this post use the Gutenberg Block Editor.

Method 1: Using a free version of Plugins (Rank Math SEO and Yoast SEO)

The simplest and most straightforward method is to add an FAQ schema using plugins. The plugins will automatically generate the FAQ schema and dynamically add it to the post without you worrying about the underlying technical aspects of it.

Option 1: Adding FAQ schema using Rank Math SEO

Step 1.1: Install and activate the Rank Math SEO plugin

The first step is to install and activate the Rank Math SEO plugin on your WordPress website. This plugin makes it very easy to add structured data markup to your website, such as FAQ Schema. If you have already installed the plugin on your website, you can skip this step and go to step 1.2. $Search, install, and activate the Rank Math SEO plugin$

Screenshot 2: Search, install, and activate the Rank Math SEO plugin.

Search for the Rank Math SEO plugin and install it, or download (from here), upload, and install it on your website.

Step 1.2: Create a new post and add the Rank Math FAQ block

Let's say you want to add the FAQ schema to a post (similarly, you can add it to a page). $Search and add Rank Math FAQ block to the post$

Screenshot 3 Search and add Rank Math FAQ block to the post

Search for the FAQ schema block in the Gutenberg blocks. You will see the Rank Math FAQ block since we have installed this plugin in Step 1 above. Add the FAQ block to the post.

Screenshot 4: Add the FAQ question and its answer

Next, fill out the question and answer as seen in the above screenshot. You can add multiple FAQ blocks as per your requirements. Once you've added your FAQs, you can publish them by clicking the "Publish" button. The Rank Math SEO plugin will automatically generate the FAQ structured data and add it to your post. $FAQ and Styling options of Rank Math SEO plugin$

Screenshot 5: FAQ and Styling options of Rank Math SEO plugin

The Rank Math SEO plugin also lets you set FAQ options such as

Choosing the List style of the FAQs (Numbered or Unordered HTML list )
Setting the HTML elements as a wrapper for the title of FAQ (H3 to H6, P or Div element)
Choosing a size of FAQ images (Thumbnail, Medium, and Large).

It also provides styling options such as setting

Title wrapper CSS classes
Content wrapper CSS classes
List CSS classes.

Behind the Scenes of Rank Math SEO FAQ block (technical stuff)

Here is the schema markup that the Rank Math SEO plugin generated. You can see it by viewing the source code of the post once you have published it $Schema markup added by Rank Math SEO$

Screenshot 6: Schema markup added by Rank Math SEO

Note that the Rank Math SEO plugin by default adds a few schema types on the fly, such as:

Rich Results test tool detected Article Schema structured data along with FAQ Schema structured data.
Schema.org’s validator tool detects BlogPosting schema as the root @type under which
- FAQ schema is added as isPartOf property with mainEntity as @type question and
- FAQ schema is added as mainEntityOfPage with mainEntity of @type Question

Below is a sample of structured data that is generated. (The JSON-LD markup is trimmed to show only the FAQ schema.)

<script type="application/ld+json" class="rank-math-schema">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "@id": "https://v3.wpoets.com/testbench/?p=16#webpage",
      "url": "https://v3.wpoets.com/testbench/?p=16",
      "name": "Rank Math FAQ Schema - testbench",
      "datePublished": "2023-03-10T10:26:24+00:00",
      "dateModified": "2023-03-10T10:26:24+00:00",
      "isPartOf": {
        "@id": "https://v3.wpoets.com/testbench/#website"
      },
      "inLanguage": "en-US",
      "mainEntity": [
        {
          "@type": "Question",
          "url": "https://v3.wpoets.com/testbench/?p=16#faq-question-1677825596784",
          "name": "This is First FAQ question",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          }
        }
      ]
    }
  ]
}
</script>

Code snippet 1: JSON-LD schema markup generated by Rank Math SEO plugin

Option 2: Adding FAQ schema using Yoast SEO

Step 2.1: Install and activate the Yoast SEO plugin

The first step is to install and activate the Yoast SEO plugin, as we did for the Rank Math SEO plugin. You can use either of the two plugins to add the FAQ schema code. $Search, install, and activate the Yoast SEO plugin$

Screenshot 7: Search, install, and activate the Yoast SEO plugin

Search for the Yoast SEO plugin in the “Add New” plugin screen, install it, and then activate it. You can also download (from here), upload, and install it on your website.

Step 2.2: Create a new post and Add the Yoast SEO FAQ block

Let's say you want to add a Yoast FAQ block to the WordPress post (similarly, you can add it to a WordPress page).

Screenshot 8: Search and add a Yoast FAQ block to the post

Search for “FAQ” in the Gutenberg blocks. You will see the Yoast FAQ Gutenberg block since we installed this plugin in Step 2.1 above. Click on the FAQ block to add it to the post. Now let's add the FAQ content. Enter the question and the answer to the question in the block. You can add as many questions and answers as you'd like by clicking the "Add Question" button at the bottom of the FAQ block.

Screenshot 9: Add the FAQ question and its answer.

Once you've added your FAQ content, preview your post to make sure everything looks good. If the preview looks good, publish the post. That's it! By following these simple steps, you can easily add FAQ schema to your WordPress post using the Yoast SEO plugin.

Behind the Scenes of Yoast SEO FAQ block

Below is the markup snippet that the Yoast SEO plugin automatically generated. You can see it by viewing the page source.

Screenshot 10: Schema markup added by Yoast SEO

Note that the Yoast SEO plugin by default adds a few schema types to the post, such as:

Rich Results test tool detects BreadCrumbs and Sitelinks searchbox structured data along with FAQ Schema structured data that was added.
Schema.org’s validator tool detects only WebPage Schema and FAQPage schema as the root @type under which FAQ schema is added as mainEntity
- It also added breadcrumb schema as a child node to the root node of @type WebPage and FAQPage.

Below is a schema snippet that Yoast SEO generated (the markup snippet is trimmed to show only the FAQ schema).

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "@id": "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/",
      "url": "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/",
      "name": "Yoast FAQ Schema - testbench",
      "isPartOf": {
        "@id": "https://v3.wpoets.com/testbench/#website"
      },
      "datePublished": "2023-03-17T11:03:23+00:00",
      "dateModified": "2023-03-17T11:03:24+00:00",
      "author": {
        "@id": "https://v3.wpoets.com/testbench/#/schema/person/7481d9a511fe42faa4e1593e6f702108"
      },
      "breadcrumb": {
        "@id": "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/#breadcrumb"
      },
      "mainEntity": [
        {
          "@id": "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/#faq-question-1679044158945"
        }
      ],
      "inLanguage": "en-US",
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/"
          ]
        }
      ]
    },
    {
      "@type": "Question",
      "@id": "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/#faq-question-1679044158945",
      "position": 1,
      "url": "https://v3.wpoets.com/testbench/2023/03/17/yoast-faq-schema/#faq-question-1679044158945",
      "name": "This is a Second question",
      "answerCount": 1,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        "inLanguage": "en-US"
      },
      "inLanguage": "en-US"
    }
  ]
}

Code Snippet 2: FAQ Schema code generated by Yoast SEO

If you observe the FAQ markup generated by Rank Math and Yoast SEO, the structure of the JSON-LD code is different in each case.

Method 2: Adding schema manually

In this method, we will look into how to add FAQ schema data to the post manually without the use of plugins. There are a few things that you should know when adding the schema manually

Since we are not using any plugin, the styling of a FAQ block has to be done manually.
The FAQ schema is to be coded manually or generated using an online tool

Step 2.1 Create the visual part of the FAQs in the Post

The first step is to add the question and answer to the post using inbuilt Gutenberg blocks. This will create the HTML (visual part) for the FAQs. To do that, search for the heading block (as shown in screenshot 2.1 below) and add it to the post. In the heading block, add your FAQ question. Change the heading level to H5 or H6 as per your choice. You can also use a paragraph block instead of a heading Gutenberg block.

Screenshot 11: Add an FAQ question to the post using inbuilt Gutenberg blocks.

Once the question is added, enter the FAQ answer in the paragraph block, as seen in screenshot 2.2 below.

Screenshot 12: Enter the FAQ answer

Now we have added both the question and its answer to the post. Next, we will add schema code so that search engines can detect the FAQs and display them in rich search results.

Step 2.2 Generating JSON-LD markup using online Schema Generator

Head over to this Link https://saijogeorge.com/json-ld-schema-generator/faq/ which is a free tool for generating FAQ schemas.

Screenshot 13: JSON-LD online Schema Generator

Add your FAQ question and its answer as shown in the above screenshot. You can add multiple FAQs at the same time. The schema generator will add structured data for that many FAQs.

Screenshot 14: Add JSON-LD schema markup to the HTML block in your post

The next step is to add this generated code to our WordPress post. To do that, search for an HTML block and add it to the post as shown in the above screenshot (2.5). After that, you can update or publish the post. Visually, there is no difference after this step, but search engines can now crawl and display the FAQs as rich results.

Behind the scenes of manually adding the FAQ schema

Once you have published the post, right-click on it and view its source.

You will see the FAQ schema code that was added manually.

Screenshot 15: FAQ schema code added manually to the post

<script type="application/ld+json" class="rank-math-schema">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "This is a first FAQ question",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      }
    }
  ]
}
</script>

Code snippet 3: JSON-LD schema code generated by online schema generator

Drawbacks of manually adding schema

While you can manually add the JSON-LD FAQ schema to a WordPress site without using a plugin, there are some potential drawbacks to consider:

You need to manually update the schema markup every time you add or remove or update a FAQ question or answer. This means you have to either manually edit the question and the answer in the JSON code or regenerate the schema code for the FAQs. This can be time-consuming and error-prone.
If your website has many web pages which consist of FAQ sections, manually adding FAQ schema to all those web pages will become time-consuming, error-prone, and not scalable.
Managing multiple schemas on a single page or post can be challenging. Especially if you need to add or update properties to the existing schema code.

Testing the WordPress FAQ schema

Once you have implemented schema markup on your WordPress site, whether using a plugin or manually, make sure you test it. You can test it using these two tools

Testing the FAQ schema using Google’s Rich Results Testing tool

Rich results test tool allows you to check whether or not the structured data is correct. To test the validity of the FAQ schema code, simply copy the URL of your post and paste it into the tool.

Screenshot 16: Enter the URL in Google’s Rich Results Testing tool.

The tool shows the test results, as shown in the below screenshot. We can see that valid FAQ structured data is detected. If there are any errors or warnings, they will be highlighted in the test results.

Screenshot 17: Test results show a valid FAQ schema.

Testing the FAQ schema using Schema.org’s validator

https://validator.schema.org/ is an online tool where all the schema types can be validated. It shows a summary of the extracted structured data graph and points out syntax errors. Head to this URL https://validator.schema.org/ and enter the URL for which you want to test FAQ markup data. Once the URL is entered, click the "run test" button as shown in the screenshot below.

Screenshot 18: Testing structured data using schema.org validator

Screenshot 19: FAQPage detected by schema.org validator

As you can see from the above screenshot, the schema tool detected valid FAQPage structured data. If you have multiple schema codes added to the same post, they will also show up in the list. Also, If there are any errors in the markup, then make sure to fix them before submitting your pages for indexing by search engines. Note: If you are updating the schema code, make sure you clear the WordPress cache before testing it using these tools.

Conclusion

In this blog post, we discussed in detail two methods of adding an FAQ schema. First, by using the plugins Rank Math SEO and Yoast SEO; and second, by using the manual method. We recommend that you use plugins to add the FAQ schema code to your website because it will automatically create and update the schema for you behind the scenes. It will also save a lot of time, and you need not worry about the underlying technical aspects of it. Also, once the schema code is added using any of the above methods, it's important to use the recommended tools to validate it to make sure it was added correctly and is visible to search engines. If you want experts to manage all the schemas of your website, then hire our Awesome WordPress experts. That's it for this blog, thanks for reading - happy optimizing :)

International Women’s Day: Stories of Empowerment at WPoets

General

4 min read

International Women’s Day: Stories of Empowerment at WPoets

Debunking Common WordPress Myths and Misconceptions

General

8 min read

Debunking Common WordPress Myths and Misconceptions

Introduction

Every once in a while, we come across marketers and business owners who tend to believe WordPress myths. They believe that it's difficult to use, that only small-scale websites can be built using it, that it's not secure, that it’s too expensive to maintain, or that sometimes they even have personal excuses about it. Let's talk about why these misunderstandings happen in the first place and how to get past them so that the readers can make an informed choice.

WordPress is not secure

This is one of the most common myths about WordPress and has been done to death. While no CMS is 100% secure, WordPress is actually quite secure when compared to others. WordPress security revolves around three things. Let's discuss this in more detail.

WordPress Core

The WordPress core software is one of the most critical targets for attacks. Hackers are always looking to exploit out-of-date versions of the WordPress core. They use loopholes to gain access to the website and perform unauthorized activities. To protect that, the WordPress core software is regularly audited and updated by security experts and released to the public. The WordPress Security Team is in charge of core security. It’s made up of lead developers, security researchers, and web security professionals. Any security flaws that are detected, are reported to the security team. The team then works to confirm the vulnerability and figure out how severe it is. If the vulnerability is confirmed, the security team makes plans for a patch to fix it. Depending on how serious the problem is, the patch can either be added to a future version of WordPress or put out right away as a security release. In short, they are really working hard to keep the WordPress core secure.

Themes and plugins system

One reason why so many people use WordPress is because of its theme and plugin system. The WordPress theme directory has over 10,000 themes to choose from, and the plugin directory has over 60,000 plugins. These numbers come from official directories, but just think about how many themes and plugins are available on third-party sites and in private repositories. Hackers take advantage of themes and plugins that are poorly coded because they are easy targets with many attack surfaces. If you are really serious of your WordPress website security then you should follow certain best practices such as

Installing themes and plugins from trusted sources
Limit the use of plugins to a minimum
Regularly updating themes and plugins
Scanning themes and plugins from a security perspective

Managing the website

The security of WordPress also depends on how it's managed. We see that most website owners do not manage their websites because they lack knowledge, time, or budget, or are simply negligent. They don’t realize how important it is to keep their WordPress site secure until someone hacks it. If you follow the best security practices, like using two-factor authentication, installing SSL certificates, keeping the versions of your WordPress core, theme, and plugins up to date, and using a secure hosting provider, among others, you can easily prevent security problems. On top of that, it's recommended to use a third-party security plugin or service to further strengthen your website's security. To know more about "dos and don'ts" in WordPress security, go through this article.

WordPress is not as trending as it was five years ago.

Another common myth about WordPress is that it's not as trendy as it was a few years ago.

Here are the WordPress usage statistics. If we have a look at the growth of WordPress in the past five years, it is astounding.

Historical yearly trends in the usage statistics of WordPress Historical yearly trends in the usage statistics of WordPress Source: https://w3techs.com

WordPress is still one of the most popular content management systems out there, and its popularity keeps going up.

WordPress is difficult to use

WordPress started primarily as a simple blogging tool, but over time it evolved so that a wide spectrum of web solutions could be built. To achieve this flexibility, an architecture of themes and plugins was created. Concepts such as posts, pages, permalinks, blocks, widgets, etc. were used, Advanced concepts such as custom post types, and custom fields, among others, were introduced. When you first start using WordPress, all of this technical jargon may seem overwhelming. But over a period of time, you will get used to it. In fact, WordPress hits the sweet spot between being beginner-friendly and developer friendly. For beginners, it provides a great way to build websites. Of course, there is a learning curve for it, and to help them, a lot of resources are available on the internet to get them started. For developers, they can build everything from beautiful websites to complex web applications to high-traffic websites on top of WordPress.

WordPress is slow

It's true that WordPress isn't fast out of the box; it needs to be optimized continuously, which is where this WordPress myth comes from. Here are a few possible reasons why WordPress may be slow.

Slow WordPress admin dashboard

This is one of the most common problems that stakeholders who manage the site complain about. You know the scenario: You want to quickly publish a post, bulk upload images, add or reshuffle menus, or update content on pages, but WordPress admin takes forever to load. This problem gets worse when you have a team of people, like a web manager, content producer, developer, webmaster, marketer, and others, working on the admin dashboard at the same time. We can all agree that a slow WordPress admin dashboard is a productivity killer. But having said that, there are many ways the WordPress backend can be made faster. Here are a few

Upgrade the hosting plan or change your hosting provider
Update PHP version
Increase WordPress memory limit
Optimize WordPress database

Reduce the number of admin side plugins. Instead, custom code the admin side functionality. Here is an excellent, in-depth article explaining how to speed up WordPress admin panel.

Slow Frontend

The front end of the website will receive almost all of your website traffic. If your front end of the website is slower, then, in the most simple terms, it's hurting your business.

Here are a few reasons for the frontend website being slow

Bulky themes or slow page builders
Slow plugins ( that add too much CSS/JS )
Not using caching, image compressions, and other speed improvement techniques
Not using CDN
Relying on cheap or shared web hosting

But having said that, there are many ways the WordPress frontend can be made faster. Here are a few ways

Get Good WordPress Hosting
Use Optimized themes and plugins
Use a Content Delivery Network(CDN)
Use a Caching Plugin
Reduce the number of HTTP requests
Always optimize images

Here is a blog post that we wrote about how to improve the speed of your WordPress website.

The future of WordPress is Uncertain

In recent times, this new misconception has popped up. We see that many marketers are talking about this as they are worried about the future of WordPress. Here is the reason why this misconception arises in the first place. Nowadays, a lot of popular JS frameworks are on the rise. You might be aware of or have heard of frameworks like ReactJS, Next.js, and Gatsby, among others. These are Javascript frontend frameworks, which are used for building websites and complex business applications. They use an architectural approach called Jamstack, which has recently become popular. Since these new frameworks are on the rise (along with the Jamstack approach), stakeholders are uncertain about the future of WordPress. They believe that WordPress will be obsolete in a few years and that they will need to switch to these frameworks to build their next website (which is a form of FOMO). Also, there is a lot of debate going on between WordPress and Jamstack about which one is better. You can read more about it here. There are many differences between Jamstack and WordPress. These tools use a different approach and architecture to build web solutions. Here are a few differences.

WordPress	Jamstack
All-in-one platform to build websites and applications	A collection of tools to create websites and applications
Monolithic architecture	Modular architecture
Dynamically generated web pages	Statically generated web pages
Everything, including databases, web servers, and business logic, is self-contained.	Custom logic and third-party services are consumed through APIs.
User-friendly (even nontechnical users can manage the website)	Developer-friendly (hence dependency on technical expertise to manage the website)
Performance optimization has to be continuously improved.	Static websites hence performance is out of the box
WordPress is good for building highly dynamic sites. This includes news sites, forums, and other sites with a lot of user interaction or sites that are updated often.	Jamstack is good for building static websites where there are few user interactions.
Extensive themes and plugin library	A relatively new ecosystem; hence, themes and plugins are limited.
Marketer-friendly	Non-Marketer-friendly (as of now)
Development costs are cheaper initially	Development costs are higher initially

As we can see, there are many differences, along with pros and cons, between Jamstack and WordPress. The best way to choose between both tools when building websites is to evaluate the project requirements and then decide which one is suitable since every project is unique. And regarding the misconception that WordPress will be obsolete, here’s our take. Building websites using the Jamstack architecture is growing, but disrupting the WordPress CMS market share is not easy. Developers are loving Jamstack, hence, they are quickly adopting and promoting it, but businesses aren’t as quick to ditch WordPress and adopt new frameworks. In short, WordPress is not going away soon.

Conclusion

We discussed the top myths and misconceptions revolving around WordPress and tried to overcome them. It will help marketers and decision-makers make an informed decision about whether to use WordPress in their next project. If you have any further questions or would like to learn more about WordPress, please contact our web experts.

How to lazy load YouTube videos in WordPress to improve Core Web Vitals

General

5 min read

How to lazy load YouTube videos in WordPress to improve Core Web Vitals

Introduction

One of the projects required us to put more than twenty YouTube videos on a WordPress page. They had various videos showcasing their expertise, which were to be added to the website. But the problem is that embedded YouTube videos slow down web page load times. It also has an impact on the Core Web Vitals. After embedding the YouTube videos, we conducted the PageSpeed test, and as you could anticipate, the result was poor. We were dissatisfied with it because page load time is an important factor in the user experience of a web page. So let’s discuss the problem in detail and the solution.

The Problem

Let’s create a simple page consisting of six videos. We are using the built-in Youtube Embed block in Gutenberg, where we just copy and paste the video's URL into the editor.

Screenshot 1: YouTube embeds Gutenberg Block

Here is a demo page that is similar to the client’s video gallery page, which we discussed before.

Screenshot 2: A page with six videos in a video gallery.

The PageSpeed score is 49 (Lighthouse data), which is very low.

Screenshot 3: Low PageSpeed score

Let’s understand why the page load time is so high. When a YouTube video is embedded on a page, it requires many resources (mostly javascript files) to render it, which slows down the loading of the page. These resources are required to style the video player along with its functionality, such as pause, play, etc.

Screenshot 4: Number of JS requests

As we can see, fifty or more JS requests are made for the six videos embedded on the page (excluding the WordPress theme and third-party JS library requests). In general, the more videos that are embedded on a page, the heavier the page becomes, which makes the performance even worse.

Solution

So now that we know the problem, let’s discuss the solution. To embed YouTube videos on a WordPress page, we are going to use the <lite-youtube> web component. It’s a custom HTML element that renders YouTube embeds faster. The awesome part is that it's just a vanilla web component with no dependencies. Let’s integrate this web component into WordPress.

Step 1: Register and Enqueue Scripts


add_action( 'wp_enqueue_scripts', 'init_assets' ) ;

/**
 * Enqueue required assests.
*/
function init_assets(){
   $handle = 'lite-youtube';
  //You can also load this JS only for YouTube video-specific pages
   wp_register_script( $handle, 'https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.js', '', '', true );
   wp_enqueue_script( $handle );   
}

add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);
function add_type_attribute($tag, $handle, $src) {
   // if not your script, do nothing and return original $tag
   if ( 'lite-youtube' !== $handle ) {
       return $tag;
   }
   // change the script tag by adding type="module" and return it.
   $tag = '';
   return $tag;
}

The above code registers and includes the JS file loaded via the CDN.

Step 2: Using the <lite-youtube> web component

Now let's use this web component. Pass in the video id as a parameter.

<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>

Copy and paste this code into Gutenberg HTML blocks, as seen in the below screenshot.

Screenshot 5: <lite-youtube> custom HTML block

The page looks like this.

Screenshot 6: A video gallery displayed using <lite-youtube> component

In comparison to the original page's 48 PageSpeed score, this page has a 99 PageSpeed score on mobile devices (Lab data from Lighthouse). On the surface, the page looks similar to screenshot 2, but the story behind the scenes is different.

Screenshot 7: High PageSpeed score

Let’s see how this PageSpeed score was achieved. Instead of the YouTube iframe, the <lite-youtube/> web component only loads a thumbnail image of the video (as a placeholder) with a play button. Notice the slight difference between both play buttons in screenshots 2 and 4. Here is the code snippet.

<div id="frame">
 <picture>
  <source id="webpPlaceholder" type="image/webp" srcset="https://i.ytimg.com/vi_webp/wmuEzcz3ebo/hqdefault.webp">
  <source id="jpegPlaceholder" type="image/jpeg" srcset="https://i.ytimg.com/vi/wmuEzcz3ebo/hqdefault.jpg">
  <img id="fallbackPlaceholder" referrerpolicy="origin" loading="lazy" src="https://i.ytimg.com/vi/wmuEzcz3ebo/hqdefault.jpg" aria-label="Play: Video" alt="Play: Video">
 </picture>
 <button id="playButton" aria-label="Play: Video"></button>
</div>

Now, when a user clicks the play button, the video loads and begins to play in the placeholder. Notice the iframe that is injected when the play button is clicked in the following code snippet.

<div id="frame" class="activated">
 <picture>
  <source id="webpPlaceholder" type="image/webp" srcset="https://i.ytimg.com/vi_webp/wmuEzcz3ebo/hqdefault.webp" />
  <source id="jpegPlaceholder" type="image/jpeg" srcset="https://i.ytimg.com/vi/wmuEzcz3ebo/hqdefault.jpg" />
  <img id="fallbackPlaceholder" referrerpolicy="origin" loading="lazy" src="https://i.ytimg.com/vi/wmuEzcz3ebo/hqdefault.jpg" aria-label="Play: Video" alt="Play: Video" />
 </picture>
 <button id="playButton" aria-label="Play: Video"></button>

 <!-- iframe is injected--> 
 <iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/wmuEzcz3ebo?autoplay=1&amp;start=0&amp;null"></iframe>
</div>

So, in short, when the page loads, the video has not been rendered. Instead, when the user clicks on the thumbnail image, only that video is dynamically inserted into the placeholder. This is known as lazy loading. Now let’s look at the number of requests made.

Screenshot 8: Less number of JS requests

On page load, the web components JS library is included (excluding the theme and third-party JS files). On subsequent play button clicks, requests are made to load the corresponding video. Here is the result of a visual comparison test performed on both pages.

Screenshot 9: Timings compared of the two pages

It can be seen in the above screenshot, the timings are less for the <lite-youtube> web component compared to plain YoutTube embeds.

Screenshot 10:The number of requests compared between the two pages

The number of requests for the <lite-youtube> web component is lower than for plain YouTube embeds, as shown in the above screenshot.

Conclusion

When you embed YouTube videos directly on a web page, it takes longer for the page to load, so it fails the Core Web Vitals test. The page load time is drastically reduced by using a lightweight web component <lite-youtube>. We compared Lighthouse (Lab) data from two pages: one with a direct YouTube embed and one with the <light-youtube> web component. Having said that, it's important to test and evaluate the Real User Monitoring (RUM) data, which represents the load times on actual user devices (over a 28-day period). That's it for this tutorial. If you need any help optimizing the Core Web Vitals of your WordPress website, talk to our web experts.

General

2 min read

(Secret) Santa is back at WPoets

7 Ways You Can Improve WordPress Website Speed

General

5 min read

7 Ways You Can Improve WordPress Website Speed

WordPress is a no-brainer choice for creating online websites. It is well-documented, has a huge community, and offers the most flexibility with access to thousands of plugins and themes. However, to get the most out of your WordPress site, you need to optimize it. According to WebsiteBuilderExpert, more than 25% of visitors will abandon the site if it doesn’t load within four seconds. In fact, 46% of visitors never re-visit slow sites. To ensure that you don’t fall victim to slow performing WordPress site, we'll share seven ways you can improve WordPress website speed.

How to check WordPress website speed

You don’t have to sit with a stopwatch to measure how long it takes for your site to load. There are tools that you can use to measure site speed and performance. These tools include:

PageSpeed Insights: PageSpeed Insights by Google captures the site’s mobile and desktop performance through different Web Vitals metrics. It also gives your site a score of 0-100 for both mobile & desktop, with clear explanations for improving the score. Here, you don’t get page loading time.
Pingdom: Pingdom lets you check your website speed test with the option to choose from a list of servers worldwide. It gives you site grades and lets you know the exact load time.
GTmetix: GTmetrix is comprehensive website optimization and testing tool. It grades your site and also lets you know the page load time.

All these tools are easy to use but may contain technical jargon, that is not understood by everyone. However, you can understand page load times by noting the following aspects:

What is the size of the page you’re testing?
Is the web page cached or not?
How many requests does the page generate?
Does the site load static or dynamic content?

Easy, huh!? Now, let’s get to the real list below.

1. Get a Good WordPress Hosting

Website speed improvements start with your WordPress hosting. It is at the core of your site’s performance and directly influences the website loading time. If you’re starting, you'll see a lot of shared hosting providers that sell their services as the "best" thing you can get. Here, you get unlimited bandwidth, email space, and even domains bundled into the package. However, you may soon discover that shared hosting is limited and struggles during peak traffic hours. And that's why shared hosting plans are cheap. You can get dedicated hosting, managed WordPress hosting, or a virtual private server(VPS) to solve the peak demand problem. These'll cost you more, but you'll get excellent service with fast server performance to boost your website loading times. We recommend checking out DigitalOcean, SiteGround, and Bluehost. From there, choose the package according to your budget and requirements.

2. Optimize WordPress Database

As your site grows, you’ll find your WordPress database filled with a lot of information. However, not all this information is needed to run your site optimally. For example, the WordPress database contains pieces of information such as revisions, trashed posts, unused tags, deleted comments, etc. The server takes a little longer to get the user’s requests. In simple words, it slows down your website. You can use plugins such as WP-Optimize or Advanced Database Cleaner to fix this. Both are excellent plugins and let you optimize the database with just one click. Moreover, they’re free to use.

3. Use Optimized themes and plugins

The WordPress ecosystem is huge, but only some of the available plugins/themes are optimized. If you use an unoptimized plugin/theme, you're bound to get problems, including slow load times. That's why, to give your site the best possible way to load fast, you need to choose a theme and plugin that are properly coded and don't feature unnecessary features. For themes, check out Themify, Astra, and StudioPress. And, for plugins, you can check out our 10 Must-Have WordPress Plugins for Business Websites.

4. Use a Content Delivery Network(CDN)

Website load times differ for different users across the world. This happens because your hosting server is located in one place and serves users worldwide. To solve this, you can keep a copy of your site on a content delivery network(CDN) that is much closer to the user. It lowers website load times. The only limitation is that it stores static files, including CSS and JavaScript. This means your server will still do some work, preferably less, as static files are served through the CDN. For CDN, you can use Cloudflare.

5. Use a Caching Plugin

Whenever a visitor requests a webpage from your dynamic site, the server compiles and serves the request. This can cost you server performance and slow down your site. However, you can use a cache plugin to speed up your WordPress site by saving up to 0.5-2 seconds of load time. The cache plugin creates a handy page copy and serves it to visitors without the need to generate a page every time. There are plenty of good WordPress cache plugins you can try, including W3 Total Cache, WP-Optimize, WP Rocket, and WP Super Cache.

6. Reduce HTTP Requests

Your WordPress site relies on multiple resources to load properly. Some of it is internally served by the server, while others are requested through external sources such as analytics services, typography, etc. In an ideal scenario, you cannot completely stop external HTTP requests but can reduce them to improve your site’s speed. To reduce the HTTP requests, check which plugins or services are making the requests. Once found, try to disable them. You can also merge requests into one request to save time.

7. Always Optimize Images

Images give visitors a visual experience and engage them. If your post has the right images, it’ll perform and convert nicely. However, you need to optimize images so that it doesn’t slow the page down. To optimize images, you can compress and re-size them through editing software. This will reduce the size significantly. You can also use an image optimization WordPress plugin such as Smush, EWWW Image Optimizer, or Imagify that takes care of image compression during upload.

Conclusion

Not all WordPress site owners understand the impact of speed and incur revenue loss. With our list of ways to improve site speed, you’re bound to get better load times, resulting in site growth in terms of visitors and revenue.

5 Undeniable Signs Your Business Website Needs a Makeover

General

5 min read

5 Undeniable Signs Your Business Website Needs a Makeover

General

5 min read

How to reduce Cumulative Layout Shift

In the previous post, we discussed the basics of the Core Web Vitals. This is the second post in our series on Core Web Vitals which discusses the major causes of Cumulative Layout Shifts and their fixes. Cumulative Layout Shift (CLS) is the third metric in the Core Web Vitals which measures the web page’s visual instability. Visual instability of a webpage is due to layout shifts that happen unexpectedly. These unexpected layout shifts cause poor user experience and can be annoying & distracting. This post discusses the causes of unexpected Layout Shifts and steps to fix them.

Major causes of Layout Shifts

CLS mainly occurs due to the change in the DOM element’s position or dimensions. The most common causes for CLS are,

Images without width and height attributes
Ads, iframes, and embeds with no reserved space
Web Fonts causing FOIT or FOUT
Dynamically inserted elements above the existing elements

Let’s dive deeper to understand each one of these causes.

Images without width and height attributes

The problem

Consider the below situation. An image without width and height specified is requested from the server. [video width="800" webm="https://v3.wpoets.com/wp-content/uploads/2021/08/cumulative-layout-shift-by-image.webm"]

A screencast showing Image loaded without width and height causing layout shift

Before downloading the image the browser doesn’t know the amount of space that it should allocate. Once the image is loaded, the browser allocates the required space thus shifting the elements below it. This causes layout jank.

The solution

Following is the solution for responsive images with minimum layout shift.

<style> 
img { 
width: 100%; height: auto; 
}
</style> 
<img 
    width=”800” 
    height=”800” 
    src=”demo-image-800.jpg” 
    srcset=”demo-image-480.jpg 480w, 
            demo-image-800.jpg 800w” 
    sizes=”(max-width: 600px) 480px, 100%” 
    alt=”This is Demo Image” />

Ads, iframes, and embeds with no reserved space

The problem

As with the images, advertisements can contribute to a high CLS score. Advertisements in most cases load asynchronously. If sufficient space is not reserved beforehand they can cause CLS. [video width="600" webm="https://v3.wpoets.com/wp-content/uploads/2021/08/cumulative-layout-shift-by-advertisement.webm"][/video]

A screencast showing Image loaded without width and height causing layout shift

The solution

Following is the solution for responsive images with minimum layout shift.

<style>
img {
  width: 100%;
  height: auto;
}
</style>
 <img 
    width=”800”
    height=”800”
    src=”demo-image-800.jpg”
    srcset=”demo-image-480.jpg 480w, 
                 demo-image-800.jpg 800w”     
    sizes=”(max-width: 600px) 480px, 100%”
     alt=”This is Demo Image”
/>

Ads, iframes, and embeds with no reserved space

The problem

A screencast showing advertisements causing layout shift

For optimal performance publishers often support dynamic ad sizes like fluid & multi-size ad slots which gives better CTR. These ads may expand or collapse, depending on the settings, thus triggering layout shift.

The solution

To fix CLS issues created by ads, reserve space statically beforehand. Although, due to the variety of ad sizes available, a one-size-fits-all space allocation is difficult. Instead, make adjustments to size allocation until its layout shifts free. The size to be allocated can be determined by historical data reports from the publisher. For e.g, there are two ads of sizes 300x240 & 320x60 which are delivered. Allocating a height of 240 px can avoid layout shift. The bare minimum code for a multi-size ad slot could be,

<div 
    id="publisher-ad-slot" 
    style="min-width: 300px; min-height: 250px;">
</div>

Using media queries different devices should be targeted. For fluid ad slots, it’s recommended to reserve a slot below the fold as they would definitely resize and cause layouts shifts.

Dynamically inserting elements above the existing elements

The problem

As with images and ads, dynamic content is also responsible for CLS. The new content is dynamically added on top of the existing content. Following are some examples of dynamically injected content,

Newsletter signups
Register for a webinar or conference
Campaigns and special offers
Install mobile apps
Download whitepaper or ebook

The solution The straightforward solution is to reserve space for these content boxes instead of dynamically injecting them. It pre-informs the browser to allocate space avoiding layout shifts.

Custom web fonts causing FOUT or FOIT

The problem

Another common cause of Cumulative Layout Shift is custom fonts. As compared to the other causes, custom fonts have a smaller impact but still, the layout shift is visible. Custom fonts have to be downloaded and rendered. Till the fonts are loaded two problems can occur depending on the font-display CSS property set. FOUT (Flash of Unstyled Text) occurs when the custom font is downloaded and is swapped with the fallback font. Until the font is being downloaded the fallback font is displayed. [video width="600" webm="https://v3.wpoets.com/wp-content/uploads/2021/08/cumulative-layout-shift-by-fout.webm"][/video]

A screencast showing Flash of Unstyled Text (FOUT)

FOIT (Flash of Invisible Text) is when the browser doesn’t display any font, not even fallback font. It shows invisible text till the custom fonts are loaded. [video width="600" webm="https://v3.wpoets.com/wp-content/uploads/2021/08/cumulative-layout-shift-by-foit.webm"][/video]

A screencast showing Flash of Invisible Text (FOIT)

In both cases any font that renders smaller or larger than its fallback causes layout shift.

The solution

As of now to avoid CLS caused by fonts, there is only one solution. The idea is to use <link rel="preload"> along with CSS property font-display: optional. This will load fonts without layout jank when rendering custom fonts. Here is the code,

 <link 
     rel="preload" 
     href="/assets/Pacifico-Bold.woff2" 
     crossorigin as="font" 
     type="font/woff2" >

This codelab explains in detail how the above code works.

Closing thoughts

Minimizing CLS score should be on high priority for website owners since layout shift leads to a poor user experience. The common solution to fix Layout shifts is to reserve space. Reaching a CLS score of 0 should be an ideal target. Here is a screenshot of Gtmetrix for a web page that we optimized for a CLS score of 0.

A web page optimized for CLS score of 0

CLS metric is the first step to make websites more visually stable. It’s evolving and in the coming years, based on data analysis it would tell us more about its impact on User Experience.

General

4 min read

Introduction to the Core Web Vitals

Introduction

Google is in the process of updating its search algorithm called “Page Experience Update” which introduces Core Web Vitals (CWV) as the new ranking factor. This update has started rolling out globally in June 2021 and is expected to complete by the end of August 2021. Core Web Vitals (CWV) will help in ranking web pages (along with hundreds of other ranking factors) that load fast, quick to respond to the user interactions, and are visually stable, thus giving the best possible experience for the visitors.

The Basics of Core Web vitals

Search Signals for Page Experience Source: Google Search Central

As seen in the above image the “page experience signals” combine Core Web Vitals with Non-core Web Vitals. This blog focuses only on the Core Web Vitals.

1) Largest Contentful Paint (LCP)

CWV metric 1: Largest Contentful Paint (LCP) Source: web.dev/vitals

The first metric in the CWV is the Largest Contentful Paint (LCP) which measures the loading performance of a web page. A web page consists of many elements such as text, images, videos, among others. The browser takes some time to render these elements. The time it takes for the web page’s largest element painted within the viewport (above the fold) is LCP. Let’s say there is a webpage where above-the-fold content consisting of five paragraphs and two images. The size of the first image is 100KB and that of the second image is 200KB. [aw2.module slug='pullquote' pull_class='float-left'] [aw2.this html] According to Google, a good LCP score is 2.5 seconds or less for the 75th percentile of the page loads segmented across mobile and desktop devices [/aw2.this] [/aw2.module] If we assume that the text size is less than the image size, the image of the size 200KB will be considered the largest element in the viewport and will be shown in the LCP. As of now only text and image blocks visible in the viewport are considered in the LCP metric. In the case of videos, the poster image is considered. The elements contributing to LCP could be different for mobile and desktop views. For mobile view, it could be a text element, but it could be an image for desktop, depending on the layout rendered in the viewport. There would be at least one LCP element on the web page by default.

2) First Input Delay (FID)

CWV metric 2: First Input Delay (FID) Source: web.dev/vitals

[aw2.module slug='pullquote' pull_class='float-right'] [aw2.this html] According to Google, a good FID score is 100 milliseconds or less for the 95th–99th percentile of the page loads segmented across mobile and desktop devices [/aw2.this] [/aw2.module] The second metric in the CWV is First Input Delay (FID) which measures the interactivity & responsiveness of a web page. Input delay (first one only) is when a user tries to perform some action like clicking a link or tapping a button or typing, but the browser's main-thread is busy doing other important tasks, thus it’s unable to respond to the user’s interaction. The browser’s main thread is responsible for various tasks such as loading the resources, parsing HTML & CSS, building the DOM, executing javascript, along with other important tasks.

3) Cumulative Layout Shift (CLS)

CWV metric 2: Cumulative Layout Shift (CLS) Source: web.dev/vitals

The third metric in the CWV is Cumulative Layout Shift (CLS) which measures visual stability. [aw2.module slug='pullquote' pull_class='float-left'] [aw2.this html] According to Google, a good CLS score is 0.1 or less for the 75th percentile of the page loads segmented across mobile and desktop devices. [/aw2.this] [/aw2.module] Visual stability is achieved when there are fewer or no unexpected layout shifts in the viewport. An example of an unexpected layout shift is when a user is viewing a piece of content and is about to click a menu, but suddenly due to an advertisement, the page layout changes and the user clicks the ad instead of the menu. This layout shift is annoying and causes a poor user experience. The most common causes for CLS are, images without width and height, dynamically inserted content above the existing content or ads, and iframes without dimensions.

Conclusion

Google’s Page Experience Update is important (as for every minor or major update) for all stakeholders, from developers to marketers to business owners. This new update will change how the web pages are developed and tested. Before making any new web pages live, it’s now necessary to check the Core Web Vitals in the lab environment. Once the webpages are live they have to be continuously monitored with field data collected from real users and based on the data improve the page experience. We have already included Core Web Vitals in our continuous improvements program. This update is important for us, as we are always looking for ways to continuously improve our clients’ websites.

General

1 min read

(Secret) Santa came to WPoets

Top online Platforms that Educational Institutions should use to engage their students amid the Coronavirus lockdown

EdTech

8 min read

Top online Platforms that Educational Institutions should use to engage their students amid the Coronavirus lockdown

Our First-Ever Internal Hackathon to build Awesome Apps 'Plot' and 'Sonnet'

General

4 min read

Our First-Ever Internal Hackathon to build Awesome Apps 'Plot' and 'Sonnet'

On Saturday 21st September 2019, we arranged a first-ever internal hackathon at WPoets to build two Awesome Apps Plot (v2) and Sonnet. We kept aside all our routine work to run our first internal hackathon. It was a day-long event where teams were given the challenge to build these Awesome Apps.

The Purpose

For a while, we wanted to build two Awesome Apps Plot (v2) and Sonnet. Things were going slow. We wanted to build these Apps rapidly. So we decided to do an internal hackathon. The entire team would collaborate to build these Awesome Apps in One Day.

The Preparations

The core team at WPoets was planning this hackathon for a while. Small preparations were going in the background for a few weeks. A rough plan was presented in our weekly review meeting on 18th September. In the meeting we discussed how and when we could do the hackathon. A few dates were considered. Finally, we decided to do this event (on short notice), on the upcoming Saturday, 21st September.

The Plan for the Our First-Ever Internal Hackathon

The Plan for the Day.

Fast forward to the day before the event, we prepared a plan, created two teams, one for Plot and the other one for Sonnet. All the tasks were created and distributed to the team beforehand.

The Start

It was around 9.00 A.M, our team gathered in the office (some members were late). All were excited to start the hackathon. The goal was to build a fully functional Awesome Apps at the end of the day. The first thing we did was a small discussion, where the team was briefed with the exact details. It was followed by a (much needed) Pep Talk by our Core Team to inspire the team members for completing tasks at the end of the day. The team members rolled up their sleeves and started working on the tasks. Sonnet Team working on the tasks

Sonnet Team

Plot Team

One hour into the hackathon, the team gathered around for breakfast.

The Team having breakfast.

Back to work after breakfast.

Halfway Down The Hackathon

The second half was intensive as compared to the first half. The team was crushing their to-do list. Along the way, they were helping each other if needed. There were a few discussions between themselves to resolve any issues that arose. There were many challenges along the way. Against all the odds the team was making sure everyone is on the same page, saving them plenty of crucial time. At 1.45 P.M. we had lunch. A much-needed break since morning.

It’s Lunchtime

It’s Lunchtime (2)

As everything seemed normal after lunch; suddenly, the development server went down for some reason. The team was unable to work. Then came our DevOps engineer into the picture. He resolved the server issues, and the team was back to work. Throughout the second half, there were several server hiccups. The development servers were running at maximum capacity. The DevOps had to work hard to get things to normal and keep the servers functional. DevOps Engineer making sure all the systems are operational.

DevOps Engineer making sure all the systems are operational.

All Systems Operational.

Towards The End

The entire team worked through the morning continued through the afternoon till evening. Work stopped at 7.30 P.M. Finally; It was demo time. The team had to show a working demo of what they had built until now. Each team presented their work for the final review. The team giving Plot Demo

Plot Demo

Sonnet Demo

The evaluation of the work was done. More than 98% of the tasks were completed. The team was directed to complete the remaining tasks until the next weekly review meeting.

The Feedback From The Team

Before signing off the event, we collected feedback from the team.

Few points from the feedback were

Better overall planning was needed (This event was planned at very short notice)
Better Task breakdown.
Insufficient information against a few tasks.
It was really a good opportunity to take a break from routine work and hack for a while.
Dev Server issues (I don't know how we missed this).
Food Choices. No Pizza’s Please.

Big positives

Newly joined members learned a lot of new stuff.
The team leveraged each other’s strengths, worked collaboratively.
There were some confusions between the teams still they managed to stay on course.
An opportunity to rub shoulders with each other.
Better team bonding

Few challenges that we faced

Keeping team members on track.
Keeping track of Tasks.
Collecting feedback on Tasks every hour.

Wrapping Things Up

This was the first internal hackathon that we conducted at WPoets. The entire team worked on a set of challenges. It was an excellent opportunity for team members to work on some cool ideas that were drifting around for a while. Throughout the day, we spent quality time together. Everyone enjoyed themselves! One of the final comments from the developer was,

“We built two Awesome Apps in One day

which would have taken a fair amount of time.“

I’d call our first internal hackathon a huge success. By the way, we decided to organize such hackathons every quarter.

Awesome Websites : A Subscription-based Fully Managed Continuous Improvement Program

General

11 min read

Awesome Websites : A Subscription-based Fully Managed Continuous Improvement Program

Why Educational Institutions should Automate their Admission Process

EdTech

10 min read

Why Educational Institutions should Automate their Admission Process

EdTech

11 min read

Make Educational Institutions Smarter using Smriti EdTech Platform

Avoid these Most Common Onsite WordPress SEO Mistakes

General

5 min read

Avoid these Most Common Onsite WordPress SEO Mistakes

There are several common onsite SEO WordPress mistakes made by its users which can be avoided up front. Even if WordPress CMS is optimized for the search engines but just relying on it and hoping the site to rank on search engines magically may work some times, but it’s not the way to do things especially with SEO. The common onsite WordPress SEO mistakes are:

Permalinks not optimized

Permalinks are the permanent URLs ( ideally should never change hence permanent ) to individual pages and blog posts. There are two steps for optimizing permalinks for SEO as described below

Step 1

WordPress Supports different types of URL structures such as

Default - http://www.sample.com/?p=123
Post name - Sets the URL to WordPress Page or Post name http://www.sample.com/sample-post
Custom structure - One example is /archives/%year%/%monthnum%/%day%/%postname%/.

The entire list of URL structures is available here. By default, the WordPress URL looks like http://www.sample.com/?p=123 where “p” is a query string parameter which is basically “Post Id” of a particular WordPress Post or Page. Search engines can not figure out anything from this query string parameter. So the first step of optimizing permalinks is, to use “Post name” or “Custom” structure which contains a “Post name” in its the structure To explain what it means, let's say For e.g. for this current article, we set the permalink structure to “Post name.” So URL will change from http://www.sample.com/?p=123 to http://www.sample.com/avoid-these-most-common-onsite-wordpress-seo-mistakes Now, this URL structure makes sense for both, us and search engines.

Step 2

Once the structure is finalized, the next thing in Permalink optimization is to ensure that each of the permalinks has keywords into it. For e.g. the keywords that are targeted for the current article are

common seo mistakes
seo mistakes

So the permalink which includes the above keywords becomes, http://www.sample.com/avoid-these-most-common-onsite-wordpress-seo-mistakes

Images Not optimized for SEO

Optimization of the images from an SEO perspective is another most common WordPress SEO mistake that users make. By optimizing the images for SEO we mean the following things,

Image Filename

Search engines cannot see an image; they can only identify an image through the text. The first thing to do is to set an image file name which contains rich keywords. Focus Keyword can be used for the featured image. For every other image make sure it contains keywords from the keywords research that you have done.

Image ALT text

For some reasons, if the images can’t be displayed to the visitor, there will be descriptive text shown in the place of the image from ALT text. So make sure to enter rich keywords in ALT text. For a detailed way to optimize the images for search engines go through this article here.

No interlinking between the Pages

Interlinking is SEO terms can be described as let's say content in a blog post can be linked to other content on the same site which could be another blog post or even a website page which is relevant to the article from where it's linked. This kind of interlinking makes sense since the reader might be looking for another piece of content similar to what he is reading. Interlinking gives search engines an idea of the structure of the website. That’s one aspect. Another aspect is when search engines encounter linking of the pages with the relevant pages containing relevant content; they are more likely to understand your site better. Another benefit from it is, it increases user engagement increasing the website’s authenticity.

No Links to the External Websites

Adding trustworthy, authoritative, and relevant external links which contains high-quality content will help your website appear to be an authority, which in turn increases the credibility of your website. Throughout the content, the reader might need valid references, resources which would more help understand the content better or even putting things into context. By doing this, Search engines can learn from whom you link to and how. Also external linking also a kind of endorsement of third-party content which may encourage them to do you a favor of linking back to your site. The more other websites link back to your content, the higher the chances your site appear the Search Engine Results Pages (SERPs) However, adding poor-quality links will backfire, so before adding any external links make sure if they are needed and have that much of importance.

Not having an XML sitemap

A site map is a directory of all the links on a website typically listed in a logical hierarchical order. An XML sitemap consists of all the links with its metadata such as

URL location
The full URL to the webpage
Last modified date of the page

And among other things. It acts as a roadmap for searchings engines to help them understand the website structure so that they can crawl all the website pages. However, if there is no XML sitemap, search engines have to rely on interlinking of webpages and on-site menus to figure out the website structure. This approach hinders search engine crawlers effort. Also, there is a risk that some of the links may never be crawled.

Entirely depending on Plugins for SEO

This is not at all an onsite technical SEO issue, as we discussed throughout this article. However, it's an important point which should be discussed. Even if you are using top-notch SEO plugins such as Yoast or All in one SEO PAck and among others for WordPress, but if you are not following basic SEO guidelines then you are killing your SEO efforts. No doubt these plugins do all the heavy lifting required for SEO, assisting you throughout its entire life cycle but still, it does not replace the efforts needed for a good SEO.

Wrapping Up

Although we tried to list down important WordPress SEO mistakes, still there are a lot more things that can go wrong and needs to be taken care off. This list may look as incomplete; maybe we will write a part two of this article for further SEO mistakes in which can be avoided. For detailed inquiry about WordPress website, connect here.

Top 10 Reasons You Should Choose WordPress for Your Business Website

General

5 min read

Top 10 Reasons You Should Choose WordPress for Your Business Website

WordPress is the world's leading website building tool. Some of the biggest brands websites are powered with this open source content management system. It powers right from high traffic blogs and online magazines, to eCommerce platforms to websites of various Fortune 500 companies and much more. This article lists down significant reasons to choose WordPress for building your business website.

1. It Is easy to learn, Use and Manage

One of the significant reason why business entrepreneurs choose WordPress over other options is its relatively easy to learn, use and manage. Learning WordPress is very easy. There are n number of tutorials, guides, how-to articles and videos, e-books free and paid, all available at our disposal. It's easy to use interface helps to manage the content on the site a breeze. Also, there are inbuilt features provided through admin dashboard such as managing users and their roles, blog comments, RSS feeds, Posts & Pages with their revisions, installing and updating third-party plugins and much more.

2. Google Loves WordPress

WordPress primarily being a blogging platform is full of content. It consists of Posts & Pages containing text, images & videos, etc. Content is loved by Google and is one of the main reasons why Google loves WordPress. Next, the search engine friendly features of WordPress (along with the integration of third-party plugins like Yoast ) makes sure that the necessary information is available for search engine spiders to consider, relevant to keyword searches that are done. SEO friendly features of WordPress are,

It lets configure Permalinks ( search engines friendly unique URL )
It allows us to set the Title & Description of the Page or Post.
In the content part, it has an easy way to add images with their captions and alt tags.
Its editor allows editing content with relevant Keywords.

If the Pages and Posts of the website are added and updated routinely, its loved by search engine algorithms especially Google since it's always looking for fresh and unique content.

3. WordPress wears many hats

WordPress “wears many hats,” means it can be used to build any website. It was originally was created as a blogging platform, but with the time, it evolved and now has transformed into an amazingly flexible, easy to use, robust website design and developing tool. Few examples of what can be built using WordPress

Personal Blog or Website
E-commerce Website
Membership Website
Forums
Knowledge Base Websites

The list goes on. No matter what kind of website you are developing, WordPress offers solutions for all.

4. Mobile Friendly

Google officially says that it's using the mobile version of the content for indexing and ranking. Which means it will not entertain websites, which are not mobile friendly. When you build your website on the WordPress platform using themes and plugins which are built with the mobile first approach, then you don’t have to take up that added effort to make it mobile-friendly.

5. Ease of Integration of Third Party Services

WordPress can integrate with the most popular platforms which could be social media networks such as Facebook, LinkedIn & Twitter, Payment gateways such as PayPal 2checkout, Email campaign services like Aweber, MailChimp, and much more. These numerous integrations can boost your business website depending on what kind of type it is. Connect with your WordPress Experts here to guide you in Integration of Third Party Services.

6. Safe & Secure

Another primary reason for switching your business website to WordPress is the security measures it offers to its users. The WordPress community is consistently working on the newer safety measures of the CMS, and periodically releasing it to the public. Whenever there is a new update of WordPress available, it will be notified in the WordPress Dashboard. From version 3.7 WordPress provides its users with Automatic Background Updates. Having said that, WordPress security is not just about its core framework. It also has Plugins and Themes which are majority developed by third-party developers. In that case, certain safety measures such as, avoid downloading the Plugins and Themes from unknown sources, download them from trusted sources, making sure that all the Plugins and Themes are up to date & among other things should be practiced. Also using top security plugins such as Wordfence or Sucuri Security will help further tighten up the website security. Lastly taking regular backups is of utmost importance. For more details regarding the security of WordPress read this article.

7. Inbuilt Roles and Capabilities framework

WordPress has the concept of user roles and capabilities. It helps site owners (who are not the sole one to run their business website) to create users and delegate tasks to them. Below is the list of roles of WordPress.

Super Admin - Gives complete access to the website.
Administrator - Is provided access to the administration features
Author - Makes it easy to manage and publish the day to day Posts
Editor - Has an authority to publish the Posts, as well as remove or approve other member’s post.
Contributor - Is given access to manage and write the Posts, however, have to rely on the administrator’s approval.
Subscriber - Is provided with an authority to view and edit own profile.

Discuss your WordPress Website requirement here

8. It has Themes Free and Paid Ones

A WordPress theme is the “front view” of the website. It's bundling of code, functionality, and styles which defines the overall design or style of the website. It provides much more control over the look and presentation of the material on your website. Themes can be Free or Paid or best of both worlds freemium. All of them have their pros and cons. Free themes are good to start with but have the limited feature set and most important limited support (it depends on the theme to the basis, some free themes have great support). Paid themes to have out of the box features and are generally bundled with premium plugins and support.

9. A Plethora of WordPress Plugins

There are more than fifty thousand WordPress plugins in the official WordPress repository. These plugins help, right from creating image galleries and sliders to collect leads on the website using contact forms & optins to optimize website performance using caching plugins to securing WordPress websites.

10. WordPress Websites are Scalable

Lastly, WordPress is highly scalable. It can serve simultaneous hundreds of logged-in users at a time or can handle huge volumes of traffic without any problems. This feat can be achieved by the right resources, proper configuration and of course scalable infrastructure. Is already powering hight traffic enterprise websites like TechCrunch, The New Yorker and mission-critical websites like Loantap, and others. Hope these reasons convinced you to build your business website on WordPress. To make your Business Website Awesome; we can connect here.

10 Must Have WordPress Plugins for Business Websites in 2019

General

6 min read

10 Must Have WordPress Plugins for Business Websites in 2019

WordPress plugins are great tools for extending the functionality of your business WordPress website. Many of our users who are the business owners often ask us for suggestions of the best WordPress plugins useful for their business website. There are plenty of handy WordPress plugins available in its ecosystem, However; it doesn’t mean that each and every plugin will be useful for your website. Here is a quick rundown of the Ten Best WordPress Plugins for Business Website.

1. Yoast SEO

Today there’s a constant influx of the users using search engines like Google and others. Moreover, that number is ever increasing. Also, there’s no doubt that the traffic from these search engines is one of the primary sources of leads for any website. The significance of search engine optimization has become more relevant than ever before. Yoast SEO plugin helps in search engine optimization of your WordPress business website. It helps create better content using its inbuilt SEO analysis tool, which analyzes different aspects of copy text such as post title, focus keyword, meta description and among other things which helps improve the ranking of your website on search engines. A beginner guide for this plugin can be found here.

2.OptinMonster

Business websites struggle for generating high-quality leads. OptinMonster is a smart lead generation tool that can transform your WordPress website into a lead generation machine. It is the best lead generation plugin that lets the user create and integrate effective signup forms a.k.a. opt-in forms on the website to collect emails address; helps in building a database out of it. This user-friendly plugin will let you modify and customize the optin-forms, perform A/B tests, and most importantly it provides analytics and reports for the same. The plugin comes with a range of pre-built templates, which a novice user can start using to create exceptional opt-in forms in a few minutes. It can be easily integrated with third-party newsletter services like MailChimp, Aweber, Constant Contact, Campaign Monitor etc.

3.Sucuri Security

Web Security, in general, is about risk reduction, not risk elimination. Securing a website is not a one-time activity since its always prone to various threats, attacks and is always at risk. Keeping a website secure is a continuous process requiring frequent assessments periodically. Sucuri Security WordPress plugin is built by a reputable, globally-recognized company named Sucuri Inc which also offers website security software and services to businesses of all sizes around the world. The plugin is one of the best when it comes to providing security. It protects the WordPress website from potential viruses, malware, as well as from DDoS attacks using its robust safety features. The plugin monitors the website continuously from a security perspective thus avoiding or eliminating any threats. We can also configure security alerts which notifies whenever there is any suspicious activity happening on the website like, multiple failed attempts when trying to login into the WordPress admin section. Sucuri’s built-in website firewall filters all the traffic through one of the various Points of Presence that it has around the world. Read more here for more details on how to use this Plugin.

4.W3 Total Cache

Page load speed of the website is one of the important aspects to keep in mind while building a WordPress website. Page speed gives better user-experience since website visitor will switch to another website if the page load time is more than a few seconds. Also from the SEO perspective page speed helps boost the rankings on search engines like Google. Page load times can be improved using caching techniques. It is one of the primary ways to significantly improve website performance. To leverage caching in WordPress, a plugin such as W3 Total Cache helps a lot. This plugin when configured will help cache posts & pages as static HTML files so that when the user requests the same page again, the cached version of it is served to the user. This helps avoid server serving the same page to the same visitor. The main advantage of this is that the page load time of cached pages is significantly low which helps optimize the site performance. W3 Total Cache also offers transparent content delivery network integration with different types of CDN (mainly Origin Push or Origin Pull) to further optimize the site's performance.

5. CSS Hero

The plugin allows us to customize the look of your WordPress website. It helps style any element on websites such as background, color, size, margin, padding, and among other things. It also allows us to save various versions of the designs so that they can be compared later, making it easier to decide which design looks better before activating the same. CSS Hero plugin is loved by WordPress users since now they can design their website without knowing any technical stuff such as HTML & CSS and among other things.

6. Nivo Slider

The Nivo Slider is one of the premium WordPress plugins (a lite version is also available) designed by Dev7Studio. The plugin is famed for being a user-friendly WordPress Content slider creator. The users of the plugin find it easy to use, design & manage sliders on their WordPress website. Images can be added to the Nivo slider manually or can be imported from existing WordPress media or even can be added from social media platforms such as Instagram, Flickr, Dribble etc.

7.Super Socializer

Super Socializer makes integration of Social Login, Social Share and Social Comments on your website a breeze. Some of the benefits this plugin offers are,

Social Login: Login using various Social Networks – Facebook, Google, Linkedin, Twitter, Instagram, Xing etc.
Social Share: Easily add Share and Like buttons of around 90 social networks.
Social Comments: Add Facebook Comments, Google Plus Comments, Disqus Comments to your Blog.
Compatible with BuddyPress, bbPress, WooCommerce, and other popular WordPress Plugins.

The best part is, it's absolutely free (with paid add-ons available), lightweight, mobile responsive, AMP compatible, GDPR Compliant, compatible with Gutenberg WordPress editor and among other things. It also has a comprehensive User’s Guide and FAQs to help you it set up as quickly as possible.

8.ThirstyAffiliates

If your website is into monetizing business, or something related to affiliate marketing, then ThirstyAffiliates plugin is the right choice for you. The plugin lets you insert affiliate links directly within blog posts & pages effortlessly. It is one of the best business plugin designed for bloggers who intend to make money through their website and is also the most favored plugin amongst them. The plugin helps manage your affiliate links, along with a complete review of its stats showcasing how your links are performing.

9.Monster Insights

MonsterInsight is one of the most powerful plugin which effortlessly connects Google analytics with your website. It makes easy for you to review the analytics of the website right in the WordPress dashboard. The plugin is easy to set-up as all you need to do is connect it with your Google Analytics account. The plugin lets you see all crucial metrics right from the WordPress dashboard eliminating the need moving back and forth between Google analytics account and WordPress.

10. AdSanity

If you are looking for a “simplified Ad management” tool for your WordPress website then Adsanity is the perfect plugin to do the same. Its one of the best plugin in its category offering management of self-hosted and network ads on your WordPress site. This plugin has a user-friendly interface from where you can create and manage your Ad campaigns. Users can also see how their ads are performing along with essential statistics such as the number of views and clicks.

Conclusion

As mentioned above, the list comprises of the best WordPress plugins in terms of

Security
SEO friendly
Page Speed optimization
Marketing and social media plugins

and among others. Collectively these plugins will help you to make your site robust, secure, load faster, optimized for search engines and much more. Even though this blog gives just a birds-eye view of ten must-have WordPress plugins, please do go through each of them to know which features offered by these plugins are useful for your business website. If you wish to make a Business WordPress website; or you have a question regarding that please connect with us here.

What is Gutenberg WordPress editor? An Intro with its Pros and Cons

General

3 min read

What is Gutenberg WordPress editor? An Intro with its Pros and Cons

WordPress, the most famous CMS (Content management system) has been widely used across the globe, with more than a quarter of the websites are powered by it. WordPress has come a long way; it has evolved from a simple blog management tool to an absolute CMS which can be utilized to design and develop affluent websites. On December 6, 2018, WordPress had made a grandeur announcement with the launch of “WordPress 5.0 - Bebo” with “Gutenberg” as its default editor. This was one of the most significant updates of the year 2018 and even bigger and most significant update of WordPress CMS since its inception. This face-lift brings a massive change to the present editing experience of the WordPress, reinventing how the developers and users will be using this CMS, making an impressive and bold step further for the WordPress Ecosystem.

What is “Gutenberg WordPress Editor”

The Gutenberg WordPress editor replaces TinyMCE which was traditional and the default content editor (for years) and is its now a part of the WordPress core. This new WordPress update is named after “Johannes Gutenberg” the founder of the printing press (invented it probably 500 years ago) which was equipped with the mechanical movable type technology. The primary aim of this new update is to make the editing experience of WordPress more user-friendly and enjoyable for everyone.

Top Pros of Gutenberg WordPress Editor

If you are familiar and love the “Medium style” editing experience, then you will “feel at home” when using the Gutenberg editor, as it also gives a similar editing experience.
“Blocks” are the building blocks of this editor. This helps a more integrated editing experience and offers a unique way to create pages and posts in case if you are thinking to start a blog.
It’s a drag and drop visual editor hopefully eliminating the need of any third-party drag drop page builders.
Gutenberg editor is extremely user-friendly as the web pages you’d be designing are by default mobile friendly furthermore, it lets you do the editing on the go.
The best part of it is, It provides the user with a distraction-free view (thanks to more screen space this editor gives ) so that more focus is on content and the design of the web pages.

Top Cons of Gutenberg WordPress Editor

Gutenberg editor currently has partial support for meta boxes. Meta boxes allowed the addition of extra metadata to pages/posts. Websites built until now relied heavily on Metaboxes (post meta). The Gutenberg official documentation recommends porting of PHP meta boxes to blocks.
Even though the Gutenberg editor offers responsive designs, it doesn’t support responsive columns yet. This is believed to be a temporary issue and will be fixed soon.
WordPress currently has thousands of plugins and themes, making them work with Gutenberg editor is quite challenging and will take time.
Existing sites which have lots and lots of content may face a challenge to migrate content from classic editor to Gutenberg blocks.
Developers have to keep iterating their plugins and themes alongside the changes in Gutenberg editor which is likely to happen.

Final Thoughts

Since its inception “Gutenberg editor” has stirred some controversies and continuing to do so. Amid these controversies, it saw the light of day for which it was destined. There are mixed reactions from the WordPress community, some of them are considering is at a bold and thoughtful move for WordPress ecosystem while others describing it is a big disaster. As of now, the majority of WordPress Plugins and themes do not support Gutenberg editor architecture. All we can do is to wait till these themes and plugins adapt to this new change for good. There is no doubt that Gutenberg is the next generation editor but still needs a lot of improvements and has a long way to go. Let's see how Gutenberg editor evolves with time. Till then, Get in touch with our team for building Enterprise WordPress Websites and Apps.

All you need to know about Upcoming WordCamp in Pune 2019

WordCamps

3 min read

All you need to know about Upcoming WordCamp in Pune 2019

WordCamp Pune 2019 is back (with a bang). It’s on Feb 16, 2019. And we’re excited to announce that we are official sponsors (Author) for WordCamp Pune 2019.

Hold on, But What is a WordCamp?

“WordCamps are casual, locally-organized conferences covering everything related to WordPress.”

It is organized by volunteers from the WordPress community where WordPress developers, designers, writers/bloggers, and casual users can attend this conference, exchange ideas, get to know each other and mingle in an informal setting. It helps attendees learn new things, catch up on the latest trends in WordPress, hear from experts exchanging their views, ideas, experience and more. Besides this, it’s also a networking platform with like-minded people from the WordPress community all gather under one roof. For sure this WordCamp in Pune will be one of the best conferences happening in the year 2019.

WordCamp Pune 2019 Details

The preparations are in full swing for WordCamp Pune 2019 (abbreviated as WCPune hereafter) which started way back in 2013. Here are details for the Conference, Date : Feb 16, 2019. Venue : CV Raman Auditorium IISER Pune. Dr. Homi Bhabha Road, Ward No. 8, NCL Colony, Pashan, Pune, Maharashtra 411008. You can get the directions of the venue from here.

Talks in the WCPune 2019 Conference

This WordCamp has exciting talks lined up, and as we move closer to the event date, more speakers along with their topics will be announced. Here are few details about the talks announced until now. To start with, Vaidehi Singh Sharma a Digital Marketer from Pune will talk about a fascinating and debatable topic (for years) Remote Job Or 9 Hours Office?. Covering Daily Stories. She will be discussing the difference between a remote job versus a full-time office-based job. Attendees are going to enjoy this one, especially the real stories. Next talk is from Ionut Neagu an Entrepreneur from Bucharest, Romania will talk about The Good, The Bad and The Ugly of SEO. He will shed some light on SEO myths and how to debunk them with practical examples. Further speaker lined up is Vikram Kulkarni from Pune. He will talk on Backups, Restore and Migration for WordPress. This talk aims to shed light on best practices of taking backups, restoration them and also how to tackle the migration issues of moving between the development stage and Production environment. As of now the official schedule of WordCamp Pune 2019 is still not published. Above para lists down speakers with their topics announced until now. For more updates for upcoming speakers tune in to this link.

WPoets at #WCPune conferences until now

We participated in all WC Pune Conferences until now. Our involvement in these conferences was right from attending it to help co-organizing it. Here is a quick rundown of WPoets at all WCPune conferences till now.

WordCamp Pune 2013

It was first ever WordCamp in Pune which happened on 23rd & 24th of February, 2013. We participated in speaking at that WordCamp. Here is the list of the sessions that we delivered

- “Power of WP Query” - by Savita Soni
- “How to get your themes in WordPress.org repository or theme repo” - A Talk by Nisha Singh

For the complete list of sessions that happened for WordCamp Pune 2013, please visit this URL. Here are some snapshots from the talks.

"Power of WP Query” - A Talk by Savita Soni

“How to get your themes in WordPress.org repository or theme repo” -A Talk by Nisha Singh

WordCamp Pune 2015

This time around we helped co-organize the event. Along with that our involvement was,

- Participated in panel discussion on the topic “The Business of WordPress.”
- Conducted a session on “Building a Good Quality WordPress theme” - by Nisha Singh

Here is a snapshot from the talk.

“Building a Good Quality WordPress theme” – A Talk by Nisha Singh

WordCamp Pune 2017

This time also we helped co-organize the event. We conducted the following session.

- "Building a Fintech Startup on WordPress.” - by Vikas Kumar

Here are some snapshots from the talk.

"Building a Fintech Startup on WordPress.” - A Talk by Vikas Kumar

Closing Thoughts

Past WordCamps in Pune has witnessed an influx of attendees from WordPress fraternity. This year the number has already reached 300+ attendees. We are attending this conference, and shortly we would publish what we experienced about it. More information regarding this WordCamp can be found here. Also, follow the official twitter and facebook page of WCPune for further updates. We are going to tweet live updates right from the conference on WPoets channel. See you at the Conference.

Continuous Improvement - Your website will become worthless if you don't opt for this strategy!

General

4 min read

Continuous Improvement - Your website will become worthless if you don't opt for this strategy!

These days, website developers are vying for more and more flair and flamboyance within their projects. We come across brilliantly attractive websites with animated interfaces and aesthetically impeccable pages all the time. However, all of this effort goes to waste if the website is failing to satisfy its core objective- be it to promote, inform or sell. The idea is to ensure that your website is viable, optimized and serving its purpose consistently. It is safe to say that it has become effortless for anyone to build a website today, primarily due to the simple tools offered by platforms like WordPress and others. The difficult task, however, is keeping these websites alive and well. Here are some of the reasons why your website is of little value without a Continuous Improvement Strategy:

Insight-Driven

Continuous Improvement is a largely data-driven process. It involves testing and analyzing the elements of the current website and performing alterations on the basis of your goals. [aw2.module slug='pullquote' pull_class='float-right'] [aw2.this html] Continuous Improvement is a largely data-driven process involving testing and analyzing the elements of the current website and performing alterations on the basis of your goals. [/aw2.this] [/aw2.module] For example, if on the basis of analytics data, if a pop-up advertisement about your product on the home page is followed by a large number of drop-offs, you can change or remove that advertisement. Similarly, by running speed-tests of your pages and performing iterations over the different elements on your site, you can decide which parts to keep and which ones to let go off. By putting your website on a Continuous Improvement Cycle, you can know what’s working and what’s not working at different stages due to which it will be easy to make informed design decisions. It is also an important step toward getting to know what your customers want!

Adaptive to Changes

The market is changing every minute. In the age of constant digital innovation, a strategy like Continuous Improvement has become a prerequisite. In today’s dynamic and competitive market, it is essential to nurture a website and not only create it. By consistently gathering insights about your site, it will be easier to give your site a fresh, modern and up-to-date feel. For instance, a lot of sites today are being viewed not only on desktop screens but also on all sorts of portable mobile devices. With Continuous Improvement, it will be easier to keep up with these shifts and make your business appear adaptive and brand new at all times.

Optimised & Viable

Search-engine optimization is a vital element aimed at increasing the ranking of a website and it is an intrinsic part of Continuous Improvement. By making smaller changes over a larger period of time you not only make your site more in-tune with the shifts in the market but you also maintain the SEO ranking of your site along the way. If you look at any of the leading websites today, you will observe that they have made tiny changes over a long period of time instead of sudden transformations. Be it Amazon or Youtube, they have undergone changes continuously and consistently and in that process, maintained their huge popularity and high ranking.

Helps Consistent Development

Continuous Improvement eliminates the need for short term remedies and instead becomes a constant, ongoing process for the maintenance and development of your website. [aw2.module slug='pullquote' pull_class=''] [aw2.this html] Continuous Improvement eliminates the need for short term remedies and instead becomes a constant, ongoing process for the maintenance and development of your website. [/aw2.this] [/aw2.module] A successful website remains relevant, viable and up-to-date in the long run. Continuous Improvement enables such consistent development. Be it the regular updations, backups, strengthening security, regular scans for malware or adopting new features, the Continuous Improvement strategy will ensure that the site is well-equipped and efficient at all times. Moreover, problems would keep popping up, but by adopting this strategy, it can be possible to pre-empt certain events and be one-step ahead of the tumultuous shifts in the online sphere. For overall development, it is always advisable to undertake a durable strategy rather than short-lived solutions.

Keeps up with your Brand

A website is essentially a window giving the consumer a sneak-peek into your brand’s world. It has to be reflective of what your brand stands for. By conducting Continuous Improvement, your website will be able to keep up with the brand-image at all times. Moreover, a website must always nudge the consumers toward becoming associated with your brand in some way or the other. The website must convert visitors into customers. This can be achieved by examining the visitors of your website, their behavior, and their paths and by using these insights to incur higher traction over a longer period of time.

Conclusion

By adopting the strategy of Continuous Improvement, you will be able to nurture your website and tweak it on the basis of real-time, measurable data. It is true that it is a daunting process that requires arduous and constant effort, but for the long term well-being of any website, it is worth investing in a strategy like this.

How Creating a Digital Eco-system will aid the marketing of your business

General

4 min read

How Creating a Digital Eco-system will aid the marketing of your business

Why You Should Be Creating a Knowledge Base

General

5 min read

First, it is necessary to determine what kind of Knowledge Base will be required by the company. Whether it will be instructional or allow discussions and comments.
Then it is necessary to accumulate all the possible information from various sources and departments within the company.
One must then organize all the information in an easy-to-use manner so that it appeals to the people who visit the Knowledge Base. It is important to categorize information in a manner that is easy to navigate.
Information must constantly be updated to ensure that it is current and correct.

A Knowledge Base is a great independent information source for any business. By increasing the accessibility of information, there are no longer instances where delays occur because relevant information is only held by a particular employee. This is why creating a Knowledge Base is a great investment.

All you need to know about technology changing the face of recruitment

General

6 min read

All you need to know about technology changing the face of recruitment

WordPress

3 min read

Twenty plus meetups in India to celebrate 15th anniversary of WordPress

Why building your own HRMS can be better than outsourcing HR operations

General

5 min read

Why building your own HRMS can be better than outsourcing HR operations

Small businesses often start out with the founder wearing many hats, including that of a human resources (HR) manager. But, as the business matures, and a 5-person squad turns into a 20-person team or a 50-person group, compliance becomes a big issue – even for an experienced HR professional. With a growing team, the Excel sheets, emails, and sticky notes you have been using to manage employees become inadequate, confusing, and potentially hazardous for the business’ survival.

Challenges faced by traditional HR practitioners

Mismanaged Leaves

When leaves request and approval is done through emails, there are days when you end up with inadequate team strength. This is because while you were approving the leave of one employee, you didn’t remember that two other people from the same division had already gotten their leaves approved by you a couple of weeks ago.

Inadequate Access to Personal Information

Conventional HR practitioners often end up wasting a lot of time looking for or updating changes to the personal information records of the employees. [aw2.module slug='pullquote' ] [aw2.this html]Managing and retaining employees has turned into a function that requires specialized care[/aw2.this] [/aw2.module]

Repetitive Tasks

An employee needs salary slips urgently? You set aside whatever you were doing to tend to that. Need to print an offer letter? You dive through folder after folder after folder to look for it. Phew!

Weak Feedback System

Be honest. How many times have you given feedback or received feedback from an employee and forgotten all about it? When appraisal time comes, it makes you wish you were better managed, doesn’t it? Soon, you realize that managing and retaining employees has turned into a function that requires specialized care. And you find yourself wondering: Should I invest in an in-house Human Resources Management System (HRMS) or should I outsource instead?

Difference Between HRMS and HR outsourcing

A Human Resources Management System is a software that combines a variety of time-consuming and paperwork-heavy HR functions in a concise online package. HRMS eliminates the need for manual record-keeping and frees up employees to concentrate on more productive tasks. HR outsourcing, on the other hand, refers to contracting out the management of your manpower to a third-party service provider. This model gives you flexibility in choosing whether you want to outsource only one aspect of HR, such as tracking applicants, or the entire gamut of HR functions.

Which is better: HRMS or HR outsourcing?

According to estimates, more than 50% of large companies outsource all or part of their HR function today. And there is a good reason for that. When you are managing hundreds of thousands of employees, running an effective HR department can cost you more than what it would cost you to hire specialists to do that job. [aw2.module slug='pullquote' pull_class='float-left'] [aw2.this html]Startups or mid-sized business, with say 20-50 employees, outsourcing the HR function is wrought with risks[/aw2.this] [/aw2.module] But for startups or mid-sized business, with say 20-50 employees, outsourcing the HR function is wrought with risks. Service providers have their own agendas to serve and their own bottom lines to feed. They will never care about your employees like you would. In fact, in my circles, I have often heard about small businesses suffering because employees brought in by third-party service providers turned out to be bad fits for their organization’s unique culture.

How Small Businesses Lose Out

I have always believed that while outsourcing may work well for larger organizations, for smaller companies and startups, having an in-house HRMS can be cheaper, quicker, and more convenient. Not convinced? Here’s why I am positive that small businesses lose out when they outsource their HR function…

Time Wastage
When you follow a cycle where an employee would reach out to the in-house HR manager and the manager, in turn, will contact the vendor service provider, you lose out on a lot of productive time.
Recurring Cost
While investing in a good HRMS is a one-time cost, outsourcing operations translate into recurring costs – ones that even exceed what you would have had to pay for giving your HR department an IT upgrade. [aw2.module slug='pullquote' pull_class='float-right'] [aw2.this html]A good HRMS can improve the productivity of the HR department drastically[/aw2.this] [/aw2.module]
Data Breach
While service providers have confidentiality clauses in their contract, there is always a chance of sensitive information like changes in salary or senior management structure getting leaked out – deliberately or unwittingly.
Dependency
In the absence of a strong in-house HR department, businesses become dependent on service providers for every small thing – which can have a real adverse impact on the organization in emergency situations.

Where HRMS Scores

By eliminating the need for labor-intensive manual processes, a good HRMS can improve the productivity of the HR department drastically. But that’s not the only reason why I believe investing in HRMS is something every small business must give a serious thought to. A good HR software program makes the business ready for future growth in a leaner and more efficient manner. [aw2.module slug='pullquote' ] [aw2.this html]For startups and small businesses, a one-time investment in a reasonably-priced in-house HRMS can prove to be much cheaper, convenient, and efficient[/aw2.this] [/aw2.module] A clear visibility into employee information enables better management of the resources. When you can track feedback, grievances, disciplinary actions, and other important communication with your employees, it facilitates the decision-making process. Also, when you can see all leaves and requests on one platform, including the historical applications sent by the employee, you can ensure that everyone receives uniform treatment. I have often seen employees, especially who are just starting out in their career, hesitating while approaching the HR personnel with a problem. A good HRMS program will give them the right tool for professional communication, especially if it pertains to sensitive matters. What’s more, a good HRMS comes with self-service options that allow employees to update and access information as needed. The HR department need not be disturbed for every task. The same goes for generating and distributing customized pay-slips as well.

Final Words

While large organizations have multiple choices at their disposal when it comes to managing their HR operations, small and mid-sized companies often feel stuck. In my experience, outsourcing works well for larger organizations handling thousands of employees at once. But, for startups and small businesses, a one-time investment in a reasonably-priced in-house HRMS can prove to be much cheaper, convenient, and efficient in the long run. That said, don’t burden your HR department with a software with complex functionalities. Arm them with an easy to use, fully customizable and easily extendable app which will help them impact your bottom line positively.

General

0 min read

Announcing Awesome Apps

WordCamps

1 min read

Our Experience at WordCamp Nagpur 2017

WordCamps

2 min read

Upcoming WordCamps in India - Part 2

In Januray we told you about WordCamps happening till March this year, after a small break we have another set of 5 WordCamps lined up for you to attend in the remaining part of 2017 in a city near you. If you have never attended any WordCamp before, you must attend at least one of them to know what WordCamp is all about and get the feel of why we attend all of them.

WordCamp Nagpur

WordCamp Nagpur is happening for the first time on 24 & 25th June 2017, even though they had a local WordPress community meetups happening for a long time. It is going to be a two-day multi-track event. On day one they are planning to have workshops and plugin pratiyogita, while on day two they will have talks. Team members from WPoets will be speaking at Nagpur WordCamp.

WordCamp Kanpur

Immediately after WC Nagpur, we are going to have WordCamp Kanpur. It is happening on 9th July 2017 and it will be the first WordCamp that is happening in Uttar Pradesh. They have already announced some of the speakers. If you live in and around Uttar Pradesh, this might be only WordCamp this year that you can easily attend, so go and buy the tickets.

WordCamp Delhi

WordCamp Delhi is happening for the 2nd time, the first one was WordCamp India that has happened way back in 2009, It is the only WordCamp that no one has attended from WPoets. This time Delhi WordCamp is scheduled for 19th August, more details will start coming soon, meanwhile, you can subscribe to their website or follow them on Facebook.

WordCamp Ahmedabad

WordCamp Ahmedabad is happening for the first time on 6th, 7th and 8th October 2017. After a gap of three years, WordCamp is back in Gujrat. WordCamp Ahmedabad is also the first WordCamp in India that is going to happen for a period of three days. Day one is targeted at beginners and students, day two is focused on users and developers while the third day is about contributing back to WordPress. More details will come soon, meanwhile, you can subscribe to their blog or follow them on Facebook.

WordCamp Nashik

The second edition of WordCamp Nashik is planned to happen on 5th November 2017. The last edition of WordCamp Nashik was awesome, you can read our experience here. It was one of the very well organised WordCamps last year, so our expectations are high from this year's edition as well. It is still very early, so for more details, you can subscribe to their blog or follow them on Facebook.

WordCamp Bhopal is still in planning stage and may happen again this year. It feels good to see so many WordCamps happening in India, from only one WordCamp in 2009 to nine WordCamps in 2017, Indian WordPress community has come a long way. We are expecting to see at least 12 WordCamps happening in India next year. If you want to stay informed about these WordCamps and more follow us on Twitter or Facebook. If you have any suggestion or comments let us know here.

General,WordCamps

1 min read

Our Experience at WordCamp Bhopal 2016

Last weekend we went to WordCamp Bhopal, it was the second WordCamp of 2016 that happened in India. This was a rush event for us as we reached there early morning on the day of event and left by night, so we could to see Bhopal. Next year we will plan it little better :) img_20160924_173117433

In most ways it was the usual WordCamp, except that it was organised by students(from Oriental and LNCT) & for students, which reminded us of WordCamp Jabalpur and we had to keep reminding students not to call us Sir. Another thing worth noticing was that venue sponsor for the event Laxmi Narayan College of Technology not only provided the venue but they also provided the students with a dedicated room for future WordPress user group meets. Two of the most popular talks were by Rahul who talked about building high quality WordPress Agency and Nirav who talked about how to become better developer, while Saurabh in his usual style become the most popular person for the day. In true spirit of WordCamp's all the speakers were seen interacting with students during breaks and I believe attendees got most out of this event during these discussions. [caption id="attachment_7166" align="alignnone" width="700"]

Saurabh talking to students[/caption] [caption id="attachment_7168" align="alignnone" width="700"]

Puneet talking to students[/caption] [caption id="attachment_7170" align="alignnone" width="700"]

Alex talking to students[/caption] Amit was one of the speakers at WC Bhopal and he talked about how lot of things can be build without writing any code in WordPress and also talked about our initiative in that direction. http://www.slideshare.net/teamphp/stop-coding-start-assembling-your-websites During the panel discussion on "Career Opportunity in WordPress", Amit mentioned about our hiring process, and promised to share one of our hiring test online for everyone to try. https://twitter.com/ethicaladitya/status/779592697325744129 Over all the organizing team did a great job in making WordCamp Bhopal happen, and we would like to thank all of them for putting up a great show.

Now that WordCamp Bhopal is over it's time to prepare for upcoming WordCamp Nashik. If you haven't yet booked your ticket you should do so now.

General,WordCamps

1 min read

Our Experience at WordCamp Mumbai 2016

Last weekend we went to WordCamp Mumbai. This was first WordCamp of 2016 in India, and our experience can be summed by this tweet from Nisha. https://twitter.com/iNisa/status/709241456742035456 Day 1 We reached the venue by 8:45 AM, and watched the volunteers arrange the registration desk and got our registrations done. We just reached the venue

First talk for the day was by Shilpa Shah which set the tone for the day, all the talks on day one were good, I especially wanted to mention two talks from that day, which I think stole the show for us

What Customer Wants by Shilpa - Where she shared her insights on understanding customer expectations. This talk made us think about our customer engagement activities.
WordPress accessibility by Raghavendra - He showed us the importance of accessibility, and pointed to resources. This talk forced us to re-evaluate the accessibility of modules that we are building for Awesome Studio , and we are going to make all of them accessible.

https://twitter.com/wpoets/status/708524522748530688 Day 2 We came little late, and almost missed the first talk by Ramya, all talks of day two were aimed at users of WordPress. Suggestions by Fairy Dharawat on researching the humor and keeping your mind open for humor helps in content writing, Vijay Nallawala talking about how WordPress enabled him in reaching out to more people for providing support group to people affected by bipolar disease. Naoko shared insights on how WordPress went on to cover 70% of CMS market share despite language barrier. Though best talk of the day was from Mahangu, where he talked about the Jugaad Way of starting with development, basically the way many of us have learned WordPress development. https://twitter.com/wpoets/status/708974088451035136 We also suggested to those attendees who found this way of development difficult to use to try Awesome Studio plugin for WordPress. https://twitter.com/wpoets/status/708976437991112705 We would like to thank all the Organizers, Volunteers and Speakers of WordCamp Mumbai, they have raised the bar for WordCamps in India. Organizers and Volunteers

For us day two ended with a visit to Band Stand and Bandra Fort.

General

0 min read

WooCommerce: A Free e-Commerce Plugin for WordPress

News

0 min read

WooCommerce: A Free e-Commerce Plugin for WordPress

Introducing Featured Today Plugin For WordPress

Plugins

0 min read

Official Website	https://edu.google.com/products/classroom/
Teacher Center	https://teachercenter.withgoogle.com/first-day-trainings/welcome-to-classroom
Help Center	https://support.google.com/edu/classroom/#topic=6020277
Teachers Essential Guide	https://www.commonsense.org/education/articles/teachers-essential-guide-to-google-classroom

Official Website	https://moodle.com/
Documentation	https://docs.moodle.org/38/en/Main_page
Teacher quick guide	https://docs.moodle.org/38/en/Teacher_quick_guide
Learn Moodle	https://learn.moodle.org/

Official WebPage	https://zoom.us/
Zoom Training Resources	https://zoom.us/docs/en-us/covid19.html

Official WebPage	https://v3.wpoets.com/continuous-improvement-program/smriti-edtech-platform/
More Details	https://v3.wpoets.com/edtech/make-educational-institutions-smarter-using-smriti-edtech-platform/

City	What is planned	Meetup URL
Ahmedabad	WordPress quiz, general WordPress discussion with cake cutting, Swag distribution, and conclusion.	https://www.meetup.com/ahmedabad-wp-meetup/events/249095620/
Ajmer	General WordPress discussion, some refreshments and maybe even a WordPress birthday cake.	https://www.meetup.com/ajmer-wordpress-meetup/events/249028077/
Banglore	Some refreshments with WordPress birthday cake.	https://www.meetup.com/BengaluruWordPress/events/248083951/
Bhandara	Get together with some refreshments and a WordPress birthday cake.	https://www.meetup.com/Bhandara-WordPress-Meetup/events/249736210/
Bhopal	15th anniversary WordPress birthday cake with some refreshments.	https://www.meetup.com/WordPress-Bhopal/events/249109543/
Bhubaneswar	Some refreshments, a casual discussion and maybe even a WordPress birthday cake.	https://www.meetup.com/Bhubaneswar-WordPress-Meetup/events/250129034/
Chandigarh	Celebration of 15th anniversary with light refreshments and a WordPress birthday cake.	https://www.meetup.com/WordPress-Chandigarh/events/249254226/
Goa	Session on WordPress Stories - "My experience with WordPress", WordPress Helpdesk where any WordPress queries will be resolved.	https://www.meetup.com/WordPressGoa/events/249835504/
Kanpur	Wordpress introducing session. Following this session, there will be a brief introduction session to Gutenberg - the new content editor for WordPress. Some refreshments (and maybe even a WordPress birthday cake).	https://www.meetup.com/WordPress-Kanpur/events/249026730/
Kochi	Session to learn more about WordPress, have some refreshments, and cut a WordPress birthday cake.	https://www.meetup.com/Kochi-WordPress-Meetup/events/250305008/
Kolhapur	Get together with light refreshments and cutting of WordPress birthday cake.	https://www.meetup.com/WordPress-Enthusiasts-in-Kolhapur/events/249026550/
Kozhikode	Session on “The new Gutenberg editing experience”, refreshments, casual discussion and maybe even a WordPress birthday cake.	https://www.meetup.com/Kozhikode-WordPress-Meetup/events/250246256/
Lucknow	Get together for some light refreshments and sweet treats.	https://www.meetup.com/Lucknow-WordPress-Meetup/events/250222200/
Mumbai	WordPress Birthday cake and maybe a party. Details are still being worked out do check meetup page for more details.	https://www.meetup.com/WordPressMumbai/events/249605456/
Nagpur	WordPress birthday cake with some light refreshments.	https://www.meetup.com/Nagpur-WordPress-Meetup/events/249489354/
New Delhi	Learning sessions with some renowned experts speaking on the occasion. Information of these sessions/speakers will be updated soon.	https://www.meetup.com/WordPress-New-Delhi/events/248986486/
Pune	Casual discussion, refreshments and 15th anniversary WordPress birthday cake.	https://www.meetup.com/Pune-WordPress-Knowledge-Exchange/events/249910602/
Surat	It will start from 10:00 am, they are planning general WordPress discussion, a small WordPress quiz, a discussion on implications on GDPR followed by a cake.	https://www.meetup.com/Surat-WordPress-Meetup/events/250824509/
Trivandrum	Lightning talk session, to share WordPress experience. Games and some refreshments and cake cutting.	https://www.meetup.com/Trivandrum-WordPress-Meetup/events/249537638/
Udaipur	Will have a general discussion, share some stories of how WordPress has changed people’s lives and fun of course.	https://www.meetup.com/Udaipur-WordPress-Meetup/events/251042705/
Vadodara	Discuss glorious WordPress 15 year journey, followed by a WordPress quiz, WordPress helpdesk, cake cutting, celebration, and Networking.	https://www.meetup.com/Vadodara-WordPress-Meetup/events/250107889/

City	What is planned	Meetup URL
Pune	Come for the cake and talks on how much WordPress has evolved, some of us has been following it for over a decade now	https://www.meetup.com/Pune-WordPress-Knowledge-Exchange/events/240187341/
Mumbai	Cake and maybe a party, details are still being worked out	https://www.meetup.com/Mumbai-WordPress-Meetup/events/238856421/
Nagpur	Cake, discussion on evolution of WordPress and upcoming WordCamp	https://www.meetup.com/Nagpur-WordPress-Meetup/events/240232016/
Kanpur	Celebration of milestone event in Kanpur, and may be some discussion about upcoming WordCamp	https://www.meetup.com/WordPress-Kanpur/events/238886588/
Kochi	WordPress Malayalam Translation and a big Cake, they have planned full day event	https://www.meetup.com/Kochi-WordPress-Meetup/events/240054916/
New Delhi	Apart from birthday celebrations, they have planned for panel discussion on how to expand the WP community, a brief on Translations and potential WordCamp	https://www.meetup.com/WordPress-New-Delhi/events/240114500/
Kolhapur	Birthday celebrations with cake and talks	https://www.meetup.com/WordPress-Enthusiasts-in-Kolhapur/events/240288996/
Bhopal	Birthday celebrations with cake and talks	https://www.meetup.com/WordPress-Bhopal/events/240288410/

From Ghost CMS to WordPress: Migrating and Revamping the Cars24 Australia Blog

From Ghost CMS to WordPress: Migrating and Revamping the Cars24 Australia Blog

From Ghost CMS to WordPress: Migrating and Revamping the Cars24 Australia Blog

From Ghost CMS to WordPress: Migrating and Revamping the Cars24 Australia Blog

Scaling Content, Performance, and User Experience: A 1800 page Overhaul

Empowering A Software Website With Custom WordPress Development

Elevating loyalty through stunning design and seamless functionality

From Shore to Screen: Building a Custom Travel Portal

Bringing Brand’s Philosophy to Life Through a Custom WordPress Website

From Shore to Screen: Building a Custom Travel Portal

Migrating & Redesigning Web Presence for Performance and Scalability

Scaling Content, Performance, and User Experience: A 1800 page Overhaul

Building a Pixel-Perfect, Performance-Driven Website for Learning Innovation

Bringing Brand’s Philosophy to Life Through a Custom WordPress Website

Insights, ideas and inspiration. A go to wisdom hub right here.

Featured Posts

"myHR” The Ultimate Customizable Leave and Absence Tracking Awesome App

(Secret) Santa is back at WPoets

(Secret) Santa came to WPoets

14th Birthday Celebrations for WordPress

Latest Posts

How to integrate a Helpdesk and Customer Support Ticket System in WordPress using SupportCandy (Part 3)

Introduction

Settings

Step 1: General settings

Page settings Tab

File Attachments

Thank you page

Step 2: Dashboard

General

Cards

Widgets

Adding a new widget

Editing the Widgets

Step 3: Ticket Categories

Adding a New Category

Edit Category

Step 4: Ticket Statuses

Adding Status:

Edit Status:

Step 5: Ticket Priorities

Adding a New Priority

Edit Priority

Step 6: Miscellaneous

Terms and conditions

GDPR

reCaptcha

Advanced Settings

Step 7: Ticket Widgets

Step 8: Rich Text Editor

Step 9: Working Hours

Holidays

Exceptions

Settings

Step 10: Appearance

Step 11: Ticket Tags

Conclusion

How to exclude internal traffic in Google Analytics 4 (GA4)

Introduction

Methods to exclude internal traffic

Method 1: Using IP Address Filter in Google Analytics

What Is Internal Traffic?

Limitations with IP Address Filters

Excluding internal traffic using IP filter

Match Types

Example of Filtering an IP address

Testing the excluded internal traffic

Using Comparisons in Realtime Report

Activating the Internal traffic data filter

Method 2) Using the WordPress plugin Monsterinsights (only for logged-in users)

Limitations with the MonsterInsights method

Excluding Logged in user from Google Analytics 4

Install the Plugin & Connect Google Analytics + Monsterinsights

Add WordPress user roles to exclude

Conclusion

How to create a Funnel Exploration in Google Analytics 4 (GA4)

Introduction

A step-by-step guide to creating a Funnel Exploration Report in GA4

Step 1) Creating a New Funnel Exploration

Step 2) Visualization