Content block shortcode plugin for WordPress 3.9.x theme

4 Views

I am developing custom shortcode wordpress 3.9.x plugin but code doesn’t work properly. Code should change based on the parameter like media=”image” or media=”video” and css class should add based on parameter position=”left” or position=”right”.

If image, value for path will be image url.
If, video, value for path will be youtube embed code url.

Read More

Any help?

Shortcodes is as below: 

[contentblock class="gray" position="left" media="video" path="....youtube video link...."]Video[/contentblock]
[contentblock class="gray" position="left" media="image" path="....image url...." alt="alter text" ]Image[/contentblock]

Code is as below: 

function contentposFun( $atts, $content = null ) {
    extract( shortcode_atts( array(
        "class" => '',
        "path" => '',
        "alt" => '',
                "contentPos" => '', //Left, Right
                "contentLeft" => '',
                "mediaRight" => '',
                "mediaType" => '', // Image, Video
                "isImage" => '',
                "isVideo" => '',
                "imgCenter" => '',
    ), $atts, 'contentblock' ) );

        if($contentPos == "left"){
        $mediaRight = " col-md-push-7 ";
                $contentLeft = " col-md-upll-5 ";
    }
    else { 
        $mediaRight = " ";
                $contentLeft = " ";
    }

    if($mediaType == "image"){
                $imgCenter = ' img_center';
                $mediaType .= ' <img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' />';
    }
    else {
        $mediaType .= ' <div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div>';
    }

        return '<div class="container-fluid '.$class.'">
            <div class="row">
            <div class="container full_height">
            <div class="row full_height relative">
            <div class="col-md-5' .$imgCenter. '' .$mediaRight.'">' .$mediaType. '</div>
            <div class="col-md-7'.$contentLeft.'full_height absolute ">
            <div class="table full_height">
            <div class="table-row full_height">
            <div class="table-cell full_height valign_middle">'
            .do_shortcode($content).
            '</div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>';            
}
add_shortcode( 'contentblock', 'contentposFun' );
Post Views: 4

Related posts

Leave a Reply

2 comments

  1. The Shortcode attributes that you used in the actual shortcode and the ones that you have used in the function are different. Those attribute names should be same in order to work.

    Following is the sample code : 

    // Add Shortcode
function video_embed_shortcode( $atts, $content = "" ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'src' => '',
            'width' => '',
            'height' => '',
        ), $atts )
    );

    // Code
return '<embed 
        src="' . $src . '"
        width="' . $width . '"
        height="' . $height . '"
        type="application/x-shockwave-flash"
        allowscriptaccess="always"
        allowfullscreen="true">' . $content;

}
add_shortcode( 'video_embed', 'video_embed_shortcode' );

    Shortcode for the above will be like :

    [video_embed src="" width="" height=""]content[/video_embed]

  2. I am done with my code and it works well. This code can generate 4 types of shortcodes.

    Shortcode:

    [conblock class="gray" pos="left" media="image" path="img1.png" alt="image text"] Content[/conblock]
[conblock class="white" pos="right" media="image" path="img1.png" alt="image text"] Content[/conblock]
[conblock class="gray" pos="left" media="video" path="//www.youtube.com/embed/A2ojlR2Rxiw"] Content[/conblock]
[conblock class="white" pos="right" media="video" path="//www.youtube.com/embed/A2ojlR2Rxiw"] Content[/conblock]

    Plugin code:

    function conblockFun( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => '', //white, gray
        'pos' => '', //left, right
        'media' => '', //image, video
        'left' => '', // true, false
        'right' => '', //true, false
        'path' => '', // image path or video path          
        'alt' => '', // if image add alt text
    ), $atts, 'conblock' ) );

    $output = '<div class="container-fluid '.$class.'">
                <div class="row">
                <div class="container full_height">
                <div class="row full_height relative">';
    if($pos == 'left' && $media == 'image') { $output .= '<div class="col-md-5 col-md-push-7 img_center"><img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' /></div><div class="col-md-7 col-md-pull-5 full_height absolute">';}
    if($pos == 'left' && $media == 'video') { $output .= '<div class="col-md-5 col-md-push-7"><div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div></div><div class="col-md-7 col-md-pull-5 full_height absolute">';}     
    if($pos == 'right' && $media == 'image') { $output .= '<div class="col-md-5 img_center"><img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' /></div><div class="col-md-7 col-md-push-5 full_height absolute">';}
    if($pos == 'right' && $media == 'video') { $output .= '<div class="col-md-5"><div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div></div><div class="col-md-7 col-md-push-5 full_height absolute">';} 
    $output .= '<div class="table full_height">
                <div class="table-row full_height">
                <div class="table-cell full_height valign_middle">'
                .do_shortcode($content).
                '</div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>';
    return $output;
}

add_shortcode("conblock", "conblockFun");