WordPress 101: Create a Plugin, Widget and Theme

The web consists for 28% out of WordPress, which uses PHP as programming language. WordPress is not only easy to set up and configure thanks to its plugins, widgets, and themes, but for developer WordPress is also easy to customize.

The three basic strategies to customize the default WordPress functionality, which itself is already highly configurable, are the following:

1. Create a new Theme,
2. Create a new Plugin, and
3. Create a new Widget.

1. Create a Theme

You can create a theme by extending an existing theme or creating a new theme. The easiest is to extend an existing theme.

• In your WordPress installation, go to Appearrance > Themes, and install a theme you like. I installed the ‘Twenty Seventeen’ theme,
• Create a new folder called ‘wp-101-theme’
• Change into the new directory

$ cd wp-101-theme

• Create a new file ‘style.css’
• Edit the file ‘style.css’,

/*
Theme Name:     WP-101
Theme URI:      http://dev.remkohde.com/src/wp/plugins/wp-101
Description:    WP101 is a child theme of Twenty Seventeen
Author:         @remkohdev
Author URI:     http: //www.remkohde.com
Template:       twentyseventeen
Version:        0.1.0
*/
/** parent style.css does not load be default when subtheming */
@import url("../twentyseventeen/style.css");

To extend the Twenty Seventeen theme, you can simply copy paste a WordPress page from the Twenty Seventeen theme and modify it to fit your own design.

• For instance, the footer of Twenty Seventeen looks as follows,

• Copy the ‘footer.php’ page from Twenty Seventeen to the ‘wp-101-theme’ directory and modify the code as follows,

<?php
/**
* The template for displaying the footer
* Contains the closing of the #content div and all content after.
*
*/
?>
      </div><!-- #content -->
      <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="wrap">
          <?php
            get_template_part( 'template-parts/footer/footer', 'widgets' );
          ?>
        <div><h3>WP101</h3></div>
      </div><!-- .wrap -->
    </footer><!-- #colophon -->
  </div><!-- .site-content-contain -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

• Now, the footer for WP-101 has changed to

• Add a screenshot of your theme to appear in the Themes gallery of WordPress, and name the image ‘screenshot.png’,
• Compress the ‘wp-101-theme’ directory to ‘wp-101-theme.zip’ and upload the zip file to install a new theme,

2. Create a Plugin

• Create a new folder called ‘wp-101-plugin’
• Change into the new directory

$ cd wp-101-plugin

• Create a new file ‘readme.txt’
• Create a new file named ‘wp-101.php’, this is your actual plugin,
• In the ‘wp-101.php’ file you need to create 3 basic hooks: register_activation_hook(), register_deactivation_hook() and the register_uninstall_hook().

<?php
/*
Plugin Name: WordPress 101
Plugin URI: http://dev.remkohde.com/src/wp/plugins/wp-101
Description: This WordPress plugin is meant to learn contributing to WordPress.
Version: 0.1.0
Revision Date: October 24, 2017
Requires at least: WP 4.8
Tested up to: WP 4.8.2
Author: @remkohdev
Author URI: http://www.remkohde.com
License: (Example: GNU General Public License 2.0 (GPL) http://www.gnu.org/licenses/gpl.html)
Network: true
=== RELEASE NOTES ===
WP-101 Plugin
Contributors: @remkohdev
2017-10-24 - v1.0.0 - init. preview release
*/
/** ************************************************************* */
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
register_activation_hook( __FILE__, 'wp_101_activate' );
register_deactivation_hook( __FILE__, 'wp_101_deactivate' );
register_uninstall_hook( __FILE__, 'wp_101_uninstall' );
/** ************************************************************* */
function wp_101_activate() {
wp_101_check_WP_version();
wp_101_install();
wp_101_install_data();
}
function wp_101_deactivate() {}
function wp_101_uninstall() {}
function wp_101_check_WP_version() {
  if(version_compare(get_bloginfo( 'version' ), '4.8', '<' )) {
    wp_die("You must update WordPress to use this plugin!");
  }
  if (get_option( 'wp_101_op_array' ) === false){
    $options_array['wp_101_op_version'] = '0.1.0';
    add_option( 'wp_101_op_array', $options_array );
  }
}
function wp_101_install() {
  global $wpdb;
  // create required tables here
  $tbl_101_settings = $wpdb->prefix . "wp101_settings";
  $sql_create_wp_101_settings =
    "CREATE TABLE $tbl_wp_101_settings (
    id mediumint(9) NOT NULL AUTO_INCREMENT,
    key1 tinytext NOT NULL,
    value1 VARCHAR(100) NOT NULL,
    UNIQUE KEY id (id)
    );";
  require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
  // dbDelta only creates the delta with existing table
  dbDelta( $sql_create_wp_101_settings );
}
function wp_101_install_data() {
  // add to wp_options table
  // get_option(), update_option(), delete_option().
  add_option( "wp_101_db_version", "0.1.0" );
}
/** end of the plugin */
/** ************************************************************* */
?>

• Compress the ‘wp-101’ directory to ‘wp-101.zip’ and upload the zip file to install a new plugin.

3. Create a Widget

To create a widget in WordPress, you need to create HTML code that is rendered as the widget and you need to create a WordPress Widget class.

In this example, I want to create a widget that embeds a Twitter feed. Twitter lets you create the embeddable HTML code for a twitter feed as follows:

• Go to https://twitter.com/settings/widgets
• Click the ‘Create New’ button,
• Choose your widget type
• Customize and click the ‘Create widget’ button,
• This generates an embeddable HTML for a Twitter widget,
• Copy and paste the code into the ‘widget’ function and add the following code to the Plugin we created above:

/** end of the plugin */
// register WP101_Widget widget
function register_wp101_widget() {
  register_widget( 'WP101_Widget' );
}
add_action( 'widgets_init', 'register_wp101_widget' );
/** ************************************************************* */
class WP101_Widget extends WP_Widget {
  public function __construct() {
    $widget_ops = array(
      'classname' => 'wp101_widget',
      'description' => 'WP101 Widget is awesome',
    );
    parent::__construct( 'wp101_widget', 'WP101 Widget', $widget_ops );
  }
  public function widget( $args, $instance ) {
    // outputs the content of the widget
    // echo the HTML from the Twitter widget
    echo "<div class='wp101-feed'><a class='twitter-timeline'  href='https://twitter.com/hashtag/cuny' data-widget-id='922974882022993920'>#cuny Tweets</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script></div><!-- .wp101-feed -->";
  }
  public function form( $instance ) {
    // outputs the options form on admin
  }
  public function update( $new_instance, $old_instance ) {
    // processes widget options to be saved
  }
}
?>

• Go to Appearance > Widgets,
• Find the ‘WP101 Widget’ and drag the widget to one of the areas to the right, to activate the widget.