6 Tips to Customize GeneratePress Theme [Best Guide 2022]

Discover 6 Tips to Customize GeneratePress Theme in 2022.

GeneratePress is one of the lightest and fastest themes for WordPress. However, the free version comes with limited theme features and settings. You must purchase a premium GeneratePress plugin to use all the features of the theme. In this tutorial, we will show you the 7 best tips for customizing the GeneratePress theme.

Tips to Customize GeneratePress Theme

gratuit-wordpress-themes-GeneratePress
  • Add Google Analytics without plugin
  • Insert author bio box without plugin
  • Insert ads without plugin
  • Change the date of publication to the date of last update
  • Add: leave a reply above the comment section
  • Insert Yoast breadcrumb
  • Remove links from author and publication dates

Using Elements in GeneratePress

GeneratePress does not offer theme options like many other themes. You must use the Elements function to insert codes on your site. Follow the steps below to use the Elements feature in the GeneratePress theme.

Activating Elements

  • Navigate to the “Appearance > GeneratePress” section.
  • You will see all modules of the theme here.
  • Click the “Enable” link under the “Elements” option.
customize generatepress theme

Configuring “hook” in GeneratePress

After enabling Elements, you need to set up a Hook to insert codes on your page.

  • Go to the “Appearance > Elements” menu and click on the “Add New” button.
  • Select the “Hook” option from the “Choose item type” drop-down list.
  • Use “Settings” and “Display Rules” to apply the codes to the required section of your website.
create hooks under generatepress

1. Setting up Google Analytics

Follow the steps below to add the Google Analytics tracking code:

  • Create a new Hook element.
  • Give your element a name like “Analytics” and paste your tracking code in the text input section.
analytics hooks
  • Select “wp_head” as the hook under the “Settings” tab.
assign a header to the hook
  1. In the “Display rules” tab, choose the “Entire site” option from the drop-down list.
analytics generatepress

Publish your item.

Now Google Analytics is installed on your site. You can verify this by viewing the source code and sending test traffic from your Google Analytics account.

2. Insert Bio author box without plugin

The GeneratePress theme uses the CreativeWork schema. Therefore, the theme does not offer an author biography section to showcase author details with a gravatar image. You can use a Hook and custom CSS to insert an author box for your site.

<div class="author-box">
<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div>
<h4 class="author-title" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
</h4>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?>
</p>
<div class="author-links">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Lire plus">
...
</a>
</div>
</div>
</div>
  • Create a new hook and paste the following code into the text box.
  • Choose the position of your author box under the “Settings” tab by selecting the drop-down list. You can insert the author box “after_main_content” or “before_comments_container”.
  • Be sure to check the “Run PHP” box as this is PHP code.
  • In the “Posting rules” section, select “Publish” as the location, then “All messages”.
  • This will add the author box on your blog posts.
See also  How to Write an SEO Optimized Article? [2022]

Use the following CSS to change the look of your author box. You can insert this CSS in the “Appearance > Customize > Additional CSS” section.

.author-links a {
    font-size: 2em;
    line-height: 1em;
    float: right;
}
.author-box {
    padding: 30px 30px 0px 30px;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgb(235, 235, 235);
    border-radius: 2px;
}
.author-box .avatar {
    width: 60px;
    border-radius: 50%;
    margin-right: 30px;
}
h4.author-title {
    margin-bottom: 1em;
}
h4.author-title:before {
    content: 'About';
}

You can customize the margin, header, gravatar width and other details as needed to match the author area of ​​your site. Also, if you are running a blog with a single author, remove the author link code to display the author’s name without linking to the archive page.

3. Insert ads without plugin

Similar to Google Analytics, you can also insert Google AdSense or any other advertising code.

  • Create a new item and paste your ad code into the text box.
  • Select one of the hook positions to insert the advertisement in the header, comments, footer, sidebar or inside the container.
  • Configure display rules to display advertising on post types or archives.

You can refer to all available hook positions in GeneratePress visual guide documentation and choose the right position. However, you cannot insert advertisements between post content . You may need to use a plugin like Quick Adsense for this purpose.

4 Change publish date to last updated date

By default, GeneratePress will display the publication date of your blog posts. You can hide the published date and show the last updated date as metadata. This will help users understand when your content was last modified.

Add the CSS code below in the “Appearance > Customize > Additional CSS” section. You can change the phrase “Updated on” to whatever you want. However, provide a space after the sentence so that it is correct on the published website. You can also view the live preview in the customizer to check how it looks on your blog posts.

.posted-on .updated {display: inline-block;}
.posted-on .updated + .entry-date {display: none;}
.posted-on .updated:before {content: "Updated on ";}

Remember, although your blog posts will display the last updated date, they will always contain the published date. Google will display the published date in search results, not the modified date. If you want Google to show the update date , you may need to edit the theme’s PHP file, which is not recommended.

See also  How to install WordPress on your Windows 11 with WAMP [ultimate Guide]

5. Add a reply link above the comments section

Another problem with GeneratePress is the comments section. By default, all WordPress themes display “Leave a Comment” with a hyperlink to comment on the comment text box. This will help users to quickly access the comment text box when there are many comments on the article.

However, the GeneratePress theme shows a header with a comment count, a list of comments, and then the reply text box. When you have hundreds of comments, users have to scroll down the page to leave a comment. In most cases, users will not respond and leave the page, which will lead to bad user experience.

Follow the instructions below to add “Leave a Comment” with a link on your GeneratePress site.

  • Create a new hook and paste the code below. Edit the phrase “Leave your answer”. to whatever you want like “Leave a comment”.
<h4>
<a href="#respond" class="smooth-scroll">Laissez votre réponse.</a>
</h4>
  • Choose the “below_comments_title” hook under the “Settings” tab.
  • Configure the “posting rules” as posts/all posts.
  • Publish the item.

Now you will have a nice link with smooth scrolling that will take users to the comment reply box on clicking the link.

If needed, you can add an additional CSS class to the header element to modify the appearance. Modified code with additional CSS class should look like below:

<h4 class="response">
<a href="#respond" class="smooth-scroll">Laissez votre réponse.</a>
</h4>

You need to paste the following custom CSS under “Appearance > Customize > Additional CSS”.

h4.response {
    text-align: center;
}
h4.response a {
    color: rgb(255, 0, 0);
}
h4.response a:hover {
    color: rgb(0, 0, 255);
}

This CSS will change the link color, hover color and center alignment. You can add any valid CSS style to this class to align the link to your layout.

6. Add Yoast Breadcrumb in GeneratePress theme

Yoast SEO offers built-in breadcrumb navigation. But, you need to insert the PHP code on your header or single.php file in order to show the breadcrumb structure. If you are using the Yoast SEO plugin with the GeneratePress theme, you can add the breadcrumb without modifying the PHP files.

  • Create a new hook and paste the Yoast breadcrumb PHP code below into the text box.
  • Select the hook as “before_content” or “before_main_content” or “before_entry_title” depending on where you want to display the breadcrumb.
  • Check the “Run PHP” option.
  • Configure the display rule to display breadcrumbs on all articles.
  • Publish your item to view breadcrumbs on the live site instantly.
<!-- BEGIN Yoast Breadcrumb -->
<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<!-- END Yoast Breadcrumb -->

Add the CSS below to display the breadcrumb in an elegant way:

#breadcrumbs {
     box-shadow: 1px 1px #d5d4d4;
     background: #eeeded;
     border: 1px solid #eeeded;
     border-radius: 5px;padding: 0 5px 0 10px;
     font-size: 16px;
}

Customize font size, color, background and shadow as you wish.

See also  How To Import External Images Into WordPress

7. Disable Author and Post Date Link

Ideally, the date published or modified should be linked to the date archive page. If you noticed, GeneratePress associates the post URL with the post metadata by default. Paste the code below into your functions.php file to remove the metadata link on posts.

You can use a plugin or a child theme to insert code into the functions.php file. Alternatively, you can paste the code into functions.php by going to the “Appearance > Theme Editor” section. You need to update this change every time you update the theme.

// Remove Link from Date
add_filter( 'generate_post_date_output','tu_remove_date_link', 10, 2 );
function tu_remove_date_link( $output, $time_string ) {
    printf( '<span class="posted-on">%s</span>',
        $time_string
    );
}

Similarly, GeneratePress by default will link the author’s name to the author’s archive page. If you are running a single author blog, you can disable the author link by adding the code below in the functions.php file.

// Remove Link from Author
add_filter( 'generate_post_author_output','tu_no_author_link' );
function tu_no_author_link() {
    printf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>',
            __( 'by','generatepress'),
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() )
        )
    );
}

Save changes and verify that links are removed from the meta post date and author name.

If you liked this article, please subscribe to our reddit community to discuss it. You can also find us on Twitter and Facebook.

5/5 - (2 votes)
SAKHRI Mohamed
SAKHRI Mohamed

The blog of a computer enthusiast who shares news, tutorials, tips, online tools and software for Windows, macOS, Linux, Web designer and Video games.

Articles: 3747

Leave a Reply

Your email address will not be published.