Creación de plugin en Wordpress + CSS

Quizás te habrás planteado alguna vez la posibilidad de desarrollar un plugin para Wordpress, seguidamente habrás pensado en la gran dificultad para hacerlo, ni mucho menos si tienes nociones de PHP, JavaScript y CSS esta tarea será muy sencilla. Siempre teniendo la idea clara de lo que queremos hacer.

A continuación voy a explicar como crear un sencillo plugin para Wordpress, además le vamos a añadir una hoja de estilos muy simple. Evidentemente el código de ambos archivos se verá umentado si queremos que nuestro plugin tenga una funcionalidad mayor.

El plugin que vamos a desarrollar como ejemplo no es más que incluir en la parte del footer de nuestra web un pequeño texto, con un color de fondo.

¡Vamos a ello!

CREACIÓN DEL PLUGIN

Abrimos nuestro cliente FTP, en este caso Filezilla y nos vamos hasta la carpeta wp-content/plugins.

Nos creamos una carpeta, con el nombre de nuestro nuevo plugin, por ejemplo “Mi_Primer_Plugin” (se recomienda que no se utilicen espacios ni caracteres especiales).

Una vez creada la carpeta, con el mismo nombre, creamos el archivo .php(dentro de la carpeta anteriormente creada), que contendrá el siguiente código:

/*
Plugin Name: Plugin Prueba
Description: Plugin de Prueba
Author: Jesús Palacios
Version: 1.0.0
*/
function my_function() {
    echo '<p class="parr">Este es el texto del footer de mi página</p>';
}
add_action('wp_footer', 'my_function');

De forma de comentarios escribimos una pequeña información sobre nuestro plugin, esto lo tomará Wordpress para mostrarlo de información en su sistema.

Creamos una función, le ponemos un nombre cualesquiera, dentro de la función hacemos un echo y entre comillas simples, incluimos la linea de html. El atributo p llevará la clase parr, que más adelante utilizaremos.

Finalmente con la función add_action “agregamos” la nueva función creada a la parte de inferior de nuestra web, wp_footer.

ENLACE DE NUESTRO PLUGIN CON EL CSS

Nos dirigimos hacia el archivo functions.php, situada en: wp-content/themes/nombre del tema, lo abrimos

function add_estilos ()  { 
wp_enqueue_style ('add_estilos' , get_template_directory_uri () . './../../plugins/plugin-prueba/css/style.css'); 
}

add_action (  'wp_enqueue_scripts' ,  'add_estilos'  );

Creamos una nueva función llamada add_estilos.

Dentro, usando la función wp_enqueue_style introducimos el nombre de la nueva función entre comillas simples y después separado por una coma la dirección donde se encuentra la hoja de estilos, de esta forma nos aseguramos de agregar o poner en cola un archivo CSS para nuestra página Wordpress.

Recomendación: se recomienda poner la hoja de estilos del plugin, en la carpeta del mismo, es decir si nuestro plugin se llama “mi_plugin” pues la ruta donde debe de estar la hoja de estilo es en: ‘./mi_plugin/css.style.css’.

Con la función add_action agregamos la función creada anteriormente, de esta forma enlazará con nuestro css correctamente.

EDICION DEL CSS

En la carpeta de nuestro plugin creamos un archivo llamado style.css (esta extension indica que el archivo es una hoja de estilos.

En este caso vamos a poner el fondo del párrafo de color negro y el texto centrado.

p.parr{
    background-color: #000000;
    text-align: center;
}

Más información

Si quieres añadir un menu de administración de tu plugin te recomiendo esta documentación