10 Useful code snippets for GeneratePress

 
  • ES
  • JA
  • PT
  • RU
  • CN
  • FR
  • 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

    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
        $time_string = '';
    
        if ( 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 );

    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.

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

    10 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

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

    10 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%)
        }
    }
    10 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;
    
    }


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

    ¿Algo que decir?