7 Tricks to Customize GeneratePress Theme

GeneratePress is one of the popular lightweight themes you can get for WordPress sites. However, the free version comes with limited features like footer link and limited theme settings. You have to purchase a GeneratePress premium plugin to make use of the complete features. If you are familiar with commercial WordPress theme’s setup, you will be surprised that GeneratePress has different way of getting things done. You will not see any author box or custom sidebar widgets like many commercial themes available on the market. If you wonder how to add additional features, here are the top 7 tricks you may be looking for customizing GeneratePress theme.

7 Tricks to Customize GeneratePress Theme

It is easy to get a new functionality in WordPress using a plugin. You can use Elements and standard CSS modifications in GeneratePress to achieve the following tasks without additional plugins.

1. Add Google Analytics without plugin
2. Insert author bio box without plugin
3. Insert advertisements without plugin
4. Change published date to last updated date
5. Add leave a reply above comment section
6. Insert Yoast breadcrumb
7. Remove links from author and post dates

Using Elements in GeneratePress

GeneratePress does not offer theme options like many other themes. You have to use Elements function and setup custom hooks to insert codes on your site. Follow the below streps to use Elements feature in GeneratePress theme.

Activating Elements

• Navigate to “Appearance > GeneratePress” section.
• You will see all the modules of the theme here.
• Click on the “Activate” link against “Elements” option.
• Remember, “Disable Elements” is a different feature for disabling title. You have to activate the “Elements” option.

Setting Up Hooks in GeneratePress

After activating Elements, you need to setup a hook for inserting codes on your page.

• Go to “Appearance > Elements” menu and click on “Add New” button.
• Select “Hook” option from the “Choose Element Type” dropdown.
• Use “Settings” and “Display Rules” to apply the codes to required section of your website.

The latest GP version also offers the possibility to insert blocks which is useful to add widgets like related posts.

1. Setting Up Google Analytics

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

• Create a new hook element.
• Provide a name for your element like “Analytics” and paste your tracking code in the text input section.

• Select “wp_head” as a hook under “Settings” tab.

• On the “Display Rules” tab, choose “Entire Site” option from the dropdown.

Publish your element. Now, Google Analytics is installed on your site. You can verify it by viewing the source code and sending a test traffic from your Google Analytics account.

2. Insert Author Bio Box Without Plugin

GeneratePress theme uses CreativeWork schema that does not need author information as a mandatory item. Hence, the theme does not offer author biography section to showcase the author details with gravatar image. You can use hook and custom CSS to insert author box for your site.

• Create a new hook and paste the following code in the text box.

<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="Read more">
...
</a>
</div>
</div>
</div>

• Choose the position for your author box under “Settings” tab by selecting the option hook dropdown. Mostly, you would like to insert author box “after_main_content” or “before_comments_container” position.
• Ensure to check the box for “Execute PHP” as this is a PHP code.
• Under “Display Rules” section, select “Post” as your location and then “All Posts”.
• This will add the author box on your blog posts.

Use the following CSS to change the look of your author box. You can insert this CSS under “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, heading, gravatar width and other details as per your requirement to match the author box on your site layout. In addition, if you run a blog with single author then remove the author-links code to show the author name without linking to archive page. The author box display will look like below on the published site:

Note: The latest theme version also offers blocks as part of Elements. You can use GenerateBlocks plugin along with GP Premium to dynamically insert information like author image, title and description data below posts. Learn more on how to create author box in GeneratePress theme with blocks.

3. Insert Advertisements Without Plugin

Similar to Google Analytics, you can also insert Google AdSense or any other advertisement codes.

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

You can refer all the available hook positions in GeneratePress theme’s hook visual guide documentation and choose the correct position. However, you can not insert advertisements in-between post content. You may need to use plugins Ad Inserter for that purpose.

4 Change Published Date to Last Updated Date

By default, GeneratePress will show the published date of your blog posts. You can hide the published date and show last updated date as meta data. This will help users to understand the last modified date of your content on the post. Add the below CSS code under “Appearance > Customize > Additional CSS” section. You can change the “Updated on ” phrase to anything you like, However, provide a space after the phrase so that it will look proper on the published website. You can also view the live preview inside 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, though your blog posts will show last updated date it will still contain published date. Google will show the published date in search results and not the modified date. If you want Google to show modified date then you may need to modify the theme’s PHP file which is not recommended. You can also use post meta templates when using GenerateBlocks plugin to have beautiful meta data display.

5. Add Leave a Reply Link Above Comment Section

Another problem with GeneratePress is a comment section. By default, all WordPress themes shows “Leave a reply” text with hyperlink to comment response text box. This will help users to quickly navigate to the comment text box when there are many comments on the article. However, GeneratePress theme shows a heading with number of comments, list of comments and then the response text box. When you have hundreds of comments, users need to scroll down to bottom of the page in order to leave a comment. In most cases, users will not respond and quit the page thus resulting in bad user experience.

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

• Create a new hook and paste the below code. Change the phrase “Leave your response.” to anything you want like “Leave a reply.”

<h4>
<a href="#respond" class="smooth-scroll">Leave your response.</a>
</h4>

• Choose “below_comments_title” hook under “Settings” tab.
• Setup “Display Rules” as Posts / All Posts.
• Publish the element.

Now, you will have a nice link with smooth scroll that will take the users to the comment response box when clicking on the link.

If required, you can add additional CSS class to the heading element to change the look. The modified code with additional CSS class should look like below:

<h4 class="response">
<a href="#respond" class="smooth-scroll">Leave your response.</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 alignment to center. You can add any valid CSS style to this class to align the link on your layout.

6. Add Yoast Breadcrumb in GeneratePress Theme

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

• Create a new hook and paste the below Yoast breadcrumb PHP code in the text box.
• Select the hook as “before_content” or “before_main_content” or “before_entry_title” as per the location you want to showcase the breadcrumb.
• Check “Execute PHP” option.
• Setup display rule to show the breadcrumb on all posts.
• Publish your element to see the breadcrumb 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 below CSS to show the breadcrumb in a stylish manner:

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

Customize the font size, color, background and shadow as per your wish.

7. Disable Link from Author and Post Date

Ideally, post published or modified date should link to the date archive page. If you have noticed, GeneratePress by default link the post URL to the post meta data. Paste the below code in your functions.php file in oder to remove the link to meta data on posts. You can either use plugin or child theme to insert code in functions.php file. Alternatively, you can past the code in functions.php by navigating to “Appearance > Theme Editor” section. You should update this change every time when 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 author name to author archive page. If you run a single author blog, you can disable the author link by adding the below code in 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 the changes to the file and check the links are removed from post meta date and author name.

Final Words

In our opinion, GeneratePress kind of themes are for agencies, developers and those who has plenty of time in playing around with customizer settings. If you are an individual and purchase the theme, we hope the above tips helped to make your task easier for customizing the site setup.