CODEWITHSUNDEEP
wordpresswordpress-shortcode
Daniel Finch
Daniel Finch

Reputation: 25

Creating a shortcode

I'm trying to create a gird which is 1:1 which I have done but there must be a tidier way. I will be editing this text and image everyday so need it to be tidy and easy to determine what is what... here is what I have done so far, which is far from ideal...

I'd like to do it via short-code but I'm not sure how to approach it. Perhaps someone here can help me out?

 // Add Shortcode
function AdvisoryFunc( $atts ) {

    // Attributes
    $atts = shortcode_atts(
        array(
            'text' => 'text',
            'image' => 'IMG',
        ),
        $atts,
        'AdvisoryTag'
    );

}
add_shortcode( 'AdvisoryTag', 'AdvisoryFunc' );

Upvotes: 0

Views: 95

Answers (2)

Xhynk
Xhynk

Reputation: 13840

A simpler bet would be to use a simpler grid by sticking some CSS like so in your Appearance > Customize > Additional CSS section:

@media (min-width: 768px){
    .grid { width: 100%; display: table; table-layout: fixed; }
    .grid > * { display: table-cell; }
}

This would let you do the following on your page

<div class="grid">
    <div>Text</div>
    <img src="/path/to/img" />
</div>

Alternatively, you may consider using a Custom Post Type, either with the CPT API or a plugin like the widely used CTP UI plugin. From there you could make a Post Type Template or a Page Template that pulls in the Content and Featured Image from the most recent post. Honestly, this is probably what I would do in your shoes, as it would allow an easier avenue for updating/managing the Statuses as well as provided a record of previous statuses, at the cost of having a bit more "set up" time.

Lastly, if you do just want to use a shortcode, you can use something like the following:

add_shortcode( 'advisory_tag', function( $atts ){
    extract( shortcode_atts( array(
        'text'  => 'Placeholder Text',
        'image' => '/placeholder/image.jpg'
    ), $atts ) );

    ob_start(); ?>

    <div class="section group">
        <div class="col span_1_of_2"><?= $text; ?></div>
        <div class="col span_1_of_2">
            <a href="<?= $image; ?>" target="_blank" title="Click to Enlarge" rel="noopener" style="outline: none;">
                <img src="<?= $image; ?>" alt="Advisory Image for <?= date( 'l, F jS, Y' ); ?>" />
            </a>
        </div>
    </div>

    <?php $ob = ob_get_contents();
    ob_end_clean();

    return $ob;
});

Then all you have to do use put [advisory_tag text="Some Text Here" image="link/to/image.jpg"] in the post, and update that as you wish

Upvotes: 1

disinfor
disinfor

Reputation: 11533

You could do something like this:

function AdvisoryFunc( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'image' => '',
    ), $atts );

    return '
        <div class="section-group">
            <div class="col-1">' . $content . '</div>'
            <div class="col-2"><img src="' . $a['image'] . '"></div>
        </div><!-- /section-group -->';
}

add_shortcode( 'AdvisoryTag', 'AdvisoryFunc' );

Then you would use it like this:

[AdvisoryTag image="http://www.examplesite.com/wp-content/uploads/2018/07/image.jpg"]Your html content goes here[/AdvisoryTag]

You will have to adjust the HTML within the return statement to match your HTML structure (classes and image attributes), but this should get you pretty close to getting it complete.

Upvotes: 0

Related Questions