This is not a blog entry like the others but more a list of quirks and things to do to make things work a certain way in WordPress, Elementor and WooCommerce along with other observations.
Setting up WordPress to not be a blog site by default
The static page setting is pretty much what everyone wants for WordPress these days, rather than just being a blog of your latest posts.
Screen Options for menus
The Screen Options section for menus allows you to show and hide certain menu options that you may or may not wish to see.
Turning off WooCommerce menu options or hiding the JetMenu options will be useful when showing someone what menu options they can add from posts and pages.
Setting the correct permalinks
WordPress tells the web server to rewrite pages a certain way, but WordPress doesn’t create the file unless you go into Permalinks and create it.
Header template for Hello Elementor theme
The Hello Elementor theme works well for Elementor and Elementor Pro, but if you don’t create a header template in Templates -> Theme Builder, you may end up with a website without a navigation menu.
Editing descriptions with Elementor in WooCommerce
It’s not immediately obvious on how to do this with Elementor, but in Elementor Settings you need to check Products under General tab or you won’t get Edit with Elementor, instead you will get a boring text box.
Crocoblock
Crocoblock provides 22 plugins as well as supplementary pro plugins for their form builder: JetFormBuilder.
Plugin | Editor | Description |
|---|---|---|
JetEngine | Elementor & Gutenberg | JetEngine provides everything for dynamic content using Custom Post Types (CPT) and Custom Content Types (CCT) |
JetElements | Elementor | Adds 45 design widgets to Elementor, as well as badges for WooCommerce. |
JetTricks | Elementor | Adds interactive visual effects |
JetSmartFilters | Elementor & Gutenberg | Adds advanced filtering to any post type |
JetBooking | Elementor & Gutenberg | A customisable booking system that books by date (days/nights) |
JetAppointment | Elementor & Gutenberg | A customisable booking system that books by time (hours) |
JetWooBuilder | Elementor (WooCommerce) | Create custom WooCommerce pages |
JetPhotoGallery | Elementor (WooCommerce) | Brings gallery grid, slider, zoom, masonry, anchor navigation and video to WooCommerce Products |
JetCompareWishlist | Elementor (WooCommerce) | Add the ability to compare products and add products to a wishlist |
JetPopup | Elementor | Create eye catching popups that can use animation, include and exclude conditions, positioning and templates. |
JetReviews | Elementor (WooCommerce*) | Add reviews to any CPT and works with WooCommerce. Filter products by rating. Manage from WP dashboard. |
JetMenu | Elementor (WooCommerce*) | Horizontal and vertical mega menu that can be styled. Can display products, images and videos. |
JetBlocks | Elementor | 9 widgets for header and footer |
JetSearch | Elementor | AJAX (page doesn’t refresh when searching) Narrow down search results (CPT, taxonomy, etc. |
JetBlog | Elementor | 6 widgets to display blog posts from the WP blog system or from CPT. Including ticker and filters. |
JetTabs | Elementor | Add tabs, switches, vertical and horizontal accordion views. |
JetStyleManager | Gutenberg | Style Gutenberg blocks |
JetThemeCore | Elementor | Create custom headers and footers as well as page templates. Use the magic wand button to insert a template. |
JetGridBuilder | Elementor & Gutenberg | Display dynamic content and drag and drop where you want to display it on a visible grid. |
JetFormBuilder | Elementor & Gutenberg | Create forms in Gutenberg editor and then display them using Elementor or style them with JetStyleManager for Gutenberg.
In addition, you can use conditional fields, dynamic values, calculated contents and even repeating fields. |
JetFormBuilder Pro plugin | Category | Description |
|---|---|---|
Hierarchical Select | Form Features | Add select boxes that connect together, for example choose a car manufacturer, and the select box shows the manufacturer’s models. |
User Login | Form Features | Add the ability to login an account. |
Advanced Colour Picker | Form Features | Add a colour picker to your form. |
Select Autocomplete | Form Features | Autocomplete a select box using AJAX. |
Address Autocomplete | Form Features | Autocomplete an address using Google Places API. |
Save Form Progress | Form Features | Autosave the form progress and inputted data if the filling process was interrupted. |
Schedule Forms | Form Features | Set a start and end date to your form, so a form cannot be posted too early or after a closing date (and time) |
Limit Form Responses | Form Features | Lock down the number of responses that can be made from the form. |
MailPoet | Email Marketing | Connect a form to MailPoet for Email Marketing – subscribe to mailing lists. |
ConvertKit Action | Email Marketing | Connect your forms to the ConvertKit email marketing & audience-building software |
MailerLite Action | Email Marketing | Connect forms to the MailerLite email marketing software. |
Moosend | Marketing Automation | Collect leads from landing pages and subscription forms, create mailing lists and custom segments, as well as oversee marketing campaigns. |
HubSpot | CRM & Sales | Add new and manage the existing contacts, monitor companies, leads, and contact owners. |
Stripe Payments | Payments | Carry out any payments online via Stripe Payment Gateway. |
WooCommerce Cart & Checkout | Payments | Integrate Gutenberg-built forms and WooCommerce checkout. |
Header theme part for JetThemeCore
If you are using Kava theme with Crocoblock, you need to use the Crocoblock theme builder instead of Elementor Pro’s theme builder.
However, you need to set the Conditions of where this “theme part” will be displayed. Entire site is probably the best option for the header.
CPT & CCT
WordPress is designed predominantly as a blog platform so everything is a blog “post”. Pages are a post type.
CPT or Custom Post Type is a method of extending WordPress to use other post types than the standard post and page it comes with. A WooCommerce product is a post type, as is a customer and order.
There are certain plugins (such as ACF and Crocoblock Jet plugins) that allow you to create your own CPT and have their own management interface as well as distinct way of displaying them on your website.
CPT uses the standard WordPress database table to store the data inside.
CCT or Custom Content Type creates new database tables for each CCT, which means if you have a lot of custom posts or posts and pages in general, a search of the CCT would be far quicker.
REST API
WordPress has a REST API, which means you can connect WordPress to other systems and update content remotely. However, this only applies to the core of WordPress and not to any meta fields. You have to implement some code that connects what is known as endpoints to WordPress to allow you to use REST to update meta fields.
You can add the code below to allow you to make a call to read and write using the REST API for your CPT and your meta fields inside them.
To access the REST API, you need to create an Application Password, which is done through Users on WordPress.
add_action( 'rest_api_init', 'my_register_meta_api' );
function my_register_meta_api() {
// Meta Fields to add to the API
$meta_fields = array(
'my_meta_field',
'my_second_meta_field'
);
// Loop all fields and register each of them to the API
foreach ($meta_fields as $field) {
register_rest_field( 'my_post_type',
$field,
array(
'get_callback' => function ($params) use ($field) {
return \get_post_meta($params['id'], $field);
},
'update_callback' => function ($value, $object, $fieldName){
return \update_post_meta($object->ID, $fieldName, $value);
},
'schema' => null
)
);
}
}
This is an example curl command that will add a new post to your CPT and add the meta fields to your post:
curl -X POST --user "user:app_password" https://yourwebsite/wp-json/wp/v2/my_post_type \
-H "Content-Type: application/json" -d '{"title":"My Page Title", \
"my_meta_field":"My Value","my_second_meta_field":"Second Value","status":"publish"}'
Crocoblock JetEngine REST API for CCT
Crocoblock has the ability to read and write listings using the REST API with JetEngine, but each CCT you create has the option where you can enable read and write via the REST API. When you create a CCT, you get the option of what endpoints you wish to register with the REST API. Accessing a CCT REST API is different to the CPT:
curl -X POST --user "user:app_password" https://yourwebsite/wp-json/wp/v2/jet-cct/my_cct \
-H "Content-Type: application/json" -d '{"title":"My Page Title", \
"my_meta_field":"My Value","my_second_meta_field":"Second Value","status":"publish"}'
With CCT, you can choose to register get_items/item, create, update and delete:
#List all items:
curl -X GET https://yourwebsite/wp-json/jet-cct/my_cct
#Get a single item (ID of 123):
curl -X GET https://yourwebsite/wp-json/jet-cct/my_cct/123
#Create item:
curl -X POST https://yourwebsite/wp-json/jet-cct/my_cct
#Update item 123:
curl -X POST https://yourwebsite/wp-json/jet-cct/my_cct/123
#Delete item:
curl -X DELETE https://yourwebsite/wp-json/jet-cct/my_cct/123
In addition, when listing the items, you can use parameters on the GET request:
Parameter | Meaning |
|---|---|
_ID | Item ID |
your_field_names | You can use the field as a sort field or a filter. |
cct_author_id | Item Author |
cct_created | Created Date |
cct_modified | Modified Date |
cct_status | Status |
_cct_search | Search string |
_cct_search_by | Comma Separated List of fields names list to search only by |
_limit | Numerical limit |
_offset | Numerical offset for limit (pagination) |
_orderby | Order by field |
_order | asc or desc (ascending or descending order) |
_ordertype | Order value type – integer, float, timestamp, date, string |
_filters | JSON-encoded filters |