PHP: Wordpress shortcode with image

Question

I have a problem with a shortcode.

Check this theme out: http://themeforest.net/item/elogix-responsive-business-wordpress-theme/full_screen_preview/1958520

Please navigate to "Shortcodes-> Toggle" and see the example.

I want to use the toogle function, however, i want to be able to use an image beside the title, like a symbol.

However, when i do this within wordpress, the title will not be shown, and the shortcode gets messed up.

The core code looks like this:

function minti_toggle( $atts, $content = null)
    {
     extract(shortcode_atts(array(
            'title' => '',
            ), $atts));
       return '<div class="toggle"><div class="title">'.$title.'<span></span></div><div class="inner"><div>'. do_shortcode($content) . '</div></div></div>';
    } 

add_shortcode('toggle', 'minti_toggle');

I am still new at PHP, so I cannot seem to see, where it limits me to only use letters within the title tag, and not an image file as well.

Best Regards Patrick

Answer 1

Okay, so i figured out the problem, if anyone else needs this:

The problem was, when adding a tag, it would disrupt the title tag, and not display anything.

So i edited the code, so i could input another value, which would then be showed left to the title:

    function minti_toggle($atts, $content = null)
{
 extract(shortcode_atts(array(
        'title' => '',
        'image' => ''
        ), $atts));
   return '<div class="toggle"><div class="title">'.$title.'<span style="float:left;margin-right:5%"><img width="22" height="22" src="'.$image.'" class="alignnone wp-image-157"></span></div><div class="inner"><div>'. do_shortcode($content) . '</div></div></div>';
}

    add_shortcode('toggle', 'minti_toggle');

This code returns the code input for image. So the shortcode would be

If you want to be able to edit the code in a css file instead, just delete the style in the , and make a class for this in the style.css.

Hope this helps someone :)

Answer 2

For Setting background image in title.
Please make change in .css file of plugins.

.title{
   background:url('imageurl');
   background-repeat: no-repeat;
 }