DEV Community: Lana Miro

Invitation to WordPress Agency Summit 2024, Online

Lana Miro — Fri, 20 Sep 2024 10:04:53 +0000

Connect with fellow WordPress developers and agencies for a day filled with valuable insights and practical discussions on 27th of September.

Explore the latest industry trends, exchange ideas, and gain knowledge to enhance your projects. It’s a great opportunity to grow your expertise and build strong connections within the WordPress community.

Join us for an engaging and collaborative experience!

Registration is here:
https://crocoblock.com/wordpress-agency-summit/

Top 5 JetEngine Taxonomy Use Cases for Elementor

Lana Miro — Thu, 21 Mar 2024 10:52:18 +0000

Imagine your website as a comprehensive database where each page or post is a separate element, and each category or tag is data that defines relationships and classifications. Without a well-organized search and classification system, visitors may encounter difficulties in finding the information they need because the content is unstructured and lacks clear navigational markers.

By combining the convenience of Elementor with the custom post organization capabilities of JetEngine, you unlock new possibilities in web development, allowing you to create websites with thoughtful structure and convenient navigation.

Let’s consider five examples of using JetEngine’s custom taxonomy with Elementor to optimize your website’s structure.

What Is the JetEngine Taxonomy Tool?
Why JetEngine Taxonomy Tool?
WordPress Taxonomy Types
Benefits of Using JetEngine Taxonomy Tool
Best Examples of JetEngine Taxonomy Tool Implementations
- Use case 1: Real estate portfolio
- Use case 2: Product catalog
- Use case 3: Travel website
- Use case 4: Service provision website
- Use case 5: Job board website
FAQ
Takeaway

What Is the JetEngine Taxonomy Tool?

JetEngine‘s taxonomy tool for Elementor is a feature that extends the capabilities of the Elementor plugin for creating posts and pages in WordPress. It helps you conveniently manage and display classifications of your content.

For example, if you run a blog about different countries, you can add custom taxonomies using JetEngine to create a taxonomy called “Continents” and then add terms such as “Europe,” “Asia,” and “South America.” Then, you can categorize your blog posts under these terms.

JetEngine integrates with the drag-and-drop Elementor editor. This allows you to easily add widgets to your web pages that visually display these classifications in an attractive way. There are widgets for archive lists, single term templates, and many more. Overall, JetEngine taxonomy provides complete control over how your content is organized and presented, leading to more structured, user-friendly websites with enhanced navigation capabilities.

Why JetEngine Taxonomy Tool?

Tools that JetEngine offers for creation custom taxonomies provide users with a convenient interface within the WordPress dashboard, allowing them to create, edit, and manage taxonomies effortlessly. Users can define hierarchical relationships, set customizable labels, and configure other parameters according to their site’s requirements.

One of the key advantages of JetEngine’s custom taxonomy tool is its seamless integration with the Elementor page builder, enabling users to incorporate taxonomy elements directly into the design of their web pages. This integration dynamically filters, sorts, and displays content based on taxonomy terms, offering users a more interactive and visually appealing browsing experience.

WordPress Taxonomy Types

There are two main types for effective post organization: categories and tags. Let’s take a closer look at both.

Benefits of Using JetEngine Taxonomy Tool

We’ve touched on the key advantages of JetEngine taxonomy for Elementor, but now, let’s explore them in greater detail.

Enhanced сontent organization

JetEngine custom taxonomy tool simplifies content structuring by allowing the creation of custom classification systems. This not only streamlines content organization but also enhances the overall user experience, enabling visitors to find the information they need quickly.

Powerful taxonomy listings

Using the Listing Grid widget in Elementor powered by JetEngine, you can create dynamic lists showcasing your taxonomy terms. This feature enables visually appealing displays of taxonomies with customizable layouts and presented information, offering an engaging way to navigate through your content.

Flexibility and control

JetEngine provides extensive control over your taxonomies. You can define custom labels, configure additional parameters like term hierarchy (e.g., categories and subcategories), and even link custom meta fields with terms for richer data representation. Such flexibility ensures that your taxonomy system aligns seamlessly with your content structure and presentation preferences.

Optimized integration with Elementor

JetEngine seamlessly integrates with Elementor, allowing you to utilize the familiar interface for developing and creating taxonomy listings. This eliminates the need for complex coding, making the entire process more convenient for users accustomed to Elementor’s intuitive design capabilities.

Best Examples of JetEngine Taxonomy Tool Implementations

We’ve reached the most interesting part – the use cases, thanks to which you’ll see how simple and effective content categorization can be. Below are several examples of how JetEngine taxonomy can be used to categorize content on different website types.

Use case 1. Real estate portfolio

If you want to categorize real estate properties on your website, we can create custom taxonomies such as “Location,” “Property Type,” or “Purpose.” Each property posted on the site is linked to the corresponding taxonomy based on its characteristics.

Let’s take a look at a step-by-step taxonomy setup using Case 1 as an example.

Step 1. Installing and configuring the JetEngine plugin

Install and activate the JetEngine plugin on your website. Navigate to JetEngine > Taxonomies > Add New.

Enter the category name (e.g., “Location”). Choose “Properties” as the Post Type from the list. Optionally, enable the Edit taxonomy/meta box link for quicker access to taxonomy settings.

In the end, click the “ Add Taxonomy ” button to create the taxonomy.

Step 2. Creating tags for the category

Go to the Properties > Locations page. Enter the tag name (e.g., “Los Angeles”) and a corresponding slug. Click on the “ Add New Tag ” button to add the tag. The newly added tag will appear on the right side.

Step 3. Assigning tags to properties

Navigate to the Properties page and select the desired property. On the right panel, find the created category and choose the appropriate tag. Utilize the JetEngine’s Dynamic Terms widget to create a label showing where your property is located. In the General section, select the taxonomy you created. You can customize the tag’s appearance as desired (size, color, style, etc.)

Click “ Update ” to save the changes.

Now, the property is categorized and ready to be displayed on your website.

Use case 2. Product catalog

For enhanced product browsing, it’s essential to organize the product catalog into categories for easier searching for desired items. If you’re running a bookstore, optimizing the search using hierarchical taxonomies like type of book or genres to classify books in your catalog is advisable. Arrange books into categories such as author, publication year, and others to ensure convenience and ease for website users.

To build taxonomies for a product catalog, use the same process as before, but this time, to create hierarchical categories, go to Taxonomies > Advanced Settings. Within the advanced settings, locate the Hierarchical toggle and enable it.

Now, you will see that in the admin panel, within the section of your post, a button for adding a new term will appear. Simply type the category name (for example, Paper Book or E-Book). Underneath the slug field, you’ll find a new option labeled Parent Category. Here, you’ll select the appropriate subcategory (e.g., for E-Book, add Text Book or Audio Book). Click on the “ Add New Tag ” button to include the tag.

Now, assign this category to the posts or products for which you’ve created this taxonomy.

Use case 3. Travel website

Diversify your travel website by categorizing the tours into custom taxonomies like countries such as France, Germany, and Iceland. This method simplifies tour discovery for users, making it easier to find relevant ones. Additionally, it enhances promotional efforts, ensuring effective targeting of specific event categories.

In JetEngine, create a new “Country” taxonomy for the Tour page. Define categories like France, Germany, etc. Then, when selecting a tour, choose the appropriate country category/tag.

Use case 4: Service provision website

It’s time to organize your service provision website to ensure users can easily find what they need. If your website offers medical services, categorize them into specific fields such as dermatology, cosmetology, surgery, and more.

Just like in previous examples, start by going to JetEngine > Taxonomies > Add New. Create a category (e.g., Service Type) and choose “Doctors” as the taxonomy type from the list.

Within the Doctors field, add the necessary category terms.

Assign categories to your posts, and the ultimate outcome will resemble this:

Use case 5: Job board website

Ditch the one-size-fits-all approach and organize your team by vacancy type (full-time, intern, volunteer) using custom categories. This lets you showcase your diverse workforce efficiently and build user-friendly dynamic employee lists – a win for both you and website visitors.

The steps remain the same as in previous cases. Navigate to JetEngine > Taxonomies > Add New. Add the needed category (for example, Vacancy Type) and choose “Jobs” as the taxonomy type from the list.

Let’s diversify by opting for a non-hierarchical taxonomy here. In the Jobs (Vacancies) field, click on the newly created tag and add the labels you require for classification. We decided to choose Full-time, Intern, and Volunteer.

Navigate to the Jobs (Vacancies) page, choose a desired employee, and select the relevant tag.

Here’s the final result after we categorized the workers:

Pro tip

Plan your taxonomy structure. Before creating taxonomies, think about how you want to categorize your content. For complex category structures, use hierarchical taxonomies.

FAQ

What are taxonomies in WordPress?

Taxonomies in WordPress are a way of organizing and categorizing content. The default taxonomies include categories and tags.

How can I use JetEngine taxonomy for Elementor?

To use JetEngine taxonomy tool, you need to have a WordPress website with Elementor installed. Then, install and activate the JetEngine plugin, go to the taxonomies tab, and choose your settings.

Can I use JetEngine taxonomy with any WordPress theme?

Yes, JetEngine is designed to work seamlessly with any well-coded WordPress theme. Whether you’re using a pre-built theme or developing your own, you can use the plugin’s functionality to enhance your website’s taxonomy management.

Do I need coding knowledge to use JetEngine taxonomy in Elementor?

No, JetEngine taxonomy is designed to be user-friendly and intuitive; no coding skills are required. The plugin offers a visual interface within WordPress, making it easy for users to create and manage custom taxonomies using a familiar interface.

Takeaway

Taxonomies are definitely heroes of website organization. They make it easier for visitors to find what they need quickly. A well-organized website with a clear hierarchy is not just user-friendly; it can also lead to better SEO and a more engaging experience.

While WordPress offers built-in categories and tags, plugins like JetEngine take content organization to the next level. With JetEngine taxonomy, you can create custom classification systems tailored to your specific needs. This empowers you to categorize your content in highly relevant and meaningful ways, enhancing your website’s functionality tremendously.

Utilizing the JetEngine taxonomy and Elementor duo, you can transform your website from a content jungle into a simplified informational hub. Remember, small efforts in the organization will help create a user-friendly and successful website.

The post Top 5 JetEngine Taxonomy Use Cases for Elementor appeared first on Crocoblock.

JetEngine Profile Builder Overview

Lana Miro — Tue, 12 Mar 2024 07:43:34 +0000

I guess JetEngine’s real appeal is its flexibility. It provides a broad range of tools that let you shape your projects however you want, based on your creativity.

So, its Profile Builder module for WordPress membership websites really hits the mark, giving you all the tools you need to put together something awesome, almost without limitations.

So, it’s time to explore it.

Getting Started with JetEngine’s Profile Builder
How to Create a User Profile with JetEngine Profile Builder
FAQ
Wrapping Up

Getting Started with JetEngine’s Profile Builder

JetEngine offers, except for the core functionality (which is already a lot), 19 modules that you can switch on and off for better performance and 27 free add-ons, which can be found here.

The Profile Builder module is really impressive, especially for advanced WordPress users who love to have all the aces and play them masterfully. Why? Because you have a lot of things, such as Relations, Dynamic Visibility, a unique and powerful Query Builder, Data Stores, REST API tool, and other cool things available in a frame of one plugin. Also, if you are an All-Inclusive Crocoblock subscriber, you can enjoy the whole ecosystem of plugins that reinforce and share data with each other. In this case, if you build a website with membership and user profile functionality as its central feature, you will appreciate the integration with JetPopup or JetAppointment for such websites.

Even if you have only JetEngine and a free JetFormBuilder, there’s a lot you can do by not only adding and updating users but also linking new related items via forms, submitting not only posts and CPTs but also CCTs to store user listings or portfolio content in meta fields without overloading the database. Certainly, you can charge members for their subscriptions and change user roles via forms so they can upgrade their plans.

Anyway, I guess you know the drill and how important it is to have a good ecosystem if your site is not just a simple landing page. So, if you have never heard about or tried JetEngine’s Profile Builder, welcome.

Check Profile Builder in action. For a more advanced demonstration of its functionality, visit the Job Board demo site. Also, check the Car Dealer Marketplace *for a bit more simplified functionality. *

The good news is these two and the other 12 dynamic templates (premade websites) are available in the All-Inclusive subscription.

How to Create a User Profile with JetEngine Profile Builder

Typical User Profile plugins offer some shortcodes for a user registration form, then for log in/log out, redirection functionality, and probably user roles editor, plus something else. Such plugins are great and easy to use but definitely have limitations.

JetEngine’s Profile Builder offers a logic that is different from that of typical user profile or membership plugins. Also, it doesn’t have a user role editor or restricted content functionality (it has a dynamic visibility module, which is about individual blocks but not full pages or taxonomies). However, there are many free plugins for this.

The rest Crocoblock will do for you. So, let’s dig in and check the steps for setting up an advanced user profile functionality with JetEngine.

*I suggest this workflow for creating a user profile with JetEngine. *

_In the illustrating videos, I will show you examples of user profiles created for two user roles: Company and Employee. That’s why you will see forms created for each of them and the subpages available for different user roles. This will demonstrate how it’s possible to create as many user roles as you want within the Profile Builder interface. _

Adding extra meta fields to Users if needed. It’s important because the list of default WordPress users’ fields is quite limited; also, in some cases, it’s easier to work with custom fields, such as profession, user picture (instead of Gravatar), contact details, etc. Read this article to learn how to apply meta boxes to users.

The tool to use – JetEngine Meta Boxes.

Creating User Profile page structure. In this step, create and assign pages for the User’s Account, User’s Public Profile (optional), and All Users Page (optional). To do so, create blank pages and select them from the dropdown in the Profile Builder > Pages tab. Also, choose the Template mode (you will most probably need a Content mode).

The tool to use – JetEngine > Profile Builder > Pages tab *. *

Creating forms for Users. Here, we need a Registration form, a Profile Edit form, and any other forms you will need for your project and use in the next step. The logic is the following: anything users edit will be done using forms because the idea here is not to use quite an ugly and limited default WordPress user profile interface. So, instead, we create custom forms so Users will be able to edit the information about them, add posts (if allowed), etc. Based on the submitted information, new/existing meta fields and/or posts will be created or updated. Read this article to learn how to update users via forms.

Note that you can not only update users’ profiles but also submit and update posts (e.g., with users’ listings, portfolios, and other content). JetFormBuilder, even in its free version, has full functionality for doing that.

The tool to use – the JetFormBuilder plugin or the JetEngine Forms (Legacy – but it’s used in Profile Builder presets). However, it’s strongly recommended to use JetFormBuilder instead because it is much more powerful and has additional paid add-ons that offer even greater functionality.

Creating subpages for User Accounts. Now, it’s time to create subpages which will be components of the layouts for the pages we’ve assigned to the User’s profile structure in step 2. Go to the JetEngine > Profile Builder > Account tab. You will see the “ Add Subpage ” button and settings for redirection for unauthorized users. Start adding subpages for the user’s account (note that you can make a different set of pages, depending on the user’s role, because you assign the subpage visibility according to the role).

To design your subpages, use the dialog for adding templates right here. You can make them with Elementor (free or paid) or JetEngine’s Listing Template functionality. Set visibility for these subpages in the user’s menu so some can be hidden and accessed only by link. Also, drag and drop subpages in the order you want them to appear on the user’s account page.

These subpages will almost entirely consist of forms because this is the area where the user can edit information about them and/or submit posts.

The tool to use – JetEngine > Profile Builder > Account tab *. *

In this video example, I showed the “Personal info template” that is common for both Employee and Company user roles. The irrelevant blocks are hidden with the Dynamic Visibility tool. Alternatively, you can create different templates and assign them to the user roles on the Subpage settings in the User Profile Builder.

Also, I’ve demonstrated that dynamic fields with users’ data are fetched with the help of the Dynamic Field widget, and the forms for editing them open on pop-ups linked to the “ Edit ” buttons.

Populating the Users’ Account Page (Members’ area). Now that we have created all the subpages, it’s time to combine them on the User’s page — the page that the user sees after logging in. Don’t mix it up with the Public User Page.

In step 2, we created a blank page for the user’s Account. Now, it’s time to add content there, namely, adding the user’s menu and subpages. The menu will be generated automatically, and the subpage templates we’ve already created in step 4.

There are “Profile Menu” and “Profile Subpage Content” widgets/blocks for adding these elements, which are available for Gutenberg, Elementor, and Bricks. So, place them, add all the necessary styling and headings, and enjoy the result.

*The tool to use – Gutenberg/Elementor/Bricks editor with JetEngine’s Profile widgets. *

Creating templates for Public User’s Pages (if you choose to have them). If the users of your website are supposed to have a public profile like this, then it’s time to create it as well.

In step 2, we created a blank page for the user’s Public Profile. Now, it’s time to create a Template or templates for it. Here, we will also add subpages, as in step 4, but they will not consist of forms but instead fetch the dynamic content users already added using the forms.

If you want to display one field, e.g., a user’s email, use the JetEngine Dynamic Field widget. But if you want to show a loop of elements, like here in the Work Experience and Portfolio sections, create a Listing Template first and then fetch it using the Listing Grid widget.

Also, you can assign each subpage to a certain user role; thus, each of them can have a different layout for their public page. Examples: an Employee’s profile and a Company’s profile.

The tools to use – Gutenberg/Elementor/Bricks editor with JetEngine’s dynamic content widgets and Listing templates for loops (Listing grids).

Pro tip

Use the same layout and design for the Account page and for the Public User Profile page; just add the “ Edit ” buttons and place forms for editing in pop-ups. Thus, the user will see exactly what their public profile page looks like right after editing.

This is an illustration of this tip:

* Read also: *

Creating a User Account Page with various dashboard structures.
Membership website with Crocoblock.
Top membership websites with Croсoblock Profile Builder.
JetEngine Relationship use cases.
Connecting relation items using forms.

FAQ

*What is a WordPress profile builder? *

It’s a plugin or a module that adds functionality for registering users from the front-end forms and also provides them with a front-end user profile interface. It’s used for membership websites.

Can I create a membership site with WordPress?

Sure, you can. You will need a User Profile Builder, as the one described above, and some tools for adding and editing user roles. Also, you might need a plugin to restrict content by pages or categories.

Wrapping Up

In this article, I’ve described the capabilities of JetEngine’s Profile Builder module in conjunction with the JetFormBuilder plugin for creating full-fledged user profiles. Using these tools and the guide, you can build membership or directory sites and monetize your WordPress projects.

Thanks to the JetEngine’s powerful functionality and other Crocoblock plugins, there’s a lot of space for your creativity.

The post JetEngine Profile Builder Overview appeared first on Crocoblock.

Recreating WordPress Events Page with Crocoblock Plugins

Lana Miro — Wed, 28 Feb 2024 08:05:00 +0000

Most WordPress developers probably know about the community of this CMS and the events that take place pretty often. There’s an official WordPress.org event page with a list of these events, the information about them, and the location, so people can find what’s going on in their region.

I’ve recreated it using Crocoblock plugins and will give you a step-by-step guide on how to do it in this article. Check the live demo here. ** **

The Scope of Work
Crocoblock Tools Used
Adding Events
- Creating CCT for events
Creating Queries in Query Builder
Creating Listing Templates
Setting Up Filters
Сomposing the Events Page
FAQ
The Bottom Line

The Scope of Work

The event page of WordPress events for 2024 has the following components:

Interactive map with pop-ups that display the information about events and a link to the event’s page.
A list of events.
Filters for this list (search field and sorting by month, format, and type).
A dynamic counter for the events.
A dynamic counter of the countries in which these events will take place.

There is also a number of participants displayed on the original page, but I will skip it for now. They could also be displayed dynamically, but it requires more advanced logic.

_Also, I will recreate only some European events for obvious reasons, not to add over 1,000 of them to the demo site. _

Pro tip

If you want to display only future events or create two lists with past and future ones, use this tutorial.

Here is a step-by-step work plan:

creating a CCT and adding events;
creating custom queries in Query Builder;
creating Listing Templates based on these queries;
setting up filters;
composing the Events Page and fetching data dynamically.

Crocoblock Tools Used

Custom Content Types. This is a Crocoblock-specific entity, and they are used for better performance and reducing the Database size in case there is a large number of records. We will store individual events using them. It’s also the most convenient way because the events have individual pages on third-party resources.
Query Builder. A powerful tool to get any data from the Database. I’ve used it to get all the events, the total number of countries and events, and to display in-person events only. In total, there are three queries. We need a separate query for in-person (not online) events, as only this type should be displayed on the map.
Map Listing. It showcases the in-person events on the map and on-click pop-ups that display brief info with a link to the event.

By the way, if you need a geolocation filter so the users find something close to their location, we’ve released a functionality for it; read the detailed tutorial here.

JetSmartFilters. They filter events with AJAX right on the page.
Timber/Twig Views. I’ve created listing templates using Twig. This way, the best performance can be achieved.
Listing Grid. It’s a widget/block for looping JetEngine Listing templates.
A Dropbar widget from JetElements is used to create a smooth filter display. However, it’s pretty optional, and only if you use Elementor to compose the event page.

In total, two Crocoblock plugins were used to implement this functionality: JetEngine and JetSmartFilters . The additional plugin is JetElements, which is used to display filters in a dropbar.

I will demonstrate settings using Elementor, but all of these work equally well in Gutenberg and Bricks.

Adding Events

First, let’s create a CCT for events. CCT is a Crocoblock-specific entity similar to CPT but doesn’t have a dedicated single page (but can be linked to any of the post types to have it and inherit its template) and stores the whole post in one database row, which is great for performance. You have full control over its REST API settings and admin columns as well.

It can have meta fields, relations, etc, just like CPTs.

Another advantage of using CCT in our case is that a dedicated JetFormBuilder form can be created in one click, so you can easily populate the CCT records via the front end – which is exactly what we need for events when users submit them.

Also, the WordPress community events on the original site have a meeting agenda on meetup.com or other third-party resources, so we definitely don’t need single pages in this case.

Check the guided use case of collecting events from different websites using the REST API tool by JetEngine here.

Creating CCT for events

First, activate Custom Content Types and Map Listings modules in JetEngine > JetEngine. The Custom Content Type option will appear in the JetEngine section of the Dashboard. Click “ Add New ” and create a CCT called “Events.”

I’ve added eight meta fields to it:

Event URL (text);
Event Date (date);
Event Type (select type, with Meetup, WordCamp, and Other options);
Event Format (radio type, with In-Person and Online options);
Event Location (map);
Event Country (select from Glossary);
Event City (text).

I’ve also selected the fields I wanted to see in the admin columns.

After that, the Event CCT will appear in the Dashboard menu, and it’s time to add the events. Don’t forget to add a map provider (e.g., Google Maps) with their API key in JetEngine > Maps Settings.

Creating Queries in Query Builder

Custom queries are required to fetch the exact content we want in the order we want. The query results can be cached as well.

All Events query

To display all events in chronological order, I create the All Events query with query type “Custom Content Type,” “events-list” ID (it’s required to deal with filters on the Main Page), and “from lowest to highest” order.

In-Person Events query

As only in-person events will be displayed on the map, let’s create a query to display only this type. It will have the same settings as the previous query (but it doesn’t require an ID) to sort by date, plus it selects the “Event Format” field value equal to “in-person.”

Total Number of Countries query

To count the number of countries where the events will take place, I will use Query Builder with a query type “SQL/AI query.” Switch the Advanced/AI query toggle.

The command is the following:

SELECT count(*) AS total_events, count(DISTINCT event_country ) AS total_countries FROM {prefix}jet_cct_event;

If you want to modify the query but are not so familiar with SQL commands, use the AI tool and check our article about popular queries.

Creating Listing Templates

Listing templates are the templates for the loop, which are based on selected queries. There can be various types of listing sources and display posts, users, terms, relations, Options Pages data, Query Builder data, Repeater fields, Custom Content Type items, and REST API endpoint items.

In this case, I will use a Query Builder as a source with the queries created above and the Timber/Twig view to design them to ensure the best possible performance.

To use it, activate the Timber/Twig view in the JetEngine > JetEngine > Performance tab and follow this guide for detailed instructions on creating it.

For this project, I will need two listing templates:

List Event – to display the list of all events;
Map Event – to display events on the map.

The List Event listing is for displaying all the events (online and in-person). Choose the All Events query as a source.

This is the code I’ve used:

HTML/Twig:

*(remember, you can generate Twig tags dynamically using buttons on the top)

<div class="list-event">
    <div class="list-event__name">
        <a href="{{ jet_engine_data(args={key:'event__event_url'}) }}" target="_blank">{{ jet_engine_data(args={key:'event__event_name'}) }} ↗</a>
    </div>
    <div class="list-event__where">
        {% if jet_engine_data(args={key:'event__event_format'}) == 'in-person' %}
            {{ jet_engine_data(args={key:'event__event_city'}) }}, {{ jet_engine_data(args={key:'event__event_country'})|jet_engine_callback(args={cb:'jet_engine_label_by_glossary',labels_by_glossary:'2'}) }}
        {% else %}
            Online
        {% endif %}
    </div>
    <div class="list-event__when">
        {{ jet_engine_data(args={key:'event__event_date'})|jet_engine_callback(args={cb:'jet_engine_date'}) }}
    </div>
</div>

CSS:

.list-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    border: 1px solid #d9d9d9;
    margin-top: -1px;
}

.list-event__name {
    flex: 0 0 60%;
}
.list-event__where,
.list-event__when {
    flex: 0 0 20%;
    color: var(--e-global-color-text);
}

@media (max-width:768px) {
    .list-event {
        flex-wrap: wrap;
        font-size: 14px;
    }
    .list-event__name {
        flex: 0 0 100%;
    }
    .list-event__where,
    .list-event__when {
        flex: 0 0 auto;
    }
}

As you can see, I’ve used global style variables here, such as color: var(–e-global-color-text); in our case, it’s Elementor’s variables, but the same approach can be used with other tools. It’s recommended to maintain the style compatibility without editing the code.

As a result, we will get the following view:

The the Map Event listing, I use the In Person query as a source.

The design is pretty similar:

HTML/Twig:

*(remember, you can generate Twig tags dynamically using buttons on the top)

<div class="map-event">
    <div class="map-event__title">
        {{ jet_engine_data(args={key:'event__event_name'}) }}
    </div>
    <div class="map-event__link">
        <a href="{{ jet_engine_data(args={key:'event__event_url'}) }}" target="_blank">Open event site ↗</a>
    </div>
    <div class="map-event__meta">
        <div class="map-event__meta-row">
            {{ jet_engine_data(args={key:'event__event_country'})|jet_engine_callback(args={cb:'jet_engine_label_by_glossary',labels_by_glossary:'2'}) }}
        </div>
        <div class="map-event__meta-row">
{{ jet_engine_data(args={key:'event__event_date'})|jet_engine_callback(args={cb:'jet_engine_date'}) }}          
        </div>
    </div>
</div>

CSS:

.map-event {
    background:#fff;
    padding: 20px;
    font-family: var(--e-global-typography-text-font-family);
    font-size: 13px;
    color: var(--e-global-color-text);
    border-radius: 3px;
    box-shadow: 0 3px 5px rgba(0,0,0,.1);
}

.map-event__title {
    font-weight: 500;
    font-size: 16px;
    padding: 0 0 10px;
    color: var(--e-global-color-secondary);
}

.map-event__meta {
    padding: 10px 0 0 0;
}

This is the output preview:

Setting Up Filters

I guess there’s no need to explain why filters are essential here.

I will create four filters:

Search (by event name) – search;
Format (In–person or Online) – radio;
Type (Meetup, WordCamp, or Other) – radio;
Date (select month) – date period.

Search filter settings (search type)

The settings for this filter are pretty straightforward: select the Search By Custom Field and type the Query Variable “event_name” (the name of the field for your event).

Format filter settings (radio type)

Data Source – Manual Input. Add options with “in–person” and “online” values (they must be the same as the option of the “event-format” meta fields of your CCT);
Type the “event_format” query variable;
The comparison operator should be “equals” (=);

Type filter settings (radio type)

The settings are the same as for the previous one, but the options must be for the “event_type” meta field and the “event_type” query variable.

Date filter settings (date period type)

Filter by – Meta date;
Period type – Month;
Datepicker button text – Month;
Start/End Date Period Enabled – toggle activated;
Query Variable – event_date.

Сomposing the Events Page

_I will demonstrate settings using Elementor, but it works equally well in Gutenberg and Bricks. _

First, let’s place the interactive map on the page. Add the Map Listing widget with the Map Event listing selected “event_location” meta key in the Address meta field input in General settings and your preferred style settings for the map (height, center, etc.). I’ve used this custom map style to look like the one on WordPress.org:

[
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#c8d1fc"
            },
            {
                "visibility": "on"
            }
        ]
    }
]

Marker tab

I chose the WordPress icon.

Popup tab

This is the pop-up to display the info about the event, designed in the Map Event listing.

The size is 320x45px, with a pop-up preloader activated and a pin, it opens on click.

Here is the result:

To add the dynamic counts of events and countries, I used a Heading widget and a dynamic tag. Choose “Dynamic function” from the JetEngine section of the list and the “SQL query results” function. Choose the “total_events” query column to display the number of events and the “total_countries” to display countries.

In the Advanced tab of the same window, add the text that comes after the dynamic data: _events this year/countries. _

Now, let’s display the list of all events with filters.

For the Seach filter , add the Seach Filter widget and select your filter; choose AJAX on typing, with a minimum of 3 letters, and the “events-list” query ID.

To display Radio filters (Format and Type), I’ve used a Dropbar widget to show the radio fields as a smooth dropdown (for Gutenberg or Bricks, use other solutions or just add the radio filters as they are). Choose the Button type – Text, and type the name of the filter. In the Content Type tab, choose Template.

Create Section templates using Elementor (for Format and Type filters). Add the Radio filter to that section with the “events-list” query ID and AJAX apply type. You should create two templates like this for Format and Type filters. For the first one, choose the “Format” in the Select filter input, and for the second, choose the “Type” one. Add styling, go back to the main page, and choose these templates for the corresponding Dropbar widgets.

For the Date filter , add the Date Period filter widget. Select the “Date” filter, choose the AJAX apply type with Apply on Value change, and specify the “events-list” query ID.

Finally, to clear all the filters , add the Remove filters widget with AJAX apply type and “events-list” query ID.

Don’t forget to style everything.

The final step is adding the list of all events. Add the Listing Grid widget , choose the Event list listing template, “Published” status, select “1 column” and Lazy Load. If you want to use Infinite Scroll or Load More, they are available right here in settings. In case you want to add pagination, check this guide.

Enjoy the result!

FAQ

*When to use Crocoblock CCT instead of CPT? *

There are a lot of applications for CCT; however, it will be the best choice if you want to place a large number of records with a lot of meta fields and keep your database as compact as possible. Check this diagram to get an idea.

*What is a WordPress event plugin? *

Event plugins are tools for displaying various events. They provide functionality to make these events easy to find and filterable and even display them as an event calendar.

*Can I create an event calendar with Crocoblock? *

Sure! You can display JetEngine CPT and CCT as a calendar, dynamically submit new events via forms, and filter them.

The Bottom Line

In this article, I demonstrate how you can recreate the main event page of the WordPress community with just a couple of Crocoblock plugins. There’s also a lot of space for additional development if you want to create a more complex event directory or combine it with membership functionality.

The post Recreating WordPress Events Page with Crocoblock Plugins appeared first on Crocoblock.

WordPress Rest API: What Is It And How Can You Expand It?

