====== Eigenes Wordpress Widget bauen ======

Das ist ein Dummy-Code der zeigt wie man an eigenes Widget registriert. Mit Backend-Eingaben, Speichern und Frontend-Ausgabe

<code php>
<?php

function dummy_load_widget() {
    register_widget( 'dummy_banner_atlas_widget' );
}
add_action( 'widgets_init', 'dummy_load_widget' );


class dummy_banner_atlas_widget extends WP_Widget {

	function __construct() {
		parent::__construct(

		// WIDGET-ID
		'dummy_banner_atlas_widget',

		// WIDGET NAME
		'dummyBanner',

		// WIDGET BESCHREIBUNG
		array( 'description' => 'Ein Bannter als Dummy', )
		);
	}

	/*
		FRONTEND
	 */
	public function widget( $args, $instance ) {
		$title_bold    = ( isset( $instance[ 'title_bold' ]    ) ) ? $instance[ 'title_bold' ]    : '';
		$title_light   = ( isset( $instance[ 'title_light' ]   ) ) ? $instance[ 'title_light' ]   : '';
		$button_label  = ( isset( $instance[ 'button_label' ]  ) ) ? $instance[ 'button_label' ]  : '';
		$button_target = ( isset( $instance[ 'button_target' ] ) ) ? $instance[ 'button_target' ] : '';

		$logo_url      = get_stylesheet_directory_uri() . '/gfx/banner/banner_01_dummy_logo.png';
		$visual_url    = get_stylesheet_directory_uri() . '/gfx/banner/banner_01_dummy_visual.png';

		// before and after widget arguments are defined by themes
		echo $args['before_widget'];
		echo "
			<style>
				.widget_avtest_banner_atlas_widget {
					background : linear-gradient(0deg, rgba(177,202,213,1) 0%, rgba(255,255,255,1) 100%);
				}
				.widget_avtest_banner_atlas_widget .inner-wrapper {
					padding             : 10px 20px 20px 20px;
					background-image    : url($visual_url);
					background-position : bottom right;
					background-size     : 170px 188px;
					background-repeat   : no-repeat;
				}


				.banner-title {
					padding     : 5px 0px 100px 0px;
					font-family : 'Interstate',Arial,Helvetica,sans-serif;
					font-size   : 22px;
					color       : rgb(206, 4, 0);
				}
				.banner-title__bold {
					font-weight : 600;
				}
				.banner-title__light {
					font-family : 'InterstateLight',Arial,Helvetica,sans-serif;
					font-weight : 200;
				}

				.banner-logo {}
				.banner-logo__image {
					width : 165px;
				}
			</style>
			<div class=\"inner-wrapper\">
				<a href=\"$button_target\" class=\"banner-logo\">
					<img src=\"$logo_url\" class=\"banner-logo__image\"/>
				</a>
				<p class=\"banner-title\">
					<span class=\"banner-title__bold\">$title_bold</span><br/>
					<span class=\"banner-title__light\">$title_light</span>
				</p>

				<a href=\"$button_target\" class=\"po-button\">
					$button_label
				</a>
			</div>
		";
		echo $args['after_widget'];
	}

	/*
		BACKEND
	 */
	public function form( $instance ) {
		$title_bold    = ( isset( $instance[ 'title_bold' ]    ) ) ? $instance[ 'title_bold' ]    : '';
		$title_light   = ( isset( $instance[ 'title_light' ]   ) ) ? $instance[ 'title_light' ]   : '';
		$button_label  = ( isset( $instance[ 'button_label' ]  ) ) ? $instance[ 'button_label' ]  : '';
		$button_target = ( isset( $instance[ 'button_target' ] ) ) ? $instance[ 'button_target' ] : '';

		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title_bold' ); ?>">Titel (Bold & Light)</label>
			<input class="widefat" placeholder="Erste Zeile in Bold"   id="<?php echo $this->get_field_id( 'title_bold' ); ?>"  name="<?php echo $this->get_field_name( 'title_bold' ); ?>" type="text" value="<?php echo esc_attr( $title_bold ); ?>" />
			<input class="widefat" placeholder="Zweite Zeile in Light" id="<?php echo $this->get_field_id( 'title_light' ); ?>" name="<?php echo $this->get_field_name( 'title_light' ); ?>" type="text" value="<?php echo esc_attr( $title_light ); ?>" />

			<br /><br />

			<label for="<?php echo $this->get_field_id( 'button_label' ); ?>">Button Label</label>
			<input class="widefat" placeholder="Mehr »"   id="<?php echo $this->get_field_id( 'button_label' ); ?>"  name="<?php echo $this->get_field_name( 'button_label' ); ?>" type="text" value="<?php echo esc_attr( $button_label ); ?>" />

			<br /><br />

			<label for="<?php echo $this->get_field_id( 'button_target' ); ?>">Button Target</label>
			<input class="widefat" placeholder="https://www.domain.de"   id="<?php echo $this->get_field_id( 'button_target' ); ?>"  name="<?php echo $this->get_field_name( 'button_target' ); ?>" type="text" value="<?php echo esc_attr( $button_target ); ?>" />

		</p>
		<?php
	}

	/*
		UPDATING / SAVING
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title_bold']    = ( ! empty( $new_instance['title_bold']    ) ) ? strip_tags( $new_instance['title_bold']    ) : '';
		$instance['title_light']   = ( ! empty( $new_instance['title_light']   ) ) ? strip_tags( $new_instance['title_light']   ) : '';
		$instance['button_label']  = ( ! empty( $new_instance['button_label']  ) ) ? strip_tags( $new_instance['button_label']  ) : '';
		$instance['button_target'] = ( ! empty( $new_instance['button_target'] ) ) ? strip_tags( $new_instance['button_target'] ) : '';

		return $instance;
	}
}

</code>