Skip to content

Instantly share code, notes, and snippets.

@CodeCurosity
Created June 25, 2019 10:38
Show Gist options
  • Save CodeCurosity/3f2ca652d701eab79683bd4822201199 to your computer and use it in GitHub Desktop.
Save CodeCurosity/3f2ca652d701eab79683bd4822201199 to your computer and use it in GitHub Desktop.
Add a custom control to an existing Elementor widget
add_action( 'elementor/element/button/section_style/after_section_start', 'custom_button_field', 10, 2 );
/**
* Adding button fields
* @param \Elementor\Widget_Base $button
* @param array $args
*/
function custom_button_field( $button, $args ) {
$button->add_control( 'custom_button_type',
[
'label' => __( 'Button Type', 'elementor' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'button',
'options' => array(
'no' => 'Default Button',
'button' => 'Button',
'button brand' => 'Orange',
'button brand gradient' => 'Orange Gradient'
)
]
);
}
add_action( 'elementor/widget/before_render_content', 'custom_render_button' );
/**
* Adding a new attribute to our button
*
* @param \Elementor\Widget_Base $button
*/
function custom_render_button( $button ) {
//Check if we are on a button
if( 'button' === $button->get_name() ) {
// Get the settings
$settings = $button->get_settings();
// Adding our type as a class to the button
if( $settings['custom_button_type'] ) {
$button->add_render_attribute( 'button', 'class', $settings['custom_button_type'], true );
}
}
}
add_action( 'elementor/widget/button/skins_init', 'add_skin_button' );
/**
* Adding our Custom Button Skin
*/
function add_skin_button( $button ) {
$button->add_skin( new Custom_Button_Skin( $button ) );
}
add_action( 'elementor/init', 'custom_register_skin' );
/**
* Adding our Skin Class on Elementor Init
*/
function custom_register_skin() {
class Custom_Button_Skin extends Elementor\Skin_Base {
public function __construct( Elementor\Widget_Base $parent ) {
parent::__construct( $parent );
}
public function get_id() {
return 'custom_button';
}
public function get_title() {
return __( 'Custom Button', 'yourtextdomain' );
}
public function render() {
$settings = $this->parent->get_settings();
$this->parent->add_render_attribute( 'button', 'class', 'elementor-button-wrapper' );
if ( ! empty( $settings['link']['url'] ) ) {
$this->parent->add_render_attribute( 'button', 'href', $settings['link']['url'] );
$this->parent->add_render_attribute( 'button', 'class', 'elementor-button-link' );
if ( $settings['link']['is_external'] ) {
$this->parent->add_render_attribute( 'button', 'target', '_blank' );
}
if ( $settings['link']['nofollow'] ) {
$this->parent->add_render_attribute( 'button', 'rel', 'nofollow' );
}
}
$button_type = 'no';
if( $settings['custom_button_type'] ) {
$this->parent->add_render_attribute( 'button', 'class', $settings['custom_button_type'], true );
$button_type = $settings['custom_button_type'];
}
$this->parent->add_render_attribute( 'button', 'class', 'elementor-button' );
if ( $settings['hover_animation'] ) {
$this->parent->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] );
}
if ( ! empty( $settings['size'] ) && 'no' === $button_type ) {
$this->parent->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] );
}
?>
<div <?php echo $this->parent->get_render_attribute_string( 'wrapper' ); ?>>
<a <?php echo $this->parent->get_render_attribute_string( 'button' ); ?>>
<?php $this->render_text(); ?>
</a>
</div>
<?php
}
/**
* Direct Copy of the Button Class
*/
protected function render_text() {
$settings = $this->parent->get_settings();
$this->parent->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' );
$this->parent->add_render_attribute( 'icon-align', 'class', 'elementor-align-icon-' . $settings['icon_align'] );
$this->parent->add_render_attribute( 'icon-align', 'class', 'elementor-button-icon' );
$this->parent->add_render_attribute( 'text', 'class', 'elementor-button-text' );
?>
<span <?php echo $this->parent->get_render_attribute_string( 'content-wrapper' ); ?>>
<?php if ( ! empty( $settings['icon'] ) ) : ?>
<span <?php echo $this->parent->get_render_attribute_string( 'icon-align' ); ?>>
<i class="<?php echo esc_attr( $settings['icon'] ); ?>"></i>
</span>
<?php endif; ?>
<span <?php echo $this->parent->get_render_attribute_string( 'text' ); ?>><?php echo $settings['text']; ?></span>
</span>
<?php
}
}
}
/*
* Changing the Live Preview Template
*/
public function __construct( Elementor\Widget_Base $parent ) {
parent::__construct( $parent );
add_filter( 'elementor/widget/print_template', array( $this, 'skin_print_template' ), 10, 2 );
}
public function skin_print_template( $content, $button ) {
if( 'button' == $button->get_name() ) {
// If we don't want a JavaScript Template, just uncomment this below
// return '';
ob_start();
$this->_content_template();
$content = ob_get_clean();
}
return $content;
}
/**
* Render button widget output in the editor.
* Copy of the Button content template.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
*/
public function _content_template() {
?>
<div class="elementor-button-wrapper">
<a class="<# if( 'no' === settings.custom_button_type ) { #>elementor-size-{{ settings.size }}<# } else { #>{{ settings.custom_button_type }}<# } #> elementor-button elementor-animation-{{ settings.hover_animation }}" href="{{ settings.link.url }}">
<span class="elementor-button-content-wrapper">
<# if ( settings.icon ) { #>
<span class="elementor-button-icon elementor-align-icon-{{ settings.icon_align }}">
<i class="{{ settings.icon }}"></i>
</span>
<# } #>
<span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">{{{ settings.text }}}</span>
</span>
</a>
</div>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment