Hola, hoy vamos a aprender cómo crear un tema para WordPress usando PHP + HTML + CSS + Javascript y no vamos a morir en el intento.
Vamos a crear una base sobre la que podremos construir distintos temas, usaremos además Boostrap como librería de diseño.
Primero tenemos que tener instalado WordPress en nuestra máquina, en mi caso uso un Docker.
Ahora vamos a empezar a crear el tema, para ello vamos a crear la carpeta de nuestro tema dentro de wp-content/themes/ en mi caso la llamaré customteme
Ahora vamos a añadir los distintos archivos base sobre los que haremos el tema.
Creamos style.css con el siguiente contenido:
/*
Theme Name: Mi Tema Personalizado
Description: Un tema personalizado para mi sitio.
Version: 1.0
Author: Tu Nombre
*/
/* Estilos globales pueden ir aquí */
body {
background-color: #f8f9fa;
color: #343a40;
}
.container {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #007bff;
}
.text-muted {
font-size: 14px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
Aquí iremos añadiendo los distintos estilos de nuestro tema.
Ahora vamos a crear el archivo index.php
<?php get_header(); ?>
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<article <?php post_class('mb-5'); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="text-muted"><?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="btn btn-primary">Read more</a>
</article>
<?php
endwhile;
else :
?>
<p>No posts found</p>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Hemos creado un ejemplo, vamos utilizando distintos hooks y acciones disponibles de WordPress para mostrar las distintas secciones. No es complicado, solo debemos colocar cada elemento donde corresponda (aquí tienes una lista de todos ellos https://developer.wordpress.org/plugins/hooks/)
Ahora creamos el header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Y footer.php
<?php wp_footer(); ?> </body> </html>
Finalmente, vamos a crear el archivo de funciones functions.php y en el que añadiremos los estilos de nuestro tema y boostrap
<?php
function customtheme_enqueue_styles() {
wp_enqueue_style('customtheme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'customtheme_enqueue_styles');
function enqueue_bootstrap() {
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');
Y ahora vamos a nuestro WordPress y veremos que aparece un tema sin activar y sin foto.
Lo activamos y podemos ver el resultado:
No es nada del otro mundo, pero es una base que podemos utilizar para mejorar el tema y crear uno nuevo.
Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.
2 comentarios en «Como crear un tema para WordPress y no morir en el intento»