How to Add a Button Class to a Text Widget

I frequently answer questions on the Artisteer WordPress Forum, and this was a recent question that popped up. Most Artisteer users have specifically styled a nice button, but don’t know how to add it to a widget or any other part of their site for that matter. It’s actually quite simple to do, and once you realize how, a whole lot of other styling possibilities will open up for you. So, here are the simple steps.

Here’s a very simple example of what I’m referring to and will demonstrate what the exact code below looks like.

1.) In your Widgets Panel (found under Appearance of the Dashboard), drag a simple text widget over into the sidebar location you want it.

2.) Add in the text and/or image(s) you’d like included in the widget. (Remember, you can use basic html code like <strong> </strong> for bold, <em> </em> for italics, etc. There are a lot of options.)

3.) Once you are done adding in your text and image or images, place the following code where you want to insert your button.

<p style="text-align: right;"><a class="button" href="#">Click Here</a></p>

4.) You can change the alignment to right, center, or left; replace the # with the url for the web address you want the button to link to; and, of course, change the words “Click Here” to whatever you want to say. Save your widget, and you are done!

Expand your horizons! There are tons of ways to add more styling to your theme posts, pages, or widgets, by simply adding a class to certain elements. Why don’t you try adding your post header class to some of your other headings in a page where you want to break up large pieces of text? Or, you could create a couple of different image classes in your CSS, and call to a specific one for a particular image in your post or page that you want to highlight. How about creating a specialty background for some text in a post or a page? Simply create the styling in your CSS, and then call the class where you want that styling to show up just like in the example above.

So, play around with it, and leave a comment with any questions or other ideas on how to use this tip!

© 2011, All rights reserved.

May 13th, 2011 at 5:42 pm

When I tried this, the link was there, but there was no button…no button wrapper or whatever.
Any ideas?

My code used was: Attendee Registration

No link in there yet because we don’t have one yet ;o)

May 13th, 2011 at 10:03 pm

Make sure that you have the class listed. You may have put that into the comment form, but WP strips out code from these comments, so I’m not 100% sure what the code that you used looks like. In the pasted code above, you have a double set quotation marks around the # which need to go to just one set of quotation marks. I’m not sure if you included the class name in this as well, but you’ll need to include the “button” class inside your code, or it won’t appear.

June 28th, 2011 at 2:23 pm

Me again. Is it possible to define the position of a button (ie relative to the start of the text widget), rather than just inserting text/space to get it into position?

August 19th, 2011 at 7:09 am

It’s really a nice and useful piece of info. I’m glad that you just shared this helpful information with us. Please stay us up to date like this. Thank you for sharing & could you please tell me how to add google+1 button in blog. Thankx in advance, I would really appreciate your answer. Waiting for your reply.

October 18th, 2011 at 1:55 am

Thank you so MUCH !!!! GBU

December 4th, 2011 at 7:46 am

Thanks a lot, i was looking for this solution for my website
and according this is super easy. :)
www stranky

May 31st, 2012 at 12:42 am

I like this, but i really need one for images, so I can make a custom menu using images but i want to have the image to change to another image, a similar one but diff color, so they know what page they are on.. so far everything iv tried has not worked.

May 31st, 2012 at 8:12 am

This post is designed only to show people how to add a button class and does not refer to menu items at all. You just need to look at my post on adding image links in your header with a hover class for what you are trying to do. This post will help.


This blog is kept spam free by WP-SpamFree.