I'm building a custom widget for elementor to help my client add items to the website on his own without coding knowledge. I almost had it finished when I ran into a very strange issue. A button I have set up to link to a new page is putting the text "array" into itself for some reason.
I've tried putting in text where the "array" text is directly by editing my html. When I update or go into preview mode on wordpress this text disappears and the word "array" reappears. I even went so far as to add a field on the button where my client or I can add our own text in an attempt to solve the problem, but now that text is just preceded by "array". See Below.
Before:
After:
All my relevant code is in my awesomesauce.php file where the code for my widget is.
<?php
namespace ElementorAwesomesauce\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
* @since 1.1.0
*/
class Awesomesauce extends Widget_Base {
/**
* Retrieve the widget name.
*
* @since 1.1.0
*
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return 'awesomesauce';
}
/**
* Retrieve the widget title.
*
* @since 1.1.0
*
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return __( 'Awesomesauce', 'elementor-awesomesauce' );
}
/**
* Retrieve the widget icon.
*
* @since 1.1.0
*
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return 'fa fa-pencil';
}
/**
* Retrieve the list of categories the widget belongs to.
*
* Used to determine where to display the widget in the editor.
*
* Note that currently Elementor supports only one category.
* When multiple categories passed, Elementor uses the first one.
*
* @since 1.1.0
*
* @access public
*
* @return array Widget categories.
*/
public function get_categories() {
return [ 'general' ];
}
/**
* Register the widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.1.0
*
* @access protected
*/
protected function _register_controls() {
$this->start_controls_section(
'section_content',
[
'label' => __( 'Content', 'elementor-awesomesauce' ),
]
);
$this->add_control(
'title',
[
'label' => __( 'Title', 'elementor-awesomesauce' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Car Title', 'elementor-awesomesauce' ),
]
);
$this->add_control(
'description',
[
'label' => __( 'Description', 'elementor-awesomesauce' ),
'type' => Controls_Manager::TEXTAREA,
'default' => __( 'Sold or Currently available', 'elementor-awesomesauce' ),
]
);
$this->add_control(
'content',
[
'label' => __( 'Content', 'elementor-awesomesauce' ),
'type' => Controls_Manager::WYSIWYG,
'default' => __( 'Remove this text and insert media', 'elementor-awesomesauce' ),
]
);
$this->add_control(
'link',
[
'label' => __( 'Link', 'elementor-awesomesauce' ),
'type' => Controls_Manager::URL,
'dynamic' => [
'active' => true,
],
'placeholder' => __( 'https://your-link.com', 'elementor-awesomesauce' ),
'default' => [
'url' => '#',
],
]
);
$this->add_control(
'text',
[
'label' => __( 'Text', 'elementor' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => __( 'Click here', 'elementor' ),
'placeholder' => __( 'Click here', 'elementor' ),
]
);
$this->end_controls_section();
}
/**
* Render the widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.1.0
*
* @access protected
*/
protected function render() {
$settings = $this->get_settings_for_display();
$this->add_inline_editing_attributes( 'title', 'none' );
$this->add_inline_editing_attributes( 'description', 'basic' );
$this->add_inline_editing_attributes( 'content', 'advanced' );
$this->add_inline_editing_attributes( 'link', 'none');
$this->add_inline_editing_attributes( 'text', 'basic');
// Add render attributes to add classes to html elements h2, article, figure, and div
$this->add_render_attribute( 'title', 'class', 'title is-5');
$this->add_render_attribute( 'description', 'class', 'subtitle');
$this->add_render_attribute( 'content', 'class', 'image is-4by3');
$this->add_render_attribute( 'link', 'class', 'button is-rounded is-fullwidth');
$this->add_render_attribute( 'wrapper', 'class', 'tile is-parent');
$this->add_render_attribute( 'wrappertwo', 'class', 'tile is-child box');
$this->add_render_attribute( 'text', 'class', 'subtitle has-text-right');
?>
<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>><?php echo $settings['wrapper']; ?>
<div <?php echo $this->get_render_attribute_string( 'wrappertwo' ); ?>><?php echo $settings['wrappertwo']; ?>
<h2 <?php echo $this->get_render_attribute_string( 'title' ); ?>><?php echo $settings['title']; ?></h2>
<div <?php echo $this->get_render_attribute_string( 'description' ); ?>><?php echo $settings['description']; ?></div>
<div <?php echo $this->get_render_attribute_string( 'content' ); ?>><?php echo $settings['content']; ?></div>
<div <?php echo $this->get_render_attribute_string( 'link' ); ?>><?php echo $settings['link']; ?>
<div <?php echo $this->get_render_attribute_string( 'text'); ?>><?php echo $settings['text']; ?></div>
</div>
</div>
</div>
<?php
}
/**
* Render the widget output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @since 1.1.0
*
* @access protected
*/
protected function _content_template() {
?>
<#
view.addInlineEditingAttributes( 'title', 'none' );
view.addInlineEditingAttributes( 'description', 'basic' );
view.addInlineEditingAttributes( 'content', 'advanced' );
view.addInlineEditingAttributes( 'car_image', 'advanced');
#>
<div ' + view.getRenderAttributeString( 'wrapper' ) + ' >
<article ' + view.getRenderAttributeString( 'wrappertwo' ) + ' >
<h2 class="title is-5" {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ settings.title }}}</h2>
<div class="subtitle" {{{ view.getRenderAttributeString( 'description' ) }}}>{{{ settings.description }}}</div>
<figure class="image is-4by3" {{{ view.getRenderAttributeString( 'content' ) }}}>{{{ settings.content }}}</figure>
<a href="{{ settings.link.url }}" class="button is-rounded is-fullwidth">
<span {{{ view.getRenderAttributeString( 'text' ) }}}>{{{ settings.text }}}</span>
</a>
</article>
</div>
<?php
}
}
