Used to be in WordPress that creating your own clickable button meant fiddling with the theme’s style sheet tags and coding. Or you might be using an outside scheduling system that has button code for you to copy and paste, but it’s the wrong color or font style or button size.
What to do? You now have a couple of options in the new block editor for WordPress.
Basic Button Block in the New Editor
The Gutenberg editor in WordPress already has a button block to use. When you are writing or editing a post or page, just
- click at the end of a block/paragraph before the one where you want to add something, and choose the + from the top left corner of your edit screen, or
- click on the + at the top or bottom of the block/paragraph you are in
You will see a series of block names with dropdown arrows to see more. In the Layout section, you will find the button block. Click on that and a button block will appear. You can add text for your button (like “Submit” or “Count me in!” or “Register”) and create a link underneath to one of your other pages or to another website. Most of the time, you will be sending people to a contact page or to your shop page.
NOTE: If you are trying to make your scheduling system’s button look more like the rest of the ones on your site, then choose a simple link option to the calendar rather than trying to embed a scheduling button on your site. Then you can use the link on your own button.
When you hover in your block, or if you choose the little dotted area on the left of your block between the arrows, you’ll see options pop up to change the format of your block, including alignment (see below). With this basic block, you have left, center, and right align options. Keep in mind that, like other blocks in WordPress, if you choose left or right alignment, text from the paragraph below will move to flow alongside the button.
With that button block selected, look at the settings area to the right of your post or page text (see above). If you don’t see any settings there, click on the gear icon at the top right of your edit screen, and it will appear. The “Block” tab will be active if you’ve clicked on a specific block. Settings for your button block include Styles, which shows you options for shapes for your block, and Colors for background and text of your button.
Styles available will depend your theme, but will always include one with rounded corners, one with squared corners, and one where the button is an outline and the inside is white or the color of your page background.
Color settings start with some basic colors, which may or may not match the ones you are using in your theme. If they don’t, you can change them by choosing Custom Color. You will need to know the hexidecimal (six-digit) letter/number combo for your theme color (e.g., #cc0000). It might already be set in the Customize/Color settings in your theme, but if a designer put your colors in for you, ask them for a short list of color codes they used for your site. Then you can have the numbers available to paste into elements like your button.
After you set custom colors here for one block, they will automatically become the defaults for any new blocks you create for your site.
Now, publish or update your page or post and your button should be both beautiful and functional!
Introducing Atomic Blocks
Atomic Blocks is a new plugin made for the WordPress Gutenberg editor. It works similarly to the default Button block but has some extras.
Just use the + option in a block or at the top left of the screen and scroll through to the Atomic Blocks section. Choose the AB Button.
The AB Button’s alignment options (located in the same place at the top left of the block itself) do work a little differently from the default block feature: the text does not wrap around it if it’s left or right aligned. I like this layout better for a button. This way I can have my button on the left, for example, and it will stand alone in the paragraph without the text coming around to hug it.
The AB Button has style and color settings like the default WordPress Button block (see above). The color settings work the same way, but this block has some extras for you to consider.
First, it allows you to make the link from the button open a new window or tab on the user’s browser. That’s convenient for buttons that go to other sites, for example. The tab for your site will remain easy to get back to without using the back arrow on the browser.
In the Styles area, the AB Button has more shape options and also allows you to change the size of the button, which the default WordPress button doesn’t do.
Depending on how much customizing you want to have, either the WordPress button block or the AB button block will make creating buttons much easier for website owners.
You can download a free PDF of this tutorial here.
Button blocks make me very happy as a site designer. 🙂 And if making your own buttons is something you’d like to delegate, just contact me and I’ll make them for you!