How To Add a Button to Wordpress.com

I recently decided I was looking to add some buttons to my homepage. This allowing another menu option without having to scroll back to the top.

While I know some basic HTML I would say that my skills stop somewhere between blockquote tags and link tags. I can pound out a snazzy looking blockquote in my sleep, but links can occasionally drive me insane trying to figure out where I went wrong.

Last Thursday night, I asked a simple question which ended up leading to an impromptu call with Chuck Grimmett; who helped me work through it. We discovered that WordPress.com doesn’t accept the classic center tag, or the classic button tag.

However – WordPress.com does support creating buttons, as long as you do it in their preferred HTML. Depending on where you want your button located and how you want it to look, you may be able to get away with a fairly simple tag.

To create a simple button, you just need a link tag further designated with a class.

Screen Shot 2018-02-26 at 10.00.34 PM

Just make sure to place the text you are trying to make a link in-between the start of your tag and your closing tag. With this code, you create a button that looks like this.

Screen Shot 2018-02-26 at 9.47.59 PM

Pro Tip: When creating a link tag there is a much easier way! I just learned the difference between Absolute Links and Relative Links. If you are linking to content within your site, you can simplify your code by using a relative link.

Example:

Screen Shot 2018-02-26 at 10.04.46 PM

Basic button talk aside, if you are looking to change the position of the button, left, center, or right aligned, you need to put the entire section of code in a style element. One style element is paragraph tags. You will, however, need to have to add a style rule. Like this,

Screen Shot 2018-02-26 at 10.10.03 PM

Don’t forget to put your closing tags at the very end of everything you are applying this style too.

Screen Shot 2018-02-26 at 9.49.14 PM

Lastly, if you are looking to remove the line from your linked text the last step is to add one last attribute to your code. Within the link tag we created earlier we need to declare what we want to see. In this case, I only wanted to see the letters, no underlines. I added a style attribute after the class in my tag this time telling HTML exactly what I wanted to see. Nothing.

Screen Shot 2018-02-26 at 10.12.19 PM

Screen Shot 2018-02-26 at 9.49.41 PM

My finsihed code looked something like this.

Screen Shot 2018-02-26 at 10.15.35 PM

Overall, it was a lot easier than I thought it would have been, it just took a little trial and error!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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