Crear una página personalizada en WordPress

Tabla de contenidos

En ocasiones necesitamos crear una página personalizada en WordPress porque nuestro tema dispone de disposiciones y estructuras limitadas, para poder realizar la ampliación de una página personalizada debemos tener acceso mediante ftp para poder subir archivos al tema.

Crear una página personalizada en WordPress

Para este ejemplo he usado un tema gratuito llamado Responsive, y he creado un tema hijo, si no sabes que es un tema hijo, lee este artículo sobre crear un tema hijo en wordpress.

Por ejemplo, este tema tiene 10 plantillas para utilizar al crear una página, cada plantilla tiene una personalización distinta, sidebar izquierdo y contenido, sidebar derecho y contenido, tipo blog, etc.

plantillas tema responsive

Antes de empezar a crear una plantilla debemos preparar todos los archivos que necesitaremos para configurarla.

Crear área nueva en Widgets

Si vamos al panel de WordPress, en el apartado de Widgets comprobamos que este tema cuenta con 12 widgets:

widgets wordpress

Lo primero que haremos será crear una área nueva en widgets para usarla con la página personalizada que crearemos más adelante, para ello necesitamos implementar el archivo functions.php de nuestro tema hijo con el siguiente código:

<?php

/* Añadir una nueva Area Widget */

function custom_widgets_init() {

  /* NUEVAS SIDEBARS */

   register_sidebar(array(
    'name' => __('NUEVA AREA WIDGET', 'responsive'),
    'description' => __('NUEVA AREA WIDGET - sidebar-new.php', 'responsive'),
    'id' => 'sidebar-new',
    'before_title' => '<div class="widget-title">',
    'after_title' => '</div>',
    'before_widget' => '<div id="%1$s" class="widget-wrapper %2$s">',
    'after_widget' => '</div>'
  ));

}

add_action('widgets_init', 'custom_widgets_init');

?>

 

Este código genera una área nueva en el apartado de Widgets de nuestro WordPress, esta nueva área le hemos puesto de nombre NUEVA ÁREA WIDGET y hace referencia al archivo sidebar-new.php que crearemos a continuación.

Ahora en nuestro apartado de Widgets deberá aparecer una nueva área de widget con el nombre «NUEVA ÁREA WIDGET«.

 

Nueva área de widget en wordpress

 

Crear el nuevo sidebar

La nueva área en Widgets hace referencia al archivo sidebar-new.php el cual tenemos que crear, lo más rápido es clonar un sidebar existente para reutilizarlo, en este caso voy a coger el sidebar-right.php del tema padre y lo voy a copiar y pegar en mi tema hijo.

Ahora editamos nuestro sidebar-new.php para poder utilizarlo correctamente, editamos el código y donde aparece el sidebar que está utilizando, lo modificamos poniendo el que acabamos de crear:

<?php if( !dynamic_sidebar( 'sidebar-new' ) ) : ?>

 

Crear una plantilla de página

Ahora sólo nos faltará crear nuestra página nueva personalizada, para ello clonaremos el archivo page.php de nuestro tema padre y lo copiaremos en nuestro tema hijo, le cambiamos el nombre, por ejemplo page-new.php y editamos los siguientes códigos:

En la parte superior del todo quitamos el texto comentado y lo dejamos así:

<?php

// Exit if accessed directly
if( !defined( 'ABSPATH' ) ) {
  exit;
}

/*
Template Name: >>>> Página personalizada
*/

get_header(); ?>

 

Y en la parte inferior, donde carga el sidebar y el footer, lo dejamos así:

<?php get_sidebar('new'); ?>
<?php get_footer(); ?>

 

Ahora, cuando vayamos a crear una página nueva, en plantillas podremos observar que aparece la nueva plantilla con el nombre >>>Página personalizada

página personalizada en wordpress

 

Y con esto tenemos nuestra nueva plantilla con un widget personalizado. ¿Te ha parecido difícil crear una página personalizada en WordPress?

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Relacionados: