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

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.

https://marketplace.visualstudio.com/items?itemName=wordpresstoolbox.wordpress-toolbox

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

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

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.

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(); ?>

.

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?

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu