How can I add a Customizer widget to add social media icons with links to their social media profiles? To clear it up, I have created a few images with the inspect element.
I want to have a section like this, with an add widget button:
When you click on it, the user will see the Social Media widget:
The user clicks on it and gets the following form:
What have I tried? I have tried the examples on the widgets API page and I have tried register_sidebar
:
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'Social Media button',
'id' => 'smb',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
register_sidebar( array(
'name' => 'Link button',
'id' => 'lb',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
class My_Widget extends WP_Widget {
public function __construct() {
$widget_ops = array(
'classname' => 'my_widget',
'description' => 'Adds a new Social Media button',
);
parent::__construct( 'my_widget', 'Social Media button', $widget_ops );
}
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo __( esc_attr( 'Hello, World!' ), 'text_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( 'Title:' ) ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
}
register_widget( 'My_Widget' );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
But that didn't add a "Add Widget" button to the Widget section of the customizer. I'm not sure how I should work this out.
widget
,form
andupdate
add widget
button is rendered automatically by WordPress when there are widget and sidebars available. First check, do you see your widget inAppearance > Widget
? And share the screenshot of customizer that what do you see ?