14 Useful code snippets for GeneratePress

 
 

Here are some useful code snippets.

They are functions, filters and CSS that I use or have needed at some point in time for the template GeneratePressthat I use and i recommend. Some of them have come out of your support forum, an inexhaustible source of solutions, from his documentation and others from support queries and searches.

Show update date and time in posts next to publication date

This filter shows date and time of update in GeneratePress entries.

It depends on how you have configured the date in Settings/General/Date Format/Custom. In the case used here it looks like this: d/m/Y : H:i

<?php

add_filter( ‘generate_post_date_output’, function( $output, $time_string ) {
    $time_string = ‘<time class=”entry-date published” datetime=”%1$s” itemprop=”datePublished”>%2$s</time>’;

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = ‘<time class=”entry-date published” datetime=”%1$s” itemprop=”datePublished”>Publicado: %2$s</time> | <time class=”entry-date updated-date” datetime=”%3$s” itemprop=”dateModified”>Actualizado: %4$s | </time>’;
    }

    $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( ‘<span class=”posted-on”>%s</span> ‘,
        $time_string
    );
}, 10, 2 );

Remove commas between tags

That’s all there is to it. If you don’t want commas between tags, this filter will not show them.

<?php

add_filter(‘generate_term_separator’, function($separator, $tags){
return ” “;
}, 10, 2);

Add background colour to categories and tags

With this CSS you can add any colour you want to all categories and/or all tags.

The CSS in the example would display them like this:

14 Useful code snippets for GeneratePress

/ Categorías y etiquetas /
.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 17px;
background-color: #B50000;
border-radius: 5px;  
    color: #FFF

}
/ Etiquetas /  
.entry-meta .tags-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #00BB08;
border-radius: 5px;  
    color: #FFFF
}

/ Espacio entre línea de categorías y etiquetas /
.cat-links {
    margin-bottom: 10px;
}

Show a different background colour for each category or tag

With this CSS you will be able to give a different colour to each category. To do this you will have to write a piece like this for each category or tag you want to modify. In the first example we use the category “wordpress” to which we add blue background and white text. In the second example we use the tag “blog” to which we add orange background and white text.

And this is the result:

14 Useful code snippets for GeneratePress

main span.cat-links a[href*=”wordpress”] {

    background-color: #007CDF;
    color: white;
}

main span.tags-links a[href*=”blog”] {

    background-color: #FF9800;
    color: white;
}

Show only the years in the archive widget

This function will make the archive widget dropdown show only years instead of months. It works for any template, as it acts on a native WordPress widget. Useful if your blog is very old and the months dropdown is already too long. In the example it is shown with the number of published posts.

function my_limit_archives( $args ) {
    $args['type'] = 'yearly';
    return $args;
}

add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
10 Useful codes for GeneratePress

Simple read progress bar without plugin

There are several plugins for adding a reading progress bar in WordPress and also addons for Elementor, but with a bit of code and a filter from Elements from GeneratePress it can easily be made to be much more lightweight. This code is from Somnath Sahu

For this example you need to use the GeneratePress Premium version.

First we create a filter with Elements with this code.

<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>

We set it with the wp_head position and have it displayed in Posts / All Posts.

14 Useful code snippets for GeneratePress
To display it just add this CSS in your child theme or in Customize/Additional CSS and style it to suit your blog.
/* Reading progress bar */
.progress-container {
  width: 100%;
  height: 8px; /* Width of progress bar container */
  background: #ccc; /* Color of the container that the progress bar moves over */
}

.progress-bar {
  height: 8px; /* Width of the progress-bar */
  background: #a70404; /* Colour of the progress bar */
  width: 0%;
  position:fixed;
  z-index:999;
}

And this is how this code is displayed after changing the colour to green

The progress bar will appear at the top, it will accompany us during the reading and it will increase as we scroll down and decrease if we scroll up.

14 Useful code snippets for GeneratePress

Change the logo only on a specific page

I needed this once and I found it at the time on the page of David Lanau. The filter shows a different logo only on the page you specify and I used it to put a different logo on a category page that grouped contents of a specific theme.

