Background WordPress Layout Builder Tutorial
Within the previous ten years, I’ve used a great deal of different WordPress themes and have been really disappointed. Up till recently, I was using MyThemeShop, which was pretty excellent. But I had to do a great deal of customization to make it do and operate the way I wanted it to. A couple of weeks ago I decided to provide GeneratePress a try, and let me just say, it is by far the finest WordPress theme I’ve discovered in 10 years. I was dismissed and am now moving all of my websites to GeneratePress. I will go into exactly why in my in-depth GeneratePress review below. And if you’re wondering, yes I’ve attempted Genesis, Astra, OceanWP, Avada, X theme, Divi in addition to several other lightweight and heavier multicolored themes. WordPress Layout Builder Tutorial
GeneratePress is a totally free WordPress theme made by Tom Usborne, a developer from Canada. I’ve actually seen it for many years from the WordPress repository. Most of you know that I am pretty picky when it comes to web performance, and so I have a tendency to ignore everything in the repository. Typically because a great deal of things on there is not that great, or not encouraged for long. However, in this case, that was a mistake. The theme currently has over half a million downloads, 80,000+ busy matches, with over 500 5-star evaluations. So clearly Tom is doing something right here.
I Actually installed the free version of the theme and in a matter of 15 minutes purchased the superior version. I could tell right off the bat, the developer was thinking exactly how I was envisioning a theme should work. And I will go into that more below, but let’s first look at a number of the features. I will be covering the premium edition of the theme, because it’s worth very penny. In fact, Tom, in the event that you read this and are visiting Scottsdale, Arizona, coffees on me.
Super lightweight and quick. Modular design allowing you to enable/disable items you don’t want running. This is one of the biggest reasons I love GeneratePress.
Responsive, looks great across all of the devices.
Schema built-in, for greater results in SERPs.
Dramatic integration using all the WordPress Customizer. I haven’t been a lover of this customizer in the past, but Tom does it right.
Compatible with popular plugins, Yoast SEO, WooCommerce, EDD, BuddyPress, bbPress, and WPML. Fantastic browser support back to IE8.
Additionally, it works great with all the favorite fast-growing Elementor page builder. If you would like to dive into even more customizations, these really are a terrific combo. I have also read that individuals using Beaver Builder have experienced success.
Font awesome built-in.
A lot of filters and hooks which make it good for developers.
Great active support from the programmer. Normally, 3 updates per month.
The Documentation is also incredible. Besides have good documentation on their site, the subject has existed long enough that what I wholeheartedly throughout the setup procedure was found inside a couple of seconds from their forum.
Diving Into GeneratePress
Now it’s Time for the fun part! I test a brand new theme right from the box with no customizations to see how fast the base is. This tells me a lot of what I can expect by the time I add everything for this. Running the stock GeneratePress WordPress motif on Kinsta hosting clocked in at a whopping 265 ms load time. I was quite impressed.
One Thing I was concerned about with GeneratePress was that the modular layout was going to generate a lot of big files, but this is not the situation. You may tell that Tom actually worked hard on making sure that every record packed in GeneratePress is as small as possible. Together with HTTP/2, the amount of documents is not as important. But the size is! Have a look at some of the core GeneratePress files below:
/generatepress/css/unsemantic-grid. min.css 2.9 KB
/generatepress/style. css 7.1 KB
/generatepress/css/mobile. min.css 1.6 KB
/generatepress/js/navigation. min.js 1.1 KB
/generatepress/js/dropdown. min.js 1.5 KB
This is a developer that cares about performance! And I’ve Seen the same during all the premium add-ons. They are as small as possible get them. In reality, Font Awesome is probably the largest file contained. And that isn’t even his. With Font Awesome 5 arriving round the corner, we could anticipate this to secure smaller also.
The premium add-ons Are installation in what I’d call a modular design. You can activate/deactivate anything you are not using to ensure they don’t load on your site. As the co-developer of the perfmatters plugin that has a script supervisor built, I felt at home for this. Everything ought to be designed this way.
If You’re interested, I am using the following add-ons on this website:
No Child Theme Needed
One of The best features of GeneratePress is I no more have to use a young child motif . This makes my life much easier. No more editing my functions.php or header.php documents. I can literally update my GeneratePress theme this exact moment rather than shed one customization. The hooks add-on certainly helps make this possible. It permits you to add custom code/PHP anywhere throughout your WordPress website. WordPress Layout Builder Tutorial
Other Things I Love About GeneratePress
On each Page/post that you have a lot of options. You are able to change the sidebar layout and the footer widgets.
You Can easily swap a page involving the default option to a full width page, as well as disable elements.
The WordPress customizer options is where GeneratePress really shines! Remember, lots of these options are permitted from the superior add-ons. I can’t show you everything, otherwise, we’d be here daily. But let me show you couple which actually come in handy.
Another Plugin I highly recommend grabbing is the free Lightweight Grid Columns. Not to my surprise, this can be created by precisely the exact same programmer as GeneratePress. It enables you a super simple way to add responsive columns into any page or article. Features include:
Desktop grid thickness
Tablet grid width
Mobile grid thickness
Add custom classes
Add custom inline styles
Equal height columns
This is An example under:
You might want to Also catch his amazing WP Show Posts plugin also. View my featured posts on the sidebar of this website? That is using the WP Show Posts plugin. I have it set to show posts from a particular”featured” category. You might also have it show last modified/updated posts, recent articles, etc.. I’m using the free version and it works great.
The Segments add-in in the premium version of GeneratePress lets you do all sorts of things concerning design. Think of it like a page builder with no bloat. GeneratePress is definitely not only for blogs! I am in fact using GeneratePress for our ecommerce site (perfmatters.io) that is operating Easy Digital Downloads. Feel free to check it out. But as you can see below, it looks like a blog.
For those Of those that are regular readers, you probably did not even notice I changed the entire theme that forces woorkup.com. It only took me about an hour for GeneratePress to mimic my MyThemeShop theme that I had spent a year customizing. Here is a comparison under.
woorkup.com Old MyThemeShop Theme
My older MyThemeShop motif was already pretty quickly, but I spent a great deal of time scrutinizing it. In reality, I’ve gotten a great deal of emails from you guys asking me to publish all my customizations. My advice now is, simply get GeneratePress!
woorkup.com New GeneratePress Theme
Together with the New GeneratePress motif I was able to achieve faster speeds and 600 fewer lines of code! And remember, I don’t have a child motif. All the customizations were made with the wonderful GP hooks and snippets plugin (both CSS and PHP).
Like the WordPress theme I have working on woorkup? You’re in luck. Tom asked if he could make a replica of woorkup for the brand new GeneratePress blog library. I’m happy to let you know that you can now put in my woorkup theme in your GeneratePress website with just a single click! It is known as the Marketer theme. Get started using a great blog design instantly.
brianjackson.io Old Array Theme’s Theme
I also Moved over my personal website, brianjackson.io, to GeneratePress. Previously I was using a theme from Array Themes. It’s a pretty basic minimum site, since I do not use it to get much. As you can see it already loaded pretty quickly.
brianjackson.io New GeneratePress Theme
I had been Able to replicate the whole appearance 100% in GeneratePress in under one hour. And as you can view it loads even faster! Amazing. I was able to eliminate a few plugins that weren’t needed because of GP.
forgemedia.io Old Array Theme’s Theme
I also Moved over our business site, forgemedia.io, to GeneratePress. Previously I had been using a motif from Array Themes. It is a pretty basic minimum website, as we simply use it to our LLC. As you can see it loaded pretty fast. WordPress Layout Builder Tutorial
forgemedia.io New GeneratePress Theme
I had been Able to again move everything over and get it looking just how I wanted it in under one hour. And since you can see it loads faster! Amazing. I managed to get rid of a total of four plugins and it dropped my whole page weight 2x!
I can’t express my Excitement about finding GeneratePress and I am moving over all my sites for this (which includes several EDD e-commerce sites). Once I have my 9 sites all running in GP with no child topics, my entire life is going to be a breeze! The programmer has revived my faith in multi-purpose subjects , and that when done the correct way, can actually perform quicker.
And The best thing is, I finally have a billion more options to pick from than I did before.
What GeneratePress Is Great For…
GeneratePress Is the perfect option for performance-focused users that wish to have the ability to customize and control exactly how their site looks.
You Can make GeneratePress perform pretty much anything. And since GeneratePress has a focus on performance, the site that you build will have a great foundation to make it load fast.
Because Of that, people who build WordPress websites for a living love GeneratePress. They will normally pair it with a WordPress site builder and use it for literally any type of site.
But GeneratePress Might Not Be A Good Combination If…
…you Want something that will instantly appear perfect from the box.
For Example, if you realize you want to create a fashion blog, you might be happier picking out a niche theme that’s developed exclusively for fashion bloggers.
While GeneratePress is becoming a great deal simpler to use, as a result of its pre-built Website Library, GeneratePress still looks very barebones when you initially install it.
So To make GeneratePress look how you would like it to, you’ll almost certainly need to go in and personalize matters. And though the significant benefit of GeneratePress is how customizable it is, some users, especially casual users, do not like having to make those changes themselves.
GeneratePress Features Which Make It Unique
Here Are some of the specific features that explain why GeneratePress is so popular.
Lots Of Customization Options In The Real-Time WordPress Customizer
Beyond Functionality, another place where GeneratePress does well is its customization options.
GeneratePress Utilizes the WordPress Customizer for customization, which can be convenient as you’ll have the ability to see all of the changes that you make in real time.
The Free version of GeneratePress gives you adequate possibilities, but if you have GeneratePress Premium, you will be able to customize pretty much all about your site.
For Example, if you go into the Design region, you can configure comprehensive settings to your:
- Header — you can move your header round and change its own styling
- Navigation — GeneratePress gives you two different navigation options, including sticky menus
- Sidebar design — you can use a Couple of sidebars
- Blog post design — like featured image dimensions, metadata, etc..
- Footer layout — like the number of widgets to add
Likewise, That the Typography place enables you to control the font to get each and every element on your website, including buttons:
And You also get a thorough region to control the colour of each and every element on your website.
All Whatsoever, GeneratePress will provide you much more customization options in the WordPress Customizer than most other topics. This level of detail may be a little overwhelming if you are a beginner. But once you realize the way the preferences come together, you will have complete control over how your site looks.
Optimized Performance And Quick Page Load Times
Across All its features, GeneratePress consistently includes a focus on excellent performance and tidy code. The whole theme is less than 30 kB, which is about as little as you’ll ever find for a WordPress theme. Even most other optimized WordPress themes are still 200+ kB. And a few badly coded topics can even surpass 1 MB!
GeneratePress Also has no code dependencies, which helps you avoid the render obstructing error that Google Pagespeed Insights often cites.
Place That collectively, and you get a superfast-loading theme. How fast? To give you a sense, I ran a little test.
First, I put up an empty site using a random popular WordPress.org theme (Envo Magazine). After testing its performance with Pingdom, it
- Had a performance grade of 77
- Loaded in 1.05 seconds
- Had a page size of 243.9 kB
- Had 15 requests
That is Not bad at all! But GeneratePress can perform.
Next, I triggered GeneratePress on exactly the same test website without altering anything else. Here’s how GeneratePress did:
- Had a performance grade of 87, 10 points better
- Loaded in 666 ms, ~37% faster
- Had a page size of 26.8 kB, ~90% smaller
- Had 9 requests, ~40% fewer
If You do that same test with other topics, you are going to continue to find that GeneratePress is one of those fastest-loading WordPress themes in life. WordPress Layout Builder Tutorial
Other Useful Premium Extensions, Plus Much Modular Approach
Beyond Giving you more style controls in the WordPress Customizer, GeneratePress Premium also comes with a lot of other helpful features like:
- Elements — a unique feature which allows you create custom hooks, page headers, or layout templates.
- Page Header — lets you create a unique page header on a per-page basis.
- Sections — that is sort of like lightweight page building. It permits you to create different”sections” on a page, each with their own design and column preferences.
To Remain lightweight, GeneratePress also gives you a modular port where you could select and choose exactly which features you would like to activate.
That Way, you do not have to slow your site down for a feature which you’re never going to use.
Pre-Made Starter Sites Make It Easier To Design Your Website
In The last, you had to build GeneratePress websites from a blank canvas regardless of what, which made the theme difficult for casual users to set up.
Earlier In 2018, though, the developer added a fresh Website Library attribute for GeneratePress Premium users which allows you easily import any one of the 25+ pre-built demo sites.
You Can import them directly from your WordPress dashboard.
Yes — this site still uses GeneratePress! All I did was click a couple buttons to import a demo site.
Page-Level Settings Provide You Comprehensive Control Over Each Bit Of Content
With Most themes, each post and page will use the same settings for the most part. You may have some custom formats or templates — but you don’t have very much control past that.
GeneratePress Changes that by giving you a brand new Layout meta box for each and every page and post:
You Can utilize this meta box to:
- Change how many sidebars your site uses, or the sidebar orientation (like altering the sidebar from right to left)
- Choose how many footer widgets to use
- Disable certain components, such as your header, navigation menu, article featured picture, article title, or footer
- Produce a special”container” to your page builder
Where These controls would be the most helpful is if you are using a WordPress page builder.
By Disabling certain components, you’re in a position to create the correct baseline for your page builder design, which makes it effortless to create custom articles as needed. WordPress Layout Builder Tutorial
GeneratePress Pricing: Cheap And Works On Unlimited Sites
The Heart GeneratePress motif can be obtained for free at WordPress.org.
Nevertheless, If you’re seriously interested in utilizing GeneratePress, I feel you should purchase the GeneratePress Premium plugin, as that’s what produces the theme so flexible. The free version doesn’t give you nearly as many configurations from the WordPress Customizer. And you’ll also lose out on the premade Site Library.
GeneratePress Premium can be still quite reasonably priced. It costs only $39.95, which provides you use on infinite websites . You’ll also get a 40% discount if you want to renew to keep on receiving support and updates following the first year (you can, of course, keep using GeneratePress after the first year without renewing — you won’t get any more upgrades ).
When You believe that the normal premium WordPress theme will usually cost around $60, GeneratePress offers a great value.
As I mentioned, I do not think GeneratePress is for everybody.
If You want a niche-specific motif, you can probably save time by purchasing a theme that fits your needs for your market out of day one.
But If you’re ready to spend some time altering settings, GeneratePress’ style controls give you the flexibility to flip it into any sort of WordPress website. Or, you might even have the ability to find a starter website that fits your needs to save some time.
Additionally, It is one of the fastest-loading WordPress topics that you will locate. So if you’re seeking the best performance possible, using GeneratePress as your WordPress site’s base is a great decision.
If You combine it with fast-loading hosting, you should have no problem making your website load in under one second. WordPress Layout Builder Tutorial