Aqui estão alguns trechos de código úteis. São funções, filtros e CSS que eu utilizo ou precisei em algum momento para o modelo GeneratePress que eu uso e eu recomendo. Alguns deles saíram do seu fórum de apoio uma fonte inesgotável de soluções, a partir do seu documentação e outros de consultas e buscas de apoio.
Mostrar data e hora de actualização nas mensagens junto à data de publicação
Este filtro mostra a data e hora da actualização nas entradas do GeneratePress. Depende de como você configurou a data em Configurações/General/Data Formato/Custom. No caso aqui utilizado parece o seguinte: d/m/Y : H:i
add_filter( 'generate_post_date_output', função( $output, $time_string ) {
$time_string = '';
se ( get_the_date() !== get_the_modified_date() ) {
$time_string = ' | ';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
return sprintf( '%s ',
$time_string
);
}, 10, 2 );
Mostrar apenas os anos no widget do arquivo
Esta função fará com que o widget do arquivo mostre apenas anos em vez de meses. Funciona para qualquer modelo, pois actua num widget WordPress nativo. Útil se o seu blogue for muito antigo e os meses de queda já forem demasiado longos. No exemplo é mostrado com o número de posts publicados.
função my_limit_archives( $args ) {
$args['tipo'] = 'anual';
devolver $args;
}
add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );

Barra de progresso de leitura simples sem plugin
Existem vários plugins para adicionar uma barra de progresso de leitura no WordPress e também addons para a Elementor, mas com um pouco de código e um filtro da Elements from GeneratePress pode facilmente ser feito para ser muito mais leve. Este código é de Somnath Sahu
*Para este exemplo, você precisa de usar a versão GeneratePress Premium .
Primeiro criamos um filtro com Elementos com este código.
<div class="progress-container">
<div class="progress-bar" id="myProgressBar"></div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>
Nós definimo-lo com a posição wp_head e temo-lo exibido em Posts / Todos os Posts.

/* Barra de progreso de lectura */
.progress-container {
width: 100%;
height: 8px; /* Ancho del contenedor de la barra de progreso */
background: #ccc; /* Color del contenedor sobre el que se mueve la barra de progreso */
}
.progress-bar {
height: 8px; /* Ancho de la barra de progreso */
background: #a70404; /* Color de la barra de progreso */
width: 0%;
position:fixed;
z-index:999;
}
E é assim que este código é exibido depois de mudar a cor para verde
A barra de progresso irá aparecer no topo, irá acompanhar-nos durante a leitura e irá aumentar à medida que nos deslocamos para baixo e diminuir se nos deslocarmos para cima.

Mude o logótipo apenas numa página específica
Eu precisava disto uma vez e encontrei-o na altura na página de David Lanau. O filtro mostra um logotipo diferente apenas na página que você especificar e eu usei-o para colocar um logotipo diferente numa página de categoria que agrupou conteúdos de um tema específico.
add_filter( 'generate_logo','tu_custom_about_logo' );
função tu_custom_about_logo( $logo )
{
// Se, por exemplo, estivermos na página de serviços, colocaremos o nosso logotipo personalizado para esta página
se ( is_page( 'serviços' ) )
devolver 'PUT LOGO URL AQUI';
add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// Si por ejemplo estamos en la página servicios, vamos a poner nuestro logo personalizado para esta página
if ( is_page( 'servicios' ) )
return 'PON LA URL DEL LOGO AQUÍ';
// Y SI NO, PON EL LOGO GENERAL
return $logo;
}
Esconder a barra siberal na versão móvel
Se você é um daqueles que ainda usa a barra lateral e dispensou o páginas AMP se usar a versão móvel nativa do GeneratePress com barra lateral, com este CSS pode escondê-la apenas para a versão móvel.
Neste caso, pode adicioná-lo à folha de estilo no tema do seu filho ou a partir do CSS Personalizado/Adicional.
Esconder a barra lateral direita
@media(max-width: 768px) {
#right-sidebar {
display: none;
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}
Esconder barra lateral esquerda
@media(largura máxima: 768px) {
#left-sidebar {
exibição: nenhuma;
}
}
Esconder ambos
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}
Exibir imagens em destaque no laço à esquerda e à direita
Se você usar um modelo tradicional GeneratePress como Marketer ou similar, com este código pode mostrar a imagem em destaque alternando esquerda ou direita no laço
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}
Eu encontrei este código em aquigeneratepress.com onde pode encontrar outros truques úteis. E aqui está o resultado

Personalize o botão “Read more” (ler mais)
Como acima, este CSS é para o botão “Leia mais”. É a que eu uso aqui e coloco-a à direita debaixo do excerto na página principal.
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}
Estilo de paginação de entrada
Um filtro e um pouco de CSS para obter este visual para a paginação dos posts na página principal. A partir daqui, você pode ajustá-lo ao seu coração.

A primeira coisa que precisamos de fazer é substituir as palavras Previous e Next pelos símbolos << e >> com este filtro que pode adicionar nas funções.php do tema do seu filho ou com o Código Snippet.
add_filter( 'generate_next_link_text', function() {
return '>>';
} );
add_filter( 'generate_previous_link_text', function() {
return '<<';
} );
E depois o CSS, adicionado da mesma forma que nos casos anteriores
#nav-below {
text-align: center;
.paging-navigation .nav-links>* {
font-size: 20px;
padding: 7px 10px;
background-color: #b50707;
color: white;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: red;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}
Centrar a caixa do navegador
O motor de busca nativo GeneratePress é um pouco foleiro, aqui está um pouco de CSS para adaptá-lo aos dispositivos e centralizá-lo.
/* Centrar caja de búsqueda en menú principal */
form.search-form.navigation-search.nav-search-active {
width:50%;
left:50%;
transform:translateX(-50%)
}
/* Responsive caja de búsqueda en móvil - tablet y PC */
@media (max-width: 768px) {
/* CSS para móvil */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS para tablet */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
.inside-navigation {
align-items: flex-end !important;
flex-direction:column-reverse;
}
}
@media (min-width: 1025px) {
/* CSS para PC */
form.search-form.navigation-search.nav-search-active {
width:40%;
left:50%;
transform:translateX(-50%)
}
}

Categoria e tamanho do texto da etiqueta
Se você exibir as categorias e tags sob os posts, ao adicionar este CSS você pode alterar o tamanho e continuar a adicionar CSS para dar-lhes o estilo que você quiser. Todas as aulas para as modificar podem ser encontradas na documentação ou no próprio CSS, mas se não quiser complicar as coisas, aqui está ele.
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}