Agregando JavaScript a nuestro tema

En caso de que a alguien mas le pase, si no puedes modificar el color del header intenta cambiando la version del wp_enqueue_style
de tal forma que quede de la siguiente manera.

wp_enqueue_style( 'estilos', get_stylesheet_uri(), array('bootstrap', 'montserrat'), '1.1', 'all');```

chicos les comparto el codigo para la nueva version de Bootstrap sin JQuery

<?php 


function init_template(){
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
}

add_action('after_setup_theme','init_template');

function assets(){
    wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css','','5.0.0','all');
    wp_register_style('montserrat','https://fonts.googleapis.com/css2?family=Montserrat&display=swap','','1.0','all');

    wp_enqueue_style('estilos',get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0','all'); 
    

    wp_enqueue_script('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js','','5.0.0',true);

    //para traer mis propios scrips
    wp_enqueue_script('custom',get_template_directory_uri().'/assets/js/custom.js','','1.0',true);
    
}

add_action('wp_enqueue_scripts','assets');

Sugerencia para platzi, por favor actualizan el contenido del curso ya que las librerías y demás herramientas usadas en el mismo se actualizan constantemente a lo cual muchos quedamos perdidos ya que los resultados mostrados en el video no se aplican en la práctica, esto debido a los cambios en los códigos de las librerías y demás usados, gracias

Para los que quieran probar con Boostrap 5, lo tengo configurado de la siguiente manera:

function assets(){
    wp_register_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '5.0.0-beta1', 'all' );
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat&display=swap','','1.0','all');

    wp_enqueue_style( 'styles', get_stylesheet_uri(), array('bootstrap', 'montserrat'), '1.0', 'all' );

    wp_enqueue_script( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), '5.0.0-beta1', true );
}

add_action( 'wp_enqueue_scripts', 'assets' );

Espero les sirva.

Para quienes vienen del futuro como yo en este curso, y no se desanimen al no poder usar la versión de bootstrap 5 aquí les dejo mi solución.

<?php 

function init_template(){

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


}


function assets(){
    wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '5.0.0','all');
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat&display=swap','','1.0', 'all');
    wp_enqueue_style('estilos', get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0', 'all');
   
    wp_enqueue_script('boostraps', 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js', '','5.0.0', true);

}

add_action('wp_enqueue_scripts','assets');```

Bien bueno el curso, se supone que solo vería la introducción pero no he parado de seguirlo. No se para de aprender nuevas formas. Buen ritmo profe… se agradece.

Hola, siendo 2022, no está demás poner el código que me ha hasta el momento funcionado. Los recursos de bootstrap ahora aparecen en la carpeta cdn.delivr.ne-t.(sin el guion antes de la t) cuando vas a inspeccionar y no en stackpath.bootstrap ya que ahora cambio en la versión 5 en adelante. Gracias a la comunidad he podido seguir el ritmo hasta aquí.

<?php 
function init_template(){
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');

}

//Hook que ejecuta la función init_template, sin retornar valores. 
add_action('after_setup_theme','init_template');

function assets(){
    wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css','','5.2.0','all');
    wp_register_style('montserrat','https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap','','1.0','all');

    wp_register_script('popper','https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js','','2.11.6',true);

    wp_enqueue_script('bootstraps','https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js',array('popper'),'5.2.1',true);

    wp_enqueue_style('estilos', get_template_directory_uri() . '/style.css', array('bootstrap', 'montserrat'),'1.0.0','all' );

    //cargar los archivos de Js
    wp_enqueue_script('custom',get_template_directory_uri().'/assets/js/custom.js','1.0.0',true);

} 
//Hook que ejecuta la función assets, sin retornar valores. 
add_action('wp_enqueue_scripts','assets');
?>

Estuve como 2 días dandole vueltas y hasta volvi a hacer todo desde cero porque no me estaba agarrando el tema y me aparecia asi:

