1

I am new to web development and WordPress. Since, I am still learning, I want to achieve the results by doing my own research. And when it is not helping, only then I try to seek help. Well this may be the first time I am posting a question. Without wasting time, I will come to my question:

I have tried to put together a widget that shows the carousel. The carousel slides will have a Headline, some text below the headline and then a link formatted as button. All of this will be on the left side and on right side I will have an image.

Whatever I mentioned above was achievable with a little research. However, I want to submit the headline input as:

<h1>
    <span class="headline">
        <strong class="text-primary">Some heading starts here</strong>
        and ends here
    </span>
</h1>

Here is the code for widget input fields, which is working fine.

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('description'); ?>">Description</label><br />
            <textarea type="text" name="<?php echo $this->get_field_name('description'); ?>" id="<?php echo $this->get_field_id('description'); ?>" class="widefat"><?php echo $instance['description']; ?></textarea>
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('link_title'); ?>">Link Title</label><br />
            <input type="text" name="<?php echo $this->get_field_name('link_title'); ?>" id="<?php echo $this->get_field_id('link_title'); ?>" value="<?php echo $instance['link_title']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('link_url'); ?>">Link URL</label><br />
            <input type="text" name="<?php echo $this->get_field_name('link_url'); ?>" id="<?php echo $this->get_field_id('link_url'); ?>" value="<?php echo $instance['link_url']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?= $this->get_field_id( 'image_uri' ); ?>">Image</label>
            <img class="<?= $this->id ?>_img" src="<?= (!empty($instance['image_uri'])) ? $instance['image_uri'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
            <input type="text" class="widefat <?= $this->id ?>_url" name="<?= $this->get_field_name( 'image_uri' ); ?>" value="<?= $instance['image_uri']; ?>" style="margin-top:5px;" />
            <input type="button" id="<?= $this->id ?>" class="button button-primary js_custom_upload_media" value="Upload Image" style="margin-top:5px;" />
        </p>

I know that below code will not help in achieving the desired result.

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

So, I want to know my options to achieve the desired result.

Thanks!

3
  • WP comes with a widget that accepts arbitrary HTML out of the box, have you tried using a textarea tag?
    – Tom J Nowell
    Jul 9, 2020 at 11:19
  • Thanks for replying @TomJNowell. Yes, I tried, however in my case it is creating a different slide for itself. And I think that is what is expected when you add two or more different widgets to a widget area like one I have created. Jul 9, 2020 at 11:32
  • Just hold on for some time, I think I have found something. Will post the result. Jul 9, 2020 at 11:56

1 Answer 1

0

Thanks to @TomJNowell for his advise on using textarea.

This is what I did to achieve what I wanted. It serves the purpose but I am not sure if it is the right way or not.

  • I changed below input field:
        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

To a textarea:

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <textarea name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" class="widefat" rows="5"><?php echo $instance['headline']; ?></textarea>
        </p>

And this is my update function:

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
        $instance = $old_instance;
        $instance['headline']   =   wp_kses_post($new_instance['headline']);
        $instance['description'] = strip_tags( $new_instance['description'] );
        $instance['link_title'] = strip_tags( $new_instance['link_title'] );
        $instance['link_url'] = strip_tags( $new_instance['link_url'] );
        $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
        return $instance;       
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.