Lana Miro — Wed, 03 May 2023 08:32:38 +0000

You may have seen or heard people mention the WordPress REST API but weren't sure what it was. Or perhaps you already know what it is and want to learn more and discover some tools to expand it. Either way, I've got you covered. Let's dive in.

What is the WordPress REST API?
What is an API?
What is a REST API?
What does the WordPress REST API do?
Use cases of the WordPress REST API
Tools for Expanding the WordPress REST API
Ultimate Endpoints With REST API by Dipankar Pal
JetEngine REST API & Custom Endpoints by Crocoblock
WP REST API Controller by Evan Herman
REST API Toolbox by Pete Nelson
Summary

What is the WordPress REST API?

The WordPress REST API allows external applications to access all of WordPress's features and data. This means developers can integrate WordPress into third-party apps without requiring users to log in. The API enables developers to create custom interfaces and user experiences that meet project needs and make it easier to share content across websites and apps, promoting collaboration and integration.

The REST API provides a standard way to access WordPress data from any programming language, making it easier to build powerful apps that use the WordPress platform. (Hubspot)

Okay, that's the short answer. If you want a more in-depth explanation, let's backtrack and explore what APIs and REST APIs are.

What is an API?

An API, or Application Programming Interface, is a software component allowing external applications to communicate with it. By exposing a portion of an application's data and functionality, third-party apps can integrate with it.

For example, to display a YouTube video on your website, you'll use YouTube's API to request the video and embed it on your website. And if you want to upload a video to YouTube using your app, YouTube's API lets you do so without requiring a YouTube user account.

APIs are critical to today's software ecosystem, allowing different software applications to share data standardized and automatedly. They enable developers to connect their websites to Google Maps and most of your favorite apps, whether it's your automation software scheduling your social media posts or the weather app on your phone, use APIs in some way.

What is a REST API?

REST APIs are a type of API that follow a set of guidelines called REST, which stands for "Representational State Transfer." The requirements for REST APIs are:

Client-server separation: The client and server may only communicate via a request followed by a response.
Uniform interface: All requests and responses must adhere to a standard protocol, typically HTTP.
Stateless: Each interaction with an API is independent of previous interactions.
Layered system: Proxy servers are usually between the client and server.
Cacheable: For resources provided, the server should specify whether the client can cache them and for how long.

These constraints standardize how web applications communicate with each other, ensuring that all REST APIs follow a similar process and keep the two applications independent.

What does the WordPress REST API do?

The WordPress REST API follows the guidelines for REST APIs, allowing developers to integrate WordPress with other applications in multiple ways and making it relatively easy for developers to learn and use. Initially created as an open-source plugin for WordPress, the WordPress REST API was later added to the WordPress core in version 4.7, effectively transforming WordPress into a software platform.

With the WordPress REST API, developers can build web applications from scratch while utilizing WordPress's article drafting and content management features or connect WordPress to a mobile app. The REST API also offers powerful flexibility for developers, allowing them to work in different programming languages outside the constraints of WordPress.

Use cases of the WordPress REST API

The WordPress REST API is a powerful tool that enables developers to interact with WordPress sites using HTTP requests. Here are some of the common use cases for the WordPress REST API:

Building mobile apps: Developers can create custom mobile apps that can access WordPress content and perform actions like creating posts, updating content, and managing user accounts.
Creating custom themes and plugins: Developers can create custom templates, shortcodes, plugins, and widgets that can be used to build unique WordPress sites.
Integrating third-party services: The WordPress REST API can also be used to integrate third-party services with WordPress sites, such as social media platforms like Twitter and Facebook. This allows WordPress site owners to share content with their followers and interact with them.
Migrating content to or from WordPress sites: Developers can export content from WordPress sites and import it into other systems or import content into WordPress sites from other systems.
Automating WordPress site tasks: Developers can create custom scripts that can perform tasks automatically, such as creating posts, updating content, and managing user accounts. This saves time and effort.

Tools for Expanding the WordPress REST API

In this section, I'll explore some popular tools for expanding the functionality of the WordPress REST API. These plugins can help you create custom endpoints, manage custom post types and taxonomies, and modify multiple REST API settings. By utilizing these plugins, you can unlock the full potential of the REST API and create powerful applications that integrate with WordPress.

Ultimate Endpoints With REST API by Dipankar Pal

Ultimate Endpoints is a WordPress REST API plugin that simplifies the process of adding custom endpoints to the API. You can easily generate a secret key for authentication and create a custom endpoint URL. Once you have created the endpoint, you can use it to send requests to the server and obtain data.
You can also attach custom code to the filter hook to enhance the API's functionality and receive all request parameters.

Key features:

Secret key creation/deactivation.
Endpoint URL creation.
API request/response log keeping and deleting.
Recent activity recording. You can manage all these functionalities through a convenient settings panel.

JetEngine REST API & Custom Endpoints by Crocoblock

JetEngine's REST API & Custom Endpoints allow you to create connections between websites, forms, apps, and third-party APIs. Its functionality is impressive, as it allows for remote data management and quick front-end fetching.

Key features:

Custom Content Type Endpoints: create custom tables and fetch/edit data from them using REST API endpoints.
REST API Listings: obtain third-party data listings and adjust their appearance in Elementor and Gutenberg.
REST API Request notifications for Forms: set up forms to send requests to third-party APIs using the "REST API" notification type in form settings.

WP REST API Controller by Evan Herman

The WP REST API Controller plugin is a powerful tool for customizing endpoints and visibility of WordPress post types and taxonomies. With its graphical interface, customization of your website's API settings is easy. The plugin also allows for metadata customization of the API response, giving you more control over your website's content.

Key features:

Customize REST API endpoints for post types and taxonomies.
Adjust metadata fields for API requests.
Rename base endpoints for post types and taxonomies.
Rename metadata field names in API requests for better user-friendliness.
Control post types and taxonomies created by third-party plugins and themes.
Granular control of API responses without writing PHP code.
Filters included for altering and extending default functionality.
Localization support for translations.

REST API Toolbox by Pete Nelson

WARNING: This plugin has not been updated for a couple of years and has not been tested with the most recent version of WordPress.

REST API Toolbox is a free WordPress plugin that enables users to modify multiple REST API settings. It is easy to install and use, making it ideal for those who are new to REST API or those who want to secure their data from unauthorized access. With this plugin, users can specify the authentication methods and permissions required to access each REST API endpoint, ensuring safe and uncompromised REST API usage.

Key features:

Disabling REST API and JSONP support.
Assigning a custom prefix to REST API.
Removing WP core endpoints and custom post type endpoints.
Forcing SSL.
Supporting WP-CLI commands.

Summary

Here, I have discussed what the WordPress REST API is, what it can be used for, and some tools for expanding the WordPress REST API.

To summarize:

WordPress REST API lets external apps access all of WordPress's features and data.
WordPress's features and data can be accessed by developers without requiring user login, allowing for integration into third-party apps.
Developers can create custom interfaces and user experiences, make content sharing easier, and promote collaboration and integration.
REST API provides a standard way to access WordPress data from any programming language.
REST APIs follow a set of guidelines called REST (Representational State Transfer).
WordPress REST API was added to the WordPress core in version 4.7, effectively transforming WordPress into a software platform.
Common use cases for the WordPress REST API include building mobile apps, creating custom themes and plugins, integrating third-party services, migrating content to/from WordPress sites, and automating WordPress site tasks.

Some of the tools available for expanding the WordPress REST API are:

Ultimate Endpoints With REST API by Dipankar Pal.
JetEngine REST API & Custom Endpoints by Crocoblock.
WP REST API Controller by Evan Herman.
REST API Toolbox by Pete Nelson.

WordPress Acquisitions: The Best, The Worst, Unclear

Lana Miro — Fri, 07 Oct 2022 12:12:25 +0000

I bet you’ve noticed how many acquisitions WordPress companies have made these years. I’m the one who follows and tries not to miss any WordPress news to stay updated.

That motivated me to write this article to show you the top brands in the WordPress market, their history, discover acquisition reasons, and their effects on the whole community.

Thus, at the end of the article, you’ll be able to figure out, “ Is acquisition terrible for the company or customers? ”

Spoiler: not always.

Is Acquisition Bad?
WordPress Acquisitions Main Numbers
Why Brands Sell: Product Selling Reasons
- Competition
- Low budgets
- Burnout
- Recession
Why Brands Buy: Acquisition Reasons
- Diversification
- Dealing with competitors
- Expand web presence
- Expand the product or service
Key WordPress Brands and Their Effect on The Acquired Product
To Conclude

Is Acquisition Bad?

I know the feeling when you find out another company has bought the product you used.

Frustration, not knowing what comes next.

Thoughts about alternatives and researching companies’ past acquisitions to see how that’s influenced another product.

Fear of the future is a familiar feeling of every human being, so it’s okay to care about the tools you use as you want stability in the development process.

WordPress Acquisitions Main Numbers

Regarding the Post Status acquisitions database, 2021 was the most acquisition-rich year – 46. The rise of WordPress acquisitions started in 2019 (15). On average, there were 5-10 acquisitions during 2014-2018.

Why Brands Sell: Product Selling Reasons

Competition

Imagine you are a small business owner with just one WordPress plugin in the arsenal and notice that plugin installations are stuck.

_You’ll be frustrated, yes? _

This is because of the high competition : 60,000+ WordPress plugins in the directory.

You should invest your time not only in development but also in marketing: to let users know about your plugin.

So, you have three choices:

Keep the plugin development slow; make it more like a hobby than a business.
Create the team for developing and marketing your product.
Sell the plugin if you are not ready to handle the competition.

When we launched JetFormBuilder, we knew about the form plugins competition, so we made a competitive analysis and thought about what we wanted to make better. Then, we asked top influencers and the WordPress community to test the plugin and share their thoughts. Thus, after a year, JetFormBuilder became one of the most used products in our stack.

Low budgets

It’s evident that one person cannot cover product marketing, onboarding, support, SEO optimization, etc. So, you’ll need more budget and time if you want your product to pay off. Smaller companies have smaller budgets, so they should rely on the community more.

Burnout

You may simply burn out, as we are not robots. We have our dreams, and sometimes you don’t want to continue product development to focus more on what you like.

I’m happy that mental health has become one of the top topics. And I think it’s better to sell the product than keep developing despite not feeling happy about it.

Recession

Covid brought a new era of working from home, and I think not everyone was ready to embrace the change. It makes us reconsider our wishes, desires, and work.

Why Brands Buy: Acquisition Reasons

It may sound obvious, but money.

To get more profit from the business, there are several reasons why big players buy new or famous brands, as outlined below.

Diversification

During my university time studying economics, diversification was the #1 rule for any business or individual investments.

