GeneratePress Review – The Fastest WordPress Theme

Yes, the hunt for a fast and reliable WordPress theme seems to be never-ending! I know this, and I am saying this because I hunted for one since 2014, only to eventually find one in 2020. That’s a long search. You don’t have to go through the same thing.

You can just jump on to the bandwagon of people using GeneratePress and feel the difference. After all, speed matters and that is what Google wants!

In this GeneratePress review, I am going to tell you everything you need to know and finish off the review with some interesting tweaks and hacks that you can use to beautify your site.

Sounds good? Okay, before I start, here are a few proofs to validate what I say:

Is this site using GeneratePress?

Yes, it is! No need to go by my words! Here is the proof:

The image above is the screenshot of the customizer segment of the website. You can clearly see the site name and the active theme highlighted by a yellow box and a red box respectively.

If you are still not satisfied with the proof, you can check yourself, you right-clicking on the website and click on “view page source” (using Google Chrome browser). Then hit CTRL+F on your keyboard and search for GeneratePress. You can see the name of the website and the name of theme.

Is GeneratePress really fast?

Indeed, it is! You don’t have to take my words for it. Here is a proof from Google PageSpeed Insights test:

This is the test result for desktop. What about the mobile?

Here is what you want to see:

There shouldn’t be an iota of doubt in your mind that GeneratePress is fast – ultrafast! It passes Google PageSpeed Insights test with flying colors.

Only a small fraction of the websites across the world can achieve this feat!

Okay, now that I have proven my point, it is time that I walk you through the GeneratePress review.

In this review, I will be using GeneratePress Premium. Yes, there is a free version available through WordPress free themes repository, but it is seriously under-powered with very few customization options available.

If you truly want to unleash the full power of GeneratePress, I will recommend that you purchase the premium version.

Switching from GeneratePress Free to GeneratePress Premium

If you are already using the free GeneratePress theme and want to switch to the premium, you need to get a license that will cost you around $59 per year. Yes, you have to keep renewing the license.

Once you have made the purchase, you can download the file.

But don’t install it as a theme, because what you will be downloading is a plugin. Yes, a plugin gives the theme its power! So, install the downloaded file as normal plugin and activate it.

That’s it! You will have successfully switched to GeneratePress Premium!

GeneratePress Review

In this thorough review, I am going to answer a lot more than you have bargained for! So, let’s begin with the basics.

What is GeneratePress?

GeneratePress is a multi-purpose WordPress theme. There is a free version available for direct installation from within your WordPress dashboard.

Just go to Appearance >> Themes and search for GeneratePress. Install it from the dashboard.

Even if you want to install the premium version, you will have to install the free version first, and then install the premium plugin to convert it into a full-fledged premium theme with additional features.

Here is a brief of the theme:

• It is a WordPress theme.
• It is a multi-purpose theme.
• It is super lightweight and extremely well-coded.
• The premium version costs $59 a year. Yes, it is a subscription-based pricing system. If you want to purchase once and for all, the price will be $249 for lifetime use.
• Yes, you get updates. For a yearly subscription plan you will get one year of updates and support. If you stop paying after one year, you will no longer get any update or support, but you can continue using the theme. If you want further support, you should renew the subscription. For a lifetime purchase, you will get lifetime updates and support.
• They have a money-back guarantee in place. You can as for an unconditional refund within the first 30 days of purchasing the premium plugin.
• If you are an existing customer, you will get 40% off on renewal of the theme provided you have a yearly subscription in place. If you are purchasing the theme now, you will not get any renewal discount. That’s sad!
• The company was founded by Tom Usborne – the founder and the lead developer of GeneratePress.
• You can use the premium theme on up to 500 websites (previously it was unlimited). If you want to use on more than 500 websites, you need to get a new license.
• GeneratePress is fully compatible with the new Gutenberg editor.
• The theme has been completely translated in 30+ languages. So, language shouldn’t be a barrier for you.
• The theme has support for RTL languages.
• With the premium subscription, you will get full access to premium modules and an assorted collection of site library. The library is essentially a collection of premade theme templates that you can implement on your site with a few clicks. If you don’t want to use a template, you can always go ahead and create your own design.
• If you want to build a multi-lingual site with WPML plugin, GeneratePress is fully compatible.
• There is a dedicated team for both development and support.

Okay, now that you know what GeneratePress is, let’s move on!

GeneratePress Free vs. Premium

The decision to switch from free to the premium version is not easy. Afterall, there is money involved. You need to pay a yearly price of $59 or a one-time fee of $249. That’s a high asking price!

For $59, you can get a lifetime theme from marketplaces like Envato (Themeforest). The recurring cost of GeneratePress is what makes it pricey.

However, in my opinion, the theme deserves such a price tag!

With the purchase of the premium version, you will get access to many premium modules that will extend the functionality of the theme and give you massive flexibility to customize the theme to your liking.

So, what premium modules do you get and how do you activate them?

To activate the premium modules, you need to install the GP Premium plugin. Once you have installed the plugin, go to:

Appearance >> GeneratePress >> Modules

You can see the list of all premium modules available. Select all modules or the ones that you need and then from Bulk Actions dropdown on the top, select Activate and hit the Apply button.

If you don’t have WooCommerce installed on your site, even if you select WooCommerce from the modules and try to activate it, it will not activate. This module can work only and only when you have WooCommerce installed on your site.

Now that you know how to activate the modules, let’s take a look at each module individually.

Backgrounds Module

This module will allow you to add background images to your site. However, trust me, you shouldn’t be going that if you want to achieve speed. Such images can quickly make your site heavy.

You can add background images to several places including menu, header, body, sidebar, content, footer, etc.

You can access the module directly from the live customizer. Here are the options that are available with the Backgrounds module:

Yes, adding background images is an easy and nice way to give your website a unique look and feel. The module will allow you import images, set position and size, etc.

I will repeat again – do not use this module if you really want to keep your website fast.

Blog Module

The blog module is an interesting place. To access this, you need to go to:

Appearance >> Customize >> Layout >> Blog

This is where you get fine controls over your blog’s appearance. You can decide on what to display, where to display, whether you want smooth scroll or not, and so on for the archives. You can also decide on the single blog posts layout.

Colors Module

This is where you can change the colors of every area of your blog. You can play around with the colors of body, header, primary navigation,, secondary navigation, off canvas panel, content, buttons, and more.

To access colors, go to:

Appearance >> Customize >> Colors

There are well over 60 different options to play with. So, take your time to create a color combination that is soothing.

Do remember that no matter how good you are with the content, if the colors of your blog are repelling, people will not like to stay on it for long. Colors play a vital role!

Copyright Module

The copyright module is a premium module that allows you to change the copyright information that you can see at the footer of the website. In the free version, you cannot do that.

To access the copyright module, go to:

Appearance >> Customize >> Layout >> Footer

This is where you can access the copyright segment and change it according to your needs. Of course, having GeneratePress link on your website’s footer is never a desirable thing, but with the free version of the theme, you will be forced to keep a link to GeneratePress site. The copyright segment will allow you to use HTML codes and shortcodes too!

Apart from the copyright information, you can even edit the footer settings of your website with ease. Play around and see what suits your requirements the best.

Disable Elements Module

The ability to disable elements is not present in the live customizer. To disable elements, you need to be editing a page or a post. You can find the options for disabling elements there.

Elements Module

Elements is by far the most powerful module that GeneratePress has to offer. This module will allow you to add layouts, advanced hooks, dynamic headers, etc. Honestly, it is more suitable for developers and/or experienced users with some coding knowledge.

However, if you want to add simple things like Google Analytics code, you can use it with ease even if you are not an advanced user or developer. Moreover, there are loads of tutorials floating all over the internet that you use. You can even approach the developers for help.

Elements can help you achieve some advanced customizations and tweaks. You cannot access elements from the live customizer. To access elements, go to:

Appearance >> Elements

This is from where you can add new elements by clicking on the Add New Element button you see on the top.

Once you click on the Add New Element button, you will see a popup where you can select the element type:

There are four different elements you can find there. They are:

Header: This is the element that you use for building your site’s header. If you are planning on creating a page hero, this is the element you will need. This element will allow you to add texts, images, etc. and style them using CSS (cascading style sheet), HTML, etc.

Hook: Yet another element is the hook. It is extremely powerful in the sense that you can use it to create custom functions or add custom features. For instance, GeneratePress doesn’t have the option of adding breadcrumbs by default. If you want to use breadcrumbs, you can add the hook to create breadcrumbs with ease.

Layout: This hook will allow you to create custom layouts (apart from the options that are already available). You can use custom layouts for specific posts or pages or for the archives, and more. You can even create a whole new layout for the entire site if you want.

Block: The block hook will allow you to create advanced customizations using the block editor instead of using HTML. The best way to use the blocks element is to combine it with GenerateBlocks plugin. Together they will allow creating custom sidebars (left and right), custom footer, and custom header.

Do not forget that the elements module is all about advanced customizations. This means that you need to show these customization on your site. So, you need to play with the display rules when you are working with any of the elements.

Menu Plus Module

The Menu Plus module brings in more advanced features like options for mobile header, off-canvas navigation, sticky menu, etc. In the live customizer, you will not see any separate option called Menu Plus.

Instead, those advanced features are included in Appearance >> Layout. That’s where you will find options like off-canvas panel, sticky navigation, etc.

The off-canvas panel will give you the option of creating a separate slide-out menu or a full-screen menu. This is particularly helpful if you have too many menu items that will not easily fit inside the primary header navigation.

Secondary Nav Module

As the name suggests, the secondary nav module will allow you to add an additional or extra menu to your website. Yes, you can customize it the way you want it using typography, layout, colors, etc.

You can access secondary navigation through Appearance >> Customize >> Layout >> Secondary Navigation.

This is a pretty handy feature for those websites that have too many menu items (categories).

Sections Module

The sections module is a fantastic feature if you are using the classic editor. This feature cannot work with the default Gutenberg editor that ships with all the latest versions of WordPress.

In case you are still using the classic editor, the sections module will work as a mini page builder.

You can quickly and efficiently build pages using the sections module that can be accessed only when you are editing or creating a new page or post.

In case you are using an advanced page builder like Elementor, you should not use sections to avoid conflicts.

My suggestion is that you should not be using advanced page builders because they add bloated CSS codes that can slow down your website. Try using the sections module, because it will not add such bloat.

As I said, the sections module cannot work with the Gutenberg editor. To address the issue, GeneratePress has come up with a fantastic lightweight plugin (written using same clean and efficient coding) called GenerateBlocks.

Site Library Module

Are you lazy? If so, you can use the site library offered by GeneratePress. This library basically includes some premade site designs. GeneratePress uses some plugins like Beaver Builder, Elementor Pro or free, etc. to create the templates. Also, the templates use the classic editor.

You can import the entire site layout from the library and use it on your website. In case you have existing content on your site, you can skip importing the demo content. If you don’t have content on your site, importing the demo makes sense.

Also, when you import the design (layout), the importer will automatically install the plugins that are an integral part of the site demos.

In case you are not happy with the overall demo, you can always go ahead and edit everything.

To access the site library module, go to Appearance >> GeneratePress >> Site Library.

Spacing Module

This module will give you the ability to control the margin and padding size of your site. This module works with almost every aspect of your site built with GeneratePress. It can work with menu, secondary menu, footer, header, sidebar, content padding, container, etc.

Just play around with the value and find out what works best for your site. The spacing module is integrated into several options you find in the live customizer. You cannot find it separately.

Typography Module

This is the final premium module (barring WooCommerce module) you get with GeneratePress. It is needless to say that typography or the fonts that you select for your website are going to play a vital role. Bad font selection can repel reader.

You can access the typography module from Appearance >> Customize >> Typography.

There are over 70 fonts available. Some of them are system fonts while others are Google fonts. Typography can be applied to almost every segment of your GeneratePress theme including body, primary navigation, secondary navigation, header, buttons, off canvas panel, widgets, footer, etc.

You can play around with font family, font weight and size, line height, paragraph margin, text transformation, etc.

Be careful about using Google fonts. They can slow down your website because the fonts load from external servers. If you want to use Google fonts, it is better that you go ahead and download the fonts and then upload them to your server. You can then adjust the code of your website to call the fonts locally from your server.

In case you are not aware of how to do that, you can always go for a plugin that can do that for you.

WooCommerce Module

WooCommerce module will work only and only when you have the WooCommerce plugin installed on your website. Using the WooCommerce module of GeneratePress, you can customize product and checkout pages using typography, layout, colors, etc.

What Makes GeneratePress So Fast?

This is an interesting question. We all know that Google now considers the speed of a website as a major ranking factor. You need to ensure that your website loads extremely fast on both mobile devices and desktops.

Users using mobile devices can try to access your website using 2G, 3G, or 4G networks. A 4G network or a Wi-Fi connection will make your website load quite fast on a mobile device, but what happens when someone tries to access your website using a 2G or a 3G network?

That’s when all the problem shows up! 2G and 3G connections will make your website load slowly. A slow-loading website doesn’t offer a good user experience.

Starting version 3.0 of GeneratePress, a few major changes were applied. In fact, the lead developer Tom called it a New Era update.

In version 3.0, GeneratePress become even more lightweight as the developers combines three different CSS files into a single CSS file named main.min.css. This saved 55% in weight. This move also ensured that it reduced three HTTP requests to just one.

However, the theme alone cannot do everything, you need to use some form of optimization to pass the core web vitals of Google PageSpeed Insights.

So, how do you achieve a perfect or a near-perfect score in Google PageSpeed Insights? I, for instance, suggest the following combination:

• Hosting provider – Digital Ocean, or Liquid Web, or Vultr, or WPX Hosting.
• CDN – Cloudflare (paid version to achieve better results).
• Caching – LiteSpeed Cache or WP-Optimize or W3 Total Cache.

I already provided you the proof of how Cloudzat performs which sits on SiteGround VPS hosting and uses optimization offered by SiteGround.

Do not forget that the whatever you do will impact your site speed. For instance, when you add Google Analytics, there will be a drop in site speed. When you add AdSense or similar other ad networks, there will be drop in site speed. The site speed will also take a hit depending on the type and size of images that you are using. The number of plugins that you are using will also determine the overall speed of your website.

So, optimization is up to you. If you want to learn how to speedup WordPress site, I have a complete guide for that. You can find that here.

GeneratePress – Built-in Optimizations

GeneratePress is already optimized for speed. However, the developers have thrown in a couple of interesting optimization tricks. Let’s take a look at them.

Flexbox Grid

Starting version 3.0, the default grid system that GeneratePress will be using is Flexbox. Those who installed GeneratePress before the update used to have Floats grid system. The new Flexbox grid system is much more lightweight and doesn’t cause CLS issues.

Those who are using Floats can switch to Flexbox with ease. You can access the option from Appearance >> Customize >> General.

If you are switching from the legacy Floats to the new Flexbox system, make sure that you are testing your website thoroughly because that can change the whole layout of your website. Be careful about that.

You will also find an option of caching dynamic CSS. Enable that option to improve the overall performance of your website. However, do not use Smooth scroll because Google PageSpeed Insights will flag it and keep showing you a warning.

For icon type, you can use either font or SVG. I prefer using SVG because that eliminates the issue Preload Key Request warning in Google PageSpeed Insights and improves the overall score by reducing load time by approximately 480 milliseconds.

Dynamic CSS Print Method

GeneratePress will allow you to print CSS files in two different ways – Inline or External. If you allow printing the CSS inline, there will be a performance drop. Though not very significant, still, every millisecond counts. That’s the reason why, you should always use the printing method as an external file.

You can switch between inline and external file from Appearance >> Customize >> General. If you are switching from inline to external, make sure that you are clicking the ‘Regenerate CSS File’ button.

Once you are done, clear the cache files of your website so that the new changes start reflecting immediately. In case you are using some CDN, do not forget to remove the CDN cache as well.

GeneratePress Customizations

As promised, this segment will let you know the various customizations that you can use for improving the overall look and feel of your website. Are you excited? Let’s begin!

Changing the Pagination Style

The default pagination style by GeneratePress is not really an eye candy. It gives a left-aligned set of numbers followed by previous and next links. That looks quite ugly, to say the least.

I, for instance, prefer the pagination to be center-aligned and the page numbers should be enclosed in circle or square boxes.

You can achieve that by adding some custom CSS to GeneratePress.

You don’t need a child theme to achieve this. The live customizer allows you to add CSS without impacting the actual code of the theme. Even when you are updating your theme files, the additional CSS that you add will stay.

To access the segment where you can add additional CSS, go to Appearance >> Customize >> Additional CSS.

Once you click on the Additional CSS segment, a new area will open where you need to add the following code:

/* Center Navigation */
#nav-below {
text-align: center;
}
/* Add radius and background to page numbers */
#nav-below .page-numbers:not(.dots) {
background-color: #ddd;
color: #000;
display: inline-block;
width: 50px;
line-height: 30px;
text-align: center;
border-radius: 20px;
}
/* Change current and hover colors */
#nav-below .page-numbers:not(.dots):hover,
#nav-below .page-numbers.current {
background-color: #1e72bd;
color: #fff;
}
/* increase width of dots…. */
#nav-below .page-numbers.dots {
display: inline-block;
width: 40px;
}
/* remove previous and next links */
#nav-below .page-numbers.next,
#nav-below .page-numbers.prev {
display: none;
}

Just copy and paste the entire code in the Additional CSS segment. If there is already some code existing there, do not replace it. Add the code below that segment.

You can play with the colors (hex code denoted with something like #fff). If you don’t know the code of your preferred color, you can get the code by a simple Google search. Even better, if you have a photo editing program like Photoshop, you can use the color picker tool to grab the code.

You can also play around with width, line height, border radius etc. The code above will give you the following pagination style:

Creating Rounded Borders

The default style of the containers and the widgets is sharp edges. Some people may not like it. Honestly, I feel that slightly rounded borders look fantastic. Again, you can change the sharp edges to rounded borders using a quick CSS hack.

You need to add a small CSS code in the Additional CSS area. As before, if there is any existing code, add the new code below that code.

Here is the code:

.paging-navigation, .inside-article, .comments-area, .widget {
border-radius: 7px;
}

Just how much round you want the edges to be is up to you. I prefer it to be 7 pixels. If you want you can change the number while adding the code.

The code above will change the appearance of the page navigation contain, article containers, comment area container and the widget containers. You can see the end results on the website after you add the code and save the changes you make.

Here is what the rounded corners look like:

Whether or not you like rounded corners is your choice. If you don’t like rounded corners, and you are happy with the sharp edges, you don’t need to add the CSS code.

Changing the Read More Button

You know where the Read More button shows up, right? It will show up on the archive pages. Unfortunately, GeneratePress doesn’t really do a great job with that.

You will either get a simple text link or an ugly-looking button. Here is how you can convert the text link into a button:

You need to check the box that reads ‘Display read more as button.’ Notice the small arrow next to the Read more label? The arrow is not there by default. You can just copy and paste that arrow and paste it there.

However, when you covert the label into a button, this is how it looks like:

You may like this simple look, but I didn’t like it. It is so mundane. What do you do about it? Well, you can convert it to something like this:

Of course, getting this design will require fiddling around with the CSS codes, because there is no straightforward way within the theme options to convert the button into what you see now.

You can add some code to the Additional CSS segment of your theme options to achieve the new look. You can create a completely different look using your own CSS code. However, I like this new design, and the code that you can use for achieving this new result is:

a.read-more.button {
font-size: 16px;
background-color: rgba(255, 255, 255, 0);
color: # b82f2f;
text-decoration: none;
background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
background-size: 0% 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.3s ease-in-out;
background-repeat: no-repeat;
padding: 10px;
}
a.read-more.button:hover{
color:# b82f2f;
background-size: 100% 6px;
background-color: #115cfa00;
}

You can always play around with the colors and the font size. Change it to your liking. For instance, you change the gradient color (the gradient you see by hovering your mouse pointer on the Read more link) by changing # b82f2f to whatever you want.

In case you don’t know the code of your preferred color, you can always, get it from a color picker of any photo editing program like photoshop.

If you want to use a custom excerpt (WordPress excerpts) for your blog posts, the above code is not going to work on its own. That happens because when you use custom excerpts, the read more button will not show up at all!

You need to first make the button show to customize it!

To make the button show, you need to add a code snippet to the functions.php file of your theme.

I will never suggest that you do that. Fiddling around with the functions.php file can lead to a broken website if you make some mistake.

So, install a small plugin called Code Snippets. It is a free plugin available through WordPress plugins repository.

Once you install and activate the plugin, add a new snippet and add the following code:

add_filter( ‘wp_trim_excerpt’, ‘tu_excerpt_metabox_more’ );
function tu_excerpt_metabox_more( $excerpt ) {
$output = $excerpt;
if ( has_excerpt() ) {
$output = sprintf( ‘%1$s <p class=”read-more-button-container”><a class=”read-more button” href=”%2$s”>%3$s</a></p>’,
$excerpt,
get_permalink(),
__( ‘Read More →’, ‘generatepress’ )
);
}
return $output;
}

Give the snippet a name, select it to run everywhere on your site and save it. This is how it should look like:

Once you have added the snippet, the read more button will show up below custom excerpts.

Once you have added the code snippet and published it, you can now go to Additional CSS segment and add the CSS code above to get the desired result.

Last Modified Date

WordPress blogs in general will show the date of publication. However, it is always necessary to keep updating your articles and letting Google know that you are updating your content to keep it fresh. This ensures that Google honors your efforts.

However, how to you show Google that you have updated your content, and that too at a later date?

GeneratePress is not going to give you a default function for achieving this. You have to customize by adding a code snippet to the theme code.

There are two things you can do:

Option 1: You can show both date of publication and the last update date.

Option 2: You can show last updated date only on the posts you update while showing the publication date on the posts that you have not updated.

I prefer the first option. You may prefer the second option. Either way, both will work! Once you achieve this, you can go to Rich Results Test and see how the page is performing on structured data.

In the structured data you can see both the date of publication and the date of modification.

Google prefers websites with such structured data.

The question is, how do you achieve this?

Option 1: If you want to show both the publication date and the modification (last update) date, you need to add the following code using the Code Snippets plugin:

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”>Published on: %2$s</time> | <time class=”entry-date updated-date” datetime=”%3$s” itemprop=”dateModified”>Last Updated on: %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 );

Copy the code and paste it as a new snippet in the Code Snippets plugin. Enter a desired name for the snippet so that you can identify it properly. Now, hit the publish button.

Option 2: You want to show ‘Last Updated on’ date only on the articles that you have actually updated, while showing the publication date on the articles you have not updated.

In that case, add the following code using the Code Snippets plugin:

add_filter( ‘generate_post_date_output’, function( $output, $time_string ) {
$time_string = ‘<time class=”entry-date published” datetime=”%1$s” itemprop=”datePublished”>Published on: %2$s</time>’;
if ( get_the_date() !== get_the_modified_date() ) {
$time_string = ‘<time class=”entry-date updated-date” datetime=”%3$s” itemprop=”dateModified”>Last Updated on: %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 );

Adding Breadcrumbs

One thing that I whish was included in GeneratePress by default is the ability to activate breadcrumbs directly from the live customizer area (theme options to be precise). Unfortunately, that function is not available.

Fortunately, you can still add breadcrumbs to your website.

Adding Breadcrumbs with Yoast SEO

I recommend Yoast SEO to anyone and everyone looking for a robust SEO plugin. This plugin can help you add breadcrumbs to your website powered by GeneratePress. Here are the steps that you need to follow:

Step 1: Enable breadcrumbs in Yoast Plugin

This is the first step! You have to enable breadcrumbs in Yoast SEO plugin.

Step 2: Add shortcode or code in hook element.

The next step is to add a shortcode or a code to the GeneratePress them using the elements module.

Go to Appearance >> Elements and then add a new element and select hook.

Give a name to the hook.

Now, either use the shortcode: Home » WordPress » GeneratePress Review – The Fastest WordPress Theme or the following code:

<?php if ( function_exists(‘yoast_breadcrumb’) ) { ?>
<div class=”grid-container grid-parent”>
<div class=”page-header”>
<?php yoast_breadcrumb(‘<p id=”breadcrumbs”>’,'</p>’); ?>
</div>
</div>
<?php } ?>

Copy and paste the shortcode or the code into the hook are. It should look like this:

Step 3: Play with the settings

Once you have to add the shortcode or the code, you need to add the location of the breadcrumb.

If you want, you can select it to be before content or after content or any other suitable place. I prefer it to be before the entry title.

Since I used shortcode, I checked the option for Execute Shortcodes. If you want to use the code, you have to select the Execute PHP. The priority of 10 is just fine. Leave it as is.

Step 4: Hook display rules

Now, you need to display the breadcrumb somewhere. Generally, it should show up on pages and blog posts.

Just follow the image below to get the settings right:

If you want, you can add some internal notes on the next tab. If you put some internal notes, it will help you to identify the hook. Don’t worry, the internal notes will not show up on your website.

Once you have completed Step 4, go back and check the website. You should be able to see breadcrumbs on your blog posts.

Now, by default, the breadcrumb will show up in the following format:

Home | Category | Article Title [the separator may be different depending on what you choose in Yoast].

It is not really looking good, is it? The title appears right below the breadcrumb and it looks ugly.

If you want to remove the article title from the breadcrumb, you can do so by adding a code using the Code Snippets plugin.

Here is the code you need to add:

function remove_breadcrumb_title( $link_output) {
if(strpos( $link_output, ‘breadcrumb_last’ ) !== false ) {
$link_output = ”;
}
return $link_output;
}
add_filter(‘wpseo_breadcrumb_single_link’, ‘remove_breadcrumb_title’ );

Copy this entire code and go to Dashboard >> Snippets >> Add New, and paste it in the field. Provide a name for the snippet so that you can easily understand it.

Here is what it will look like:

Now, save changes. Once you do that, the title will be removed from the breadcrumb. This is how it will look like on the website:

This looks much better, right?

Adding Breadcrumbs with RankMath SEO Plugin

There is nothing different in this. If you are using RankMath as your SEO plugin, you need to first enable breadcrumbs in RankMath.

Now, copy the shortcode or the code and put in as a hook through Appearance >> Elements >> Add New Element >> Hook. Follow the exact same steps as I described using Yoast.

Here is the code:

<?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?>

If you want to use shortcode, you can do that too. The shortcode is [rank_math_breadcrumb].

Adding Google Analytics

There are several premium themes available that will allow you to quickly add Google Analytics through the theme options. Soledad is one such premium theme that will allow you to add the analytics code through the theme options via live customizer.

That feature is not available with GeneratePress.

So, do you need a plugin to add Google Analytics code to your website?

I will not recommend doing that. You can natively add the Google Analytics code to your GeneratePress theme.

Here are the steps that you need to follow:

Step 1: Grab your Google Analytics code

You need to grab your Google Analytics code from the Analytics account. Go to your Analytics admin dashboard and click on the small cog icon you see at the bottom. Then from the middle column, click on Tracking Info and then on Tracking Code.

Once you click on the Tracking Code option, the analytics code will show up. Copy the code.

Step 2: Create a Hook Element

Now go to your WordPress dashboard >> Appearance >> Elements >> Add New Element >> Hook.

Give a name to the Hook so that you can quickly identify it. In the available field, paste the code.

It should look like this:

Once you have added the code, you need to specify where the code should be added. Remember, Analytics code always loads from a third-party server, and it can increase the page load time. So, it is better that you place the code in the footer.

Step 3: Hook settings

Scroll down a bit and set the hook in wp_footer. You should not be executing it as shortcode or PHP, because it is none.

In the Display Rules tab, select ‘Entire Site.’ This is what I mean:

Now, save changes and publish the hook. You have successfully added the analytics hook to your WordPress blog without using a plugin.

I don’t see a reason why you should be using a plugin to add your Analytics code when there is an option of adding it directly to your theme. Using a plugin will only add dead weight to your website and make it load slowly.

GeneratePress Support

If you are purchasing the GeneratePress premium them, you are entitled to get premium support. There is no live chat. You will get support through their support forum that you can access by logging into your GeneratePress account.

The support members are extremely active, and usually reply within minutes.

The support team strives to provide speedy resolution. However, there may be times when it may take time to resolve the issue. The time it takes depends on the severity of your issue.

It is better that you search the forum for similar questions. There are chances that the problem you are facing has already been addressed by the developers.

GeneratePress Documentation

It is absolutely essential that you go over to their documentation segment and read everything. Every premium theme comes with proper documentation and explains every bit of the theme.

Going through the documentation can help you resolve most of the silly issues that you may face while using a theme and customizing it.

GeneratePress is no different in this matter. The developers have done an exceptional job and the theme is very well documented. You can access their documentation using the URL https://docs.generatepress.com.

GeneratePress Pros and Cons

GeneratePress has its fair share of pros and cons. Here is a quick list of what I think are the advantages and disadvantages of GeneratePress:

The Pros

• Very lightweight and powerful theme.
• Extremely well-coded.
• Follows SEO best practices.
• Excellent support.
• Extremely flexible – thanks to Elements.
• Very easy to customize.
• Very reasonably priced.

The Cons

• The integrated feature of enabling breadcrumbs.
• No integrated feature for adding Analytics code quickly.
• They have a subscription-based pricing model. Yearly renewal charges can eventually pile up into a massive cost.

GeneratePress Frequently Asked Questions

Okay, we are in the last lap of our GeneratePress review. Here, you can find answers to some frequently asked questions on GeneratePress.

Let’s go…

Conclusion

GeneratePress is a fantastic theme. If you really want a fast website and well-coded website, go for it. In fact, it is so nice that I use it on all my six websites, and I am extremely satisfied with its overall performance. I am pretty much sure that you will not be disappointed using this theme.