admin管理员组文章数量:1330379
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!
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!
Share Improve this question asked Jul 9, 2020 at 11:00 Manohar BhatiaManohar Bhatia 135 bronze badges 3- WP comes with a widget that accepts arbitrary HTML out of the box, have you tried using a textarea tag? – Tom J Nowell ♦ Commented 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. – Manohar Bhatia Commented Jul 9, 2020 at 11:32
- Just hold on for some time, I think I have found something. Will post the result. – Manohar Bhatia Commented Jul 9, 2020 at 11:56
1 Answer
Reset to default 0Thanks 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;
}
本文标签: How to create a widget that accepts html input
版权声明:本文标题:How to create a widget that accepts html input? 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742269448a2444028.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论