Launching your WordPress site is just the beginning of its life on the web. You’ve conceived and birthed your baby… but now you’re in charge of feeding and protecting it.
Owning a website is a responsibility.
There’s a lot to consider, more than most people realize when they are just starting out. Neglecting your site means it could get hacked, suffer from broken links, or an unplanned update breaking your contact form. Any of which could result in lost search engine rankings, decreased traffic and/or lost leads.
Here are some of the main tasks you’ll have to do on a regular basis to keep your site in excellent health.
I’ve had some clients in the past who wanted to set up a free download in their WooCommerce store, as an email list building strategy.
In reality it can be a little cumbersome to do a free download in exchange for an email address within a store context because it takes several more clicks on the part of the user, than it would for a typical opt-in form. The steps I provide here will significantly streamline the process. I wouldn’t recommend it as your only opt-in process, but if you really want/need to use your WooCommerce store for this, the method below will certainly ease the pain points.
This year (2016) I gave a talk at WordCamp San Diego as part of the Beginners’ Bootcamp, entitled “Customizing Without Hacking”. It was an introduction to best practices for customizing WordPress without doing anything that will break your site or make it a nightmare to maintain.
Learning from the beginning how to customize the right way will make your future-self’s life much easier:
Your changes will be future-proofed to keep each layer of your site update-able: WordPress core, themes, plugins.
Using WordPress best practices means that if you are building the site for someone else to maintain, or if you will have someone else helping you in the future, they won’t have be Sherlock Holmes to figure out how the site works.
You’ll have confidence and peace of mind when experimenting with your site, knowing that you’re not going to break something beyond your own ability to repair.
Recently I had a client that needed to display a grid of images in a sidebar widget, each one of which would link to a different page. Previously they had hard coded all the images and links as HTML in a text widget but this was understandably a pain for the client to maintain and update.
I previously used Special Recent Posts as my go-to plugin for this type of thing (although I’m not sure it could handle Pages) but the free version is no longer being updated so I needed a new solution. Fortunately I found the Flexible Posts Widget plugin – the best featured posts widget I think you’ll ever need.
Creating a child theme is generally the best practice for modifying or customizing an existing theme. However in a couple of cases there may be another, easier way, especially for beginners and non-coders.
Why Use A Child Theme?
If you need to modify your WordPress theme by editing any of the code, a child theme provides a way for you to do this safely. By “safely” I mean that it enables you to keep all your modifications separate so that you can continue to update the main, or parent theme in the future.
Let’s break that down a little further.
A theme is a set of files that lives on your server. In the screenshot below, I’m using an FTP program to look at my server but you would see the same thing if you used the File Manager from inside your web hosting cpanel. Once you navigate to the wp-content folder you will then see the themes folder. Within that you’ll see a folder for each theme you have installed. In the screenshot below you can see some of the files and folders that comprise the Twenty Thirteen theme:
If you’ve used WordPress even just a little bit, you’ve probably come up against the fact that it’s really hard to add extra space into the editor. You can only hit “return” a couple of times before it starts eating those extra line spaces you’re trying to create.
So if you want to create extra empty space in your page or post – anything beyond a paragraph break or two, you’ve probably pulled your hair out. This guide will show you the reliable ways to work with spacing in WordPress.
Adding a blank or empty line in WordPress
Hitting the Enter or Return key in the WordPress editor will create a new paragraph. This will leave a blank line before starting a new line.
If you don’t want to skip a line, you can use a line break instead. To do that, hold down the Shift key while pressing Enter/Return. This will start a new line without making a new paragraph.
Add a line break in a WordPress list
If you hit Enter while in a list, you will create a new bullet point. If you don’t want to do that, but just have a line break within the same list item (see item 2 in the screenshot below), hold down Shift and press Enter.
How to add space between letters in WordPress
To add spacing between letters in the Block Editor:
Click on the text you want to change. In the right panel, make sure the Block options are showing.
Click the 3 dots next to Typography
Click letter spacing
Choose the unit of spacing and set the value.
Note that this applies to all the text in the block.
If you want to apply the spacing to specific words within the block, you have to edit the HTML directly.
Select the block that contains the text
In the top toolbar, click the 3 dots and select Edit as HTML
The code we will add is: <span style="letter-spacing:1em"> Your text here</span>
Look for the text you want to change. Immediately before it, paste: <span style="letter-spacing:1em">
After the text you want to change, paste </span> – this closes the style and ends the spacing.
When you are done editing the HTML, click the 3 dots again and select Edit Visually.
How to add space between words in WordPress
There isn’t a way to do this without editing the HTML (that I have found). Possibly some plugins that extend the editor might have this feature, but since it probabbly shouldn’t be used much, adding one of those plugins just for this, would be overkill.
Select the block that contains the text
In the top toolbar, click the 3 dots and select Edit as HTML
The code we will add is: <span style="word-spacing:1em"> Your text here</span>
Look for the text you want to change. Immediately before it, paste: <span style="word-spacing:1em">
After the text you want to change, paste </span> – this closes the style and ends the spacing.
When you are done editing the HTML, click the 3 dots again and select Edit Visually.
How to add spacing between blocks in Gutenberg / block editor
The Block editor makes it quite easy to add vertical space between blocks. There is a block called Spacer which is there by default.
Simply add it and then choose how much space you want to add.
You can choose any of the following units to set the space in:
Pixels is the simplest and one we are all mostly familiar with. The problem is that this won’t scale with different device sizes. For example, if you add 200 pixels of space, it may look fine on desktop, but may be too much for mobile.
So using one of the other relative units may be a better choice.
You can also click on the block and drag the edges to expand or reduce the size of the block.
Adding space in the Classic Editor
There’s several workarounds you can use if you happen to know HTML but that horrifies many non-techie WordPress users. Well the best way I have now found is an awesomely simple and to-the-point plugin called Spacer.
