Aprende a crear tu propio theme para wordpress desde 0, diseño adaptable a dispositivos móviles (Responsive Design).

Share on Pinterest
Comparte con tus amigos










Enviar

Hola y bienvenidos sean al curso de creación de un theme para wordpress, en este curso aprenderás a crear un theme de forma profesional y con un diseño adaptable a dispositivos móviles, lo que se le conoce como Responsive Design, podrás hacer este tema para wordpress desde 0 con tan solo unos pocos conocimientos de HTML, CSS y PHP.

El curso que consta de 20 capítulos regulares y otros mas extras que te ayudaran a mejorar y añadir nuevas funciones a tu theme, durante estos 20 capítulos vamos a hacer de todo, vamos a trabajar desde el diseño en Adobe Photoshop, hasta maquetarlo y agregarle código para convertirlo en un genial tema para nuestro sitio wordpress.

Los requisitos que necesitaras para seguir el curso son los siguientes:

  • Tener conocimientos basicos de HTML, CSS y PHP.
  • Tener Adobe Photoshop (Opcional si quieres seguir los primeros capítulos en los que hacemos el diseño).
  • Saber utilizar wordpress

Aquí te muestro un live demo del theme que estaremos haciendo para que puedas darle un vistazo y puedas saber cual sera nuestro resultado final.

Ver el DEMO: http://falconmasters.com/demos/curso_wordpress_theme/

El curso lo he subido por YouTube, aqui te dejo la lista de reproducción con todos los capítulos, puedes verlos desde YouTube o desde mi pagina web pero solo podre ayudarle a las personas que escriban en el post correspondiente en mi pagina web.

En este capitulo estaremos introduciendo el theme que vamos a estar desarrollando, explicaremos las características principales del tema y descargaremos los recursos que vamos a utilizar.

[Curso] Como crear un theme para wordpress (con Responsive Design)

Recursos a utilizar:

http://es.wordpress.org/
http://slidesjs.com/
http://www.google.com/fonts
http://960.gs/
http://necolas.github.io/normalize.css/2.1.3/normalize.css
http://lorempixel.com/
http://www.sublimetext.com/

Lista de reproducción: http://www.youtube.com/watch?v=L0SrVrpegBw&feature=share&list=PLhSj3UTs2_yUwYp_ueyulofOhRBKYa4j-

Código del theme: https://github.com/falconmasters/MyBlog-WordpressTheme/

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Kike Gonzalez

    Buen Dia Carlos Arturo a este tema que has creado a tratado de agregarla add_theme_support(‘custom-background’); ya que quiero cambiarle el color de fondo pero no me lo cambia, ¿que estare haciendo mal? Gracias por tu Ayuda

  • Matias Juncos

    hola carlos arturo tu tutorial me ayudo mucho
    lo que si tengo dos preguntas sobre el slideshow que es como hacer para que el slideshow pase de un contenido al otro automaticamente y la orta limitar los post que se muestran ya que tengo 10 entradas y quiero que nomas me mustre 5 en el slideshow

    • Roberto Contreras

      $(function(){

      $(“#slideshow”).slidesjs({

      height: 300,

      navigation:false,

      play: {

      effect: “fade”,

      // [string] Can be either “slide” or “fade”.

      interval: 5000,

      // [number] Time spent on each slide in milliseconds.

      auto: true,

      // [boolean] Start playing the slideshow on load.

      swap: true,

      // [boolean] show/hide stop and play buttons

      pauseOnHover: false,

      // [boolean] pause a playing slideshow on hover

      restartDelay: 2500

      // [number] restart delay on inactive slideshow

      }

      });

      });

    • Roberto Contreras

      slidesjs.com

      apartado:
      play (object)

  • Hola falcon, tengo un problema con los wigcet #1 y el #2, es que no me suben a la parte de arriba, se me quedan en la parte del footer.
    por favor ayudame!

  • Pingback: Crear Theme Wordpress desde Cero | Tutoriales para Webmasters Tutoriales para Webmasters()

  • gyrutech

    Hola Carlos, man tengo un problema con el footer y es que no me se pasa debajo de la paginación y pues me queda debajo de los widgets de aside, no sé ya revise todo el código y nada :(

    • Me parece que es error de el clear both, revisaste el código que puse en github?

      • Paralelo olelaraP

        Por alguna razón no logro que la imagen y el texto aparezcan, estoy intentando verlo en Google Chrome pero nada, he revisado el código varias veces.. ¿alguna ayudita?

        http://nopaste.php-quake.net/245531

        Desde ya, Gracias

  • Andres Emilio

    Arturo, que buenos tutoriales, he aprendido muchisimo, gracias!, tengo una duda, ya he modificado mucho del codigo que muestras de ejemplo y he combinado entre varios para probar diferentes cosas y todas funcionan, por lo bien que explicas, la duda es que no he podido agregar un menu a mi tema en wordpress para ser modificado desde ahi, es decir, como tu lo haces se logra, pero si yo quiero agragar un menu con estilo que ya tengo hecho, el codigo si no lo he logrado acomodar, me sale el estilo pero los textos desordenados y no sale lo que quiero, te agradezco si me puedes guiar, Excelente trabajo!

  • Pingback: [Curso] Como crear un theme para wordpress (con Responsive Design) 1.- Introducción - New York Website Development()

  • El curso esta genial y aclara un monton de dudas. Podrias agregar el archivo PSD que creaste durante el curso ? Saludos !

  • Arian Valdivieso

    Gracias por tus tutoriales. tengo una duda como hago para que el slider que ponemos solo muestre 5 post y no me los muestre todo? es decir configurar el loop del slider en worpress para que solo me muestre 5 post en el slider

  • TavoQiqe

    Tengo una duda, ¿Cómo puedo registrar submenús en wordpress?, agrego un elemento como hijo de otro el wp admin pero no funciona como lo espero.

  • Juan

    Excelente! te felicito por el curso !!!

  • Yvan Salcedo

    Exelente tus tutoriales Falcon :)

  • Si bien este curso ya tiene casi un año acabo de llegar a el.
    Soy diseñador gráfico y he realizado varios tutoriales de como adaptar WordPress y este es el más completo y el mejor explicado, así que mil gracias y enormes felicitaciones por el trabajo, se que darse el trabajo de hacer este tipo de vidéos, así como el material explicativo que incluye, es arduo, así que, nuevamente MIL GRACIAS Carlos Arturo.
    Si me queda algo pendiente, que si alguien tiene por ahí un video tutorial similar en calidad a este le agradecería me lo refiriese, y es el tema de los submenús. Aún no comprendo del todo como funcionan.
    Eso pues.

  • Amigo estoy siguiendo tu tutorial y me ha llegado una interrogante. Si yo quiero en el index que las entradas se muestren por secciones definidas por categorías como podría hacerlo?

    Ejemplo del index:

    Categoria Autos
    1. Entradas de auto
    2. Entradas de autos

    Categoria Motos

    1. Entradas de motos
    2. Entradas de motos

    etc….

    O sea que en vez de mostrarme solo las ultimas entradas de todas las categorías me las muestre así tipo magazine por secciones.

    • Guest

      Escrito por el <a href="”>

      <a href="”>

      Por si alguien lo necesita!

    • Josue

      PUDISTE SOLUCIONAR??? AMI TAMBIEN ME GUSTARIA HACER ESO QUE PIDES

    • Julián

      Es bastante fácil, solo tienes que añadir tantos loops como categorías quieras enseñar en tu index. Antes de cada loop de wp debes añadirle la siguiente línea:

      query_posts(‘category_name=CategoriaAqui&posts_per_page=X’ );

      Donde:
      “CategoriaAqui” pones el nombre de la categoría que quieres mostrar.
      “X” número máximo de post a mostrar.

      Un saludo.

  • anahid

    Hola primero que nada muchas gracias por tus tutoriales me han ayudado a adentrarme más al mundo de códigos y sin tenerle miedo jejej. quisiera hacerte una consulta. viendo tus videos de wordpress responsive, a la hora de acomodar mis imágenes en html lo deje así:

    Titulo de nuestro articulo

    pero a la hora de ponerlo en CSS no puedo acomodarlos esta bien:
    para entrar
    #main #articles_list article thumb {

    }

    es para entrar a la lista de imágenes y acomodarlas? ya que lo quiero hacer como un tipo catalogo

    saludos y muchas gracias!

  • Daro Rubio

    hola buenas tardes, como puedo hacer para que el slider se me desaparesca en post siguientes ?

    • Julián

      Reformula de nuevo tu pregunta por favor. Al menos yo, no he entendido exactamente qué quieres hacer.

  • Roberto Contreras

    Gracias por el tutorial, muy fácil de seguir y muy explicativo.

    Tiene ya su tiempo, pero sigue estando vigente (lo he realizado con WP 4.2.2 y funciona todo excelente)

    Solo lamento que no siguieras con los “extras” que siempre salen (nunca mensionaste cual era el pluguin que usabas para los comentarios)

    Por cierto, el problema de las categorias (cuando hay mas de una, las muestra como lista), yo las resolvi usando:
    php the_category(‘, ‘);
    en vez de:
    php the_category();

    Abrazos y mucha suerte

  • Rodrigo Tomé

    Holaa Arturo podrías hacer un tuto sobre como modificar el widget de búsqueda que viene por defecto en wordpress graciass :)

    • Hola, que modificaciones te refieres?

      • Rodrigo Tomé

        Hola pues a modificaciones como a quitar un label añadir un placholder o clases, sustituir el input de buscar por el típico icono de buscar una lupa creo que es)… ya he encontrado la manera de hacerlo es añadiendo a tu tema un archivo asi -> searchform.php y dentro escribes como quieres que sea el buscador (parte visual). Pero estaría genial que hicieras un tutorial extra en el que enseñases como agregar al tema submenus, widget con el mapa de google, calendario y otras utilidades :) (Sinceramente lo necesito mucho jajaj) Muchas graciass por todos tus tutoriales que estan geniales ;)

  • Xavier C. Güenaga

    Hola, uso tu tutorial cada vez que quiero recordar lo básico del código wp – Me gusta hacer mis propias plantillas y como no hago muchas… pues me veo tu tutorial cuando empiezo una.
    Pero esta vez he tenido un problema que no se me ha dado otras veces:
    Verás, si por ejemplo creo una nueva entrada o página, o icluso cuando entro desde l wp-login en lugar de ir a otra página se queda en una página en blanco.
    De hecho no es un problema del tema que estoy creando dado que si uso otro me pasa lo mismo… de hecho al cambiar de tema me pasa.
    ¿Cual crees que podría ser la causa?

  • Hans Buddenberg

    Muy bueno el tutorial,felicidades, pero, me quede con las ganas de ver el temas de los plugins en nuestro template,
    podrias apoyarme un poco en esto?

    • Es muy sencillo, solo tienes que instalar los plugins que quieres. Algunos de ellos te pueden decir que agregues una linea de codigo a algun archivo, aunque muy pocos de ellos hacen eso.

  • Jose Luis Sanchez

    Muy buenas no se si seré el único ando por el curso numero 7 pero me he dado cuenta que el responsive.CSS no se almacena ningún código dentro del fichero y quería saber que pasa con el, el responsive no puede funcionar logicamente y se supone que el curso lo haces con 960 grid system¿ como lo utilizo? Saludos

  • Muy buenas pues me pasa que el 960 grid system para maquetar el diseño no me funciona, ¿os funciona a todos? seguramente algo habre hecho mal, desde luego el tutorial es bueno, bien explicado ciertamente lo complicado de enseñar es hacer buenas explicaciones para que todo el mundo se entere y Carlos Arturo las hace, seguramente me perdi en algun punto y la solucion que he buscado es utilizar bootstrap, con este tutorial mas omenos lo conozco aunque soy novel en esto del desarrollo web, hayu que dedicarle mucho tiempo y mucha paciencia.

  • Fernando

    Hola Falcon. Disculpa no se puede mesclar bootstrap con wordpress? Si me contestas antes de que lo pruebe estaría genial

  • Fernando

    hola Falcon. si se puede combinar bootstrap con wordpress :D pero no me despliega mi menú. mi menú no quiero q sea administrado pero quiero q me lo despliegue. sabrás a que se deberá? lo investigare pero si sabes te lo agradeceré.

  • Rafael Rodriguez

    Excelente! Quisiera saber tu opinión sobre algo. Considerando el tema de la eficiencia en el manejo de los recursos del servidor, hablando de un hosting compartido (dreamhost) y que quiero hacer mi blog lo más profesional posible aunque sencillo en apariencia, y que además sea 100% gratuito (en mi pais no tenemos acceso a moneda extranjera); podría en este caso valer la pena hacer todo el trabajo en php y mysql desde cero? O más bien crees que con wordpress el resultado queda 100% tan profesional y eficiente como en un desarrollo independiente y sin gastar nada?

  • Rafael Rodriguez

    Por curiosidad, este blog de Falconmasters fue montado con wordpress u otro CMS? O fue realizado desde cero?

  • Darío Pérez

    Hola Carlos Arturo, primero que todo dar las gracias por la tremenda dedicación y trabajo que haz entregado en este curso, tengo una consulta, de que forma puedo agregar un buscador en el propio tema (como es el código que debo agregar al momento de transformar la plantilla a dinámica para wordpress.)
    Quedo atento a tu respuesta.
    SALUDOS.

  • Sebastian Flores

    Buenos días Carlos Arturo, antes que nada dejame sacarme el sombrero con tus tutoriales, por favor !!! que pedazos de tutoriales que buenos !!!! Te hago una pregunta, yo necesito colocar como pagina de inicio cuando ingresen a mi web una solamente con un slider y de ahi q pase a la pagina contenedora de post, cómo se haria eso? El slider debe tener solo o imagenes y no necesito que vincule a los post. Desde ya te doy las gracias.

  • Pablo Ferruzo

    Excelentes tutos! Tengo una duda.. Es posible crear un sitio web con HTML y CSS con Sublime Text usar frameworks como Bootstrap y a la ves usar wordprees para actualizar contenidos como noticias?

  • Chanly

    Felicidades amigo. De lo mejorcito que hay gratuito en internet. Gracias por tu tiempo y dedicación a enseñarnos desde cero como introducirte a la creación web. Como super novato me llamo mucho la atención el diseño en photoshop. Me imagino que es para coger todos los colores, fuentes, medidas y cálculos para aplicarlos después a la web. Y de paso ver como quedaría el final bien estructurado. La verdad es que lo flipe ;-). Supongo que las plantillas psd sera para las diferentes medidas de pantalla. Bueno hay me pierdo un poco ya que ahora con 4k, sobremesa, ipaq, smarphon. Solo con esto serian cinco diseños responsivos. Si por cada diseño wordpress tiene que subir tres o cuatro fotos al server, el almacenamiento ya me dirás. ¿Habría alguna forma de utilizar la misma fotografía para todo sin que se pusiese borrosa?. Nuevamente gracias por tu tiempo y dedicación.

  • manuel rodriguez

    Arturo, quisiera consultar como puedo hacer el menu que tenga sub menu ? con código css incluido. te lo agradecería mucho.

    Atento a tus respuestas

  • Octavio Campos

    Muy buen curso, pero quedé con la sensación que faltaron cosas por explicar, como lo es el caso del formulario de contacto, he probado con muchos plugins y ninguno trabaja como deberia (no descarto que soy yo el del problema), ¿podrías explicar como lo hiciste para implementar ese formulario en el blog que utilizaste para el curso? te lo agradeceria enormemente

  • Hector Meza

    Como puedo agregar un estilo de letra que tengo en mi computadora y no está en Google font, alguien que me pueda ayudar.

  • Muy buen curso, me sirve de mucho.
    Pero tengo una pregunta si quiero poner los artículos en vez de que se presentaran de esta forma, se presentaran en dos columnas, como esta pagina
    http://www.aullidos.com/
    como lo tendría que hacer.
    Saludos.

  • Gaston Marin

    Muy buen tutorial! Me motivaste a aprender más! Voy a buscar algún buen curso de wordpress basico

  • wilfred castillo

    Me funciono¡¡¡¡¡ keresweb.com/blog gracias por . Tus tutoriales. Pondré tu enlace. En mi pagina.


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso