Crear filtros de post con pestañas en WordPress (Vídeo)

Hola chicos,

Un alumno de la zona premium me ha preguntado como podíamos hacer una página de recursos en la que pudiéramos filtrar por tipo de recurso.

Aquí tienes el tutorial en vídeo:

El resultado final será algo como la siguiente pantalla:

Para hacerlo he usado 3 elementos: 2 plugins y css personalizado.

Los plugins que vamos a necesitar son:

• Tabby Responsive Tabs
• List category posts

El plugin Tabby Responsive Tabs nos va a permitir añadir pestañas de forma sencilla en nuestra página web. Tan sólo tendremos que añadir unos shortcodes para añadir las pestañas.

El plugin List category posts nos va a permitir añadir en cada una de las pestañas el contenido de una determinada categoría.

Es decir al pulsar en cada pestaña van a aparecer los post de una categoría en concreto.

Para que no tenga la típica forma de pestaña y el resultado sea la imagen de arriba lo que vamos a hacer es modificar las hojas de estilo.

Se puede mejorar el CSS que yo he usado es el siguiente. Tendréis que añadirlo en Apariencia –> Personalizar –> Css adicional

body.page-id-533 {
    background-color: #f7f7f7;
}

.tabcontent ul.lcp_catlist li{
float: left;
width:32%;
margin:5px;
list-style-type: none;
font-size:15px;
background:white;
padding:10px;
}

.responsive-tabs .responsive-tabs__panel {
border:0px !important;
padding: 0px !important;
background: #f7f7f7 !important;
}

.responsive-tabs .responsive-tabs__list__item {
color: grey !important;
border: 1px solid #cacaca !important;
font-size:14px!important;
padding:10px 30px !important;
margin-bottom:20px !important;
}

.responsive-tabs .responsive-tabs__list__item--active{
color: #f4633e !important;
border: 1px solid #f4633e !important;
}

.responsive-tabs ul.responsive-tabs__list{
margin:0px !important;
}

.entry-content ol, .entry-content ul {
  margin-left: 0px;
}

.button{
border-radius: 47px;
background: #f4633e;
font-size: 12px;
text-decoration:none;
}

.page-id-533  h4{
color:#f4633e;
font-weight: normal;
}

Ahora tan sólo tenemos que crear una página y añadir dentro los shortcodes que vamos a usar para que aparezca el contenido:

En mi caso ha sido el siguiente:

[tabby title="TODO"]




[tabby title="DOMINIO"]

  
Hola chicos ¿qué tal? En este tutorial vamos a hacer una review de un plugin para hacer reviews por lo que se podría decir que este vídeo es una meta review. 😂 😂 😂
Bromas aparte, vamos a ver un plugin que nos va a permitir de una manera muy sencilla poder valorar: aplicaciones, restaurantes, recetas ...
  
Hola Chicos,
Hoy os traigo un tutorial que os puede ser muy útil:
Como dejar un vídeo fijo en un post, de tal forma que si el usuario sigue navegando por el artículo pueda seguir viendo el vídeo.





Suscríbete a mi canal:   


      ...
  
Cuando tenemos muchas Páginas y Entradas en WordPress se puede hacer complicado administrarlas.
Veremos que fácil es solucionarlo gracias al plugin gratuito Wicked Folders
Aquí tienes el tutorial en vídeo:





Suscríbete a mi canal:   


          

  
Cuando estamos administrando WordPress nos pasamos media vida en la página de todas las entradas. Y cuando queremos estamos haciendo ciertas tareas repetitivas que sólo se pueden hacer editando el artículo nos preguntamos si podemos hacer todas esas tareas sin salir del listado de todas las entradas. Pues si, si se puede, gracias a Admin ...
  
Hola Chicos,
En este tutorial vamos a hacer visible un plugin sólo en una determinada fecha.
¿Para que querríamos hacer esto? Imaginar que queréis añadir las farmacias de guardia de cada día y que sólo aparezca la del día en cuestión. Si somos capaces que aparezca de forma automática esta información puede hacernos la vida mucho más ...
  
Hola Chicos,
Hoy os traigo un tutorial muy corto pero muy útil si estás usando el Gravity forms para crear tus formularios.
Si has intentado quitar las etiquetas de los campos, habrás visto que no viene esa opción. 
En este vídeo ves como lo puedes hacer:





Suscríbete a mi canal:   ...
  
Hola chicos,
Un alumno de la zona premium me ha preguntado como podíamos hacer una página de recursos en la que pudiéramos filtrar por tipo de recurso.
Aquí tienes el tutorial en vídeo:





Suscríbete a mi canal:   


          

  
Hola Chicos,
Seguimos avanzando en el curso de Gravity Forms.
En este vídeo vemos las posibilidades que nos ofrecen los campos avanzados.
Dentro de los campos avanzados las opciones que tenemos son:

Campo Nombre
Campo Fecha
Campo Hora
Campo Teléfono
Campo Dirección
Campo Web
Campo Email
Campo Subida de archivos
Campo Captcha
Campo Lista

En este tutorial veremos cada uno de estos campos y qué posibilidades nos ofrece:
  
Hola Chicos,
Hoy empezamos un curso que muchos de vosotros me habéis pedido. Un curso del plugin para crear formularios Gravity Forms.
Gravity forms es el plugin más completo para hacer formularios. Podemos hacer desde un simple formulario de contacto a formularios con opción de pago, formularios inteligentes que varíen las opciones dependiendo las respuestas y un ...
  





Suscríbete a mi canal:   


          




En este tutorial vamos a seguir enriqueciendo la plantilla Listable.
En el tutorial anterior vimos como añadir un botón para pedir presupuesto  en cada una ...


[tabby title="HOSTING"]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 

[tabbyending]