Easy Shortcode Buttons Plugin *Updated*

Ever wanted to add great looking download links on your site? Need to add call to action buttons but don’t want to code? Easy Buttons is the answer. It is the easiest way to add beautiful buttons to your WordPress site. With 6 colors, 3 styles and 2 sizes you can have the perfect look for your site.

Each button is created with only CSS3 making them light weight & easily customized. With a few lines of code in the plugins admin section you can add your own custom buttons.

Get it Here

Configuration

After the plugin you will see a new option in the visual editor highlighted bellow:

When you press the button you will have the following default code added to your page:

[button link="#" color="default" shape="rounded" size="small" align="left"]Replace This Text[/button]

Customizing with the built in options is easy. Just change the text inside the ” ” to one of the options bellow. Then update the text that says ‘Replace This text’ with what you want your button to say and your done. If you want the button to be on its own line remove ‘align=”left”‘ from the button code.

List of Options

  • link: “URL” (must contain ‘http://’ if external link)
  • target: “_blank | _self | _parent | _top” (link to descriptions)
  • color: “default | red | blue | yellow | green | white”
  • shape: “circle | rounded | square”
  • size: “small | large”
  • align: “left | right”

Define Custom Button

If you need a different look you can create your own custom button in a few steps.

1. You need to define the look of your button using CSS, I would recommend using CSS3 Button Generator to create your styles because it allows you to visually pick gradients, background, size etc.

2. After you are finished copy the code that is in the css code box and copy it into the custom css textarea located in Settings => Easy Buttons Custom. The code will look like this:

button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #123d54;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#afd9fa 0%,
		#588fad);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#afd9fa),
		to(#588fad));
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border: 1px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}

3. Change

button.css3button

to

.bk-button-wrapper .customName

where ‘customName’ is what you want the new option to be called. If you want this new button to override all options then you are done, if you still want to use the size, alignment and style options you need to remove the following code from your custom block:

font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 10px 20px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow:
   0px 1px 3px rgba(000,000,000,0.5),
   inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
   0px 1px 3px rgba(000,000,000,0.5),
   inset 0px 0px 1px rgba(255,255,255,1);

leaving only the changes to background, text color and border.

4. After saving the changes you can insert a button the using the same Visual Editor button and replace the “default” color with your “customName” and you now have a unique button on your site.

[button link="#" color="customName" shape="rounded" size="small" align="left"]Replace This Text[/button]

Button Examples

These are examples of all the built in buttons. The button names are the options used to create each one.

default | large default
blue | rounded | large blue | rounded | small
green | square | large green | square | small
red | circle | large red | circle | small
yellow | circle | large yellow | circle | small
white | circle | large
white | circle | small

New Support Forum

To assist in giving support for my plugins and open source projects I have set up a new forum. Please use the link bellow to the easy shortcode buttons plugin forum. I will be transferring all the support questions in the comments to the forums in the next few weeks. Hopefully this will make it faster and easier to get support.
Support

Source code now on github

The source code is on github. If you want to contribute just submit a pull request when you have something ready and I will take a look.
source code

52 Comments on "Easy Shortcode Buttons Plugin *Updated*"

  1. Bruce Mackay says:

    This will get me closer to having the skills to make a perfect review template using a Socrates template to start with.
    I just to find the right photo slider like the one used here http://www.cordlesscombokits.info/
    I like this one best except I have not been able to get it to show all the posts only three.
    If I can get the slider cheap or free I could make the site I want on My Socrates templates.
    Then world domination LOL!!

  2. Lauren says:

    Excellent plugin. Very easy to install, I found an easier way (a) download zip file (b) at WP site, use “install plugins” and “upload zip file” option. Terrific solution to what could have been a huge time drain. We’re hiring interns in San Francisco area for public relations, public policy, communications and your plugin spruced up our page right away. More work to do, but your plugin is a big help.

  3. Patricia says:

    I’m using WP 3.3.1, and a modified Atahualpa theme. This plugin prevents the visual editor from loading… thought you might want to know..

    TIA

  4. George says:

    Hello,

    This plugin looks pretty nice and easy to use. I am trying to set up some simple navigation and noticed that each click of the button opens up a new page (window) in the browser (I’m using Firefox). Is there an option that I can add so that the new page shows up in the same window, without opening up a new one?

    Thank you,
    George

    • George says:

      I edited the code to force the same window. This part works now. However, I noticed that the buttons created have no fill color when displayed in Internet Explorer. The only thing you see are the borders and the text in the middle. Please have a look.

      Thanks,
      George

      • Alex Thorpe says:

        It looks like there is no default background color for IE 8 and bellow since it does not support background gradients. I am working on an update that will fully support IE and hope to get it out soon. In the mean time if you want to add a background color for default just update the style sheet in the plug in folder.

    • Alex Thorpe says:

      Currently not without editing the plugin files directly, I will add this feature in the next release.

  5. nicolas says:

    thanks for this plugin and for your work.

    Small issues :
    * how to clic in a self window ?
    * [button] shortcode is having a conflict with other plugin.

    Thanks

  6. Is there a way to make it target the same window as opposed to opening the link in a new window?

  7. diamond says:

    Can the code be added in a widget?

  8. Gretchen says:

    Thanks for the nice simple plugin!
    I have a couple of suggestions –
    1. Echoing Stan’s request for a checkbox to disable RSS
    ( in the meantime you can hide it using CSS: a.rss-icon{display:none; visibility:hidden} )

    2. In fiddling with the positioning of the widget I noticed the the easy social style sheet loads before my thems style sheet, making some things difficult to override without hacking the plugin stylesheet itself, which I’d rather not do. For example, I want the buttons a little smaller than 32px to fit into an existing design. Is is possible to load the plugin style sheet last?

    Aside for these minor things it is exactly what I was looking for – thanks again!

    • Gretchen says:

      opps – the above comment was for the Easy Social plugin

    • Alex Thorpe says:

      I will definitely add the RSS checkbox in the next update, and with CSS isn’t it easier to have the plugin stylesheet load first? That way any changes you make to your stylesheet will over ride mine.

  9. Waqqas Alvi says:

    Hi,
    First, thanks for a great simple plugin.
    2nd – Like a few other people here, i also wanted to open the URL in same window & it’s good to know that you plan to give this option in the coming release of the plugin.
    I took the liberty of editing the code a bit and i’m sharing it here for those who want to do it before plugin’s next version.
    It’s very simple; Open up easy-button.php in the ‘plugin editor’ and find ‘_blank’. it’s being used only once in the code so finding it should not be difficult.
    Replace it with ‘_self’. and you’re done. URL’s will now open in the same window.

  10. ben says:

    i like this – the only problem i’m having is that when i attempt to change it from “rounded” to “circle” … nothing seems to change – any pointers would be appreciated.
    cheers.

    • Alex Thorpe says:

      Do have a link to your site so I can see? It might be something in your theme’s CSS that is over riding the styles in my plugin.

  11. Yael says:

    thanks for great plugin!

  12. jason says:

    a couple of suggestions.

    1: provide a direct link to this post in the plugin so we don’t have to search around so much to find info.
    2. support align center.

  13. Yael says:

    silly question, I know but how do you link to internal page? When I enter the full url it just goes to the home page. You mention on links: link: “URL” (must contain ‘http://’ if external link) so what do you include for internal links?

    An easy one I know but nothing I’ve tried is working.

    Thanks, Yael

  14. Jessica says:

    Is there a simple call for PHP so I can insert the button into lets say the header of my blog? Thanks

  15. Hannah Byrne says:

    Hi – great plug in, just a quick question – can these buttons be used as submit buttons?

  16. ted says:

    Alex,

    great stuff. Question: Is it possible for a cutom button to have a distinct look after it is clicked, like a link that changes color. I thought that is what an active button would do but i must be entering the code the wrong way. Any help would be awesome. Thanks.

    • ted says:

      and now when i add css to plugin this keeps appearing and getting longer and longer. don;t understand why.

      \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    • Alex Thorpe says:

      Yes, you just have to add The custom CSS in the settings page

  17. Laure says:

    Hi Alex,
    Thanks so much for creating this plugin! I’m having the following problem: there is already a shortcode [button] in my theme. So to avoid the conflict, how do I update your plugin to have your shortcode like [button2] ?
    Thanks a lot!

    • Laure says:

      Well I asked too fast, i figured something out.
      I changed the following:
      In easy-buttons.php I updated button to button2 in”add_shortcode(‘button2′,…”
      and on my page I updated the shortcode with button2 instead of button!
      Needs some update on the look but I got what I wanted! Thanks a lot!

  18. Mattie says:

    Alex Thorpe,

    Your easy shortcode buttons plugin seems really awesome, but does not seem compatible with my version of WordPress (3.4.2). Will you be updating this plugin soon? I can get the buttons to appear, but they don’t go to the specified page. Your plugin is exactly what I’m looking for so I hope it works out!

    Mattie

  19. Ken Campbell says:

    Hi, I need some help.
    I am building my web site but I need buttons for media players to go on my “Tune In” page
    so that the listeners can chose the player they use.
    Hope you can help with the html code.
    Thank you for looking.
    Ken C

Trackbacks for this post

  1. Daily Tip: Add Call to Action Buttons to WordPress Posts with a...
  2. Daily Tip: Add Call to Action Buttons to WordPress Posts with a Shortcode | SNS Online
  3. wp-coder.net » Daily Tip: Add Call to Action Buttons to WordPress Posts with a Shortcode
  4. A Free wordpress newsletter » Daily Tip: Add Call to Action Buttons to WordPress Posts with a Shortcode
  5. SEO Enterprise-Daily Tip: Add Call to Action Buttons to WordPress Posts with a Shortcode

Got something to say? Go for it!

 
Read previous post:
Mobile Device Policy & Development in Enterprise

As mobile devices become more powerful and ubiquitous in the workplace companies need to begin supporting and developing for these...

Close