Programming your own WordPress plugin - that sounds complicated and time-consuming. But it doesn't have to be, on the contrary: It results in benefits that quickly outweigh the work.
Normally you make changes to your website in theme files like functions.php or header.php. However, updates can overwrite these files. If you outsource the adjustments to a plugin instead, they remain unaffected by theme updates. Another advantage: If errors occur when displaying the website, outsourcing code snippets to plugins makes troubleshooting easier because they can be easily activated and deactivated.
Installing any additional (external) plugin can also be a security risk. Those plugins that insert code into the template, for example for Google Analytics tracking code, become obsolete with custom plugins. Last, it's good training: programming your own plugin helps to understand the code of WordPress even better.
Examples of useful code snippets for WordPress
What could you implement with your own plugin? Here are a few examples for inspiration:
- Tracking via Google Analytics, Matomo and Co.
- Favicons
- Preloads
- Custom Post Types
- API deactivation
- Disabling frontend resources like JavaScript for emojis
You don't even have to write the code snippets yourself, but can copy them from tutorials and developer forums or have them generated individually by various tools.
Preparations for programming your own WordPress plugin
To start creating your own WordPress plugin, all you need is a working WordPress instance, for example on a web or local server, and any text editor. In principle, any editor installed with the operating system will work, but they usually lack syntax highlighting. Popular, free alternatives with syntax highlighting are Brackets, Notepad++, or the extensive development environment Visual Studio Code from Microsoft.
Before you start programming your plugin, you must first create a folder in your WordPress installation. Navigate to the folder /wp-content/plugins and create a new folder with a name of your choice. It is important that you create a PHP file with the same name in this folder. The path to the file could look like this: /wp-content/plugins/code-snippets/code-snippets.php.
The code of any WordPress plugin should start like this:
<?php
/**
* Plugin Name: Code-Snippets
* Description: Adds new features to WordPress
* Author: Name
* Version: 1.0
*/
?>
This way you store information about name, description, author, and version number.
Application examples
Example 1: Code snippets to extend or modify the WordPress functions.
Now you can insert code snippets into the created PHP file, which you would have otherwise written into the functions.php file of your theme. For additional functions, you don't necessarily have to create a new plugin: You can also combine several functions in one plugin. If it becomes too complex or errors occur, we recommend splitting it up into several plugins.
For example, the lines below ensure that the <title> tag always contains the current year. This way, you don't have to manually adjust it every year. This is especially useful for timeless content like listicles or leaderboards.
<?php
/**
* Plugin Name: Code-Snippets
* Description: Adds new features to WordPress
* Author: Name
* Version: 1.0
*/
//Set the current year in the title by placing the variable {{year}} in the title
function replace_year_in_title($title) {
$current_year = date('Y');
return str_replace('{{year}}', $current_year, $title);
}
add_filter('the_title', 'replace_year_in_title');
//Function 2
//Function 3
?>
Example 2: Code snippets for head, body, and footer
Theme updates can overwrite your own customizations if you have directly edited the header.php of the theme. With a plugin, you can easily make changes to the head, body, and footer of the frontend source code without this risk.
With the following code structure you can determine whether your snippet should be executed in the HTML head (for example for favicons), HTML body (for example for <noscript> tags), or after the HTML footer:
<?php
/**
* Plugin Name: Code snippets for head, body and footer
* Description: Extends Head, Body and Footer with code snippets
* Author: Name
* Version: 1.0
*/
add_action('wp_head', 'my_plugin_head_wp_head');
function my_plugin_head_wp_head(){
//START HEAD
?>
<!-- Insert head code snippets here -->
<?php //END HEAD
}
add_action('wp_body_open', 'my_plugin_body_wp_body_open');
function my_plugin_body_wp_body_open(){
//START BODY
?>
<!-- Insert body code snippets here -->
<?php //END BODY
}
add_action('wp_footer', 'my_plugin_footer_wp_footer');
function my_plugin_footer_wp_footer(){
//START FOOTER
?>
<!-- Insert footer code snippets here -->
<?php //END FOOTER
}
?>
In the following code example, we have inserted exemplary HTML code into the <head>, which will be executed on every WordPress page in the frontend thanks to the plugin.
The code shown below demonstrates the manual installation of favicons in different resolutions.
Similarly, you can paste your HTML code in the <body> or <footer>.
<?php
/**
* Plugin Name: Code snippets for head, body and footer
* Description: Extends Head, Body and Footer with code snippets
* Author: Name
* Version: 1.0
*/
add_action('wp_head', 'my_plugin_head_wp_head');
function my_plugin_head_wp_head(){
//START HEAD
?>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="/favicons/favicon-256x256.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<?php //END HEAD
}
add_action('wp_body_open', 'my_plugin_body_wp_body_open');
function my_plugin_body_wp_body_open(){
//START BODY
?>
<!-- Insert body code snippets here -->
<?php //END BODY
}
add_action('wp_footer', 'my_plugin_footer_wp_footer');
function my_plugin_footer_wp_footer(){
//START FOOTER
?>
<!-- Insert footer code snippets here -->
<?php //END FOOTER
}
?>