Agregar paginación personalizada a mi diseño CSS

[WWWW]

Hola amigos.

Quisiera agregar una paginación a un theme propio. pero no encuentro forma, sin que el enlace quede dentro de mi estructura.

                    <div class="pagination-content bg-offwhite mt-114 mt-md-74 mt-sm-56">
                        <ul class="nav">
                            <li class="btn-arrow btn-prev mr-auto"><a href="#"><i class="fa fa-angle-left"></i></a></li>
                            <li><a href="#" class="active">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li class="btn-arrow btn-next ml-auto"><a href="#"><i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </div>

Código WP de paginación

<?php
echo paginate_links( array(
    'format'  => 'page/%#%',
    'current' => $paged,
    'total'   => $the_query->max_num_pages,
    'mid_size'        => 2,
    'prev_text'       => __('&laquo; Prev Page'),
    'next_text'       => __('Next Page &raquo;')
) );
?>

 

[BotBeta]

Hola amigos.

Quisiera agregar una paginación a un theme propio. pero no encuentro forma, sin que el enlace quede dentro de mi estructura.

                    <div class="pagination-content bg-offwhite mt-114 mt-md-74 mt-sm-56">
                        <ul class="nav">
                            <li class="btn-arrow btn-prev mr-auto"><a href="#"><i class="fa fa-angle-left"></i></a></li>
                            <li><a href="#" class="active">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li class="btn-arrow btn-next ml-auto"><a href="#"><i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </div>

Código WP de paginación

<?php
echo paginate_links( array(
    'format'  => 'page/%#%',
    'current' => $paged,
    'total'   => $the_query->max_num_pages,
    'mid_size'        => 2,
    'prev_text'       => __('&laquo; Prev Page'),
    'next_text'       => __('Next Page &raquo;')
) );
?>

Para lograr agregar paginación personalizada a tu diseño CSS, puedes seguir estos pasos:

1. Elimina el código de paginación de WordPress que proporcionaste:

<?php
echo paginate_links( array(
    'format'  => 'page/%#%',
    'current' => $paged,
    'total'   => $the_query->max_num_pages,
    'mid_size'        => 2,
    'prev_text'       => __('&laquo; Prev Page'),
    'next_text'       => __('Next Page &raquo;')
) );
?>

2. En su lugar, puedes crear tu propia paginación HTML personalizada dentro del archivo de tu tema, utilizando CSS para darle el estilo deseado. Aquí tienes un ejemplo básico de cómo podrías hacerlo:

<div class="pagination-content bg-offwhite mt-114 mt-md-74 mt-sm-56">
    <ul class="nav">
        <li class="btn-arrow btn-prev mr-auto"><a href="#"><i class="fa fa-angle-left"></i> Prev</a></li>
        <?php for ($i = 1; $i <= $the_query->max_num_pages; $i++) : ?>
            <li><a href="<?php echo esc_url(get_pagenum_link($i)); ?>" <?php echo ($i === $paged) ? 'class="active"' : ''; ?>><?php echo $i; ?></a></li>
        <?php endfor; ?>
        <li class="btn-arrow btn-next ml-auto"><a href="#"><i class="fa fa-angle-right"></i> Next</a></li>
    </ul>
</div>

3. Asegúrate de que $the_query esté inicializado y contenga la consulta correcta antes de usarlo en tu paginación personalizada.

Siguiendo estos pasos, podrás tener una paginación personalizada con un diseño CSS acorde a tu tema. Recuerda ajustar el estilo a tus necesidades específicas utilizando tu archivo CSS.