How users can Extend Raven elements?
Since Jupiter X 1.21.0, the Raven plugin is merged with the Jupiter X Core plugin. So, all the features are available without installing the Raven plugin. By using the Jupiter X Core plugin, you will have all the Raven features. The documents related to the Raven plugin will be updated accordingly. Release Notes
If your Jupiter X version is greater than 1.21, please deactivate and remove Raven plugin from your website.
In Raven, we have 25 elements and every one of them could be extended and changed as per the developer requirements. In Raven, we are using modules for managing elements. Usually, every element/widget is managed by a specific module and a module can manage multiple elements/widgets e.g posts module manages Post element & Post carousel element.
Every module is defined or maintained with raven/includes/modules. Every module folder has widgets folder and widgets can one or more element/widget e.g alert module has alert widget/element & post module has a post & carousel element/widget.
To extend a particular widget you should follow the below steps
- Lets extend the alert module. First of all inside raven/includes/modules/alert/widgets create a new file alert-custom.php.
- Extend Alert widget/element class as shown below
<?php
namespace Raven\Modules\Alert\Widgets;
use Raven\Base\Base_Widget;
use Raven\Modules\Alert\Widgets\Alert;
defined( 'ABSPATH' ) || die();
class Alert_Custom extends Alert {
public function get_name() {
return 'raven-alert-custom';
}
public function get_title() {
return __( 'Alert Custom', 'raven' );
}
}It’s important to override get_name function of a widget and change the name of widget to something unique. Name of widgets must be unique.
3. You must also register new widget in raven/includes/modules/alert/module.php as shown below
<?php
namespace Raven\Modules\Alert;
defined( 'ABSPATH' ) || die();
use Raven\Base\Module_base;
class Module extends Module_Base {
public function get_widgets() {
return [ 'alert', 'alert-custom' ];
}
}I have added ‘alert-custom’ in get_widgets to register new element/widget and it should be the name of the element from get_name method inside alert-custom.php
To change controls or output content in a widget you have to override methods from an Alert Class as per your requirements.
Is it free and GPL?
No, it’s not free and GPL.
Is there any possibility to change them inside a child theme?
No, it’s not possible right now but it could be done if there is a need for it.
Use hooks to develop raven.
We don’t have any added custom hooks in Raven for customization. There is only one hook registered ‘raven/init’ which is triggered when raven is initialized. Raven is developed on top of Elementor and you could use every hook from Elementor inside raven https://code.elementor.com/php-hooks/
Add a new hovering style to Portfolio element.
To add new Hover effect go to raven/includes/modules/posts/classes/post-base.php. Add new option inside options property e.g. we will add rotate effect as shown below.
$this->skin->add_control(
'post_image_hover_effect',
[
'label' => __( 'Hover Effect', 'raven' ),
'type' => 'select',
'default' => '',
'options' => [
'' => __( 'None', 'raven' ),
'slide-right' => __( 'Slide Right', 'raven' ),
'slide-down' => __( 'Slide Down', 'raven' ),
'scale-down' => __( 'Scale Down', 'raven' ),
'scale-up' => __( 'Scale Up', 'raven' ),
'blur' => __( 'Blur', 'raven' ),
'grayscale-reverse' => __( 'Grayscale to Color', 'raven' ),
'grayscale' => __( 'Color to Grayscale', 'raven' ),
'rotate' => __( 'Rotate', 'raven' ),
],
'prefix_class' => 'raven-hover-',
]
);Adding rotate option won’t do anything on its own. But you should be able to see new Hover Effect in the Style section of post element.
Due to prefix_class option above when we select a particular effect then post element will be applied a class as raven-hover-rotate if the rotate effect is selected or raven-hover-scale-down if the scale-down effect is selected.
After adding new rotate effect we have to do sass mixin for that effect in raven/assets/src/scss/_mixins.scss as shown below.
@mixin raven-effect-rotate($selector: img) {
& #{$selector} {
transform: rotate(0deg);
}
&:hover #{$selector} {
transform: rotate(360deg);
}
}After mixin for zoom effect you have to include this in raven-hover-rotate class in raven/assets/src/scss/widgets/_posts.scss as shown below.
.raven-hover-rotate {
.raven-post:not(.raven-post-inside) {
.raven-post-image {
@include raven-effect-rotate
}
}
.raven-post-inside {
@include raven-effect-rotate('.raven-post-image img');
}
}Now, when you hover over the post featured image it should rotate 360deg.
Integrate Raven Form with another third-party service.
This part is actually a simple example. The Raven form is already compatible with MailChimp and has proper options. Also since Raven 1.3, the Webhook feature is part of Raven and you won’t need to add the webhooks as a new feature.
To integrate Form with Third party services we use actions which are executed once the user submits the form. Multiple actions can run after the form is submitted e.g send form data as an email or store user email address in the MailChimp etc.
Let’s add a webhook action in our form. Webhooks are very useful for notifying external systems about the form submission, sending data to external systems.
All the actions are added in raven/includes/modules/forms/actions. To add a webhook action follow below steps.
- Add new action option in raven/includes/modules/forms/module.php as shown below
public static function get_action_types() {
return [
'email' => __( 'Email', 'raven' ),
'mailchimp' => __( 'MailChimp', 'raven' ),
'redirect' => __( 'Redirect', 'raven' ),
'slack' => __( 'Slack', 'raven' ),
'hubspot' => __( 'Hubspot', 'raven' ),
'download' => __( 'Download', 'raven' ),
'webhook' => __( 'Webhook', 'raven' ),
];
}2. Add new file webhook.php in raven/includes/modules/forms/actions. Every action must extend Action_Base class and implement update_controls, run, register_admin_fields methods.
update_controls: In this method, you have to register Actions settings e.g Webhook action has only one setting i.e URL.
In webhook action we have to register URL option as shown below
public function update_controls( $widget ) {
$widget->start_controls_section(
'section_webhook',
[
'label' => __( 'Webhook', 'raven' ),
'condition' => [
'actions' => 'webhook',
],
]
);
$widget->add_control(
'webhook_url',
[
'label' => __( 'Webhook URL', 'raven' ),
'type' => Controls_Manager::TEXT,
'placeholder' => 'http://webhook-endpoint.com',
'description' => __( 'Enter the webhook URL where you want to send your Form data after submit e.g. ', 'raven' ) . sprintf( '<a href="%s" target="_blank">%s</a>.', 'https://zapier.com/apps/webhook/integrations', __( 'Integrate with Zapier Webhook', 'raven' ) ),
]
);
$widget->end_controls_section();
}run: This method will be executed when the user completes the form submission. When a user completes the form submission this method should send form data to the Webhook URL so that external system will receive the form data and process it according to its usage e.g Zapier service will receive this data in webhook app and send to other apps e.g Google sheets, Slack, Active Campaign.
public static function run( $ajax_handler ) {
$settings = $ajax_handler->form['settings'];
if ( empty( $settings['webhook_url'] ) ) {
return;
}
$body = self::get_form_data( $ajax_handler, $settings );
$args = [
'body' => $body,
];
$response = wp_remote_post( $settings['webhook_url'], $args );
if ( 200 !== (int) wp_remote_retrieve_response_code( $response ) ) {
$ajax_handler->add_response( 'admin_errors', __( 'Webhook Action: Webhook Error.', 'raven' ) );
}
}
register_admin_fields. In this method, you can register any global settings for an API key in Dashboard > Elementor > Settings. E.g
In webhook action, we don’t need to implement this method.
