I really don’t like to require my clients to switch into HTML view when editing posts or pages. So when I saw what was required to put buttons on the sliders, I immediately thought that a shortcode that would place buttons more easily would be really nice. So, I wrote one. Now I think that sharing it would also be nice.
Check it out.
First, drop this code into includes/theme-functions.php just before the ?> that ends the PHP statements:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function slider_button_shortcode( $atts, $content=null) { extract( shortcode_atts( array( 'count' => 1, 'url' => '#', 'label' => 'Label', 'delimiter' => 'or' ), $atts ) ); $urls = explode('|',$url); $labels = explode('|',$label); $output = ""; for ($i=0;$i<$count;$i++) { $output .= '<a class="button" href="'.$urls[$i].'"><span>'.$labels[$i].'</span></a>'; if ($i>$count-1) { $output .= ' <span class="middle">'.$delimiter.'</span> '; } } return $output; } add_shortcode('sliderbutton', 'slider_button_shortcode'); |
Now that you’ve done that, on a page used as a slider, instead of the HTML mentioned in the theme documentation, use a shortcode, which you can place whether you’re in visual view or HTML view.
By default, use this:
1 | [sliderbutton] |
That’s not very interesting, though, because the URL is simple “#” and the button’s label is “Label”. It’s good enough, though, if you’re just fleshing out the look of the site.
For a single button, use this:
1 | [sliderbutton url="/try" label="Try Now"] |
That will create a button that will go the page with the slug “try” (that is, like http://www.example.com/try) and the button will have Try Now on it.
For multiple buttons, it gets slightly more complicated, but is still easier than the HTML. Here’s how you put two:
1 |
The shortcode uses the pipe symbol (|) as a delimiter. So the above gets you two buttons. The first goes to /try and is labeled Try It, the second goes to /buy and is labeled Buy Now.
The delimiter specifies that the word “or” will be between the two, correctly formatted and with a space on either side. The word “or” is the default, so I could have left that off, but I included it by way of example. Using delimiter=”and” would put an “and” between the two buttons.
Some limitations: I didn’t put in error checking to make sure your count, URLs, and labels all have the right number. You have to use the same delimiter throughout, so no “this or that and another” constructions. Still, most of the time, you’ll be using only one or two buttons, they’ll use “or”, and an error message would still mean you’d have to edit stuff, so I figured these were acceptable.
I cannot find the theme-functions.php file. I can find many others, can you let me know if this file has been renamed in a later version of the theme / wordpress update?
I have used this function before by copying your code but this time i simply cannot find the .php file anywhere!
If you are using a Woo Theme, you’ll have that file in the includes folder. You can put it anywhere, though, even in the functions.php, despite the comment in file to the contrary.
I had a bug in the code on line 13, a greater than instead of a less than. I’ve updated it to the correct syntax.