DS Log

In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.

Monday, July 8, 2024

How to make a WordPress plugin?

How to create a WordPress plugin? It's easy! All we need is one directory with one file and a few lines of code. With this tutorial, you will learn how to create a WordPress plugin that you can use as a shortcode.

In the '/wp-content/plugins/' directory, we create a 'dsijak' directory, and when we refresh the view in 'admin/plugins', nothing happens.

It seems that it is important that the directory and file have the same name. So, we create '/wp-content/plugins/dsijak/dsijak.php' and insert the code: (I have translated the text from Croatian and corrected the grammar.)

<?php
/**
 * Plugin Name: Dsijak 
 * Plugin URI: https://damir.ioox.studio
 * Description: Tutorijal za 'blog.ioox.studio'.
 * Version: 0.1
 * Text Domain: dsijak-wordpress-plugin-demo
 * Author: Damir Šijaković
 * Author URI: https:damir.//ioox.studio
 */

And now the plugin is recognized in the dashboard. So activate it right away.

shortcode

Shortcode allows us to transfer data to a visual block editor or a page builder via the plugin. So we'll transfer only plain HTML for testing. Here, for example, you can create an HTML module (slider, gallery...) without messing with the theme files.

Nastavljamo ‘/wp-content/plugins/dsijak/dsijak.php’ sa ovim kodom:

function dsijak_pluginDemo() 
{    
    return 
    <<<EOT
    <h1>Hello dodatak!</h1>
    <p>Hello html tekst!</p>
    EOT;
}

add_shortcode('dsijak-shortcode', 'dsijak_pluginDemo');

The code is understandable. The 'add_shortcode' function sets the 'dsijak-shortcode' shortcode and links it to 'dsijak_pluginDemo'. The return of the 'dsijak_pluginDemo' function is what is displayed at the place where the shortcode is inserted.

Finally, insert the shortcode into the block:

And we get the output of our plugin on the page:

The entire plugin code looks like this:

<?php
/**
 * Plugin Name: Dsijak 
 * Plugin URI: https://damir.ioox.studio
 * Description: Tutorijal za 'blog.ioox.studio'.
 * Version: 0.1
 * Text Domain: dsiajk-wordpress-plugin-demo
 * Author: Damir Šijaković
 * Author URI: https:damir.//ioox.studio
 */

function dsijak_pluginDemo() 
{    
    return 
    <<<EOT
    <h1>Hello dodatak!</h1>
    <p>Hello html tekst!</p>
    EOT;
}

add_shortcode('dsijak-shortcode', 'dsijak_pluginDemo');

posted by damirs @ July 08, 2024