Daily Code: Day 2 – Show Me…. Bananas!

Daily Code: Day 2 – Show Me…. Bananas!

Daily Code: Day 2 – Show Me…. Bananas!

Going Bananas for Day 2 of Daily Code!

Simple WordPress Shortcode

Here is a quick one for today. A custom WordPress shortcode to display an inline image. In this case….. BANANAS!

This is something I wanted to have on KingKode for whenever I wanted to use it. Like right here [bananas].

All lines below are added at the very bottom of functions.php.

Callback Function:
function show_me_bananas() {
   $image = "<img class='bananas' src='/images/banana-icon.png'/>";
   return $image;
}

First, we need a function that spits out the image markup. The above sets the img markup as variable $image. Then returns the variable string when fired.

Register Shortcode Function:
function register_new_shortcodes(){
   add_shortcode('bananas', 'show_me_bananas');
}

Then, we need to link the previous function to a shortcode. add_shortcode() registers the show_me_bananas() function to the shortcode [bananas]. Note: you can register many other shortcodes with this function.

Hook into WordPress:
add_action( 'init', 'register_new_shortcodes');

Finally, WordPress needs to know that we have a new shortcode. add_action() gets fired when the page is initializing. register_new_shortcodes() is then added to the initialization process and, thus, your shortcodes have been registered.

Oh, yeah… The CSS:
.bananas {
display: inline-block;
margin: 0px 2px;
}

The CSS can be put at the very bottom of stylesheet.css. display: inline-block tells the image to be treated like a block element while inline with the text. margin: 0px 2px adds spacing on either side of the bananas for kerning purposes.

And now we have bananas! [bananas][bananas][bananas][bananas][bananas][bananas][bananas]



Join the Conversation

Loading Facebook Comments ...

7 thoughts on “Daily Code: Day 2 – Show Me…. Bananas!

  1. Avatarplay8oy test id

    There are a selection of online casino sites available,
    however, some are fake pictures. Are there any hidden conditions that I needs to know
    about before I register with this free movie blog?

  2. Avatar918kiss review

    Plain pastel backgrounds work well and include soft touches like baby feathers
    and tiny beads. If a website is on web since a number of years
    then it gets authority. Kim lives in Southern Indiana with
    her husband Gary, a reverend.

  3. Avatarocean king rig

    Acting as a guest blogger allows writer to create relevant backlinks to incredibly blogs.
    As you can imagine, fairly slow process. My time iis tooo precious down the
    sinnk on fledgling sites.

Leave a Reply

Your email address will not be published. Required fields are marked *

two + 20 =