Backgroound Image

POSTS

How to Get the Most Out of a WordPress Cover Block

Posted on by Bob Wilson

If you want to build a a cover block like the one in this link, then keep reading.

Step 1: Pick the Right Theme

The performance of a WordPress cover block tends to be theme dependent. You want to pick a theme that sets your cover block to an appropriate size based on the screen size that it is being featured on. And you want to pick a theme that can set the text of your block to the far left, to the far right, or to the center. You can spend a lot of time searching for a theme that does this. Or you can just use the Big Media theme.

Step 2: Add Your New Theme

You can add the Big Media theme from your admin dashboard. Go to Appearance > Themes, then click the “Add New” button, then type “Big Media” into the search bar. Next, go to Appearance > Customize. Click the “Change” button in the “Previewing theme” box. Find the “Big Media” theme and click the “Live Preview” button. Feel free to make any changes you want, then click the “Activate & Publish” button.

Step 3: Set Your Image

Next, push the x button to leave the customizer. If you’re using the Big Media theme, you can improve your site’s loading speed by setting the image width of your cover block to 1800. Some other themes will require you to set your cover block to the widest possible screen which can be unpredictable and can cause performance problems. You can reduce the image width in the media section of the admin dashboard.

Step 4: Set Your Cover Block

From the admin dashboard, open the page that you want to add your cover block to. Open a cover block. After you add your image you’ll want to:

  1. Set your text out of the way of the most important part of the image. You can do this by selecting the text, then changing the alignment. The alignment dropdown is the middle button with the three horizontal lines above the text block when it is selected. You can use the preview button to see exactly how this will look.
  2. You will probably also want to select the text, then look into the block sidebar and change the text color to white.
  3. Test your cover block using several different screen sizes. You can do this by opening the page preview then hitting the F12 key. Or if you have a Mac, then you can click on the settings icon of your browser, then look for developer tools (it might be under a menu item labelled “more tools”).
  4. Once the new window is open look for a devices icon. It’ll probably look like a pair of monitors and/or a tablet. Click on it. Now you can test different devices and custom screen sizes.
  5. As you test your different screen sizes, you should be on the lookout for when the picture doesn’t fit right. You’ll be able to adjust for this back in the block editor when the block is selected in the block sidebar by adjusting the focal point picker.

Step 5: Add a Typing Feature (Optional)

You now have everything you need for a fully functional cover block. But if you want to make something extra special, then you can add a typing feature by reading my typing feature tutorial.

How to Add a Typing Feature to Your WordPress Site

Posted on by Bob Wilson

UPDATE: I have decided to remove the two typing feature from the link below. I decided that I had too many typing features on my site. You should also note that the latest version of this plugin requires version 2.0.15. So you would want to download the latest script:

There are a few different plugins available if you want to add a typing feature like the one at the top of the themes page to your WordPress site. But when you get down to brass tacks, a typing plugin doesn’t actually have to do very much. Type.js is open source software that does the heavy lifting of making the typing action happen. JSDelivr provides a fast and easy way to add Typed.js to your site. And WordPress already provides all of the interface necessary to design the output. All your plugin needs to do is synchronize the existing software.

Downloading My Plugin

Download my plugin from my github repository. Unzip it, then open the file until you find the file named big-typing-effect (all lower case). If the file name has been post fixed with anything such as “-main”, then you should delete it so that it just reads “big-typing-effect”. Go into your WordPress file directory and add the big-typing-effect folder into your plugins folder (wordpress > wp-content > plugins). Then go into your WordPress admin center (Plugins > Installed Plugins) and activate the plugin.

Now all you have to do is follow the instructions in the readme file.

If you have any questions, then feel free to post them in the comments section.

Why I haven’t tried to publish this to WordPress.org yet

It’s time peel back the mystique of plugins. A useful plugin doesn’t need to be more than a few files with a few lines each. The reason most people don’t realize this is they rarely see simple plugins. Simple plugins often aren’t worth being published into a commercial setting. A simple plugin rarely needs to be updated. But a commercial plugin is expected to be updated with every new version of WordPress, even when there is nothing to update. This can make hosting a simple plugin in a commercial venue an unnecessarily complicated venture.

Bearing all of this in mind, I may try to publish this plugin or some other version of it to WordPress.org in the future if I decide it is worth dealing with all of the overhead. But fortunately, you can download it from GitHub right now.