An Easier Way to Place Buttons in the Coffee Break Slider

24. Jun, 2010 3 Comments

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
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
[sliderbutton count="2" url="/try|/buy" label="Try It|Buy Now" delimiter="or"]

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.

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
Blog, Woo Themes

3 Responses to “An Easier Way to Place Buttons in the Coffee Break Slider”

  1. Diego 21. Jul, 2010 at 4:25 pm

    Excellent addition! I’m having trouble simple getting my slider to work period. I’ve added the page IDs in the slider settings but nothing shows on the homepage; only the next/previous arrows, but no content. Any ideas?

  2. Heatherstone 24. Jul, 2010 at 12:56 pm

    Usually, this is because you’re not getting the actual IDs. I have a client that was just saying that same thing because she was putting in the page order rather than the page ID. Without a link to the actual site (or more likely, access to the WordPress dashboard to examine settings,) it’s hard to say.

  3. Diego 25. Jul, 2010 at 7:05 pm

    Hmm I have 3 pages, and I’ve put this array in the page ID text box “1,2,3,4,5,6,7,8,9,10″ just to see what pages show.. and nothing shows but the previous/next arrows; no content shows up. There aren’t any other settings besides entering the page ID… ideas?