“Don’t put all eggs in one basket.”

So, most companies keep following the rule to diversify their investments in different products.

Dealing with competitors

You’ve noticed the new product (similar to yours), buy it, and close – sounds like a plan? Yeap, it’s one of the strategic moves for many big brands.

For example, Nimbella startup has been merged into Digital Ocean.

Expand web presence

Broad marketing techniques include buying the popular product, adding the brand keyword, changing naming, and getting backlinks to the target website.

Expand the product or service

Some companies want to deliver all-in-one solutions or services to add more value to the client , keep them, and attract more customers. The WordPress market is not an exception.

For instance, if you are a hosting company owner, why not broaden your services by tapping into domain registration, SSL certificates, and website builders?

When we find a reliable brand in website building, we want to stay with their team as much as we can because we simply trust them.

Key WordPress Brands and Their Effect on The Acquired Product

NOTE:

You can find all news links about acquisitions in the Post Status database.

Automattic

The pioneer in WordPress acquisitions is Automattic. Their first buying was made in 2007, two years after the company was founded in 2005. As you know, Automattic is the team behind WordPress.org and WordPress.com ; they own a bunch of products (and acquired at least 30), and here are their top acquires:

WP Super Cache – a caching plugin, with 2 million installations and more than 1900 reviews, was sold because Donncha O Caoimh, the plugin’s author, didn’t want to develop further.
Clipisode – a social media platform that has been closed. Brian Alvey, the Clipisode CEO, joined the WordPress VIP company.
WPScan – WordPress vulnerability database that continues working independently as a team in Jetpack. Both WPScan owners joined the Automattic team.
Social Image Generator – the naming speaks for itself; this plugin functionality will be integrated into Jetpack.
Frontity – React Framework is an open-source project and free to use now, but the team will focus on improving the full site editing experience.
Pocket Casts – a podcast app that continues to operate.
Day One – a journalistic app for Mac and Apple users.
Parse.ly – an analytics tool that became part of WordPress VIP (enterprise package).
MailPoet – an email plugin for WordPress that joined the WooCommerce team to add more value for store owners.
Tumblr – a blogging platform that Matt Mullenweg is passionate about making great again.
Cloudup – a media sharing platform planned to replace the WordPress.com media uploading functionality.
Gravatar – one of the first Automattic acquisitions. This blog avatar platform had scaling problems that Automattic was ready to solve, according to Mullenweg.

For years, Automattic has shown its responsibility and dedication to acquisitions , so some products have become more popular, such as Gravatar, MailPoet, and WP Super Cache. Joining Automattic is a boost for the acquired brand, and it is so interesting to observe what comes next and how Tumblr’s development continues.

DigitalOcean

DigitalOcean, the cloud-hosting company, was founded in 2011 and has had only three huge acquisitions:

Cloudways – 2M visitors, top hosting provider; Aaqib Gadit, co-founder and CEO, said that the company continues to function as a standalone business, so nothing changes for their customers.
CSS Tricks – one of the most popular web development blogs; Chris Coyier is planning to help with the transition and step back, then focus on other projects.
Nimbella – an open-source serverless development startup that was closed after acquisition.

Digital Ocean plans its acquisitions precisely to get more value from the bit. Honestly, I was surprised after Cloudways and CSS Tricks acquisitions, but I’m sure this is for the best, as they are in good hands with a robust community that cares a lot about partnerships.

Awesome Motive

Awesome Motive (AM) is the one behind the WPBeginner blog, WPForms, OptinMonster, RafflePress, and MonsterInsights brands. Syed Balkhi founded the company in 2009 and had at least 12 acquisitions , for example:

Pirate Forms – a WordPress form plugin from the Themeisle team, Awesome Motive acquired the plugin when the Themeisle team decided to recommend WPForms instead Pirate Forms.
WP Charitable – a donation plugin with a small team, has been sold to pass the further development to AM.
Sandhills Development, which owned Easy Digital Downloads, AffiliateWP, Sugar Calendar, WP Simple Pay, and Payouts Service – one of the vast AM acquisitions; the whole team joined the AM corporation.
SearchWP – a WordPress search plugin that joined AM family and continued fruitful development.
Smash Balloon – a popular social media plugin, was added to the AM brand lists.
All in One SEO – an SEO WordPress plugin became a great addition to the AM products.
SeedProd – the founder of this plugin managed development by himself, so he wanted to sell the product to have a bigger team.
Formidable Forms – a WordPress form plugin, that becomes part of the WPBeginner accelerator and becomes one of the advanced WordPress form plugins.
Yoast Analytics – rebranded into MonsterInsights.

By the way, Awesome Motive brands sometimes got criticized for “shady marketing” or confusing content pieces. In return, Syed Balkhi commented in Post Status Slack:

“…Our companies operate independently of each other and tech decisions / cross promotion decisions are made by their respective GMs”.

Anyway, all WordPress product owners should re-think their honesty in their blog posts, so I’m happy the Community is talking about this, so we can make WordPress a better place.

Elementor

Founded in 2016, Elementor has become one of the popular WordPress website builders. Thus, the company has only two acquisitions – Strattic, headless WordPress hosting, and Layers WP, a theme development company.

Elementor decided to continue Strattic development; on the other hand, paused Layers WP themes improvement and make the themes free for users.

WP Engine

A WordPress hosting company founded in 2010, which is also known for its Torque magazine.

ACF – after a year of being under the Delicious Brains roof, the Advanced Custom Fields plugin has been sold one more time with other Delicious Brains plugins.
Frost – WordPress themes, the business model has been changed to free-to-use, and all customers received the refunds.
Block Lab team joined the WP Engine team, but the plugin will no longer have new features.
Flywheel – managed WordPress hosting that successfully continues operating.
StudioPress – WordPress solutions joined the WP Engine product list and went on with product development.
CloudMoxie – a hosting company that has been merged with WP Engine.

Liquid Web

Liquid Web Family of Brands includes LiquidWeb hosting, Nexcess digital cloud, StellarWP (iThemes, Kadence, GiveWP, IconicWP, etc.), and was founded in 1997. Most of the acquired products continue operating and are being further developed:

Modern Tribe agency;
LearnDash WordPress plugin;
IconicWP WooCommerce plugins;
The Events Calendar plugin;
Beyond Hosting clients migrated to Liquid Web ;
iThemes Media, including themes and products;
WiredTree was merged with Liquid Web hosting;
Rackspace cloud sites platform.

GoDaddy

GoDaddy’s path started back in 1997 in the United States, and they had several successful acquisitions:

Pagely managed WordPress services.
SkyVerge extensions were planned to be included in GoDaddy packages.
CoBlocks and other Rich Tabor’s plugins joined GoDaddy.
Sucuri security products added more value to GoDaddy customers.
WP Curve customers moved to GoDaddy.
ManageWP – multisite management add-ons.
DNAcademy and Dan.com were integrated into GoDaddy domain services.

Newfold Digital

Bluehost, HostGator, Web.com, and others are part of Newfold Digital corporation. The acquisitions of Yoast SEO and YITH development brand impress.

After a while, Yoast launched their product for Shopify users. Isn’t it splendid?

To Conclude

I hope this article was helpful, especially for WordPress newbies. WordPress is astonishing. With all #wpdrama, changes, new products, and acquisitions, it brings the excellent feeling of competition, variety of products, and frustration (sometimes ).

In conclusion, I want to quote Erik Karkovack from his thoughtful article about acquisitions:

“New ownership often means more resources to maintain, support, and extend the software. This could be a great thing for the WordPress community…The fear is that competition will shrink and that we may become too reliant on a small number of developers for the bulk of a site’s functionality.”

I can’t disagree. Acquisition mostly means better development by the bigger company that can effort better marketing, improvement, and organization, but we should pay attention to each product acquisition to check if the product is going to the “right hands” and forecast changes. And it’s incredible to have WordPress huddles, like Post Status Community or Twitter spaces, where I can read members’ thoughts to learn more about the companies. It helps to stay on track.

The post WordPress Acquisitions: The Best, The Worst, Unclear appeared first on Crocoblock.

Creating WordPress Crowdfunding Platform with Crocoblock

Lana Miro — Thu, 28 Apr 2022 12:36:42 +0000

In this manual, I would like to replicate crowdfunding functionality using Crocoblock plugins, such as JetEngine, JetFormBuilder, JetThemeCore, JetPopup, JetTabs, and Elementor free version.

Setting the Goal
Website Structure
Crowdfunding Use Case Logic
- Custom post type Projects
- Custom content type Donations
- WordPress form
- Project single page
- Project statistics
- Donations table
Sum Up: Testing

Setting the Goal

The main task was to create a website to gather money for different charitable projects with detailed project information, statistics, and reports about collected funds.

Check out the demo website, and don't hesitate to donate to help Ukrainians now.

Website Structure

To start with, let’s build a structure. For a crowdfunding platform, we need:

Custom post type called Projects – to store the information about the project and meta data, such as description, the amount needed, etc.

Custom content type called Donations – to store information about donations, such as amount, project, date, and user data.

Form – to carry out a donation followed by a post-submit action for adding new CCT Donations after submission.

Crowdfunding Use Case Logic

Before replicating the crowdfunding platform, we need to understand the general logic.

Our homepage will display a listing grid with all the projects.
Then users can go to each single project page and donate.
We’ll display the donation form in a pop-up on the single project page.
Then users enter the amount they want to donate.
After this, users are redirected to PayPal to make the payment.
A new Donations CCT item will be added to the database if the payment is successful.
Thus, all donation data will be used for calculating statistics and displaying people who donated to the exact project.

Now, let’s go through every component of the crowdfunding project.

Custom post type Projects

As custom post type is the most known JetEngine feature, I won’t stop there for a long. For Projects meta fields, I’ll add:

Total – the desired total amount per project that we need to gather.
Short Desc – quick project overview displayed on the homepage listing grid.
Description – full project description displayed on each single project page.

Custom content type Donations

The main goal of this CCT is to store information about all donations and gather project statistics (how many people donated, the money gathered, percentage of needed amount).

The fields we need in this CCT are as follows:

Amount – the sum of donations;

Project – the project collecting donations;

Show on project page – a Select field to choose whether to show or not the donation in the statistics list;

Name – user name that will be displayed in the donations list.

WordPress form

To create a WordPress form, we’ll use JetFormBuilder. Our form should accomplish two tasks:

donation payment via PayPal;
saving information about each donation to CCT.

So, we’ll need these form fields:

Project ID – a Hidden field that will store the project ID, which has been donated to. Thus, the form will be used on the single project page. As a Field Value, we’ll use “Current Post ID.”

Amount – a Text field for displaying donation sum.
Show your name in donations list? – a Select field, where users can choose whether to show or not their names.

