Comenzar con WordPress

1

Desarrollo de Temas Personalizados en WordPress

2

Programación de Temas Personalizados en WordPress

3

Gestión de Contenido con WordPress: Características y Funcionalidades

4

Temas de WordPress: Diseño y Personalización Avanzada

5

Estructura de Archivos en Plantillas HTML y CSS

6

Manejo de Hooks y Filters en Desarrollo PHP

7

Funciones Personalizadas para Manejar Archivos SS y JS en HTML

8

Instalación de un entorno local PHP en Windows

9

Configuración Local de WordPress en XAMPP

10

Gestión de Comentarios en WordPress: Bloqueo y Aprobación

11

Ajustes y Gestión de Usuarios en WordPress

12

Gestión de Roles y Permisos en WordPress

Armar estructura del Theme

13

Creación de Temas Personalizados en WordPress: Paso a Paso

14

"Registro y uso de librerías CSS en proyectos web"

15

Creación de Funciones y Especificadores en PHP

16

Instalación de Themes en WordPress: Repositorio y Método Manual

Contruir vistas

17

Creación de Menús en WordPress: Registro y Diseño Personalizado

18

Generación de Widgets Personalizados en WordPress

19

Creación de Widgets en WordPress Usando PHP

20

Tipos de Contenido Personalizado en WordPress

21

Programación Básica en PHP con Bases de Datos

22

Sistema de plantillas en WordPress: crea y personaliza tus páginas

23

Generación de Vistas en PHP para Entradas de Blog

24

Creación de Páginas Estáticas con WordPress

Personalizar el Loop de WordPress

25

Programación Orientada a Objetos en Java: Conceptos Clave

26

Programación de Cliclo While en PHP

Extra

27

Mantenimiento de Plugins en WordPress: Buenas Prácticas

28

Instalación de Plugins en WordPress: Tres Métodos Efectivos

29

Creación de un Plugin de Modo Oscuro en WordPress

30

Manejo de Páginas 404 en WordPress

Cierre del curso

31

Creación de un Blog con WordPress desde Cero

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación de Temas Personalizados en WordPress: Paso a Paso

13/35
Recursos

¿Cómo crear un tema en WordPress desde cero?

Crear un tema en WordPress es uno de los pasos más importantes para personalizar la apariencia y funcionalidad de un sitio web. En este enfoque práctico, te guidaré paso a paso utilizando Visual Studio Code para llevar tus habilidades de desarrollo al siguiente nivel. Lo principal es crear una estructura básica de archivos necesarios dentro de tu carpeta de proyecto, como index.php, style.css, header.php, y más.

¿Cómo iniciar el proyecto?

Primero, abre Visual Studio Code y dirígete a "Open Folder" para seleccionar la carpeta de tu proyecto. Crea una nueva carpeta dentro de wp-content/themes/, la cual puedes llamar "PlatziTheme". Dentro de esta carpeta, los archivos que crearás son los siguientes:

  1. index.php - Actúa como la vista por defecto.
  2. style.css - Donde definirás tus estilos y atributos del tema.

Estos archivos formarán la columna vertebral de tu tema WordPress.

¿Cómo definir los atributos del tema?

Para definir los atributos del tema, comienza con comentarios dentro del style.css. Este archivo debe contener elementos importantes como:

/*!
Theme Name: Platzi
Theme URI: https://example.com
Author: Christian Dammann
Author URI: https://example.com
Description: Tema de demostración para un sitio de productos
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: platzi
*/

Este bloque proporciona a WordPress la información necesaria sobre tu tema y licencia.

¿Cómo estructurar el tema con PHP?

A continuación, crea el archivo header.php que contendrá el encabezado HTML5 estándar y las funciones WP integradas para cargar dependencias.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

De manera similar, footer.php terminará con la carga de los scripts justo antes de cerrar la etiqueta </body>.

<?php wp_footer(); ?>
</body>
</html>

¿Cómo añadir soportes y funcionalidades?

El archivo functions.php es crucial para agregar características a tu tema. Por ejemplo, puedes usarlo para habilitar imágenes destacadas y otras funciones de WordPress.

<?php
function init_theme_supports() {
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'init_theme_supports');

Estas funcionalidades permiten que tu tema soporte ciertas características de WordPress que mejoran la experiencia del usuario.

¿Cómo adicionar una imagen de previsualización?

Para agregar una imagen de previsualización que represente a tu tema en el administrador de WordPress, coloca una imagen llamada screenshot.png dentro de tu carpeta de tema. Esta imagen, preferiblemente de 880x660 píxeles para garantizar una buena visualización, será la que los usuarios vean cuando seleccionen un tema.

¿Cuál es el siguiente paso?

Ahora que has configurado lo básico, tu tema debería aparecer en el administrador de apariencia de WordPress. Aunque todavía es básico, puedes continuar personalizándolo escribiendo más estilos CSS, creando plantillas para tus páginas, y añadiendo metadatos adicionales. ¡No te detengas aquí! Con las bases que ya has aprendido, sigue explorando cómo puedes mejorar y particularizar tu tema, ya sea a través de más piezas de código o explorando los miles de plugins disponibles que pueden enriquecer tu sitio web.

Aportes 79

Preguntas 64

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

por si alguien lo necesita

/*
Theme name: PlatziGifts
Version: 1.0
Description: sitio para catálogo de platzi
Author: Juan Alejandro Rivero
Authon URI: https://github.com/alej36
License: GNU General Public Licence v2 or later
License: http://www.gnu.org/licenses/gpl-2.0.html

*/

Hasta acá llegué, siento que me hablan en mandarín

(Minuto 7)
Hay una extension que te auto completa código/argumentos llamada “WordPress Snippets”

Funciones:

wp_head() => trae todas las funciones que hagan referencia al hook wp_head
wp_footer => trae trolas las funciones que hagan referencia al hook wp_footer

get_header() => Llama y genera las funciones del encabezado
get_footer() => Llama y genera las funciones del pie de página

add_theme_support() => Agrega función a wordpress
add_action() => Ejecuta la función

Resolución correcta para que se vea bien la imagen que subimos como fondo de nuestro tema 880 x 660

Por si alguien mas tiene el problema que no carga la imagen (me pasó). El nombre de la imagen debe ser “screenshot” y listo.
Parece algo sencillo, pero cuando eres principiante, como yo, te rompes la cabeza sin saber por qué no aparece la imagen. 😃

Screenshot: puede ser PNG | JPG. La resolución correcta es de 880x660, sin embargo se adapata a cualquier resolución. Se debe llamar, p.e., screenshot.png
Index: contener todo lo que va ir siempre en la pagina.
Functions: se declara init_templates para comenzar a mostrar la vista.

no sabia que era tan facil crear un tema, la verdad me queda mucho por aprender…pero siento que con estas sencillas explicaciones se avanza…

por que me lo subraya? ayuda

Me esta encantando este curso, especialmente esta clase, con CODIGO

Les comparto este comando para que descarguen la imagen más fácil:

curl https://static.platzi.com/media/tmp/class-files/github/platzigift/platzigift-master/screenshot.png -o screenshot.png

Por aqui les comparto un generador de themes, muy util si se queire avanzar rápido.
https://underscores.me/
Siempre recomiendo echar un ojo al contenido genrado para fijar los conocimientos

¡Gloria a Dios! Mi primer tema en Wordpress

Iba a comentar que si nadie se había dado cuenta que decía LicenCe en vez de LicenSe . Lo busqué y resulta que si es correcto 🤯.

License: Se usa como verbo.
Licence: Cuando se usa como sustantivo.

Ruta de los Archivos donde estamos editando el tema

// Xampp/htdocs/PlatziGifts/wp-content/PlatziGifts

// llamando el header y Footer en el Index.php

<?php 'get_header'(); ?>

<?php 'get_footer'(); ?>

//Functions.php 

<?php


function init_template(){
    //Agrega una imagen destacada, en toda nuestras entradas de la pagina
    add_theme_support("post-thumbnails");
    //Agrega el Title a nuestra Pagina
    add_theme_support('title-tag');
}

//Usar un Hook por que no podemos editar directamente el codigo

add_action('after_setup_theme','init_template');

Es importante que si estàn probando con otra imagen diferente a la del ejemplo, el nombre de la imagen sea screenshot puede ser png o jpg, de lo contrario no funciona

Alguien me puede explicar por que utiliza codigo en ve de hacerlo directamente todo con wordpress?¿

para los que les paso como a mi que el visual studio code no les encontraba la ruta de instalación de php esta es la solución
https://www.youtube.com/watch?v=pF7uOnZHgao

Gracias por la clase. Todo perfectamente claro.

https://gwst.eu

el index no debería llevar un loop básico por defecto? para que de esta forma siempre cargue algo.

al final mi tema no se cargo en la pagina (!\_!)

Casi lloro 😢, pero lo logré 🙋🏽‍♂️

/*
Theme name:
Version: 1.0
Description:
Author:
Author URI:
License: GNU General Public Licence v2 or later
License:

*/

Con toda la motivación de aprender de wordpress desde código, mi objetivo es llegar a desarrollar temas y plugins a la medida

Esto se empieza a poner bueno!! ;D

Genial que enseñen a crear el theme desde 0

Excelente, no se nada de código y estoy comprendiendo. Gracias por ir paso a paso.

Buena clase, me gusto lo de la imagen de previsualizacion 😃

Esto ya es otro nivel en Wordpress

Deberian ensenarlo desde un cpanel

front-page
<?php get_header(); ?>

<main class=‘container’>
<?php if(have_posts()){
while(have_posts()){
the_post(); ?>
<h1 class=‘my-3’><?php the_title(); ?>!!</h1>
<?php the_content(); ?>

    <?php    }
}?>

<div class="lista-productos my-5">
    <h2 class='text-center'>PRODUCTOS</h2>
    <div class="row">
    <?php
    $args = array(
        'post_type' => 'producto',
        'post_per_page' => -1, 
        'order'         => 'ASC',
        'orderby'       => 'title'
    );

    $productos = new WP_Query($args);

    if($productos->have_posts()){
        while($productos->have_posts()){
            $productos->the_post();
            ?>

            <div class="col-4">
                <figure>
                    <?php the_post_thumbnail('large'); ?>
                </figure>
                <h4 class='my-3 text-center'>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title();?>
                    </a>
                </h4>
            </div>

       <?php }
    }

    ?>
  </div>
</div>

</main>

<?php get_footer(); ?>

