Tutorials

A Simple Page Layout With GenerateBlocks

About 10 months ago I wrote a blog post, “A Simple Page Layout with the WordPress Block Editor”, as an exercise to compare using just the block editor versus using the block editor plus one of a couple of plugins; Stackable and Kadence Blocks. I concluded that:

The Stackable and Kadence Blocks plugins both made building my page a bit quicker and allowed me to make the site look more interesting without using code, but it was pretty straightforward to build the page using just standard WordPress blocks.

Since then, the blocks plugins I have used most often have been Kadence Blocks and Ultimate Addons for Gutenberg.

Now that GenerateBlocks has been released by Tom Usborne, the developer of my favourite theme, GeneratePress, I wanted to have another go at building the same layout with this new plugin for the WordPress block editor. Note that GenerateBlocks can be used with any theme, not just with GeneratePress, although there are some features that are designed to work hand in hand with the GeneratePress theme.

GenerateBlocks is described as “A small collection of lightweight WordPress blocks that can accomplish nearly anything.” It is not supposed to include a block for every possible purpose, but can be combined with core WordPress blocks and ones from other plugins.

The plugin has just four basic blocks: Container, Grid, Headline and Buttons (although strictly speaking, there is a Buttons container block surrounding one or more Button blocks). These blocks have more or less the same controls for Typography, Spacing, Colors, Gradients, Backgrounds and SVG Icons.

Read more

Adding and Moving WordPress Blocks

I decided to make a very brief video demonstrating some basic methods used when building a page with the WordPress block editor.

One of the most useful features is block navigation; that little icon up towards the left hand corner of the screen. It’s easy to lose track of which block you have selected. Block navigation shows you where you are and helps you move to the next block that you want to use, by clicking on it in the dropdown list.

Read more

A Simple Page Layout with the WordPress Block Editor

Around 18 months ago, I wrote a blog post, Alternatives to WordPress Page Builders, to see how easy it was to build a page with a specific layout. At the start of that post I said:

Page Builders have become so popular that sometimes new WordPress users get the impression that they are expected to use one. My own view is that it’s best to keep things simple and use a page builder only if you have a need for it. However, there’s no doubt that, compared to “drag and drop” website builders, WordPress can be frustrating when it comes to laying out a page.

I found that it was possible, but quite tricky, to get the exact page layout that I was aiming for. I followed this with another post, A Look at WordPress Page Builders, at the end of which I concluded:

If you are new to WordPress, don’t think that you have to use a page builder. Learn what can be done just using the WordPress editor first, and add a page builder plugin only if you have a need for one. Don’t use it on every page and post just for the sake of it… Having said all that, during my research for this post, I began to see the value of page builders, both for speeding up development and for making a site look more polished.

Now that the new WordPress block editor (a.k.a. Gutenberg) has been released, I want to repeat this exercise to see whether it’s now easier to set out a page, using just the block editor without a separate page builder plugin.

Read more

Building My “Boxed” Demo Site – Part 2 Photo Galleries and Slideshow

For this post, which follows on from my previous blog post “Building My “Boxed” Demo Site – Part 1“, I experimented with a few different gallery and slideshow plugins:

FooGallery has been a favourite of mine for some time and, when I started this exercise, I expected to find that it was the plugin I would be most likely to recommend. However, having played with the alternatives listed above, I feel that if you just need a simple gallery, then you may prefer GT3 or Kadence Blocks.

Some Alternative Suggestions

Although I chose to use some of the most recommended plugins for this exercise, I’d suggest that you have a look at a few of the alternatives, look for reviews and have a play with them to see how they work. Some plugins to consider include:

After seeing a recommendation for Meow Gallery in a Facebook group, I gave it a try, along with the Meow Lightbox plugin. I didn’t want to add yet another gallery plugin to the Boxed demo site, so I used it on the gallery page of my Standard demo site instead. The free version of Meow Gallery did not seem to offer as much control, or as many options as the free versions of either FooGallery or GT3 Photo Gallery, but could still be a good choice if you are after something straightforward.

Adding Image Galleries with the FooGallery Plugin

I wanted the homepage of my “Boxed” demo website to consist of a grid of images, each of which was linked to one of the gallery pages that I had created earlier. I used the free FooGallery plugin to make a gallery containing these images, and chose to use a Masonry Image Gallery with the following settings:

  • Thumb width = 200
  • Masonry Layout = 3 columns
  • Gutter Size = Normal
  • Thumbnail Link = Custom URL

Read more

Building My “Boxed” Demo Site – Part 1

Boxed is one of a handful of WordPress websites that I’ve set up to demonstrate some of the different formats that can be achieved using my favourite WordPress theme, GeneratePress with its Premium modules.

Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page. I am happy to recommend GeneratePress and you can find out why it’s my favourite theme by reading my blog post “Flexible, Customisable WordPress Themes“.

The Boxed site demonstrates the following:

  • colours and fonts set using GeneratePress Premium’s customiser options
  • the “separate containers” layout
  • different backgrounds for the body and content areas of the site
  • blog posts with a masonry grid layout.

This first article explains how I set up and customised the website. Part two will be about using the FooGallery and Smart Slider 3 plugins to add galleries and a slideshow.

Read more

Adding a Row of Image Links with the WordPress Block Editor

Some time ago, I wrote a blog post giving instructions for adding a row of image links to a WordPress website. The methods I described should still work, but now that the new WordPress block editor (a.k.a. “Gutenberg”) has been released, I would expect it to be easier to carry out this task without using the plugins I had looked at before.

I thought I’d write a new post to give an update in the light of the changes, and this accidentally turned into a mini review of some third party blocks plugins.

Read more

Self-hosted WordPress Versus the Rest

WordPress have an old article (The $64,000 Question: WordPress.com or WordPress.org?) with an analogy that I’m going to borrow. The original article was written in 2013, although I see that it has been updated to mention the WordPress.com Business Plan (more on that below). I’ll extend the analogy a bit and throw in some things that weren’t mentioned.

The idea is that self-hosted WordPress versus WordPress.com is a bit like buying a house versus renting one.  I like this comparision and would extend it to include other platforms such as Squarespace, Weebly and Wix.

Read more

Instructions for Adding a Row of Image Links

UPDATE – Please note that this article was written before the release of the new WordPress block editor (a.k.a. “Gutenberg”). For a more up-to-date approach, see my article: Adding a Row of Image Links with the WordPress Block Editor.

It’s quite common to want a page layout like the example below, with a row of three images, each of which links to a different page of the website (nails, make up and hair, in my example).

Read more

A Look at WordPress Page Builders

My previous post, Alternatives to WordPress Page Builders, describes an exercise I carried out to build a simple web page without the use of a page builder plugin.

In this follow-up post, I attempt to build the same page with a few different page builders to see how much easier this makes the process. [UPDATE: These two blog posts were written before the introduction of the new WordPress block editor (a.k.a. Gutenberg). It’s now easier to layout a page without using a page builder – see my blog post “A Simple Page Layout with the WordPress Block Editor” for details.]

Read more