Creating a Custom Plugin

In this tutorial we will:

  1. Create a blank Plugin
  2. Add a custom field
  3. Add a Pugpig helper function
  4. Add a Pugpig hook

Step 1: Create a Plugin

Once we've got a WordPress Connector set up we can create a custom plugin. Custom plugins are useful for creating a custom user interface, defining new fields for your template to use, implementing Pugpig hooks and helper functions, and much much more. It is good practice to create a new module for every new project we are working on, which will contain the extra custom functionality we need for the project in question.

A WordPress Plugin in its most basic form is a php file with initial comments defining it to WordPress. All WordPress plugins are stored in .../wp-content/plugins/ folder. 

The file should be placed in a new folder following this naming convention:

Folder name: pugpig-new-custom-plugin
File name:   pugpig_new_custom_plugin.php

Open a new php file and copy the comment below into the top of the file.

Plugin Name: Pugpig - New Custom Plugin
Plugin URI:
Description: Custom extensions for Pugpig for MyAPP
Version: 0.0.1
Author: John Doe
Author URI:

Save the file in to your .../wp-content/plugins/pugpig-new-custom-plugin folder. All though your plugin has no practical function, yet, you can now view your plugin under the 'Plugins' tab in your WordPress instance.

Step 2: Add a Custom Field

WordPress has the ability to add custom fields. These can be very useful when creating a custom template. One very useful 3rd party plugin is Meta Box. This makes it easier for adding custom fields via 'meta boxes' on the edit posts page.

Remember to download Meta Box, add it to your .../wp-content/plugins/ folder and activate it on your WordPress instance.

A custom field can be define in your mycustomplugin.php file or in a helper file such as 'fields.php'. If you use a helper file remember to include it in your mycustomplugin.php file.

Below is an example of a custom field pugpig_background_image being added.

global $myapp_meta_boxes;
$myapp_meta_boxes = array(); 

$myapp_meta_boxes[] = array(
'id' => 'page_config',
'title' => 'Page Setup',
'pages' => array( 'post' ),
'context' => 'normal',
'priority' => 'high',
'fields' => array(
'name' => 'Background Image',
'id' => 'pugpig_background_image',
'type' => 'image_advanced',

Several custom fields and meta boxes can be added in this fashion. Once you are happy with your list of custom fields you need to register your metaboxes.

function myapp_register_meta_boxes() {
  if ( !class_exists( 'RW_Meta_Box' ) )
  global $myapp_meta_boxes;   $post_id = "";
  if (isset($_GET['post'])) {
     $post_id = $_GET['post'];
  } else if (isset($_POST['post_ID'])) {
     $post_id = $_POST['post_ID'];
  }   new RW_Meta_Box($myapp_meta_boxes[0]); } add_action( 'admin_init', 'myapp_register_meta_boxes' );

admin_init is a built in hook to WordPress. It is the very first hook that WordPress triggers when a user accesses the admin area. More information can be found here.

You should now be able to see the meta box 'Page Setup' on you post edit page in your WordPress instance.

Step 3: Add a Helper Function

Pugpig has several built in helper functions to help you with your app. A full list of Pugpig hooks can be found here. We will add one such helper function to the plugin.

The Pugpig helper function pugpig_get_custom_field_manifest_item($post, 'custom_field')  outputs a path to include in your manifest for a custom field. Below is an example of the output for the custom field pugpig_background_image.

# Custom Meta Field:pugpig_background_image 

Step 4: Add a Pugpig Hook

Pugpig has several built in hooks to help you with your app. A full list of Pugpig helper functions can be found here. We will add one such hook to the plugin.

One of Pugpig's built in hooks is pugpig_extra_manifest_items. This adds extra items, such as images, to the manifest. In our example below we use the Pugpig helper function pugpig_get_custom_field_manifest_item to add pugpig_background_image to the manifest.

add_filter('pugpig_extra_manifest_items', 'add_extra_items', 10,2);
function add_extra_items($output, $post) {
$output .= pugpig_get_custom_field_manifest_item($post,

return $output;

You should now be able to see pugpig_background_image in your manifest if you add a background image to a post. There is a link to the manifest of the right hand side of the post page

An extension module can contain all sorts of functionality applicable to the project.

In particular, we might want to use it to modify the following elements:


Add hooks to modify the appearance/style of the flatplan. Such functions might involve sorting, styling or text editing. See Customise the Flatplan


Specify what should be included/excluded in the manifest, such as assets that are not included by default. See Generate HTML5 Manifests

OPDS Atom Feed

Edit the elements returned in the feed, such as post author, summary, categories, etc. See Customise the ATOM Feed

Post Types

When the default content types do not suit our purposes, we can create our own post types, add new meta-boxes, decide which content types to display in the administration menu, etc. See Create Custom Post Types


Further information in about Hooks in WordPress can be found in their codex.


Have a look at Create a Custom Theme guide.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk