---
title: "Zerif Lite: ¿Cómo añadir un tercer botón en la sección de título grande?"
url: https://caribdis.net/2016/02/14/zerif-lite-como-anadir-un-tercer-boton-en-la-seccion-de-titulo-grande/
date: 2016-02-14
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Seguimos haciendo crecer el repertorio de tutoriales para el tema Zerif Lite de ThemeIsle, y en el episodio XI veremos cómo añadir un tercer botón en la sección de título..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 294
---

# Zerif Lite: ¿Cómo añadir un tercer botón en la sección de título grande?

Seguimos haciendo crecer el repertorio de tutoriales para el tema **Zerif Lite** de [**ThemeIsle**](https://caribdis.link/ThemeIsle), y en el episodio XI veremos cómo añadir un tercer botón en la sección de título grande.

Los predeterminados del tema son dos: uno rojo y uno verde, cuya etiqueta y enlace se pueden modificar desde el Personalizador.

![Zerif Lite - Botones](//caribdis.net/wp-content/uploads/2016/02/zerif-buttons.jpg)

¿Qué tal si queremos agregar un tercer botón, al lado del botón verde?

Ante todo, asegúrese de que está usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran [en esta entrada anterior](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

Abrimos el archivo `functions.php` del tema hijo, y pegamos el siguiente código (antes del cierre de la etiqueta `?>`, si lo hubiere):
function zerif_third_button() {
    echo '<a href="#">Tercer botón</a>';
}
add_action( 'zerif_big_title_buttons_bottom', 'zerif_third_button');
El resultado será el siguiente:

![Zerif Lite - 3 botones](//caribdis.net/wp-content/uploads/2016/02/zerif-3buttons.jpg)

Tenga en cuenta que tendrá que reemplazar manualmente el enlace (`#`) y la etiqueta del botón (`Tercer botón`) por los que correspondan.

Como vemos, el color es el predeterminado de la hoja de estilos del tema, pero podemos usar los otros tres incluidos, modificando las clases del código anterior.

Para el color rojo (la clase `.red-btn`):
echo '<a href="#" class="btn btn-primary custom-button red-btn">Tercer botón</a>';
Para el verde (la clase `.green-btn`):
echo '<a href="#" class="btn btn-primary custom-button green-btn">Tercer botón</a>';
Para el amarillo (la clase `.yellow-btn`):
echo '<a href="#" class="btn btn-primary custom-button yellow-btn">Tercer botón</a>';
![Zerif Lite - Botón amarillo](//caribdis.net/wp-content/uploads/2016/02/zerif-3buttonsyellow.jpg)

¿Y qué tal si queremos un color personalizado? Usemos una clase personalizada, por ejemplo `.custom-btn`.
echo '<a href="#" class="btn btn-primary custom-button custom-btn">Tercer botón</a>';
Luego vamos a la hoja de estilos del tema hijo, `custom.css`, o al recuadro *CSS adicional* del *Personalizador*, y pegamos el siguiente código (reemplace el valor del color de fondo por el de su preferencia):
.custom-btn {
    background: #1990a4;
}

![Zerif Lite - Botón personalizado](//caribdis.net/wp-content/uploads/2016/02/zerif-3buttonscustom.jpg)

Por último, si queremos modificar también el color de fondo al posar el puntero (y evitar el azul predeterminado), añadimos el siguiente código:
.custom-btn:hover {
    background: #15798a;
}

Recuerde reemplazar el valor del color de fondo por el de su preferencia.