Crear enlace al portfolio y activar un filtro en WordPress

1- La primera acción a realizar es añadir un ID en los distintos filtros del portfolio. Para realizar esto tienes que ir al fichero “portfolio.php” que genera este código HTML (depende del theme que estés usando de WordPress). En nuestro caso estamos usando el theme “Enfold” y este fichero se encuentra en el directorio:

/wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/portfolio/portfolio.php

Te diriges cerca de la línea 753, donde verás que genera el código de la categoría del portfolio y podrás ver que únicamente le añade una clase. Tienes que copiar este contenido y crear un ID con el mismo valor:

<a href="#" data-filter="'.$category->category_nicename.'_sort" class="'.$category->category_nicename.'_sort_button" id="'.$category->category_nicename.'_sort_button">

2- La segunda acción que tienes que hacer es añadir un parámetro GET en el enlace de tu botón. En nuestro caso el parámetro que hemos creado es “portfolio_category”.

<p class="link_projects_service"><a title="Event branding y trade marketing" href="http://yourdomain.com/proyectos?portfolio_category=trade-mk_sort_button">Ver proyectos</a></p>

El valor que le tienes que asignar a este parámetro corresponde al ID que has creado en el paso anterior y que lo puedes ver si inspeccionas el código del filtro del portfolio:

<a href="#" data-filter="trade-mk_sort" class="trade-mk_sort_button" id="trade-mk_sort_button">

3- A continuación tienes que hacer que WordPress cargue tu nuevo fichero javascript donde añadirás el código para simular la activación del filtro del portfolio a través del enlace. Para hacer esto tienes que ir al fichero “functions.php” que se encuentra en la raíz de tu theme. En este fichero buscas la función “avia_register_frontend_scripts()” que es donde se definen todos los ficheros javascript a ejecutar y al final añades tu nuevo fichero:

wp_enqueue_script('portfolio-category', $template_url.'/js/portfolio-category.js', array(), true);

4- El último paso a realizar es ir al directorio donde has definido que estará el nuevo fichero javascript:

/wp-content/themes/enfold/js/

Y crear el fichero con el nombre que has definido en el paso anterior “portfolio-category.js”.

Finalmente tienes que añadir el siguiente código, que básicamente lo que hace es detectar si al cargar la página tienes un parámetro GET con el nombre “portfolio_category” (existirá cuando se trate de la página del portfolio) y en caso afirmativo a los dos segundos simulas un clic al filtro del portfolio que tiene como ID el valor asignado al parámetro GET.

(function($)
{    
    "use strict";
    
    $(document).ready(function()
    {    
        var portfolio_category = getParameterByName('portfolio_category');
        
        setTimeout(function() {
            if($('#'+portfolio_category).length > 0) {
                $('#'+portfolio_category).click();
            }
        }, 2000);    
    });
    
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
})(jQuery);