intente con un par de cosas que mencionaron aqui, que era revisar si el footer y el header tenian sus correspondientes funciones y probe con el modo debug, desafortunadamente no me sirvio y segui picandole, resulta que era una tonteria jajajaja, el tema no estaba activado, si les pasa el mismo problema prueben activando el tema aqui:

Para los que hacen el curso en 2021, bootstrap ya no usa jquery y lo solucionamos con esta linea. [solucionado por otros compañeros]

wp_enqueue_script('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js','','5.0.2',true)

Me paso que no cargaba los cambios en el navegador, si es que les llega a pasar, borren la cache desde las configuraciones de Chrome ya que, en mi caso, probé con ctrl + r y seguía igual hasta que lo borre manualmente.

Esto se esta poniendo muy bueno, me encanta.

no me funciona nada de nada … que frustración , este curso necesita una actualización urgente

Si eres como yo que necesito tomar este curso en 2023 sera por algo valioso y no por una tontería, es claro que el curso esta desfasado pero la invitación que te desea hacer es a que veas esto como un reto adicional y que no te limites ni te detengas porque hay una info desfasada. Googlea e indaga todo lo que sea necesario pero no te limites ni te cierres, recuerda que las cosas no siempre se te serán dadas en bandeja de plata

yo tuve muchos prolemas yaque soy del futuro an actualizado muchas cosas, hasta el momento voy bien, el mayor consejo es revisar el codigo leer los aportes de otras personas te ayuda con la logica de algun error parecido al tuyo, síganle echando ganas

Este curso me ha tocado bajarle la velocidad a 0.5X, para poder seguir el ritmo, parece que el profesor tenía algo de afán en terminarlo.

Quiero hacer el curso pero al estar tan desactualizado, no anda nada. Al final uno paga, y vez videos mas actualizados en youtube gratis… Platzi media pila con esto!!!

Pequeño update: la nueva ubicacion para la nueva version de bootstrap 5.0.0 es dentro de cdn.jsdelivr,net/npm/… ahi encontraran tanto a popper como a bootstrap (:

Este curso está muy desactualizado, tengo que buscar un tutorial por cada cosa que no me sale bien .-.

Para darle un padding al logo y se muestre mejor espaciado agregue class=‘pt-3 pb-2’ que significa pt: padding-top y pb: padding-bottom

Agregar a archivo functions.php:

wp_register_script('popper','https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js','','1.16.0', true);
    wp_enqueue_script('boostraps', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery','popper'),'4.4.1', true);

    wp_enqueue_script('custom', get_template_directory_uri().'/assets/js/custom.js', '', '1.0', true);

Crear en la carpeta assets>js el archivo custom.js

console.log('Hola WordPress');

Agregar una imagen en la carpeta img

Ir al header.php y agregar:

<header>
    <div class="container">
        <div class="row">
            <div class="col-4">
                 <img src="<?php echo get_template_directory_uri()?>/assets/img/logo.png" alt="logo">
            </div>
        </div>
    </div>
</header>

Para los que sufren con la cache en el inspeccionador>red puede activar esta opcion de Desactivar caché, asi cada vez que refrescan la pagina se carga todo de cero.

los archivos de bootstrap en el inspector no me aparecen como .js sino como .scss, es lo mismo? Tampoco me aparece la carpeta js/src

En caso de que a alguien mas le pase, si no puedes modificar el color del header intenta cambiando la version del wp_enqueue_style
de tal forma que quede de la siguiente manera.

wp_enqueue_style( ‘estilos’, get_stylesheet_uri(), array(‘bootstrap’, ‘montserrat’), ‘1.1’, ‘all’);`

Dejo este curso hasta este momento, creo que este curso necesita actualizaciones!!

Ya llevo 3 videos sin que me funcione correctamente lo que indica el profesor, creo que se debería volver a reestructurar el curso y actualizarlo, revisando los comentarios se aprecia la ayuda que dan los mas avanzados pero el profesor va super rápido y no se detiene a explicar el por que de lo que hace, solo da un comentario y listo.
Pd: No es mi primer curso, ya llevo 4 aproximadamente y es primer curso en el que me pasa esto, no entender y que no funcione lo indicado por el profesor.

mucho que desear en cuanto a actualización de como utilizar las cosas. casi nada se hace como lo pone el profesor

https://gwst.eu

https://gwst.eu

get_template_directory_uri() => va a ser clave para traer nuestros scripts.
Me muero por crear animaciones en javascript hehehe

Hasta ahora todo bien, a pesar de algunos errores de sintaxis pero he logrado avanzar. Se ve en un principio un tanto complejo, sin embargo esa sensación se desvanece al practicarlo.

Gracias por la clase. Todo clarísimo.

https://gwst.eu

Justo tenia esta duda ¿Cuándo usar enqueue y cuándo register? Con anterioridad tome un curso de Wordpress y para cargar todos los scripts y estilos el instructor siempre uso wp_enqueue_script o style nunca register. Ahora se para que es cada función 😁

Tengo una duda con respecto al Hooks que se debe agregar en la función add_action();

add_action( $hook, $functionName );

en donde los puedo obtener, estuve buscando en la documentación de wordpress pero no las encontré, si alguien me puede ayudar por favor.

es necesario poner siempre la versión del js? incluso cuando es un script propio?

Hola en el título de la clase hay un typo dice “Agragando” en vez de “Agregando”

Hola, quisiera saber porque en los wp_enqueue_script en el ultimo argumento de cargarlo en header o footer, porque siempre escogemos cargarlo en el footer (true). Esto es por un orden para cargar los archivos? o a que se debe?

Siempre que usemos los handels dentro de los scripts no debemos repetir los nombres, pero sí podemos usar el mismo si solo está en style, podemos tener bootstrap en style y en script y en este caso no harán conflictos. Si usamos dentro de los scripts el mismo handel no nos va a funcionar.

SI

wp_enqueue_style(’bootstrap’)

wp_enqueue_script(’bootstrap’)

NO

wp_enqueue_tyle(’bootstrap’)

wp_enqueue_style(’bootstrap’)

wp_enqueue_script(’bootstrap’)

wp_enqueue_script(’bootstrap’)

llevo todo el curso y nada funciona y veo que a muchos les pasa lo mismo si todos reportamos el problema de este curso llamaremos la atención para que se solucione esto

¿Para usar bootstrap, mejor usamos los temas que están por defecto en Wordpress ?

yo sugiero tomar el curso de bootstrap para mayor claridad, la verdad me fue muy útil.

Resumen del capitulo en Notion
https://n9.cl/22bl0

A los que no les funcione el popper.js del bootstrap, aqui les dejo el enlace de la página oficial: https://unpkg.com/@popperjs/core@2/dist/umd/popper.js

Si no se actualiza el color del header, trata de recargar sin cache o tambien puedes decirela a tu archivo qeu ha cambiado la version de tu hoja de estilos: en la carpeta de functions.php:

   wp_enqueue_style('estilos',get_stylesheet_uri(), array('bootstrap','montserrat'),'1.1','all');    

aporte super importante, mil gracias por compartir tus conocimientos

Para que descarguen el logo desde terminal:

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

que buena clase! ❤️

el orden como carga Wordpress las dependencias(librerías) es de acuerdo al orden de los register o en el orden como se pongan dentro del enqueue?

Asi va quedando mi proyecto

tengo un inconveniente con el logo que coloco, agregué un logo pero tenia mala proporsion entonces cree un logo ya con las medidas exactas y ahora agrego la imagen y no se me cambia en la pagina como tal, que puedo hacer en ese caso? les agradecedia un monton la ayuda

Para los que anden de “intrépidos” con otro proyecto, las medidas para el logo son:
Dimensiones: 200x80
Resolución: 72x72

Tengo un error 500 pero se que es del theme porque he probado a poner el twentytwenty y si que va pero no consigo localizar el error. Adjunto mi código de functions por si sirviera de algo, gracias de antemano.

<?php
function init_template() {

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

add_action( 'after_setup_theme', 'init_template' );




add_action('after_setup_theme', 'init_template');




function assets(){

    wp_register_style('bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css','','4.4.1', 'all');
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap', '','1.0','all');

    wp_enqueue_style( 'estilos', get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0', 'all');

    wp_register_script( 'popper', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', '', '1.16.0', true);
    wp_enqueue_scripts( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery', 'popper'),'4.4.1', true);

    wp_enqueue_scripts('custom', get_template_directory_uri().'/assets/js/custom.js', '', '1.0', true);

}

add_action('wp_enqueue_scripts','assets');


?>```

https://gwst.eu

get_template_directory_uri es lo mismo que escribir “./” ?

el primer parámetros de add_action, es un string cuyo nombre es random?, o es un nombre propio de wordpress??

No lo veo tal como el de Cristian

![](

Hola, no me carga la página, ya hice lo de vaciar el cache pero aún así no me funciona

Tengo un Internal Server Error 500 que no puedo solucionar ni cambiando el: WP_MEMORY_LIMIT ni con el htaccess. Alguien sabe algún otro método o cómo se puede solucionar?

excelente!

me quede sin memoria RAM 😦

Hola
Muchachos ya tengo la plantilla de BeTheme pero al momento de subir unos de los temas me sale este error.

hola buenos días chicos estoy intentando en la pagina al inspeccionar encontrar la carpeta de bootstrap pero no me sale, ya compare y tengo todo igual incluso intente borrando la cache del navegador pero aun así no me aparece

buenas, tengoeste problema :
Error establishing a database connection
al parecer no se conecta con la base de datos

Si tienen problemas con XAMPP en mac con la memory y cache pueden usar https://localwp.com ademas que se usara en el curso de wordpress profesional

Hola profe, muchas gracias y excelente curso! Tengo una pregunta con respecto al estilo propio: custom.js, por que sólo se usa el enqueue en vez del register?

ME SALE ESTE ERROR, COMO PODRIA SOLUCIONARLO GRACIAS
<br />
<b>Fatal error</b>: Uncaught Error: Call to undefined function get_header() in C:\xampp\htdocs\pasteblock\wp-content\themes\pasteblock\index.php:1
Stack trace:
#0 {main}
thrown in <b>C:\xampp\htdocs\pasteblock\wp-content\themes\pasteblock\index.php</b> on line <b>1</b><br />

Hola a todos, es importante poner atención en el nombre de las funciones. Me pasó que había hecho el cambio pero no me funcionaba. Lo que me ayudó es inspeccionar el código y afortunadamente imprime los errores:

<img src="<br />

<b>Fatal error</b>: Uncaught Error: Call to undefined function get_template_uri() in C:\xampp\htdocs

Cómo pueden ver, estaba llamando a la función equivocada.

En conclusión, si tienen un error, pueden verificarlo viendo el código fuente de la página.

Hasta ahora el código funciona bien. Sino funciona revisa las lineas y compara con los ejemplo. Yo estoy usando la ultima version de bootstrap 5.0.0 y carga correcto. Sobre esta clase, todo ok. Solo tengo un mensaje en la consola de advertencia:

JQMIGRATE: Migrate is installed, version 3.3.2
(index):1 Refused to execute script from

Salvo ese mensaje todo ok. Estoy revisando el motivo del mensaje si alguien lo sabes, agradeceré sus comentarios.

¿ Por qué no hemos usado do_action hasta el momento ?

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

https://gwst.eu

como le hago si yo quiero utilizar en lugar de bootstrap un archivo que ya maquete anteriormente el cual me fue dado con adobe xd ya lo pase a html y css pero ahora no se como integrarlo y crear mi tema con eso.