This visual tutorial will walk you through the steps necessary to create a clickable button for your sidebar that will lead readers to a landing page or post for a series. #write28days #selfhostedWP #blogger

Have you ever wondered how people add cool clickable buttons on the sidebar of their blog that lead to another blog page or post on their site? Here’s the skinny on how to add a button that links to a landing page (or post) on your blog if you have a self-hosted WordPress site.

This kind of button comes in handy if you’re participating in a writing challenge like the #Write28Days Blogging Challenge.

Step One

Write and publish your landing page. Make sure you have a square graphic somewhere on your page with dimensions of 1024 X 1024 pixels. You can create one for free on sites such as PickMonkey or Canva.

Step Two

Go to your blog’s Dashboard and scroll down to the “Appearance” button and click it.

Create a button for your landing page

Step Three

Locate the ‘Text’ box, click on it (grab it), and pull it over to the right where your sidebar widget area is located.

Create a button for your landing page

Step Four

Let go (drop) the Text Box in the position you’d like it (I put mine right under my search box). Next, click on the ‘Text’ tab.

Create a button for your landing page

Step Five

Copy and paste this html code into the Text box that you just opened: <center><a href=”YOUR LANDING PAGE URL”><img src=”YOUR BUTTON’S URL GOES HERE” width=””125″” height=””125″” /></a></center>

Step Six

Now copy your landing page (or post) URL.

Create a button for your landing page

Step Seven

Paste the landing page URL into the area of code where it says YOUR LANDING PAGE URL (make sure it has no extra spaces and falls within the quotation marks).

Create a button for your landing page

Step Eight

Now open another window with your blog’s dashboard and go to the Media Library of your blog. Click on your button and you’ll see a URL address for the button. Copy it.

Create a button for your landing page

Step Nine

Paste the button’s URL into the area of code where it says YOUR BUTTON’S URL GOES HERE (make sure it has no extra spaces and falls within the quotation marks).

Create a button for your landing page

Step Ten

You can change the size of your button by changing the numbers here. Just be careful not to mess with any of the other code!

Create a button for your landing page

Step Eleven

Now click on the ‘Visual’ tab to make sure that your button looks perfect. Make sure you save it!

Create a button for your landing page

Step Twelve

Now, check your website and make sure your button looks beautiful!

Using widgets

4 Comments

    1. You’re welcome! I know how much NOT being able to do this stuff frustrated me at one time. Now I create posts like this so I can remember how to do things I don’t do very often ;).

  1. I have a question. I see you use a horizontal picture which I do too. However, when I go to pin yours it is the desired size of Pinterest. How do you do that? Maree

    1. So, I have this plugin (I paid for it, but it was very reasonable) called ‘tasty pins.’ There’s a link to it in my sidebar (black and pink). It allows me to choose what Pinterest pulls for pins. That way, when I have a whole bunch of not really pinnable graphics (like I do in this post), I can create a nice graphic and require that Pinterest pulls it first.

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Anita Ojeda

Anita Ojeda juggles writing with teaching high school English and history. When she's not lurking in odd places looking for rare birds, you can find her camping with her kids, adventuring with her husband or mountain biking with her students.

You may also like

Follow Me!