Continuando as postagens sobre como criar campos personalizados no WordPress com CMB2, vou fazer um exemplo mais prático de como usar os campos criando uma página com uma galeria de parceiros, muito parecido com as páginas de clientes ou mesmo portfólios.

Traçando nosso caminho

A página precisará conter as seguintes informações do parceiro:

• Nome – Campo do tipo text
• Logo – Campo do tipo file
• A URL do site – campo do tipo text_url
• Esses campos acimas ficarão dentro de um campo do tipo group

Poderíamos criar um custom post type chamado parceiros, usar o título do post como nome, a imagem destacada como logo e apenas criar o campo de URL, porém como isso é um exemplo, vamos fazer de uma forma que possamos usar a maior quantidade de campos possível para praticarmos mais, ok? Estão vamos definir hipoteticamente que esses campos aparecerão apenas em uma página chamada Parceiros, com slug parceiros e que essa página tenha o ID 53. Agora vamos ao código!

Criando o metabox “Cadastrar parceiros” e seus respectivos campos

Detalhes importantes:

• Esse metabox será mostrado apenas na página “Parceiros”, que tem o id “53”, isto está definido na linha 12;
• Usamos o add_field para criar os campos, mas como esses campos ficarão dentro de um grupo de campos, então temos que usar o add_group_field, veja nas linhas 31, 39, 54;
• Podemos customizar o texto do botão de upload como está na linha 49;
• Também podemos customizar os textos do botões dos grupos de campos como está na linha 24 à 26;

O metabox vai ficar como na imagem abaixo, quando o usuário clica no “adicionar parceiro” abrirá um novo grupo de campos vazios, como eu mostrei no vídeo de exemplo(1:55) em um post anterior.

Resgatando os valores dos campos

Eu cadastrei 3 parceiros para testarmos, veja na imagem abaixo:

Vamos criar um arquivo chamado page-parceiros.php (onde parceiros é o slug da página Parceiros que criamos) para poder resgatar os dados cadastrados nos campos que acabamos de criar. O conteúdo, bem como a marcação HTML e as CSS, vai variar conforme a sua necessidade, então vamos focar apenas no que interessa aqui, ok? 

Primeiramente vamos pegar o valor do grupo de campo com a função nativa do WordPress get_post_meta e vê o que ele nos retorna.

$prefix = '_cmb2_'; // O prefixo que definos para os campos

$grupo_campos_parceiro = get_post_meta($post->ID, $prefix.'grupo_campos_parceiro', true);

Isso retorna o seguinte array.

array
(
    [0] => Array
        (
            [_cmb2_nome_parceiro] => Company Compass
            [_cmb2_logo_parceiro_id] => 1718
            [_cmb2_logo_parceiro] => http://localhost/wordpress/wp-content/uploads/2017/01/globe-compass-logo.jpg
            [_cmb2_url_parceiro] => http://CompanyCompass.com
        )

    [1] => Array
        (
            [_cmb2_nome_parceiro] => The Chef
            [_cmb2_logo_parceiro_id] => 1719
            [_cmb2_logo_parceiro] => http://localhost/wordpress/wp-content/uploads/2017/01/chef-logo.jpg
            [_cmb2_url_parceiro] => http://thechef.com.br
        )

    [2] => Array
        (
            [_cmb2_nome_parceiro] => Eco care
            [_cmb2_logo_parceiro_id] => 1720
            [_cmb2_logo_parceiro] => http://localhost/wordpress/wp-content/uploads/2017/01/eco-care-logo.jpg
            [_cmb2_url_parceiro] => http://ecocare.com.br
        )

)

Pronto, agora tá fácil, não é? Só rodar um foreach, então vamos lá!

NOTA: O campos file que usamos para o logo retorna além do URL do arquivo o ID do mesmo, assim fica mais facil de usar, então vamos usar o ID e ignorar a URL

Eis o código:

Eis o resultado final:

Como já citei, a marcação HTML e as CSS você define como desejar, eu fiz um CSS para deixar a apresentação melhor, mas achei desnecessário mostra isso.

Isso é tudo pessoal, qualquer dúvida use os comentários.