admin管理员组文章数量:1130349
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.
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.
Share Improve this question edited Jun 8, 2016 at 18:01 Sumit 4,8542 gold badges29 silver badges36 bronze badges asked Jun 8, 2016 at 16:56 J. DoeJ. Doe 3175 silver badges15 bronze badges 5 |2 Answers
Reset to default 0Your widget is okay but problem is customizer do not show sidebar option if there is no sidebar is called on current viewing page.
You did register the two siderbars but did not call them any where in the template of page your are seeing in customizer.
Use dynamic_sidebar function and call your sidebar somewhere in the template.
Example:-
dynamic_sidebar( 'smb' ); //For social media buttons sidebar
/* OR/AND */
dynamic_sidebar( 'lb' ); //For link button sidebar
Hi You can make a plugin for this
<?php
/*
Plugin Name: Adlivetech Social Profile Widget
Plugin URI: http://adlivetech
Description: Links to Author social media profile
Author: Rohit Kaushik
Author URI: http://adlivetech
*/
/**
* Adds Adlivetech_Social_profile widget.
*/
class Adlivetech_Social_profile extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'Adlivetech_Social_profile',
__('Social Networks Profiles', 'translation_domain'), // Name
array('description' => __('Links to Author social media profile', 'translation_domain'),)
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget($args, $instance) {
$title = apply_filters('widget_title', $instance['title']);
$facebook = $instance['facebook'];
$twitter = $instance['twitter'];
$google = $instance['google'];
$linkedin = $instance['linkedin'];
$instagram = $instance['instagram'];
// social profile link
$facebook_profile = '<a target="_blank" class="facebook" href="' . $facebook . '"><i class="fa fa-facebook"></i></a>';
$twitter_profile = '<a target="_blank" class="twitter" href="' . $twitter . '"><i class="fa fa-twitter"></i></a>';
$google_profile = '<a target="_blank" class="google" href="' . $google . '"><i class="fa fa-google-plus"></i></a>';
$linkedin_profile = '<a target="_blank" class="linkedin" href="' . $linkedin . '"><i class="fa fa-linkedin"></i></a>';
$instagram_profile = '<a target="_blank" class="instagram" href="' . $instagram . '"><i class="fa fa-instagram"></i></a>';
echo $args['before_widget'];
if (!empty($title)) {
echo $args['before_title'] . $title . $args['after_title'];
}
echo '<div class="social-icons">';
echo (!empty($facebook) ) ? $facebook_profile : null;
echo (!empty($twitter) ) ? $twitter_profile : null;
echo (!empty($google) ) ? $google_profile : null;
echo (!empty($linkedin) ) ? $linkedin_profile : null;
echo (!empty($instagram) ) ? $instagram_profile : null;
echo '</div>';
echo $args['after_widget'];
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form($instance) {
isset($instance['title']) ? $title = $instance['title'] : null;
empty($instance['title']) ? $title = 'My Social Profile' : null;
isset($instance['facebook']) ? $facebook = $instance['facebook'] : null;
isset($instance['twitter']) ? $twitter = $instance['twitter'] : null;
isset($instance['google']) ? $google = $instance['google'] : null;
isset($instance['linkedin']) ? $linkedin = $instance['linkedin'] : null;
isset($instance['instagram']) ? $instagram = $instance['instagram'] : null;
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo esc_attr($facebook); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo esc_attr($twitter); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('google'); ?>"><?php _e('Google+:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('google'); ?>" name="<?php echo $this->get_field_name('google'); ?>" type="text" value="<?php echo esc_attr($google); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('linkedin'); ?>"><?php _e('Linkedin:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('linkedin'); ?>" name="<?php echo $this->get_field_name('linkedin'); ?>" type="text" value="<?php echo esc_attr($linkedin); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('instagram'); ?>"><?php _e('Instagram:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('instagram'); ?>" name="<?php echo $this->get_field_name('instagram'); ?>" type="text" value="<?php echo esc_attr($instagram); ?>">
</p>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
$instance['facebook'] = (!empty($new_instance['facebook']) ) ? strip_tags($new_instance['facebook']) : '';
$instance['twitter'] = (!empty($new_instance['twitter']) ) ? strip_tags($new_instance['twitter']) : '';
$instance['google'] = (!empty($new_instance['google']) ) ? strip_tags($new_instance['google']) : '';
$instance['linkedin'] = (!empty($new_instance['linkedin']) ) ? strip_tags($new_instance['linkedin']) : '';
$instance['instagram'] = (!empty($new_instance['instagram']) ) ? strip_tags($new_instance['instagram']) : '';
return $instance;
}
}
// register Adlivetech_Social_profile widget
function register_Adlivetech_Social_profile() {
register_widget('Adlivetech_Social_profile');
}
add_action('widgets_init', 'register_Adlivetech_Social_profile');
// enqueue css stylesheet
function Adlivetech_Social_profile_widget_css() {
wp_enqueue_style('social-profile-widget', plugins_url('designmodo-social-profile-widget.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'Adlivetech_Social_profile_widget_css');
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.
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.
Share Improve this question edited Jun 8, 2016 at 18:01 Sumit 4,8542 gold badges29 silver badges36 bronze badges asked Jun 8, 2016 at 16:56 J. DoeJ. Doe 3175 silver badges15 bronze badges 5-
You also need to code last three functions
widget,formandupdate– Sumit Commented Jun 8, 2016 at 17:30 - @Sumit Done that, edited the question, but the button is not really showing up yet – J. Doe Commented Jun 8, 2016 at 17:42
-
Great! Now note that
add widgetbutton 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 ? – Sumit Commented Jun 8, 2016 at 18:03 - @Sumit i.imgur/FZIFLRY.png – J. Doe Commented Jun 8, 2016 at 18:14
- Got it! See the answer :) – Sumit Commented Jun 8, 2016 at 18:29
2 Answers
Reset to default 0Your widget is okay but problem is customizer do not show sidebar option if there is no sidebar is called on current viewing page.
You did register the two siderbars but did not call them any where in the template of page your are seeing in customizer.
Use dynamic_sidebar function and call your sidebar somewhere in the template.
Example:-
dynamic_sidebar( 'smb' ); //For social media buttons sidebar
/* OR/AND */
dynamic_sidebar( 'lb' ); //For link button sidebar
Hi You can make a plugin for this
<?php
/*
Plugin Name: Adlivetech Social Profile Widget
Plugin URI: http://adlivetech
Description: Links to Author social media profile
Author: Rohit Kaushik
Author URI: http://adlivetech
*/
/**
* Adds Adlivetech_Social_profile widget.
*/
class Adlivetech_Social_profile extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'Adlivetech_Social_profile',
__('Social Networks Profiles', 'translation_domain'), // Name
array('description' => __('Links to Author social media profile', 'translation_domain'),)
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget($args, $instance) {
$title = apply_filters('widget_title', $instance['title']);
$facebook = $instance['facebook'];
$twitter = $instance['twitter'];
$google = $instance['google'];
$linkedin = $instance['linkedin'];
$instagram = $instance['instagram'];
// social profile link
$facebook_profile = '<a target="_blank" class="facebook" href="' . $facebook . '"><i class="fa fa-facebook"></i></a>';
$twitter_profile = '<a target="_blank" class="twitter" href="' . $twitter . '"><i class="fa fa-twitter"></i></a>';
$google_profile = '<a target="_blank" class="google" href="' . $google . '"><i class="fa fa-google-plus"></i></a>';
$linkedin_profile = '<a target="_blank" class="linkedin" href="' . $linkedin . '"><i class="fa fa-linkedin"></i></a>';
$instagram_profile = '<a target="_blank" class="instagram" href="' . $instagram . '"><i class="fa fa-instagram"></i></a>';
echo $args['before_widget'];
if (!empty($title)) {
echo $args['before_title'] . $title . $args['after_title'];
}
echo '<div class="social-icons">';
echo (!empty($facebook) ) ? $facebook_profile : null;
echo (!empty($twitter) ) ? $twitter_profile : null;
echo (!empty($google) ) ? $google_profile : null;
echo (!empty($linkedin) ) ? $linkedin_profile : null;
echo (!empty($instagram) ) ? $instagram_profile : null;
echo '</div>';
echo $args['after_widget'];
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form($instance) {
isset($instance['title']) ? $title = $instance['title'] : null;
empty($instance['title']) ? $title = 'My Social Profile' : null;
isset($instance['facebook']) ? $facebook = $instance['facebook'] : null;
isset($instance['twitter']) ? $twitter = $instance['twitter'] : null;
isset($instance['google']) ? $google = $instance['google'] : null;
isset($instance['linkedin']) ? $linkedin = $instance['linkedin'] : null;
isset($instance['instagram']) ? $instagram = $instance['instagram'] : null;
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo esc_attr($facebook); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo esc_attr($twitter); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('google'); ?>"><?php _e('Google+:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('google'); ?>" name="<?php echo $this->get_field_name('google'); ?>" type="text" value="<?php echo esc_attr($google); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('linkedin'); ?>"><?php _e('Linkedin:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('linkedin'); ?>" name="<?php echo $this->get_field_name('linkedin'); ?>" type="text" value="<?php echo esc_attr($linkedin); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('instagram'); ?>"><?php _e('Instagram:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('instagram'); ?>" name="<?php echo $this->get_field_name('instagram'); ?>" type="text" value="<?php echo esc_attr($instagram); ?>">
</p>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
$instance['facebook'] = (!empty($new_instance['facebook']) ) ? strip_tags($new_instance['facebook']) : '';
$instance['twitter'] = (!empty($new_instance['twitter']) ) ? strip_tags($new_instance['twitter']) : '';
$instance['google'] = (!empty($new_instance['google']) ) ? strip_tags($new_instance['google']) : '';
$instance['linkedin'] = (!empty($new_instance['linkedin']) ) ? strip_tags($new_instance['linkedin']) : '';
$instance['instagram'] = (!empty($new_instance['instagram']) ) ? strip_tags($new_instance['instagram']) : '';
return $instance;
}
}
// register Adlivetech_Social_profile widget
function register_Adlivetech_Social_profile() {
register_widget('Adlivetech_Social_profile');
}
add_action('widgets_init', 'register_Adlivetech_Social_profile');
// enqueue css stylesheet
function Adlivetech_Social_profile_widget_css() {
wp_enqueue_style('social-profile-widget', plugins_url('designmodo-social-profile-widget.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'Adlivetech_Social_profile_widget_css');
本文标签: sidebarAdd Social Media icon widget to customizer
版权声明:本文标题:sidebar - Add Social Media icon widget to customizer 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://it.en369.cn/questions/1749054639a2309152.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。


widget,formandupdate– Sumit Commented Jun 8, 2016 at 17:30add widgetbutton 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 ? – Sumit Commented Jun 8, 2016 at 18:03