add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
 	// If for example we are on the services page, we will put our custom logo for this page
 	if ( is_page( 'services' ) )
 	 	return 'PUT LOGO URL HERE';

 	// AND IF NOT, PUT THE GENERAL LOGO
 	return $logo;

 }

Hide the sibebar in the mobile version

If you are one of those who still use sidebars and you have dispensed with the aMP pagesif you use the native mobile version of GeneratePress with sidebar, with this CSS you can hide it only for the mobile version.

In this case you can add it to the stylesheet in your child theme or from Custom/Additional CSS.

Hide right sidebar

@media(max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

Hide left sidebar

@media(max-width: 768px) {
    #left-sidebar {
        display: none;
    }
}

Hide both

@media(max-width: 768px) {
    #right-sidebar, #left-sidebar {
        display: none;
    }
}

Display featured images in the loop left and right

If you use a template traditional GeneratePress like Marketer or similar, with this code you can show the featured image alternating left or right in the loop

.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
    margin-left: 2em;
    float: right;
    text-align: right;
}

I found this code at aquigeneratepress.com where you can find other useful tricks. And here is the result

14 Useful code snippets for GeneratePress

Customise the “Read more” button

As above, this CSS is for the “Read more” button. It’s the one I use here and places it to the right under the excerpt on the front page.

a.read-more {
display: inline-block;
colour: white !important;
padding: 10px;
border-radius: 10px;
float:right
}

Entry pagination styling

A filter and a bit of CSS to get this look for the pagination of posts on the front page. From here, you can tweak it to your heart’s content.

14 Useful code snippets for GeneratePress

The first thing we need to do is replace the words Previous and Next with the << and >> symbols with this filter that you can add in the functions.php of your child theme or with Code Snippet.

add_filter( 'generate_next_link_text', function() {
    return '>>';
} );
add_filter( 'generate_previous_link_text', function() {
    return '<<';
} );

And then the CSS, added in the same way as in the previous cases


#nav-below {
    text-align: centre;

.paging-navigation .nav-links>* {
	  font-size: 20px;
    padding: 7px 10px;
    background-color: #b50707;
    colour: white;
    border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
    background: red;
    colour: #ffffffff;
}
a.next.page-numbers > span {
    display: none;
}

Centering the browser box

The native GeneratePress search box is a bit lame, here’s a bit of CSS to adapt it to devices and centre it.

/* Center search box in main menu */
form.search-form.navigation-search.nav-search-active {
    width:50%;
    left:50%;
    transform:translateX(-50%)
}

 /* Responsive search box on mobile - tablet and PC */
@media (max-width: 768px) {
    /* CSS for mobile */
        form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS for 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 for PC */
        form.search-form.navigation-search.nav-search-active {
        width:40%;
        left:50%;
        transform:translateX(-50%)
    }
}
14 Useful code snippets for GeneratePress

Category and tag text size

If you display the categories and tags under the posts, by adding this CSS you can change the size and keep adding CSS to style them the way you want. All the classes to modify them can be found in the documentation or in the CSS itself, but if you don’t want to complicate things, here it is.

.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 20px;
}
.entry-meta .tags-links a {
    padding: 3px 1px;
	  font-size: 20px;

}

Animated underlined links

CSS to create an animated effect for your text links like the one you see in the gif below:

14 Useful code snippets for GeneratePress

p a{
  color: inherit;
  text-decoration: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
  background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
  background-repeat: no-repeat;
  background-size: 100% 00%;
  background-position: 0 111%;
  -webkit-transition: background-size .25s ease-in;
  transition: background-size .25s ease-in;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 2px solid #ec4911;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

p a:hover{
  background-size: 100% 100%;
}

In background-image and border-bottom you can change the colors.

You’ll have to observe the behavior in paragraphs, buttons and other elements that include links to adjust it so that nothing is out of place.

The code is Kyle Van Deusen that, in addition to The Admin Bar, has an interesting blog called Generatetweaks where he publishes several curious pieces of code and templates for GeneratePress and GenerateBloks, like this dark mode for GP and GB.


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados