Add Buttons to WordPress Posts
I needed to add buttons to WordPress posts recently. I needed them for a really long post. The post was taking to long to load and by breaking it into several small pages I could get the load time down to an acceptable level. But breaking it into several pages created a problem. The page links were too far away from the bottom of the post. So I thought putting simple buttons at the bottom of each page for linking to the remaining pages would be ideal.
Why I chose this method
So I started looking for a solution. Now there are plenty of plugins that will do this. But I already have a large number of plugins and each one adds overhead to the download. I want to reduce my plugins not add another. The use of HTML in making my own buttons would be the best fit for me. Now I’m not an expert at HTML but I can copy and paste with the best of them. If I can get the code I can figure out what I need to make the buttons my own.
I like to have everything be similar from post to post on my website so the buttons will always be the same color and shape and in the same location. Then all I need to do is save the code to a notepad document for later use when needed. That way I don’t need to remember the code. Edit the button words, and change the link location, and with a copy and paste put them where I need them.
The buttons, in this case, also needed to be responsive and I needed 2 buttons on the same line one button for the next page and another button for going back a page. All editing is done on the text side of the editor, not the visual side editor. I did use the visual side editor to verify that the code was working correctly.
A simple button
Here’s a progressive list of buttons and how the HTML code will change their appearance and locations. To start I found the html code for a simple button. It looks like this:
<button>Page 2</button>
It produces a simple button that looks like this:
Next, I wanted to make the text bold so that it didn’t get lost in the button. By adding the bold code to the button the text popped the bold looked great. Heres how the new code(highlighted) looks:
<button><b>Page 2</b></button>
It produces a button with bold text that looks like this:
Make it fancy
Now I wanted to fancy the button up a bit. I wanted the text to be in blue(the color of text when it is linked on my website). By adding the style code to the button text the bold text turned blue and looked great. Heres how the code looks:
<button style=”color:blue;”><b>Page 2</b></button>
It produces a button with bold blue text that looks like this:
Next, I wanted to fancy up the shape of the button by rounding out the corners. By adding the border-radius to the button style the corners were rounded. If you don’t like my buttons corners you can change the number for border-radius and watch how those corners change. The code now looked like this:
<button style=”color:blue;border-radius:10px;“><b>Page 2</b></button>
The code produces a button that has rounded corners, blue, bold text that looks like this:
Two buttons on the same line
Ok, now I needed to have two buttons on the same line. I didn’t want the buttons stacked. I wanted them separated so aligning one button to the left and the other to the right sounded right to me. So in order to get two buttons on the same line required that I put the button code for each button in a DIV container.
The code looks like this for one button:
It produces a button that is located on the left side of the page that looks like this:
Now I added the second button code. Changing the float parameter from left to right for this second button is needed. I also changed the text code for the second button to Page 3. The code looks like this:
<div><button style=”float: right; color: blue; border-radius: 10px;”>Page 3</b></button></div>
It produces two buttons that are seperated to each side of the post. They look like this:
Let’s get them linked
Next I wanted to make sure the buttons are linked. The code looks like this:
The buttons now look good and are linked. Here’s the finished buttons and how they look with the links added:
So this is my finished buttons that I can copy and paste into any document that I split. They are not fancy. They are functional which is what I wanted. I put the finished button code into a notepad file. When I need buttons all I need to do is change the text of the button and the link address. A quick copy and paste and I’m done. I hope that this has helped you add buttons to WordPress posts.
Related Articles: WordPress Articles
