Maak je eigen WordPress widgets voor Orbis

We krijgen veel feature requests voor Orbis. Eén vraag die we vaak krijgen gaat over de implementatie van extra widgets. Widgets voor bijvoorbeeld het tonen van specifieke projecten binnen een categorie of een widget waarmee de personen van een specifiek bedrijf getoond kunnen worden. Het is vrij eenvoudig om deze widgets zelf te ontwikkelen. In deze blog een head start voor de implementatie ervan.

Allereerst zul je een child theme van Orbis moeten maken. In deze child theme kunnen we vervolgens aanpassingen of uitbreidingen doen. In ons geval willen we Orbis uitbreiden met een extra widget. In dit voorbeeld laat ik zien hoe je de laatste Orbis projecten kan tonen. De widget bevat de volgende code en slaan we op als class-orbis-widget-projects.php in de map /widgets.

class Orbis_Widget_Projects extends WP_Widget {

	public function __construct() {
		$widget_ops = array(
			'classname'   => 'widget_orbis_projects',
			'description' => __( 'A list of Orbis projects.', 'orbis' )
		);

		parent::__construct( 'projects', __( 'Projects', 'orbis' ), $widget_ops );
	}

	public function widget( $args, $instance ) {
		$title   = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Projects', 'orbis' ) : $instance['title'], $instance, $this->id_base );
		$number  = isset( $instance['number'] ) ? $instance['number'] : 5;

		$query = new WP_Query( array (
			'post_type'      => 'orbis_project',
			'posts_per_page' => $number,
			'no_found_rows'  => true,
		) );

		if ( $query->have_posts() ) {
			echo $args['before_widget'];

			if ( $title ) {
				echo $args['before_title'] . $title . $args['after_title'];
			}

			?>

			<ul>
				<?php while ( $query->have_posts() ) : $query->the_post(); ?>

					<li>
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					</li>

				<?php endwhile; ?>
			</ul>

			<?php

			echo $args['after_widget'];

			wp_reset_postdata();
		}
	}

	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;

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

		return $instance;
	}

	function form( $instance ) {

		$title  = isset( $instance['title'] ) ? $instance['title'] : '';
		$number = isset( $instance['number'] ) ? $instance['number'] : '';

		?>

		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>">
				<?php _e( 'Title:', 'orbis' ); ?>
			</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( 'number' ); ?>">
				<?php _e( 'Number:', 'orbis' ); ?>
			</label>

			<input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo esc_attr( $number ); ?>" />
		</p>

		<?php
	}
}

register_widget( 'Orbis_Widget_Projects' );

Dit bestand kan je geheel naar eigen wens aanpassen. Deze class voegen we vervolgens toe aan functions.php binnen het child theme met de volgende include.

require_once( 'widgets/class-orbis-widget-projects.php' );