How to Give Extra Styling or Add a Button to a Text Widget

How to Add a Button Class to a Text Widget

Published January 14, 2011 | By Sarah

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!

6 Responses to How to Add a Button Class to a Text Widget

Lauren Devine says:

May 13, 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)

Reply
- admin says:
  
  May 13, 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.
  
  Reply
David says:

June 28, 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?

Reply
FreeBloggerTutorial says:

August 19, 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 wordpress.com blog. Thankx in advance, I would really appreciate your answer. Waiting for your reply.

Reply
Yungky says:

October 18, 2011 at 1:55 am

Thank you so MUCH !!!! GBU

Reply
Juraj says:

December 4, 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

Reply