Exportar Contenido a PDF desde WordPress sin Plugins

Honestamente no sabía como escribir este título, pero lo que haremos será exportar contenido del CPT (Custom Post Type) a PDF, de todo lo que hemos hecho de nuestra saga de WordPress Avanzado, esto es útil por dónde lo veas, a muchos usuarios de tus sitios webs, proyectos o blogs, prefieren al final llevarse un PDF de lo visto, quizá porque simplifica muchas veces todo y es práctico llevar un pdf a cualquier lado.

Introducción

Ahora si, continuando con nuestra saga de WordPress Avanzado sin Plugins, ya aprendimos a crear y filtrar manuales (CPT). Ahora queremos que el usuario pueda descargar el contenido de un manual en formato PDF directamente desde el frontend. Esto es ideal para:

• Cursos descargables
• Manuales offline
• Fichas técnicas
• Recursos imprimibles

Yo todo lo haremos como siempre, sin plugins, usando solamente una librería externa ligera y PHP.

Paso 1: Instalar Dompdf manualmente

Vamos a utilizar Dompdf, una librería PHP para generar PDF desde HTML, en este caso desde nuestro template individual de cada manual.

Requisitos:

• Tener acceso al servidor o entorno local (en mi caso es en Cpanel)
• PHP 7 o superior.

Instrucciones

1. Descarga Dompdf desde Github: https://github.com/dompdf/dompdf/releases
2. Extrae la carpeta dompdf dentro del tema hijo, recomiendo crear una nueva carpeta llamada inc y dentro extraer todo
3. Incluir Dompdf en tu functions.php

Una vez que estás en el repositorio de Dompdf, deberás darle click donde dice dompdf-3.1.0.zip que es la última versión y fue la de enero 2025, así que una vez descargado, lo vas a colocar en tu carpeta inc y ahí vas a descomprimir los archivos, te muestro el ejemplo:

Ahora adentro de la carpeta, vamos a descomprimir el .zip

Nos preguntará si aceptamos extraer el archivo, tendremos que confirmar y dar click en Extract Files

Una vez logrado eso, tendremos que eliminar el archivo .zip y quedarnos nada más con la carpeta de dompdf.

Paso 2: Crear un archivo para generar el PDF

Vamos a crear un archivo llamado manual-pdf.php dentro de la carpeta raíz del tema hijo o child theme, de la siguiente forma:

En ese archivo pondremos el siguiente código:

<?php
// Carga WordPress
require_once( dirname( __FILE__, 4 ) . '/wp-load.php' );

// Carga Dompdf
require_once get_stylesheet_directory() . '/inc/dompdf/autoload.inc.php';

use Dompdf\Dompdf;

if (!isset($_GET['manual_id'])) {
    die('Manual no especificado');
}

$manual_id = intval($_GET['manual_id']);
$post = get_post($manual_id);

if (!$post || $post->post_type !== 'manuales') {
    die('Manual no válido');
}

$html = '<h1>' . esc_html($post->post_title) . '</h1>';
$html .= apply_filters('the_content', $post->post_content);

// Meta extra
$nivel = get_post_meta($manual_id, '_nivel_manual', true);
$duracion = get_post_meta($manual_id, '_tiempo_lectura', true);

$html .= '<p><strong>Nivel:</strong> ' . esc_html($nivel) . '</p>';
$html .= '<p><strong>Duración:</strong> ' . esc_html($duracion) . ' minutos</p>';

$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream("manual-{$manual_id}.pdf", ["Attachment" => true]);
exit;

En este código hay algo esencial en la parte de:

require_once( dirname( __FILE__, 4 ) . '/wp-load.php' );

Y te puedes preguntar porque le estamos asignando un valor de 4, y aquí te explico porque, analicemos la ruta del archivo manual-pdf

/wp-content/themes/twentytwentyfive-child/manual-pdf.php

Tienes que subir 4 niveles para llegar al root del sitio, donde está wp-load.php:

1. manual-pdf.php
2. twentytwentyfive-child
3. themes
4. wp-content → subes aquí, estás en la raíz del sitio (/)

Con esto nos aseguramos de que este pequeño script pueda usar todas las funciones de WordPress, como si fuera parte de un plugin o plantilla normal.

Paso 3: Añadir el código para mostrar el PDF de la plantilla

Hay dos formas de hacerlo de manera particular en ciertos manuales, o de manera general en todos los manuales, así que decidimos hacerlo en todos los manuales, es más fácil. Así que vamos a dirigirnos al archivo functions.php y pegaremos el siguiente código, observe que lo pondremos justo debajo del código para hacer un shortcode del tutorial anterior.

El código en cuestión, es el siguiente:

add_filter('the_content', function ($content) {
    if (is_singular('manuales')) {
        $manual_id = get_the_ID();
        $url = get_stylesheet_directory_uri() . '/manual-pdf.php?manual_id=' . $manual_id;
        $boton = '<p><a href="' . esc_url($url) . '" target="_blank" class="boton-descarga">Descargar en PDF</a></p>';
        return $content . $boton;
    }
    return $content;
});

Ahora solo toca decorar un poquito el botón, con algo de CSS y lo haremos en nuestro archivo de style.css

.boton-descarga {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #0073aa;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.boton-descarga:hover {
    background-color: #005177;
}

Lo puedes agregar en cualquier parte de nuestro CSS, solo no intentes agregarlo debajo de los @media que se usan para dispositivos móviles.

Y así se genera un PDF para un Custom Post Type

Vamos a dirigirnos a un Manual cualquiera de los que ya hicimos, y veremos lo siguiente:

Ya sale el botón de Descargar en PDF ahora podas darle click y observar que el PDF ha sido descargado.

En mi caso salen varios archivos porque hice las pruebas previamente, pero observa como el archivo se descarga utilizando el nombre manual-187 donde los números representan el ID de determinado manual.

Conclusiones

Realizar este tipo de prácticas sin plugins es una habilidad interesante, y recomendada si quieres tener control total del diseño del PDF, es perfecto para contenidos descargables o imprimibles, y no solo eso, puedes personalizarlo más con HTML y CSS. Espero que hayas aprendido mucho, un gusto y un abrazo. 🤓🚀