Experimenting with WordPress Image Sizes

As a general rule, it’s a good idea to keep images as small as possible because loading large images will slow a site down. However, they should never be uploaded with a smaller size, in pixels, than the size at which they will be displayed. For example, if an image is 600px wide but it is enlarged to stretch across the full width of the screen then it will look terrible.

The difficulty is that you need to balance “as small as possible” with your desire to display high quality images and you should take into account the purpose of the image. It will be important that the images in a photographer’s portfolio look fantastic, but if all you are doing is using a picture of a sundial to illustrate a blog post on time managment, then you may not be so fussy.

Read more

Building My “Standard” Demo Site

Standard is a WordPress website that I’ve set up to demonstrate how I use my favourite theme, GeneratePress, with its Premium plugin.

Please note that this is an affiliate link, as described on my Privacy and Cookie Notice page and I am happy to recommend GeneratePress. The theme and plugin together provide powerful features for customising numerous aspects of a website. They are designed to be lightweight and the level of support given by the developer, Tom Usborne, is amazing. I trust Tom and his team to provide a solid, dependable base for building my websites.

This is an ongoing exercise and I intended to add to this article as I build the site. I’ll use this as an overview of the project, and will include links to other articles, both on this website and elsewhere, that go into more detail. Note that the screen prints below show examples of how the customiser can be used to change things such as colours, spacing and typography. However, since I am still tweaking the website and making changes as I go, the actual settings I use may not be the same as the examples shown.

Read more

Creating a Mood Board with Canva & Coolors

Some time ago I wrote an article called “Creating a Mood Board with Milanote“. I really liked Milanote, but if you use it to make a mood board you do need to find some images to start with.

In this article I want to try some different free online tools so, just for fun, I’m going to create a mood board for a fictional tea room. When doing this, I need to think not about my own personal tastes, but about my target audience. This is particularly important when considering colour schemes. I have some information, and links, in my blog post “Colour Scheme Suggestions“.

Read more

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 plugin I have used most often has been Kadence Blocks.

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.

[UPDATE: GenerateBlocks Pro was released in January 2021 but this article is concerned only with the free version of the plugin.]

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 also a Buttons container block surrounding one or more Button blocks). These blocks have more or less the same controls as each other for Typography, Spacing, Colors, Gradients, Backgrounds and SVG Icons.

Read more

Building Static Websites Using WordPress

Recently, in one of the Facebook groups I belong to, someone asked a question about how to make WordPress more secure.

Much as I love WordPress, I have to admit that for a risk adverse person it can be worrying to know that it is a target for hackers. People who build WordPress websites for clients are likely to recognise the scenario where they hand the site over to the client, stressing that it’s important to keep the theme and plugins up to date. A few months later the client asks them to do some more work, but when they log in to the WordPress dashboard they see several plugins that have not been updated. Hopefully the client, or their host, will have been keeping backups in case the worst happens.

There are ways to get WordPress plugins and themes to update automatically, and in fact this feature will be included in WordPress version 5.5 (due in August 2020). It’s possible to set up automatic backups too, but it would be nice not to have to worry about the more vulnerable aspects of WordPress.

Sometimes, I have used WordPress.com, rather than self-hosted WordPress, as this takes care of updates and security. However, it’s only with the relatively expensive Business plan that it is possible to use plugins or to install any theme you choose.

One of the other members of the Facebook group suggested that a possible solution would be to look into HardyPress.

A few days later, TechCrunch posted an article about Strattic titled “Strattic raises $6.5M to bring static WordPress to the masses“.

The premise behind these services, and others such as Shifter, is that WordPress is a great tool for building a website, but converting it to a static version results in a more secure, and faster loading, site. This approach wouldn’t be suitable for all websites as dynamic elements such as shopping carts, comments, social media feeds etc. would not work. But it seems to make sense for sites that don’t need that type of feature.

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

Sketching a Website Page Layout with Excalidraw

Previously, I’ve written a blog post about how I used Milanote to create a mood board. I’ve also used Milanote for mind mapping. Today I came across another free online tool, thanks to the Speckyboy Design Magazine Facebook page.

It seemed that Excalidraw could be a quick way to draw out a web page layout, so I decided to give it a go. It’s quite a simple tool, without a load of bells and whistles, but I could see it being useful. It feels similar to quickly sketching with pencil and paper, but items can be moved or deleted and it’s easy to change their colour and size.

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:

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:

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