Creating a custom widget in WordPress is pretty easy and is a great way to allow users to modify their sidebar content. In this example we’ll create a widget that displays some copy and then renders a link to another page on the site. If you’re unfamiliar with WordPress widgets, the Widgets API Codex Reference is very helpful.
The first step is to create the widget class.
/** * Show Link Widget Class * * @author Joe Sexton <joe@webtipblog.com> */ class ShowLink extends WP_Widget { /** * constructor * * @author Joe Sexton <joe@webtipblog.com> */ public function __construct() { parent::__construct( false, 'Show Link', array( 'description' => 'Displays an internal page link and content text' )); } /** * widget * * @param array $args * @param array $instance * @author Joe Sexton <joe@webtipblog.com> */ public function widget( $args, $instance ) { extract( $args ); $title = apply_filters( 'widget_title', $instance['title'] ); $content = $instance['content']; $link_content = $instance['link_content']; $link_url = $instance['link_url']; echo $before_widget; if ( $title ) echo $before_title . $title . $after_title; echo '<div class="divider"></div> <p> <?php echo $content; ?> <a href="<?php echo $link_url; ?>"><?php echo $link_content; ?></a> </p>'; echo $after_widget; } /** * update * * @param array $new_instance * @param array $old_instance * @return array * @author Joe Sexton <joe@webtipblog.com> */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags( $new_instance['title'] ); $instance['content'] = strip_tags( $new_instance['content'] ); $instance['link_content'] = strip_tags( $new_instance['link_content'] ); $instance['link_url'] = strip_tags( $new_instance['link_url'] ); return $instance; } /** * form * * @param array $instance * @author Joe Sexton <joe@webtipblog.com> */ public function form( $instance ) { $defaults = array( 'title' => 'Link', 'content' => '', 'link_content' => '', 'link_url' => '', ); $instance = wp_parse_args( (array)$instance, $defaults ); $links = array(); $pages = get_pages(); foreach ( $pages as $page ) { $links[$page->ID] = array( 'title' => $page->post_title, 'url' => get_permalink( $page->ID ) ); } ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label> <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" /> </p> <p> <label for="<?php echo $this->get_field_id( 'content' ); ?>">Content:</label> <textarea id="<?php echo $this->get_field_id( 'content' ); ?>" name="<?php echo $this->get_field_name( 'content' ); ?>" style="width:100%;" cols="8"><?php echo $instance['content']; ?></textarea> </p> <p> <label for="<?php echo $this->get_field_id( 'link_content' ); ?>">Link Content:</label> <input id="<?php echo $this->get_field_id( 'link_content' ); ?>" name="<?php echo $this->get_field_name( 'link_content' ); ?>" value="<?php echo $instance['link_content']; ?>" style="width:100%;" /> </p> <p> <label for="<?php echo $this->get_field_id( 'link_url' ); ?>">Page:</label> <select id="<?php echo $this->get_field_id( 'link_url' ); ?>" name="<?php echo $this->get_field_name( 'link_url' ); ?>" style="width:100%;" > <?php foreach ( $links as $id => $link ): ?> <option value="<?php echo $link['url'] ?>" <?php echo $this->get_field_id( 'link_url' ) == $link['url'] ? 'selected' : ''; ?> > <?php echo $link['title'] ?> </option> <?php endforeach ?> </select> </p> <?php } }
The important function here is form(). This renders the form for the widget. We display a textarea and then use get_pages to get all of the pages on the site. We use that array of pages to create a dropdown menu for users to simply choose a page on the site without the need to code a link element.
In functions.php register the widget.
// functions.php add_action( 'widgets_init', 'register_sidebar_widgets' ); /** * register sidebar widgets * * @author Joe Sexton <joe@webtipblog.com> */ function register_sidebar_widgets() { register_widget( 'ShowLink' ); }
Your widget is now ready to add in wp-admin.