{"id":71,"date":"2013-05-12T22:18:56","date_gmt":"2013-05-13T06:18:56","guid":{"rendered":"http:\/\/nramkumar.org\/tech\/?p=71"},"modified":"2013-05-12T22:30:47","modified_gmt":"2013-05-13T06:30:47","slug":"wordpress-hacking-creating-a-plugin-and-sidebar-widget","status":"publish","type":"post","link":"https:\/\/nramkumar.org\/tech\/blog\/2013\/05\/12\/wordpress-hacking-creating-a-plugin-and-sidebar-widget\/","title":{"rendered":"WordPress Hacking – Creating a Plugin and Sidebar Widget"},"content":{"rendered":"

To follow-up from my previous post, I had a unique requirement for our personal blog which was to display images attached to a post on the sidebar and not in the post. The first item I needed to figure out was how do I hook into the WordPress system to make changes. WordPress has a well developed Plugin model. Additionally, the Sidebar \u00a0is populated by something called Widgets which can be implemented by Plugins. So I figured the first thing was to write a WordPress plugin that implemented a Sidebar widget.<\/p>\n

For the purpose of this post, I will assume that you have SSH access to your web host and thus able to add files to the WordPress installation without relying on the web UX.<\/p>\n

Creating a WordPress plugin consists of the following steps:<\/p>\n

    \n
  1. Create a new folder to host your plugin under your WordPress installation’s wp-content\/plugins<\/code> folder. I created a folder called wp-content\/plugins\/sidebarimage<\/code> for my new plugin.<\/span><\/li>\n
  2. Create a <plugin>.php<\/code> file to host your plugin code in this folder. I created a file called sidebarimage.php<\/code> in my wp-content\/plugins\/sidebarimage<\/code> folder.<\/li>\n
  3. Add a custom comment header to the php file so WordPress will recognize it as a plugin. The empty plugin file looks like this at this point:<\/li>\n<\/ol>\n
    <?php\r\n\/*\r\nPlugin Name: Sidebar Image\r\nPlugin URI: http:\/\/www.nramkumar.org\/tech\r\nDescription: Hides images from single posts and shows them in the sidebar\r\nVersion: 0.5\r\nAuthor: Ramkumar Natarajan\r\nAuthor URI: http:\/\/www.nramkumar.org\/tech\r\n*\/\r\n?><\/pre>\n
    Now that we have an empty plugin, the next step was to create an empty widget. This is very straight-forward as well and covered here:<\/a><\/p>\n
      \n
    1. Create a class that extends WP_Widget<\/code><\/span><\/li>\n
    2. Implement a constructor, form<\/code>, update<\/code> and widget<\/code> methods in the class<\/li>\n
    3. Register the widget by calling wp_register_sidebar_widget<\/code> method<\/li>\n<\/ol>\n
      At this point, the plugin php file looks like this:<\/p>\n
      <?php\r\n\/*\r\nPlugin Name: Sidebar Image\r\nPlugin URI: http:\/\/www.nramkumar.org\/tech\r\nDescription: Hides images from single posts and shows them in the sidebar\r\nVersion: 0.5\r\nAuthor: Ramkumar Natarajan\r\nAuthor URI: http:\/\/www.nramkumar.org\/tech\r\n*\/\r\n\r\nerror_reporting(E_ALL);\r\nadd_action('widgets_init', array('SidebarImage_Widget', 'register'));\r\n\r\nclass SidebarImage_Widget extends WP_Widget {\r\n    function SidebarImage_Widget() {\r\n        parent::WP_Widget(false, 'Sidebar Image Widget');\r\n    }\r\n\r\n    function form($instance) {\r\n    }\r\n\r\n    function update($new_instance, $old_instance) {\r\n        return $new_instance;\r\n    }\r\n\r\n    function widget($args) {\r\n        extract($args);\r\n\r\n        echo $before_widget;\r\n        echo $before_title . 'Snapshots' . $after_title;\r\n        echo $after_widget;\r\n    }\r\n\r\n    function register(){\r\n        wp_register_sidebar_widget(\r\n            'Sidebar_Image_Widget', \r\n            'Sidebar Image Widget', \r\n            array('SidebarImage_Widget', 'widget'));\r\n    }\r\n}\r\n?><\/pre>\n
      The error_reporting(E_ALL)<\/code> is used during development so any PHP errors are reported when you view your site. We register the widgets by hooking into the widgets_init<\/code> action and calling the register<\/code> method in our widget class. The register<\/code> method itself registers the widget class and its output method widget<\/code> by calling wp_register_sidebar_widget<\/code> method.<\/p>\n
      At this point, we now have our empty plugin and widget. You should now be able to see the new widget in the WordPress dashboard under Appearance\/Widgets. If you add this widget to a sidebar that gets displayed by your theme, you should see the widget show up with the title Snapshots. Note that we use $before_widget, $before_title, $after_title and $after_widget<\/code> to format the widget output as recommended by the WordPress codex.<\/p>\n","protected":false},"excerpt":{"rendered":"
      To follow-up from my previous post, I had a unique requirement for our personal blog which was to display images attached to a post on the sidebar and not in the post. The first item I needed to figure out was how do I hook into the WordPress system to make changes. WordPress has a…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[35,75,74,72],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-plugin","tag-sidebar","tag-widget","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":18,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":89,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/posts\/71\/revisions\/89"}],"wp:attachment":[{"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nramkumar.org\/tech\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}