Widget in WordPress maken hoe doe je dat?

Wat WordPress mede zo leuk maakt zijn de widgets, het maakt het voor gebruikers gemakkelijk om elementen simpel in de website te slepen. Veel thema’s en plugins gebruiken widgets. Wil je zelf een widget in WordPress maken? Lees dan nu dit artikel.

Zelf een widget in WordPress maken

Voordat we beginnen kun je het beste een website specifieke plugin maken waar je de code in kan plakken. Je kan het ook in het functions.php van je thema plakken maar een website specifieke plugin is beter.

In deze tutorial, gaan we een simpele widget creëren die alleen bezoekers begroet. Bekijk de onderstaande code en plak het in je website specifieke plugin om de widget in actie te zien.

// Creëer de widget 

class prw_widget extends WP_Widget {



function __construct() {

parent::__construct(

// Basis ID van je widget

'prw_widget', 



// Naam van de widget verschijnt in UI

__('prwebservices Widget', 'prw_widget_domain'), 



// Widget beschrijving

array( 'description' => __( 'Voorbeeld widget voor prwebservices Tutorial', 'prw_widget_domain' ), ) 

);

}



// Creëert widget front-end

// Dit is waar het allemaal gebeurt

public function widget( $args, $instance ) {

$title = apply_filters( 'widget_title', $instance['title'] );

// voor en na de widget arguments worden gedefinieerd door de thema's

echo $args['before_widget'];

if ( ! empty( $title ) )

echo $args['before_title'] . $title . $args['after_title'];



// Hier loopt de code en verschijnt de output

echo __( 'Hello, World!', 'prw_widget_domain' );

echo $args['after_widget'];

}

        

// Widget Backend 

public function form( $instance ) {

if ( isset( $instance[ 'title' ] ) ) {

$title = $instance[ 'title' ];

}

else {

$title = __( 'New title', 'prw_widget_domain' );

}

// Widget admin form

?>

<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>

<?php 

}

    

// Updating widget vevangen van oude instances met nieuwe

public function update( $new_instance, $old_instance ) {

$instance = array();

$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;

}

} // Class prw_widget eindigd hier



// Registreer en laadt de widget

function prw_load_widget() {

    register_widget( 'prw_widget' );

}

add_action( 'widgets_init', 'prw_load_widget' );

Widget activeren

Ga nu naam Weergave >> Widgets en sleep nu de prwebservices widget naar één van de sidebars om de zelfgemaakte widget in actie te zien.

Dat was eenvoudig vind je niet? We hebben als eerste de widget gemaakt. Vervolgens hebben we gedefinieerd wat de widget doet en hoe het in het dashboard wordt weergegeven. Daarna definieerde we hoe de widget met veranderingen om moet gaan. Waarna we tot slot de widget hebben geregistreerd en geladen.

 

Geef een reactie