Cómo crear tu propio plugin de WordPress desde cero: botón básico de WhatsApp 1.0

Si alguna vez has querido aprender a crear plugins para WordPress, este tutorial es un excelente punto de partida. No vamos a empezar con algo complicado, sino con una práctica sencilla, útil y fácil de entender: crear un plugin básico que muestre un botón de WhatsApp en tu sitio web.

La idea de este primer tutorial es que entiendas la estructura mínima de un plugin, cómo crear el archivo, dónde colocarlo, cómo activarlo y cómo hacer que funcione con unas pocas líneas de código. Más adelante, este mismo plugin podrá evolucionar con nuevas funciones, pero por ahora nos enfocaremos en lo esencial.

¿Qué vas a aprender en este tutorial?

En esta práctica aprenderás:

  • Qué es un plugin de WordPress
  • Cómo crear uno desde cero
  • Cómo hacer que WordPress lo detecte
  • Cómo agregar código que muestre un botón fijo de WhatsApp
  • Qué hace cada parte del código

No necesitas ser programador avanzado. Basta con tener acceso a tu instalación de WordPress y ganas de aprender.

¿Qué es un plugin de WordPress?

Un plugin es un pequeño programa que se añade a WordPress para agregar funciones nuevas sin modificar directamente el tema ni los archivos principales del sistema.

Gracias a los plugins puedes añadir formularios, botones, galerías, seguridad, SEO, tiendas en línea y prácticamente cualquier funcionalidad que imagines.

Lo mejor es que tú también puedes crear tus propios plugins, incluso con algo tan simple como un botón flotante.

¿Qué vamos a crear?

Vamos a crear un plugin muy sencillo que hará esto:

  • mostrará un botón de WhatsApp en la esquina inferior de la página
  • al hacer clic, abrirá una conversación con un número configurado dentro del código
  • tendrá un diseño básico para que sirva como primera práctica

No tendrá panel de administración todavía, ni opciones avanzadas, ni estadísticas. Eso lo podremos construir después. Por ahora el objetivo es aprender la base.

Paso 1: crear la carpeta del plugin

Primero entra a tu instalación de WordPress y ve a esta ruta:

/wp-content/plugins/

Dentro de la carpeta plugins, crea una nueva carpeta con el nombre de tu plugin. Por ejemplo:

boton-whatsapp-basico

Esa carpeta contendrá los archivos de tu plugin.

Paso 2: crear el archivo principal del plugin

Ahora, dentro de esa carpeta, crea un archivo llamado:

boton-whatsapp-basico.php

Ese será el archivo principal que WordPress leerá para reconocer el plugin.

Abre ese archivo y coloca este código:

<?php
/*
Plugin Name: Botón WhatsApp Básico
Plugin URI: https://operslinux.com/
Description: Un plugin básico de práctica para mostrar un botón de WhatsApp en WordPress.
Version: 1.0
Author: OpersLinux
Author URI: https://operslinux.com/
License: GPL2
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

¿Qué significa este código?

Esta primera parte se conoce como la cabecera del plugin. Es la información que WordPress usa para mostrarlo en el panel de administración.

Explicación rápida:

  • Plugin Name: nombre que aparecerá en WordPress
  • Plugin URI: enlace relacionado con tu plugin o tu sitio
  • Description: descripción breve de lo que hace
  • Version: versión actual
  • Author: autor del plugin
  • Author URI: sitio del autor
  • License: licencia del código

Y esta parte:

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

sirve para evitar que alguien ejecute el archivo directamente desde el navegador. Es una pequeña medida básica de seguridad muy usada en plugins de WordPress.

Paso 3: agregar la función del botón de WhatsApp

Debajo de ese código, vamos a agregar la función que mostrará el botón en el sitio.

Pega esto:

function operslinux_boton_whatsapp() {
	$numero = '5213312345678';
	$mensaje = 'Hola, quiero más información';

	$url = 'https://wa.me/' . $numero . '?text=' . urlencode($mensaje);

	echo '<a href="' . esc_url($url) . '" target="_blank" style="
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: #25D366;
		color: white;
		padding: 12px 18px;
		border-radius: 50px;
		text-decoration: none;
		font-weight: bold;
		z-index: 9999;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	">
		WhatsApp
	</a>';
}

add_action('wp_footer', 'operslinux_boton_whatsapp');

¿Qué hace este código?

Vamos por partes.

1. Creamos una función

function operslinux_boton_whatsapp() {

Aquí estamos creando una función personalizada. Dentro de ella va el código del botón.

2. Definimos el número y el mensaje

$numero = '5213312345678';
$mensaje = 'Hola, quiero más información';
  • $numero es el número de WhatsApp al que enviarán el mensaje
  • $mensaje es el texto que aparecerá automáticamente al abrir el chat

Importante: el número debe ir con clave de país y sin espacios ni símbolos.
Por ejemplo, para México puede verse así:

5213312345678

3. Construimos la URL de WhatsApp

$url = 'https://wa.me/' . $numero . '?text=' . urlencode($mensaje);

Esta línea crea el enlace que abrirá WhatsApp.

  • https://wa.me/ es la base oficial para abrir chats
  • se concatena con el número
  • luego se añade el mensaje
  • urlencode() convierte el texto para que funcione bien dentro de una URL

Por ejemplo, el resultado sería algo parecido a:

https://wa.me/5213312345678?text=Hola%2C+quiero+m%C3%A1s+informaci%C3%B3n

4. Mostramos el botón en pantalla

echo '<a href="' . esc_url($url) . '" target="_blank" style="...">WhatsApp</a>';

Aquí imprimimos un enlace HTML con estilo en línea.

  • href contiene la URL del chat
  • target="_blank" hace que se abra en una pestaña nueva
  • esc_url() ayuda a sanitizar la URL
  • dentro del style definimos el diseño visual del botón

5. Lo insertamos en el sitio

add_action('wp_footer', 'operslinux_boton_whatsapp');

Esta línea le dice a WordPress:

“ejecuta esta función al final del sitio, justo antes de cerrar el footer”.

Gracias a eso, el botón aparecerá en todas las páginas del sitio sin tener que editar el tema.

Código completo del plugin

Para que lo tengas listo, este es el archivo completo:

<?php
/*
Plugin Name: Botón WhatsApp Básico
Plugin URI: https://tusitio.com/
Description: Un plugin básico de práctica para mostrar un botón de WhatsApp en WordPress.
Version: 1.0
Author: Tu Nombre
Author URI: https://tusitio.com/
License: GPL2
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function operslinux_boton_whatsapp() {
	$numero = '5213312345678';
	$mensaje = 'Hola, quiero más información';

	$url = 'https://wa.me/' . $numero . '?text=' . urlencode($mensaje);

	echo '<a href="' . esc_url($url) . '" target="_blank" style="
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: #25D366;
		color: white;
		padding: 12px 18px;
		border-radius: 50px;
		text-decoration: none;
		font-weight: bold;
		z-index: 9999;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	">
		WhatsApp
	</a>';
}

add_action('wp_footer', 'operslinux_boton_whatsapp');

Paso 4: subir el plugin a WordPress

Ya con el archivo listo, tienes dos formas de instalarlo.

Opción 1: desde el administrador de archivos o FTP

Sube la carpeta boton-whatsapp-basico a:

/wp-content/plugins/

Opción 2: comprimirlo en ZIP

Puedes comprimir la carpeta en .zip y subirla desde:

WordPress > Plugins > Añadir nuevo > Subir plugin > instalar Ahora

Paso 5: activar el plugin

Ahora entra al panel de WordPress:

Plugins > Plugins instalados

Ahí deberías ver tu plugin con el nombre:

Botón WhatsApp Básico

Haz clic en Activar.

Si todo salió bien, al entrar a tu sitio verás el botón flotando en la parte inferior derecha.

¿Por qué este tutorial es bueno para empezar?

Porque con este ejemplo ya aprendiste cosas muy importantes:

  • que un plugin puede existir con un solo archivo PHP
  • que WordPress detecta plugins por su cabecera
  • que puedes usar funciones y hooks
  • que puedes mostrar contenido en el frontend sin tocar el tema
  • que un plugin pequeño puede resolver una necesidad real

Y eso es exactamente lo que necesita un principiante: entender la lógica básica antes de complicarse con configuraciones más avanzadas.

Limitaciones de esta primera versión

Este plugin funciona, pero sigue siendo una versión muy básica. Por ejemplo:

  • el número está escrito directamente en el código
  • el mensaje también está fijo
  • no tiene icono real de WhatsApp
  • no tiene panel de opciones
  • no permite cambiar posición, color o texto desde WordPress

Pero eso está bien, porque este artículo busca enseñar la base. En próximos tutoriales, este mismo plugin puede crecer y convertirse en algo mucho más completo.

Recomendaciones para seguir practicando

Una vez que entiendas este ejemplo, puedes intentar pequeñas mejoras por tu cuenta, como:

  • cambiar el texto del botón
  • usar otro color
  • moverlo a la izquierda
  • agregar un icono
  • hacer que solo aparezca en ciertas páginas

Cada pequeño cambio te ayudará a familiarizarte con PHP, HTML, CSS y WordPress.

Conclusión

Crear tu propio plugin de WordPress no tiene por qué ser complicado. De hecho, una de las mejores formas de aprender es empezar con algo pequeño, útil y fácil de probar, como este botón de WhatsApp.

Con un solo archivo aprendiste cómo WordPress reconoce un plugin, cómo se ejecuta una función dentro del sitio y cómo añadir una funcionalidad visible sin modificar el tema.

Este es solo el comienzo. A partir de aquí, puedes seguir mejorando el plugin paso a paso y convertir esta práctica sencilla en un desarrollo mucho más profesional.

Entradas relacionadas

Deja un comentario