Name – a Text field for indicating user name.

NOTE:

User name should be shown only if the user chose to show their name in the donations list at the previous step. For this, we need to wrap the Name field in a Conditional Block and configure it as shown below.

After creating the donation form, we need to set up a PayPal gateway.

Finally, we need to configure the form in a way to save donations to a dedicated CCT Donations after it’s submitted.

For this, add the post-submit action Insert/Update > Custom Content Type Item. Then press the “ Edit ” button and match the form fields with CCT fields.

Important:

We need to add a new CCT item only after successful payment. Thus, during payment gateway configuration, we need to specify that Insert/Update Custom Content Type Item should be added only after successful donation.

Project single page

The next step will be to gather all project information on one single page. For this, we’ll create a single template using JetThemeCore and try the new Elementor experiment – Flexbox Container.

We’ll create a box with featured image and project statistics using a flexbox container.

I want the featured image to be as a container Background to the left of the grid:

Project name will be displayed via the Dynamic Field widget.

I don’t want to overload the page visually with the donation form. I’ll put it into apop-up using JetPopup. Thus, after clicking the “ Donate ” button, our pop-up with the form will appear.

We’ll add tabs at the bottom of the main project information using the JetTabs plugin: Description, Donation List, and Statistics.

Project statistics

The most interesting and complicated part is project statistics: donations amount, total sum, percentage of gathered donations.

Firstly, let’s figure out what we call statistics:

Amount of donations is the amount of Donations CCT items that contain the exact project ID in the Project ID field.
Total gathered funds are the sum of all Amount field of all Donations CCT items that contain the exact Project ID.
Percentage of gathered donations is the sum of all funds divided by the Total meta field value for the current project and multiplied by 100.

We can obtain all this data using SQL queries. We’ll use the dynamic tag Dynamic Functions, which allows displaying various data calculated dynamically, including data from SQL queries.

Create SQL query

Next, we’ll create an SQL query with Query Builder that will take the information from the database:

Query type : SQL, not Custom Content Type (even though we are getting data from CCT) because we need to crunch the numbers further.

From table : jet_cct_donations. This table stores information about CCT Donations (you can check the table naming in the CCT settings).

Where (query clauses): we need to limit the selection to only posts from the desired project. To get the project ID, we’ll use Object ID macros.

Then we need to Group Results by Project ID to use the Calculated Columns option next.

Configure calculated columns option

After setting everything up, we can finally use the Calculated Columns option. It will add columns storing the necessary calculation results to the SQL query.

NOTE:

Regular columns in the query results table contain static data from the database. The

Calculated Columns option allows you to add new columns containing dynamic data to query results. Such dynamic data can be calculated based on data from other SQL query results columns. It works best in combination with the Group By option. Read more here.

For instance, we group all items by Project ID and display only items with a certain Project ID. This means we can count the amount, sum, and max/min value among all CCT items with the same Project ID.

Therefore, to get all donations amounts for each project, we’ll add a new Calculated Column based on column _ID and use the function COUNT to know the amount of all CCT items that fit our request.

To count the sum of all donations, we’ll add the Calculated Column based on the Amount column from the table and use the function SUM. That’s how we’ll know the sum of all Amount fields in all CCT items within one project.

Calculating percentages is a more complicated process, as we need to get data from the meta field to use them to make calculations. Let’s take the Amount column one more time and use a custom function for results processing. Next, we’ll add math expressions to be calculated to the custom function body.

In our case, SUM(%1$s) gets the total amount of all CCT items, fitting the request.

Next, this value should be divided by the value of the Total meta field for the current project. However, we’ll use the current_meta macro to get a certain value: %current_meta|total%.

Finally, we need to display all the information using the dynamic tag:

donation amount;

sum;

percentages.

Donations table

Now, let’s sort out the donations list. Before creating it, we need to create a new query for getting data to be displayed in the list.

In this case, the Query type would be Custom Content Type Query by CCT Donations. Don’t forget to set the needed conditions in Where (query clauses).

We need to get donations from a specific project with the “Yes” value in the Show on project page field and display all contributions from users who choose to show their names on the donations list.

After creating the query, let’s show all data in the table using the Dynamic Table Builder module.

Then choose the previously created “Donations list” in the Data Query field.

Set the needed columns and add the table to the single page.

Finally, we can add project information to the homepage’s listing grid.

Sum Up: Testing

As I wanted to create a fully workable crowdfunding platform, we’ve decided to create a PayPal account (Daria, our Content Manager) to collect all the donations and then send them to the dedicated project you choose.

So, don’t hesitate to test the platform; donate to the charity project you like, and we’ll make sure to transfer the funds. After one month, we’ll share the report with you.

The post Creating WordPress Crowdfunding Platform with Crocoblock appeared first on Crocoblock.

14 Best Free Plugins and Tools for WordPress Website Development

Lana Miro — Wed, 06 Apr 2022 11:56:56 +0000

I’ve had a dream to gather all valuable, free plugins and tools for developing WordPress websites under one roof. Recently, this dream has become real.

You may think: “Oh, one more article among tons of other.” Yeap, but this one has only community feedback and what the real WordPress developers are using.

So, I’ve gone through our recent Community poll and asked the Post Status community about the free tools everyone is using for website development. However, don’t hesitate to share your top plugin or tool in the comments below if I’ve missed something. Now, let me present the 14 best free plugins and tools for WordPress website development.

WP Staging

WP Staging plugin aims to migrate, clone websites, and be a great helper in testing plugins, making changes before going live.

WP Staging features:

Clone or backup website;
Migrate the staging WordPress site to the server;
Backup website for testing.

Pods Framework

Pods is the free WordPress plugin for creating custom post types and fields. Jim, from Rocket Genius recommends this free plugin:

“Primarily because it’s the easiest and most robust way to add Custom Post Types, Taxonomy, and Custom Fields in an all-in-one solution. The flexibility with adding to and expanding existing post types and taxonomies along with the powerful relationship fields make this a necessary addition to any work I do on a site.”

Pods Framework features:

Create content types;
Build custom taxonomies;
Add custom fields.

ACF

Advanced Custom Fields plugin is a free, simple WordPress plugin that allows to:

Add custom fields anywhere;
Edit over 30 field types.

Pro tip

If you find this free custom post type plugin limitless, don’t hesitate to try out the JetEngine plugin. Here you can check our comparison.

Elementor

Without a doubt, Elementor will be on my list. This is one of the best WordPress page builder plugins, and many developers recommended this tool in my poll in Post Status.

Elementor main features:

Drag-n-drop functionality;
Easy-to-use;
30+ free widgets;
Tons of Elementor addons.

“If you want to use WordPress’s CMS, your style options are limited. You can use Oxygen or equivalent and get a fast, beautiful website. But you’re going to spend dozens or hundreds of hours figuring out the development environment (and code library). Elementor, on the other hand, is beautiful and easy to use. All in all, the platform’s success speaks for itself. Elementor is wonderful to have in your WordPress tool stack,” says Richard, the owner of an e-store (built with Elementor, without coding skills).

Hide My WP Ghost

Hide My WP Ghost is a WordPress security plugin recommended by the Crocoblock community. This free WordPress plugin helps to protect and secure your website. By the way, you can check if your website is secure with a free vulnerability detector.

Hide My WP Ghost features:

Compatible with different hostings and servers;
Prevent SQL injections and scripts;
Blacklist IPs manager.

Wordfence

“WordFence Security is an essential plugin for any WordPress website. It’s a fully-featured security plugin to keep your website safe and secure. It will create a firewall to keep hackers away, keep you safe from malware and viruses. If there’s an issue, you will receive an email notification.” – Lindsay, PlayBookUX co-founder.

Wordfence features:

Monitor hackers attacks;
Block attackers by IPs;
Multiple websites management with Wordfence Central.

CookieYes

CookieYes free WordPress plugin guides you in a world of cookies consent, supporting European Union GDPR, LGPD of Brazil, CNIL of France, and California Consumer Privacy Act (CCPA).

CookieYes features:

Enable a cookie pop-up with accept/reject options;
Cookie scanning and categorization;
Notice bar configuration.

Accessibility Checker

“Accessibility Checker is a great free plugin for auditing for accessibility problems while building websites,” – from the poll.

Accessibility Checker features:

Posts and pages checkups;
Audit your content following the Web Content Accessibility Guidelines each time;
Prepare suggestions for fixing the issues.

User Switching

The next valuable recommendation from WordPress developers was the User Switching plugin. This is a free plugin to switch between several WordPress accounts. Thus, it helps to swap quickly for testing websites.

User Switching features:

Log in/off from different WP accounts;
Doesn’t reveal your passwords.

Query Monitor

Query Monitor is also a free and open-source WordPress plugin for developers.

“Debug Monitor may be the most famous of free debug tools for website builders, but it doesn’t hold a candle to Query Monitor, in my opinion. Query Monitor lets us view the database and all the rows of code involved.” – Jane, FastPeopleFinder.

Query Monitor features:

Debug database queries, PHP errors, etc.;
Detect bad-performing plugins, themes;
Admin toolbar menu.

Local WP

Local WP is one of the best development tools to set up and test websites locally, created by the Flywheel team.

Local WP features:

Setup WordPress automatically;
All-in-one dashboard for managing several websites;
Advanced features like SSH access, WP-CLI, PHP environments.

Trellis

Trellis is a free, open-source tool for WordPress websites development. This free tool helps build production and development servers for hosting WordPress sites.

“It enables you to automatically establish and provision a server for hosting a WordPress site by utilising Vagrant to create a self-contained virtual machine that replicates the environment that your site would utilize in production.” – Jamie Opalchuk, HostPapa.

Code Snippets

Code Snippets plugin helps to expand WordPress website functionality using snippets (code).

Code Snippets features:

Clean interface;
Export/import snippets;
Allows creating plugins/themes.

Visual Studio Code

The next free, open-source handy tool is Visual Studio Code, a text editor created by Microsoft.

Visual Studio Code features:

Code debugging;
Built-in Github & Git commands;
Intelligent code writing.

Conclusion

Each website developer chooses the tools regarding their needs. So, it’s essential to have free tools for WordPress website development.

NOTE:

There are several free WordPress plugins and tools developed by Crocoblock team.

What about you? What tools are you using for website building?

The post 14 Best Free Plugins and Tools for WordPress Website Development appeared first on Crocoblock.

How to Create a WordPress Guest Post Submission Form?

Lana Miro — Fri, 28 Jan 2022 14:03:19 +0000

What if you want to let the user submit the guest posts on your WordPress website? It’s doable, and this full tutorial will help you create a simple guest post submission form with the JetFormBuilder WordPress plugin.

Before we dive into form creation, let me first cover guest posting meaning, pros, and threats.

Table of contents:

What is Guest Posting?
- Why accept user-submitted content?
- Guest posting threats
How to Create Guest Post Submission Form?
- Customize Posts custom post type
- Add new guest post submission WordPress form
- Set up post submit actions
- Add guest post form to the page
- Testing time
TL;DR

What Is Guest Posting?

Basically, guest posting is the process of writing content for other blogs. It helps the author (guest-poster) to attract more attention to their website or personality.

Furthermore, guest authors build awareness across their industry and get a backlink to their website, social media, etc. It’s one of the best ways of improving personal branding.

Why accept user-submitted content?

But why your company website or personal blog should accept guest posts? There are a few reasons to allow user-submitted content:

bring more expertise to your blog;
generate valuable and relevant content from guest authors;
check how your audience reacts to user-generated content;
communicate with professionals;
diversify the on-site content.

Guest posting threats

Among all guest posting perspectives, there are also a few threats that you can easily avoid.

Spam. You’ll constantly face spam/irrelevant content submissions after opening a guest posting opportunity on your website.
No submissions. Sometimes it also happens, and you need to attract guest authors to contribute content to your platform.
Not following your guidelines. Brrr… Of course, not everyone will strictly follow your blog rules. And you have to edit the article by yourself or decline the post written by a guest author.

But, no worries, if you know your audience’s interests, have strict article guidelines, carefully read each article before posting, you’ll successfully avoid guest posting threats. Hence, none can be assured in spamming emails or articles, so you need to accept this first.

Nevertheless, guest posting is a fantastic opportunity for each blog, and only you choose the strategy you want to follow.

📚Read also: Why you should use WordPress?

At this cheerful point, let’s create our guest-posting WordPress form using the JetFormBuilder plugin. If you prefer video instead of written instructions, we have the one on our YouTube channel:

How to Create a Guest Post Submission Form?

Customize the Posts custom post type

Before we start creating the form, let’s sum up what information we need from the user:

author name
author email
article title
article content
article category
article excerpt

Most fields are already available in WordPress Posts CPT but I want to create some additional fields. For this, I’ll edit my Posts built-in custom post type. Thus, go to JetEngine > Post Types , toggle built-in post types, find the Posts type, and press the Edit action.

I want to add two additional meta fields to create the author account for them manually after submitting the form. So, I’ll scroll to the meta fields section in the Posts CPT, and add Author & Email (field type: Text).

NOTE:

You can use Profile Builder to create an author account automatically.

Add a new guest post submission WordPress form

Now we are ready to create our guest post submission form. Navigate to JetFormBuilder and press the “ Add New ” button. I’ll name my form Submit Guest Post and add the form fields.

The first form section will be author details:

First & Last name (Text field)
Email (Text field)

The second form section will be about article details, including:

Article Title (Text field);
Article Excerpt (Textarea field);
Article Body (WYSIWYG field);
Article Category (Select field, I’ve set it to pre-fill options from the Terms – taxonomy as Category ).

Set up Post-Submit Actions

After creating the form fields, we need to let our form understand what to do after submission.

For this, post-submit actions exist. A few actions are available (send an email, insert/update post, redirect to a page, etc.), but we need only Insert/Update action to make our guest post submissions go directly to our Posts custom post type.

Therefore, navigate to JetForm post-submit actions, choose Insert/Update Post , and press the “ Edit ” button:

Firstly, we need to choose the relevant post type to store guest posts. In my case, it’s an in-built Posts post type. Secondly, select the post status:

Draft (save the article as a draft);
Pending Review (set pending review status; I’ll go with this option);
Private (publish the article privately);
Published (instantly publish the guest post on your blog).

Thirdly, the most crucial part (my favorite one) is matching the form fields with custom post type fields:

First & Last Name is my newly created meta field author ;
Email is also one of created meta fields email ;

Article Title is the in-built meta field Post Title ;
Article Excerpt maps with Post Excerpt ;
Article Body is our Post Content ;
Article Category is in-built post term Categories.

After mapping form fields with meta fields, press the “ Update ” button. You can also add more post-submit actions like Send email, Redirect to a page, etc. I’m okay with just Insert Post action.

Besides, we are done with creating the WordPress guest submission form, and now let’s add the form to a page.

Add guest post form to the page

However, I’m using Gutenberg editor; there are two ways to add the form to the page:

via the JetForm block;
via a Shortcode (copy the form shortcode, and add it to the needed page).

I’m using the JetForm block. So, I go to the WordPress page, where I want to add my form, press Plus icon, and choose the JetForm block. After this, you are asked to select the form; I’ll go with my Submit Guest Post form and press “ Publish.”

Hence, we’ve created the guest post WordPress form and successfully added it to the page.

Testing time

Let’s check how our guest post submission form works. I’ve submitted the article text from our Gutenberg Editor: Threats, Missing Features and Future, and it’s immediately appeared in my WordPress dashboard:

Now, I can review/edit the article.

Additional information (author and email) is displayed right after the article. So, I can use the details for creating an author account in WordPress (if appropriate).

It works amazing, doesn’t it?

NOTE:

Oh, boy! I had forgotten about form styling. I like my minimalistic style, but would you like to style each form block? JetStyleManager free WordPress plugin is here for you. Check out the styling documentation.

TL;DR

The guest post submission form helps you to make the guest posting easier. The article is sent directly to your WordPress posts, which allows you to review, edit, and publish the articles faster.

Few insights I’ve come up with while preparing this WordPress guest post creation guide:

Think about where you want to store your article submissions : in a new custom post type or in-built CPT (like Posts).
Add/edit additional meta fields to your custom posts (if needed).
Create a WordPress form with all necessary fields.
Set up post-submit actions (what the form needs to do after the user submits it).
Be attentive to mapping form fields with post meta (ID/Name must be the same).
Make special requirements for your guest writers to follow.

You’re welcome to submit your questions or share your guest forms created with JetFormBuilder below.

The post How to Create a WordPress Guest Post Submission Form? appeared first on Crocoblock.

Creating Survey Form with free JetFormBuilder Plugin (Step-by-step)

Lana Miro — Fri, 21 Jan 2022 10:57:46 +0000

In this tutorial, I would like to make a simple WordPress survey form using the free JetFormBuilder plugin. JetFormBuilder was released in January 2021, and it has become a handy friend for WordPress developers.

Thus, I’ve decided to continue my how-to WordPress form series; here are the previous ones.👇

You’ll need:

WordPress
Custom post plugin (I’ll use JetEngine, feel free to check out other CPT plugins)
free JetFormBuilder plugin
free JetStyleManager (if you want to style form in Gutenberg)

How to Build WordPress Survey Form Step-by-Step?

Step 1. Download and Activate WordPress Plugins

Step 2. Create Custom Post Type for Storing Survey Form Replies

Step 3. Create New WordPress Form

Step 4. Set up Post Submit Actions

Step 5. Add the WordPress form to the page

Step 6. Check Survey Form Results

Step 1. Download and Activate WordPress Plugins

To start with, follow one of 3 ways to download the JetFormBuilder free WordPress form plugin: WordPress directory, WordPress plugins tab in the dashboard, via the official jetformbuilder.com website.

We also need a custom post type plugin , so feel free to install your favored tool. I have the JetEngine WordPress plugin installed.

The JetStyleManager is needed only for styling WordPress forms in Gutenberg, but I’m okay with my global styling settings so that I won’t be using it.

After installation and activation, you’ll find the plugins section in the left menu (JetFormBuilder and JetEngine) and the Installed Plugins :

We need a custom post type post plugin for showing WordPress form responses (store our responses).

Recently, I’ve come up with 2 CPT creation options (free & paid) in this tutorial.👇

How to Display WordPress Form Submissions with JetFormBuilder?

Step 2. Create Custom Post Type for Storing Survey Form Replies

To create a custom post type (CPT), select JetEngine -> Post Types -> Add New :

Name your post type accordingly, and press Add Post Type:

Thus, you will see the Survey Replies tab on the left of your WordPress dashboard and in the JetEngine custom post types list:

We need to add Meta Fields named just as our future WordPress form fields.

💡 Quick tip: before creating my WP survey form, I make a list of questions I want to include. So, it helps me to copy=paste survey questions to my meta fields, form fields, etc. Here is an example of my draft:

Now, I’d like to cover detailed instructions for creating meta fields for each question from my survey form.

Name is the simple Text field type, so I need to use only Label (my field name), ID, and Field Type — Text.

What is your professional experience? — is the Radio Field, so I need to set Label, Field Type, and add Field Options:

Field option is just the choices we’ll have in these questions; I have 4:

How have you found my blog? — is also the Radio form field, so the configuration is the same as above:

When you’ve started to read my blog? — is the Text field, so nothing special:

Which type of content do you prefer? — is the Checkbox field. Hence, I should fill out Label & ID fields, choose Field Type as Checkbox

Then, add field options and toggle Save as an array :

What would you like to see more in my blog? — is text field too:

What is your favorite blog post from my blog? — this will be the Select field in my form. To let the user choose the favorite published post from the existing ones. So, in my CPT meta field, I need to select Field Type — Posts:

Any comments? — is also the simple Text field:

Finally, my Survey Replies custom post type will have 8 meta fields which will be correlated with my Survey form fields:

Step 3. Create New WordPress Form

Now, we are ready to create our Survey WordPress form. Press Add New in the JetFormBuilder dashboard:

I’ll name it Survey Form 😅; the goal of my survey form will be to gather feedback about my blog.

Then, I’ll add simple form fields to gather information for my survey.

⚡Quick tip:

I’ve added text area field type:

But then I decided that my question (What is your professional experience?) is better for the radio field , so there is no need to delete and create again; use the block transformation feature. Press the text icon, and transform to the field you need to:

So, I’ve transformed my text field to radio field, and now I need to add a few items (answers):

Also, if you need the field to be required, just use the toggle. I’ve added items to the question so that the user can choose among 4 options:

So, I’ve added Name, Experience, How you found my blog fields:

Let’s add a few more questions/form fields about user experience with my blog. So, I’ve added:

Text field (to ask when my reader becomes my subscriber)
Checkbox field (to let the user choose the favored content type)
Text field (to share suggestions for future content)
Select field (to choose among my existing articles the best one)

Step 4. Set up Post Submit Actions

Post submit actions are the way to say what your form needs to do with responses after submission.

So, I want my WordPress form to send the survey reply to my Survey Replies CPT.

Choose the Insert/Update post submit action -> Edit action button in the right side:

Then, select the Post Type (in my case, Survey Replies) and Post Status (I won’t publish the Survey reply, so I’ve chosen Pending review). And next step is to map Meta Fields (we’ve created earlier) and Form Fields.

💡Important: t he title of Meta should be the same as your Meta Field ID:

After mapping all form fields, press the update button.

Step 5. Add the WordPress form to the page

There are 2 ways to add the created WordPress form, go to your page (where you want to add the form), and:

Press the “plus” button to search JetForm block:

Then choose the form you want to add:

Via shortcode

It means, go to JetFormBuilder forms dashboard copy the shortcode:

And pass the shortcode to your Gutenberg page:

We are done, the WordPress form has been successfully added:

Step 6. Check Survey Form Results

Now, let’s test how it works. 😊

I’ve submitted the form with these data:

And Survey reply immediately appears in my CPT:

And data from the survey reply looks like this:

Everything works flawlessly. 👌

Sum Up

The tutorial may seem too long or complicated, but this is only because I’ve tried to be as detailed, as I can to make it helpful.

What WordPress form builder do you use for surveys? Please share your thoughts and questions in the comments below. I’ll be happy to get your feedback about my form creation series.

How to Display WordPress Form Submissions via CPT?

Lana Miro — Tue, 18 Jan 2022 07:48:53 +0000

Have you wondered how to showcase form submission from the WordPress form created in the free JetFormBuilder plugin? Then, this tutorial is definitely for you.

I’ll show you how to display form submissions via CPT, using plugins:

Show Form Submissions Using Custom Post Types (JetEngine Plugin)
Creating CPT with free Pods plugin

After the user submits my contact form, there are several options to store responses:

send email to my inbox
send the request to MailChimp
Insert post

I would like to create a custom post type to store my form responses and show form submissions on the front end of my website with the Insert/Update Post submit action.

Show Form Submissions Using Custom Post Types (JetEngine Plugin)

JetEngine is the premium WordPress plugin for dynamic content that will help me create a new custom post type, “Form Submissions”. The steps to follow:

Create a new CPT
Create WordPress form with JetFormBuilder
Set up post submit action
Testing Time

#1 Create a new CPT

After installation and activation of JetEngine WordPress plugin, go to JetEngine -> Post Types -> Add New :

As I have several WordPress forms on my website, I need to create a memorable custom post type for my Contact form, let’s call it “ Contact Us Responses ”:

Then, I need to add meta fields according to my form:

You just copy the labels from your form fields. For example, the first field is Name, I’ve put Label — Name, and ID — name, chose Field type as text.

But what if we have another field type? For instance, the Radio field:

No worries, we need to set the correct Field type and add Field options (in my case, it’s email, phone, and messenger):

In results, I have 4 meta fields created in my CPT:

💡 Please note: Labels & ID should be the same as in your WordPress form (in other words, the fields must match each other 😅).

Now my CPT is ready to store responses:

#2 Create WordPress form with JetFormBuilder

After creating CPT for storing your form submissions, feel free to create your WordPress form. I’ll proceed with the Contact me form.

💡The tutorial for creating the contact us form with JetFormBuilder is here.

My form is ready to go:

#3 Set up post submit action

The contact WordPress form is ready to set up post-submit action. Choose the Insert/Update Post and press the edit icon:

And the edit action window appears. We need to map our Form with Custom Post Type and Fields.

So, I’ve set:

my Post Type , as Contact Us Responses
Post status as Pending Review

Fields map should be the same as your Post Type meta field (created before). For example, here are my meta fields created in Contact Us Responses CPT:

P.S. I simply copied ID and passed in my edit action window among Post Meta .

Name as name
Email as email
Phone as phone
Preferred method of communication as preferred-method-pf-communication
Message as Post Content (it’s not a meta field, I want it to be shown in my post content section).

And press Update button. Now you can publish the form and add it to the page (with Gutenberg block, or via any other WordPress page builders plugins).

#4 Testing Time

Now it’s my favorite time — Testing! I’ve submitted my WordPress contact form:

And went to my CPT ( Contact Us Responses ), where we could see new submissions:

So, let’s open the post created automatically:

As you can see, the message goes immediately after the title, and contact details (like name, communication method, phone, email) show in settings.

Now, you can store all your contact form responses in custom post type using JetEngine & JetFormBuilder.😊

Creating CPT with free Pods plugin

Another way to create CPT is using the free Pods plugin, here are steps to follow:

Download and activate Pods plugin
Create CPT and custom fields for storing form responses
Create WordPress form
Set Up post submit action
Results

#1 Download and activate Pods plugin:

#2 Create CPT and custom fields for storing form responses

Go to Pods Admin -> Add New , and let’s create another CPT, called “Form Submissions” :

To add a new Pod, follow the steps:

Singular Label: Form Submission
Plural Label: Form Submissions

Press Next Step, where we can add new fields similarly to our form fields.

💡This is important to have fields the same as in your form.

Add Fields (similar to JetEngine Meta Fields). Your name, email, and phone are simple text field types:

as the name is reserved for internal WordPress usage, I’ll go with the Your Name label

And Radio field will look like, where you input choices too:

In results, I have 4 form fields created in my CPT with Pods plugin:

Then, you’ll find Form Submissions CPT at the left side of the WordPress dashboard.

#3 Create WordPress form

I’ll create a similar WordPress contact form using this tutorial.

#4 Set Up post submit action

When the form is ready, we need to create and edit post submit action (will be the same as above):

After setting up Insert/Update Post action, I’ve published my contact form:

#5 Results

To finish, let’s test how it works with the Pods WordPress plugin. I’ve filled up my WP form:

And my submission immediately appears in Form Submission CPT created with Pods:

And fields mapped well:

Sum Up

Now, you know how to store your form responses with custom post types. To be honest, creating CPT with the JetEngine plugin was more fluent for me (maybe I just used to it), but if you need to stick with the free WordPress custom post types plugin, proceed with Pods or any other CPT plugin.

Feel free to share any questions you may have in the comments below. 👇

How to Build Free WordPress Contact Us Form with JetFormBuilder? (Step-by-step)

Lana Miro — Tue, 18 Jan 2022 07:33:11 +0000

To create a free WordPress contact form, you definitely can go with Contact Form 7, but I want more customization, so I’ll proceed with the JetFormBuilder plugin.

💡Before creating the form, we need to set up a custom post type to store form responses. So, don’t hesitate to follow the tutorial to set everything up.

Table of Contents:

#1 Download JetFormBuilder free form plugin

#2 Create New WordPress Contact Us Form

#3 Create the needed form fields

#4 Configure post submit actions

#5 Adding WordPress Contact Us form to the page

#6 What’s next? Form styling

#1 Download JetFormBuilder Free Form Plugin

Firstly, we need to download & activate JetFormBuilder free form plugin. You can download directly from jetformbuilder.com, wordpress.org, or search for the plugin in your plugins dashboard.

I’ve already downloaded and activated JetFormBuilder using the official website.

And now we can start creating my Contact form.

#2 Create New WordPress Contact Us Form

To start with, go to JetFormBuilder -> Add New tab. Name your form as you wish:

#3 Create the Needed Form Fields

To simplify the process, I’ll use the Contact us form pattern. For this, press “plus” icons, go to Patterns, and choose JetForm:

Then pick the needed form pattern (in my case, the Contact Us Form). After selecting the form pattern, it adds the form to your editing area:

Now I need to delete unnecessary fields and duplicated Submit button (just select the block and press delete block). After this, I want to add one more option for the preferred method of communication (messenger).

Choose the needed block, press Manage items , add the item, and update:

I also want to edit the Submit button text, and I’m done with creating my form fields.

#4 Configure Post Submit Actions

I want this contact form to send responses to my custom post type , so I chose the Insert/Update post submit action:

#5 Adding WordPress Contact Us Form to the Page

When the form is ready, press Publish button and go to the page where you want to add the form. In my case, it’s the Contact Me page.

To add the form to the Gutenberg editor, just choose the JetForm block, and select your form:

I’m using Elementor, so I’ll add my form (created in JetFormBuilder) to Elementor with the JetForm widget:

Drag and drop the JetForm widget to the page, and choose the Contact me form:

Update or publish the page, and your form is ready.

#6 What’s Next? Form Styling

Next, let’s have some fun and style our WordPress form via free JetStyleManager for Gutenberg:

or with Elementor page builder (style tab):

I’ve made some general styling (change button style, checkboxes, and messages):

Conclusion

That’s it, our form is ready. I have some fun creating the WordPress contact form and hope this tutorial will help you make yours.

Don’t hesitate to leave comments below.👇

DEV Community: Lana Miro

Invitation to WordPress Agency Summit 2024, Online

Top 5 JetEngine Taxonomy Use Cases for Elementor

Table of Contents

What Is the JetEngine Taxonomy Tool?

Why JetEngine Taxonomy Tool?

WordPress Taxonomy Types

Categories

Tags

Benefits of Using JetEngine Taxonomy Tool

Enhanced сontent organization

Powerful taxonomy listings

Flexibility and control

Optimized integration with Elementor

Best Examples of JetEngine Taxonomy Tool Implementations

Use case 1. Real estate portfolio

Use case 2. Product catalog

Use case 3. Travel website

Use case 4: Service provision website

Use case 5: Job board website

FAQ

Takeaway

JetEngine Profile Builder Overview

Table of Contents

Getting Started with JetEngine’s Profile Builder

How to Create a User Profile with JetEngine Profile Builder

FAQ

Wrapping Up

Recreating WordPress Events Page with Crocoblock Plugins

Table of Contents

The Scope of Work

Crocoblock Tools Used

Adding Events

Creating CCT for events

Creating Queries in Query Builder

Creating Listing Templates

Setting Up Filters

Сomposing the Events Page

FAQ

The Bottom Line

WordPress Rest API: What Is It And How Can You Expand It?

Table of Contents

What is the WordPress REST API?

What is an API?

What is a REST API?

What does the WordPress REST API do?

Use cases of the WordPress REST API

Tools for Expanding the WordPress REST API

Summary

WordPress Acquisitions: The Best, The Worst, Unclear

Table of Contents

Is Acquisition Bad?

WordPress Acquisitions Main Numbers

Why Brands Sell: Product Selling Reasons

Competition

Low budgets

Burnout

Recession

Why Brands Buy: Acquisition Reasons

Diversification

Dealing with competitors

Expand web presence

Expand the product or service

Key WordPress Brands and Their Effect on The Acquired Product

Automattic

DigitalOcean

Awesome Motive

Elementor

WP Engine

Liquid Web

GoDaddy

Newfold Digital

To Conclude

Creating WordPress Crowdfunding Platform with Crocoblock

Setting the Goal

Website Structure

Crowdfunding Use Case Logic

Custom post type Projects

Custom content type Donations

WordPress form