1

I have the following code to display widgets in the customizer.

function arphabet_widgets_init() {

register_sidebar( array(
    'name'          => 'Social Media button',
    'id'            => 'smb',
) );

register_sidebar( array(
    'name'          => 'Link button',
    'id'            => 'lb',
) );

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'];
    }
    if ( ! empty( $instance['url'] ) ) {
        echo $args['url_title'] . apply_filters( 'widget_url', $instance['url'] ) . $args['after_url'];
    }
    if ( ! empty( $instance['icon'] ) ) {
        echo $args['icon_title'] . apply_filters( 'widget_icon', $instance['icon'] ) . $args['after_icon'];
    }
    echo $args['after_widget'];
}

public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
    $url = ! empty( $instance['url'] ) ? $instance['url'] : __( 'http://', 'text_domain' );
    $icon = ! empty( $instance['icon'] ) ? $instance['icon'] : __( 'globe', 'text_domain' );
    ?>
    <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( 'Title: (for search engines)' ) ); ?></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>
    <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>"><?php _e( esc_attr( 'URL:' ) ); ?></label> 
    <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'url' ) ); ?>" type="text" value="<?php echo esc_attr( $url ); ?>">
    </p>
    <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'icon' ) ); ?>"><?php _e( esc_attr( 'Icon:' ) ); ?></label> 
    <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'icon' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'icon' ) ); ?>" type="text" value="<?php echo esc_attr( $icon ); ?>">
    </p>
    <?php 
}

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['url'] = ( ! empty( $new_instance['url'] ) ) ? strip_tags( $new_instance['url'] ) : '';
    $instance['icon'] = ( ! empty( $new_instance['icon'] ) ) ? strip_tags( $new_instance['icon'] ) : '';

    return $instance;
}
}

    dynamic_sidebar( 'smb' );
    dynamic_sidebar( 'lb' );

    register_widget( 'My_Widget' );
}

add_action( 'widgets_init', 'arphabet_widgets_init' );

This works, but I'm not sure how to output them. This is what I tried:

     <?php if ( is_active_sidebar( 'smb' ) ) { ?>
        <h1><?php dynamic_sidebar( 'smb' ); ?></h1>
    <?php } ?>

but that outputs the whole widget. I want to output a specific field, such as the title or URL.

I want it to be outputted like this:

<li><a href="[URL]" class="fa fa-[ICON]">[TITLE]</a></li>

  • You seem to want very specific widgets with partial output, which will only work in a specific sidebar. Are you sure you this should even be sidebar/widgets at all? – Rarst Jun 11 '16 at 18:24
  • @Rarst Well, I have a strange theme which is against all the default WordPress stuff, so I think this should work with the example below. For example, I put all the custom user CSS in a custom.php instead of in the head tag with a style wrapped around it. That's my way of doing it. :) – J. Doe Jun 11 '16 at 18:43
1

Check this out, it may guide you in the direction you need:

First:

register_sidebar( array(
    'name'          => 'Social Media button',
    'id'            => 'smb',
    'before_widget' => '<li>',
    'after_widget'  => '</li>',
) );

Second code:

public function widget( $args, $instance ) {
    $output = $args['before_widget'];

    $output .= '<a href="' . $instance['url'] . '"  class="fa fa-' . 
        $args['icon_title'] . '">' . $instance['title'] . '</a>';
    $output .= $args['after_widget'];

    echo $output; // <li><a href="[URL]" class="fa fa-[ICON]">[TITLE]</a></li> 
}

The output from those changes will be :

<h1><li><a href="http://url.com" class="fa fa-">New title</a></li><li><h2 class="widgettitle">test1</h2>
        <div class="textwidget">test2</div>
</li></h1>

And will only do this on the social sidebar.

  • Awesome! Thank you. In my case, I had to change '.$args['icon_title'].' to '.$instance['icon'].' for it to work. – J. Doe Jun 11 '16 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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