Para crear tu primer theme en WordPress, sigue estos pasos: 1. **Crea la carpeta** para tu theme en `wp-content/themes/`. 2. **Crea el archivo principal** `index.php`, que será la vista por defecto. 3. **Configura el archivo `style.css`** con los detalles del theme: nombre, versión, autor, etc. 4. **Agrega funciones básicas** en `functions.php` para soportar características como imágenes destacadas. 5. **Crea un archivo de encabezado** `header.php` y uno de pie `footer.php` para estructurar tu theme. Recuerda activar el theme desde el panel de administración de WordPress.
he realizado un montón de veces la parte de style pero al momento de cargar en mi pagina lo campos salen vacios...
Estos profesores deberían comentar si hicieron un cambio en la estructura de los archivos ya que ahora sus archivos son diferentes a la instalación esto error afecta demasiado a los estudiantes que recién se están familiarizando con estos cursos. Nefasto
Hola al intentar en Visual Studio Code llamar una funcion de wp\_head dentro del HTML5, no la reconoce, alguien que me pueda ayudar, ya he intentado con instalar la extensión PHP Intelephense y verificar que esté en true el php.suggest.basic pero aún no la reconoce, mil gracias🙏🏽
![](https://static.platzi.com/media/user_upload/image-dc7ff99e-7bec-418d-9cf9-747ece65a72b.jpg)Durante este ejercicio me enfrenté principalmente a 3 problemas, que logré solucionar , los comparto por si a alguien le es útil las soluciones 1.Cuando el visual studio code no me reconocía comandos de php realicé una configuración en Propiedades del sistema>variables de entorno>Seleccionar Path en variables del sistema>Editar>Nuevo: alli se agrega la ruta en mi caso fue E:\xampp\php>Aceptar 2. Cuando me no me reconocía las funciones y me subrayaba en wp\_footer, lo solucioné abriendo el folder platzigifts desde la ruta xampp/htdocs/platzigifts, pues si solo abria el theme no me reconocía las funciones, pero así funcionó 3.La imagen la pude agregar hasta que le cambié el nombre a screenshot tal cual con extensión .png.. Fue para mi retador y eso que ya tengo cursos atrás de programación, mucho ánimo si se puede!💪🏽

.

Lo unico raro de este tutorial es, se crea la carpeta del nuevo tema, se crean los archivos requeridos y se visualizan los cambios, PERO sin antes haber seleccionado dicho Theme PlatziGifts como el tema Activo.

Al querer cambiar la foto del tema me di cuenta que se tiene que llamar screenshot.png o jpg

Excelente!!

inicializar

style.css
/*
Theme name: dmm
Version: 2.1
Description: sitio para catalo de platzi
Author: dmm
Author URL:
License: GNU General Public Licence v2 or later
License:

*/

Header.php

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<?php wp_head() ?>
</head>
<body>

Footer.php
<?php wp_footer() ?>

</body>
</html>

index.php
<?php get_header(); ?>
<?php get_footer(); ?>

function.php
<?php

function init_template(){

add_theme_support('post-thumbnails' );
add_theme_support( 'title-tag' );

}

//Usar un Hook por que no podemos editar directamente el codigo

add_action(‘after_setup_theme’,‘init_template’);

?>

Les recomeindo un curso completo que hay en Platzy, tambien con Cristian que aprendes a hacer el theme paso a paso, es muy bueno, recomendado

Excelente, solo que en la version nueva, entiendo que la barra aparece tipo sidebar y no en el encabezado.

excelente clase, y bien por decir el plugin que uso para el codigo wp

El screenshot que dejó el profesor en los recursos de la clase se encuentra en .webp, pero aún así se puede utilizar.

Excelente!

En mi mas humilde opinion, este tema esta mas sencillo que el de Introduccion a php ya que es menos codigo, en el Index y en el css son instrucciones directas ademas un aoartado para cada parte conmo el fother y ek header

Es posible que todo esto se realice Online en vez de localhost? por ejemplo mi hosting me da la opción de instalar WordPress sin necesidad de hacer todo esto, tiene alguna diferencia con respecto a la edición y programación?

Es obligatorio que la imagen de previsualización se llame “screenshot” bien sea en formato png o jpg

Tengo una duda, cargue mi imagen .png en la carpeta pero al actualizar el tema no aparece. Por que puede ser?

Super Curso Master!!!

Description: sitio para catálogo de platzi
Author: Juan Alejandro Rivero

No se deberia iniciar con un tema preestablecido ?

Este curso esta bien chido

Como se llama la extension php de VS Code que usa el profesor …?

Tamaño recomendado para el archivo screenshot: 880x660 😄

Muy buena clase. Gracias

si tengo un dominio ya, ¿como ponogo las licencias y la url? ¿aparece en algun lado?.

Tengo mi sitio web de wordpress en el hosting de mochahost puedo editar en linea mis documentos con visual studio code y actualizarse directamente en el servidor?

Al final del video, estaba siguiendo los pasos tal cual y anotando y me genero este error:
Parse error: syntax error, unexpected ‘init_template’ (T_STRING) in C:\xampp\htdocs\parissecret\wp-content\themes\parissecret\functions.php on line 3
¿Cómo los soluciono?

Un theme es un conjunto de archivos, una combinación de programas, escritos en lenguaje PHP, y hojas de estilo. Y puede contener otro tipo de elementos como javascripts, imágenes, etc.

Para los que escribimos y solo pegamos enlaces:

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Para este curso estoy usando una distribución de Linux en Amazon Lightsail de AWS. Para crear los archivos y demás, todo debe hacerse a través de la ruta /apps/wordpress/htdocs.

Eso estaba suponiendo sobre la extensión para php

no me salio la imagen que hago?