• Skip to main content

Nancy Fields Graphic Design

Personalized profitable websites for coaches and authors

  • Website
    • Authors
      • Authors Website Templates
  • About
  • Before & After
  • Blog
  • Contact
  • Website Profitability QUIZ

Center Align Buttons in WordPress 5.0 and Create Anchor Links, Too

June 8, 2020 by Nancy Fields 2 Comments

How To Center Align a Button in WordPress 5.4.1 & Create an Anchor Link Button iPad with image of website with center aligned button
Check out the video tutorial below!

The simple task of centering a button, and creating an anchor link button (a.k.a. jump link) in WordPress 5.4.1 stopped me in my tracks.

I want to show you how to do these two simple tasks, so you don’t go down the same rabbit hole and waste a lot of time doing a task that should only take a few seconds (center a button) and a few minutes (create a button with an anchor link.)

How to Center a Button in WordPress 5.4.1

Before the latest WordPress update (updated April 29, 2020), the alignment feature was located above the button. see below

graphic of button alignment feature before WordPress 5.4.1
It used to be so easy to align a button in Gutenberg editor

In WordPress 5.4.1 the button is not immediately visible, likely because the button in 5.4.1 has become more ‘sophisticated.’ You can now create multiple buttons, all neatly lined up in one horizontal space, BUT where in heck is alignment feature?

graphic of button alignment feature missing in WordPress 5.4.1
The alignment feature does not appear when you first create a button in WordPress 5.4.1

The problem is, you won’t be able to center a button until you activate the bounding box. For me, the easiest way to do that is to click to the right of button. Once you see the bounding box, the alignment feature will display.

graphic showing button alignment feature if bounding box is activated
Click to the RIGHT of the button to activate the bounding box and alignment feature

How to Create an Anchor Link Button in WordPress 5.4.1

Why Create an Anchor Link?

Anchor links are common at the top of a page when you want to create an Table of Contents. It allows site visitors can quickly access the information they need.

In this example, Elsie Kerns wanted anchor link buttons instead of a traditional table of contents.

website page anchor link button example
Anchor link button
Anchor link button scrolls to this section of the page

To create an anchor link button in the WordPress block editor, first select the area you want you reader to link to, NOT the button you want them to click on.

TIP: Watch the video below to see me create this anchor link button.

  1. Select the text
  2. In the Block setting (on the right), toggle open the Advanced bar
  3. Under HTML Anchor, give your link text a name
    1. I like to keep things simple, so I just name it exactly what the anchor is which is why I named it how to be listed
    2. NOTE: anchor text cannot have any spaces. WordPress will automatically add a dash if hit your space bar in between your words, and it will look similar to this: how-to-be-listed
  4. Once you name your anchor text, I recommend coping it
    1. because the link names have to be exact
  5. Now go to the area you want your visitor to click
    1. in my case it’s the How To Be Listed Button
  6. Select the button text
  7. Select the link feature
  8. In the link field, add a # (pound symbol) and paste in the link text you just created
  9. Save your changes by clicking update
  10. Check your work

Step-By-Step Video

How I Center Aligned a Button in WordPress 5.4.1 and Created Anchor Link Buttons

See how I easily aligned a button, once I knew how to bring up the alignment feature, and also how I created anchor link buttons.

Join Me Live on My Next 10-Minute Monday!

Get an invitation to join me LIVE on my next 10-Minute Monday, and receive a list of my favorite Free resources for great photography that you can use on your website or in any project.

Just fill out the form below.

When you join me live on 10-Minute Monday you’ll be able to ask a question, about the training, or even your own website.

Hope to see you on my next 10-Minute Monday.

Filed Under: 10-Minute Monday, WordPress

Reader Interactions

Comments

  1. Karen says

    December 15, 2020 at 8:11 am

    Thank you for this! I’ve been banging my head against my desk for a few hours. The website is (still/always) a work in progress, but you’ve fixed a major frustration.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Home
  • Contact
  • Facebook
  • LinkedIN

Copyright © 2023 · Infinity Pro on Genesis Framework · WordPress · Log in
This site is not a part of the Meta website or Meta Platforms, Inc. Additionally, This site is not endorsed by Meta in any way. Meta is a trademark of Meta Platforms, Inc.