Con el reciente cambio del theme en el blog, algunos de nuestros lectores nos pidieron que compartiéramos el tema, pero esta vez no lo vamos a hacer de esa forma y es que vamos a mostrar como llegar a tener un tema igual que humanOS y así todos podemos aprender de todos, ¿Qué creen, una buena idea?

Como toda buena filosofía de desarrollo (no reinvetar la rueda 😀 ) el nuevo diseño está basado en la versión 1.5.3 del tema Shoestrap el cual puede ser descargado al final del post.

Shoestrap is a WordPress theme that’s based on [HTML5 Boilerplate](http://html5boilerplate.com/) and [Bootstrap from Twitter](http://twitter.github.com/bootstrap/).
It is a fork of the amazing [Roots theme](http://rootstheme.com ) so in case you want to learn more about its core features and logic, [visit the rootstheme doc](https://github.com/retlehs/roots/tree/master/doc)

Desde la misma página, además del tema, se encuentran otros plugins de pago que enriquecen el ecosistema de Shoestrap …para beneplácito de nosotros y según sus palabras:

shoestrap-theme

La versión actual del tema está basado en Twitter Bootstrap 3 así que si estás interesado en WordPress y Bootstrap 3 puedes pasar por ahí y no te arrepentirás porque es un tema muy bien desarrollado.

Comenzamos el desarrollo

IMPORTANTE: La complejidad de este tutorial es medio-alto por lo que el autor considera que se tienen conocimientos de HTML, CSS, jQuery, PHP y experiencia en el desarrollo para WordPress.

WordPress utiliza un paginado bastante básico para mi gusto y el de muchos otros 🙂 puesto que el plugins WP-PageNavi tiene, a la hora de escribir este tutorial unas 4,203,413 descargas.

Muchos blog utilizan este paginado (nosotros incluidos) pero personalmente quería adicionarle otras buenas prácticas (a mi consideración debo aclarar) entre las que se incluye un paginado con Ajax+JSON y el cambio de estructura HTML para que coincidiera con el paginado definido por Bootstrap.

Cambiar la estructura HTML de WP-PageNavi

Realizar este cambio, aunque se pueda parecer complicado, es muy fácil puesto que el/los autor(es) del plugins siguieron las normas de desarrollo de WordPress y esto hace que sea tan fácil como:

  1. Buscar el fichero functions.php de nuestro tema
  2. Adicionar el siguiente código el cual se ejecutará cuando se dispare el filtro wp_pagenavi
//customize the PageNavi HTML before it is output ...boostrap supports
function shoestrap_WP_PageNavi_Pagination($html) {
    $out = '';

    //wrap a's and span's in li's
    $out = str_replace("","",$out);
    $out = str_replace("","",$out);
    $out = str_replace("","",$out);
    $out = str_replace("