{"id":661,"date":"2020-04-04T23:00:38","date_gmt":"2020-04-04T23:00:38","guid":{"rendered":"https:\/\/www.antpace.com\/blog\/?p=661"},"modified":"2025-08-25T14:03:45","modified_gmt":"2025-08-25T14:03:45","slug":"how-to-create-a-wordpress-plugin","status":"publish","type":"post","link":"https:\/\/www.antpace.com\/blog\/how-to-create-a-wordpress-plugin\/","title":{"rendered":"Create a WordPress plugin – How to"},"content":{"rendered":"

Distributing software to app and plugin markets is a great way to gain organic traffic. Last year I submitted BJJ Tracker<\/a> to the Google Play store<\/a> as a Progressive Web App. Since then, I get signups every few days – with zero marketing effort.<\/p>\n

I created a WordPress plugin<\/a> for SplitWit<\/a>, to grow its reach in a similar way. SplitWit helps run A\/B experiments on the web. A JavaScript snippet needs to\u00a0 be added to your code for it to work. This plugin injects the code snippet automatically.<\/p>\n

Here is the process I took to develop and submit it to the WordPress plugin directory.<\/p>\n

Plugin code<\/h2>\n

Since this is such a simple plugin, all I needed was one PHP file, and a readme.txt file. “At its simplest, a WordPress plugin is a PHP file with a WordPress plugin header comment.<\/a>”<\/p>\n

The header comment defines meta-data:<\/p>\n

\/*\n\nPlugin Name: SplitWit\nPlugin URI: https:\/\/www.splitwit.com\/\nDescription: This plugin automatically adds the SplitWit code snippet to your WordPress site. SplitWit lets you create a variation of your web page using our visual editor. It splits traffic between the original version and your variation. You can track key metrics, and let SplitWit determine a winner. No code needed. Go to SplitWit<\/a> to register for free.\nAuthor: SplitWit\nVersion: 1.0\nLicense: GPLv2+\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.txt\n\n*\/\n<\/pre>\n
My PHP code defines six functions, uses four action hooks, and one filter hook.<\/p>\n
The first function injects the SplitWit snippet code into the WordPress website’s header:<\/p>\n
function splitwit_header_code(){\n\t\/\/inject SplitWit code snippet\n\n\t$splitwit_project_id = get_option('splitwit_project_id');\n\n\tif($splitwit_project_id){\n\t\twp_enqueue_script( 'splitwit-snippet', 'https:\/\/www.splitwit.com\/snippet\/'.$splitwit_project_id.'.js' );\n\t}\n}\nadd_action( 'wp_head', 'splitwit_header_code', 1 );\n<\/pre>\n
Another defines the WordPress plugin’s menu page:<\/p>\n
function splitwit_plugin_menu_page() { ?>\n\n\t<div>\n\t\t<h1>SplitWit Experiments<\/h1>\n\t\t<p>This plugin automatically adds the <a href=\"https:\/\/www.splitwit.com\" target=\"_blank\">SplitWit<\/a> code snippet to your WordPress site. <a href=\"https:\/\/www.splitwit.com\" target=\"_blank\">SplitWit<\/a> lets you create a variation of your web page using our visual editor. It splits traffic between the original version and your variation. You can track key metrics, and let SplitWit determine a winner. No code needed.\n\t\t<\/p>\n\t\t<p>You'll need to create an account at SplitWit.com - it's free. After signing up, you can create a new SplitWit project for your website. Find that project's ID code, and copy\/paste it into this page.<\/p>\n\n\t\t<form method=\"post\" action=\"options.php\">\n\t\t\t<?php settings_fields( 'splitwit_settings_group' ); ?>\n\t\t\t<input style=\"width: 340px;display: block; margin-bottom: 10px;\" type=\"text\" name=\"splitwit_project_id\" value=\"<?php echo get_option('splitwit_project_id'); ?>\" \/>\n\t\t\t<input type=\"submit\" class=\"button-primary\" value=\"Save\" \/>\n\t\t<\/form>\n\t<\/div>\n\n<?php }\n<\/pre>\n
I add that menu page to the dashboard:<\/p>\n
function splitwit_plugin_menu() {\n\tadd_options_page('SplitWit Experiments', 'SplitWit Experiments', 'publish_posts', 'splitwit_settings', 'splitwit_plugin_menu_page');\n}\nadd_action( 'admin_menu', 'splitwit_plugin_menu' );\n<\/pre>\n
And link to it in the Settings section of the dashboard:<\/p>\n
function splitwit_link( $links ) {\n     $links[] ='<a href=\"' . admin_url( 'options-general.php?page=splitwit_settings' ) .'\">Settings<\/a>';\n    return $links;\n}\nadd_filter('plugin_action_links_'.plugin_basename(__FILE__), 'splitwit_link');\n<\/pre>\n
When the SplitWit code snippet is injected into the website’s header, it needs to reference a project ID. I register that value from the menu page:<\/p>\n
function splitwit_settings(){\n\tregister_setting('splitwit_settings_group','splitwit_project_id','string');\n}\nadd_action( 'admin_init', 'splitwit_settings' );\n<\/pre>\n
If the project ID value has not been defined, I show a warning message at the top of the dashboard:<\/p>\n
function splitwit_warning(){\n  if (!is_admin()){\n     return;\n  }\n\n  $splitwit_project_id = get_option(\"splitwit_project_id\");\n  if (!$splitwit_project_id || $splitwit_project_id < 1){\n    echo \"<div class='notice notice-error'><p><strong>SplitWit is missing a project ID code.<\/strong> You need to enter <a href='options-general.php?page=splitwit_settings'>a SplitWit project ID code<\/a> for the plugin to work.<\/p><\/div>\";\n  }\n}\nadd_action( 'admin_notices','splitwit_warning');\n<\/pre>\n
The readme.txt defines additional meta-data<\/a>. Each section corresponds to parts of the WordPress plugin directory page. The header section is required, and includes some basic fields that are parsed to the plugin page UI.<\/p>\n
=== SplitWit ===\nContributors: SplitWit\nPlugin Name: SplitWit\nPlugin URI: https:\/\/www.splitwit.com\nTags: split test, split testing, ab testing, conversions\nRequires at least: 2.8\nTested up to: 5.3.2\nStable tag: 1.0\n\nOptimize your website for maximum convertibility. This plugin lets you use SplitWit to run experiments on your WordPress website.\n<\/pre>\n
I also added sections for a long description and installation instructions. Later, I included a screenshots section (see Subversion repo<\/a>).<\/p>\n
Submit for review<\/h2>\n
Plugin zip files can be uploaded to WordPress.org<\/a>.\u00a0 Plugins can also be distributed<\/a> to WordPress users without this step – but having it listed in the WordPress directory lends credibility and visibility. After my initial submission, I received an email indicating issues with my code and requesting changes. The changes were simple: “use wp_enqueue commands” and “document use of an external service”.<\/p>\n
Originally, my “splitwit_header_code()” function include the SplitWit JS snippet directly as plain text. I changed it to use the built-in function “wp_enqueue_script()”.<\/p>\n
\/\/wrong:\necho '<script type=\"text\/javascript\" async src=\"https:\/\/www.splitwit.com\/snippet\/'.$splitwit_project_id.'.js\"> <\/script>';\n\n\/\/correct:\nwp_enqueue_script( 'splitwit-snippet', 'https:\/\/www.splitwit.com\/snippet\/'.$splitwit_project_id.'.js' );\n\n<\/pre>\n
Next, they wanted me to disclose the use of SplitWit, the service that powers the plugin. I added this to my readme.txt:<\/p>\n
This plugin relies on SplitWit, a third-party service. The SplitWit service adds code to your website to run A\/B experiments. It also collects data about how users interact with your site, based on the metrics you configure.<\/em><\/p><\/blockquote>\n
After making these changes, I replied back with an updated .zip. A few days later I received approval. But, that wasn’t the end\u00a0 – I still needed to upload my code to a WordPress.org hosted SVN repository<\/a>.<\/p>\n
Subversion Repo<\/h2>\n
I’ve used Git for versioning my entire career. I had heard of SVN, but never used it. What a great opportunity to learn!<\/p>\n
The approval email provided me with a SVN URL<\/a>. On my local machine, I created a new folder, “svn-wp-splitwit”. From a terminal, I navigated to this directory and checked out the pre-built repo:<\/p>\n
svn co https:\/\/plugins.svn.wordpress.org\/splitwit<\/pre>\n
I added my plugin files (readme.txt and splitwit.php) to the “trunk” folder. This is where the most up-to-date, ready-to-distribute, version of code belongs.<\/p>\n
In the “tags” folder, I created a new directory called “1.0” and put a copy of my files there too – for the sake of version control. This step is completely optional and is how SVN handles revisions.<\/p>\n
In the assets folder I included my banner, icon, and screenshot files. The filenames follow as prescribed by WordPress.org<\/a>. I made sure to reference the screenshot files in my readme.txt file, under a new “Screenshots” section.<\/p>\n
Finally, I pushed my code back up to the remote:<\/p>\n
 svn ci -m \"Initial commit of my plugin.\"<\/pre>\n
You can now find my plugin in the WordPress.org plugin directory. SplitWit is available for a free trial. Give it a try, and let me know what you think.<\/p>\n
 <\/p>\n
\n
 <\/p>\n
Pro-tip: Some WordPress setups won’t let you to install plugins from the dashboard with out providing FTP credentials, including a password. If you use a key file, instead of a password, this is a roadblock.<\/p>\n
\"Install
Not everyone uses a password to connect to their server.<\/figcaption><\/figure>\n
You can remedy this by defining the file system connection method in your functions.php file:<\/p>\n
define( 'FS_METHOD', 'direct' );<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Distributing software to app and plugin markets is a great way to gain organic traffic. Last year I submitted BJJ Tracker to the Google Play store as a Progressive Web App. Since then, I get signups every few days – with zero marketing effort. I created a WordPress plugin for SplitWit, to grow its reach … <\/p>\n
Continue reading “Create a WordPress plugin – How to”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[90,94,100,101,137,143],"class_list":["post-661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-organic-traffic","tag-plugin","tag-progressive-web-app","tag-pwa","tag-web-app","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/comments?post=661"}],"version-history":[{"count":1,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/661\/revisions"}],"predecessor-version":[{"id":3170,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/661\/revisions\/3170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media\/3169"}],"wp:attachment":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media?parent=661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/categories?post=661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/tags?post=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}